From 71d7c300328cb282bac3b910493f2a0aa59e39ba Mon Sep 17 00:00:00 2001
From: Isaac Grynsztein <IsaacMGrynsztein@gmail.com>
Date: Fri, 28 Feb 2020 20:09:59 -0500
Subject: [PATCH] updated backend to support youtube auth

frontend now support youtube auth as well
---
 backend/app.js                   | 12 +++++++++++
 src/app/main/main.component.css  |  2 --
 src/app/main/main.component.html | 21 ++++++++++++++-----
 src/app/main/main.component.ts   | 36 +++++++++++++++++++++++++-------
 src/app/posts.services.ts        | 12 +++++++----
 5 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/backend/app.js b/backend/app.js
index 126289f..b4f60fd 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -515,6 +515,8 @@ app.post('/tomp3', function(req, res) {
     var maxBitrate = req.body.maxBitrate;
     var customArgs = req.body.customArgs;
     var customOutput = req.body.customOutput;
+    var youtubeUsername = req.body.youtubeUsername;
+    var youtubePassword = req.body.youtubePassword;
 
 
     let downloadConfig = null;
@@ -535,6 +537,10 @@ app.post('/tomp3', function(req, res) {
             if (!maxBitrate || maxBitrate === '') maxBitrate = '0'; 
             qualityPath = `--audio-quality ${maxBitrate}`
         }
+
+        if (youtubeUsername && youtubePassword) {
+            downloadConfig.push('--username', youtubeUsername, '--password', youtubePassword);
+        }
     
         if (qualityPath !== '') {
             downloadConfig.splice(2, 0, qualityPath);
@@ -598,6 +604,8 @@ app.post('/tomp4', function(req, res) {
 
     var selectedHeight = req.body.selectedHeight;
     var customQualityConfiguration = req.body.customQualityConfiguration;
+    var youtubeUsername = req.body.youtubeUsername;
+    var youtubePassword = req.body.youtubePassword;
 
     let downloadConfig = null;
     let qualityPath = 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4';
@@ -616,6 +624,10 @@ app.post('/tomp4', function(req, res) {
         } else if (selectedHeight && selectedHeight !== '') {
             qualityPath = `bestvideo[height=${selectedHeight}]+bestaudio/best[height=${selectedHeight}]`;
         }
+
+        if (youtubeUsername && youtubePassword) {
+            downloadConfig.push('--username', youtubeUsername, '--password', youtubePassword);
+        }
     
         if (!useDefaultDownloadingAgent && customDownloadingAgent === 'aria2c') {
             downloadConfig.splice(0, 0, '--external-downloader', 'aria2c');
diff --git a/src/app/main/main.component.css b/src/app/main/main.component.css
index ec662a7..890d4a3 100644
--- a/src/app/main/main.component.css
+++ b/src/app/main/main.component.css
@@ -119,6 +119,4 @@ mat-form-field.mat-form-field {
 
 .advanced-input {
     width: 100%;
-    margin-top: 20px;
-    margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 68f7ae2..0cfc9c3 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -61,7 +61,7 @@
         </mat-card-actions>
     </mat-card>
 </div>
-<div *ngIf="false && allowAdvancedDownload" class="big demo-basic">
+<div *ngIf="allowAdvancedDownload" class="big demo-basic">
     <form style="margin-left: 20px; margin-right: 20px;">
         <mat-expansion-panel class="big">
             <mat-expansion-panel-header>
@@ -71,20 +71,31 @@
             </mat-expansion-panel-header>
             <div class="container" style="padding-bottom: 20px;">
                 <div class="row">
-                    <div class="col">
+                    <div class="col-12 col-sm-6">
                         <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
-                        <mat-form-field color="accent" class="advanced-input">
+                        <mat-form-field color="accent" style="margin-bottom: 30px;" class="advanced-input">
                             <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
                             <mat-hint>No need to include URL, just everything after.</mat-hint>
                         </mat-form-field>
                     </div>
-                    <div class="col">
+                    <div class="col-12 col-sm-6">
                         <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
-                        <mat-form-field color="accent" class="advanced-input">
+                        <mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
                             <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output">
                             <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">This link</a> will be helpful. Path is relative to the config download path.</mat-hint>
                         </mat-form-field>
                     </div>
+                    <div class="col-12 col-sm-6 mt-2">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12 col-sm-6 mt-2">
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password">
+                        </mat-form-field>
+                    </div>
                 </div>
             </div>
         </mat-expansion-panel>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 64fa517..4793ba5 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -51,6 +51,9 @@ export class MainComponent implements OnInit {
   customArgs = null;
   customOutputEnabled = false;
   customOutput = null;
+  youtubeAuthEnabled = false;
+  youtubeUsername = null;
+  youtubePassword = null;
   urlError = false;
   path = '';
   url = '';
@@ -239,6 +242,10 @@ export class MainComponent implements OnInit {
         if (localStorage.getItem('customOutputEnabled') !== null) {
           this.customOutputEnabled = localStorage.getItem('customOutputEnabled') === 'true';
         }
+
+        if (localStorage.getItem('youtubeAuthEnabled') !== null) {
+          this.youtubeAuthEnabled = localStorage.getItem('youtubeAuthEnabled') === 'true';
+        }
       }
 
     }, error => {
@@ -473,6 +480,12 @@ export class MainComponent implements OnInit {
       this.urlError = false;
       this.path = '';
 
+      // get common args
+      const customArgs = (this.customArgsEnabled ? this.customArgs : null);
+      const customOutput = (this.customOutputEnabled ? this.customOutput : null);
+      const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
+      const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
+
       if (this.audioOnly) {
         // create download object
         const new_download: Download = {
@@ -496,11 +509,8 @@ export class MainComponent implements OnInit {
           }
         }
 
-        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
-        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
-
         this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -538,11 +548,8 @@ export class MainComponent implements OnInit {
           }
         }
 
-        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
-        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
-
         this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -773,6 +780,10 @@ export class MainComponent implements OnInit {
     localStorage.setItem('customArgsEnabled', new_val.checked.toString());
     if (new_val.checked === true && this.customOutputEnabled) {
       this.customOutputEnabled = false;
+      localStorage.setItem('customOutputEnabled', 'false');
+
+      this.youtubeAuthEnabled = false;
+      localStorage.setItem('youtubeAuthEnabled', 'false');
     }
   }
 
@@ -780,6 +791,15 @@ export class MainComponent implements OnInit {
     localStorage.setItem('customOutputEnabled', new_val.checked.toString());
     if (new_val.checked === true && this.customArgsEnabled) {
       this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
+    }
+  }
+
+  youtubeAuthEnabledChanged(new_val) {
+    localStorage.setItem('youtubeAuthEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customArgsEnabled) {
+      this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
     }
   }
 
diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts
index 113e5ea..828576a 100644
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -44,21 +44,25 @@ export class PostsService {
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
+    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp3', {url: url,
                                                     maxBitrate: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
-                                                    customOutput: customOutput});
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
+    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp4', {url: url,
                                                     selectedHeight: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
-                                                    customOutput: customOutput});
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
     getFileStatusMp3(name: string) {