Added new API key and using API key config items to enable a public API

API key config items are implemented UI-side

Added ability to generate API keys through the settings

Switched getmp3s and getmp4s api calls to be GET requests rather than POST

Removed unused code from settings dialog

backend/app.js

@@ -1218,7 +1218,10 @@ const deleteFolderRecursive = function(folder_to_delete) {
 };
 
 app.use(function(req, res, next) {
-    res.header("Access-Control-Allow-Origin", getOrigin());
+    var client_origin = req.get('origin');
+    if (client_origin === getOrigin() || (req.headers.authorization && config_api.getConfigItem('ytdl_use_api_key') && req.headers.authorization === config_api.getConfigItem('ytdl_api_key'))) {
+        res.header("Access-Control-Allow-Origin", client_origin);
+    }
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
 });
@@ -1584,7 +1587,7 @@ app.post('/api/fileStatusMp4', function(req, res) {
 });
 
 // gets all download mp3s
-app.post('/api/getMp3s', function(req, res) {
+app.get('/api/getMp3s', function(req, res) {
     var mp3s = db.get('files.audio').value(); // getMp3s();
     var playlists = db.get('playlists.audio').value();
 
@@ -1596,7 +1599,7 @@ app.post('/api/getMp3s', function(req, res) {
 });
 
 // gets all download mp4s
-app.post('/api/getMp4s', function(req, res) {
+app.get('/api/getMp4s', function(req, res) {
     var mp4s = db.get('files.video').value(); // getMp4s();
     var playlists = db.get('playlists.video').value();
 
@@ -2061,7 +2064,7 @@ app.post('/api/deleteFile', async (req, res) => {
     } else if (type === 'video') {
         deleteVideoFile(fileName);
     }
-    res.send()
+    res.send({});
 });
 
 app.post('/api/downloadArchive', async (req, res) => {
@@ -2145,6 +2148,16 @@ app.post('/api/checkPin', async (req, res) => {
     });
 });
 
+// API Key API calls
+
+app.post('/api/generateNewAPIKey', function (req, res) {
+    const new_api_key = uuid();
+    config_api.setConfigItem('ytdl_api_key', new_api_key);
+    res.send({new_api_key: new_api_key});
+});
+
+// Streaming API calls
+
 app.get('/api/video/:id', function(req , res){
     var head;
     let optionalParams = url_api.parse(req.url,true).query;

backend/appdata/default.json

@@ -24,6 +24,8 @@
       "settings_pin_required": false
     },
     "API": {
+      "use_API_key": false,
+      "API_key": "",
       "use_youtube_API": false,
       "youtube_API_key": ""
     },

backend/appdata/encrypted.json

@@ -24,6 +24,8 @@
         "settings_pin_required": false
       },
       "API": {
+        "use_API_key": false,
+        "API_key": "",
         "use_youtube_API": false,
         "youtube_API_key": ""
       },

backend/config.js

@@ -163,6 +163,8 @@ DEFAULT_CONFIG = {
         "settings_pin_required": false
       },
       "API": {
+        "use_API_key": false,
+        "API_key": "",
         "use_youtube_API": false,
         "youtube_API_key": ""
       },

backend/consts.js

@@ -68,6 +68,14 @@ let CONFIG_ITEMS = {
     },
 
     // API
+    'ytdl_use_api_key': {
+        'key': 'ytdl_use_api_key',
+        'path': 'YoutubeDLMaterial.API.use_API_key'
+    },
+    'ytdl_api_key': {
+        'key': 'ytdl_api_key',
+        'path': 'YoutubeDLMaterial.API.API_key'
+    },
     'ytdl_use_youtube_api': {
         'key': 'ytdl_use_youtube_api',
         'path': 'YoutubeDLMaterial.API.use_youtube_API'

src/app/posts.services.ts

@@ -111,11 +111,11 @@ export class PostsService {
     }
 
     getMp3s() {
-        return this.http.post(this.path + 'getMp3s', {});
+        return this.http.get(this.path + 'getMp3s', {});
     }
 
     getMp4s() {
-        return this.http.post(this.path + 'getMp4s', {});
+        return this.http.get(this.path + 'getMp4s', {});
     }
 
     getFile(uid, type) {
@@ -154,6 +154,10 @@ export class PostsService {
         return this.http.post(this.path + 'checkPin', {input_pin: unhashed_pin});
     }
 
+    generateNewAPIKey() {
+        return this.http.post(this.path + 'generateNewAPIKey', {});
+    }
+
     enableSharing(uid, type, is_playlist) {
         return this.http.post(this.path + 'enableSharing', {uid: uid, type: type, is_playlist: is_playlist});
     }

src/app/settings/settings.component.html

@@ -106,13 +106,6 @@
             </div>
         </ng-template>
     </mat-tab>
-    <!-- Encryption 
-    <mat-tab label="Encryption" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab>
-    -->
     <!-- Downloader -->
     <mat-tab label="Downloader" i18n-label="Downloader settings label">
         <ng-template matTabContent>
@@ -178,6 +171,25 @@
                     </div>
                 </div>
             </div>
+            <mat-divider></mat-divider> 
+            <div *ngIf="new_config" class="container-fluid">
+                <div class="row">
+                    <div class="col-12 mt-3">
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_API_key']"><ng-container i18n="Enable Public API key setting">Enable Public API</ng-container></mat-checkbox>
+                    </div>
+                    <div class="col-12 mb-3">
+                        <div class="enable-api-key-div">
+                            <mat-form-field color="accent">
+                                <input [disabled]="!new_config['API']['use_API_key']" [(ngModel)]="new_config['API']['API_key']" matInput placeholder="Public API Key" i18n-placeholder="Public API Key setting placeholder" required>
+                                <mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started"><ng-container i18n="View API docs setting hint">View documentation</ng-container></a></mat-hint>
+                            </mat-form-field>
+                        </div>
+                        <div class="api-key-div">
+                            <button matTooltip-i18n matTooltip="This will delete your old API key!" mat-stroked-button (click)="generateAPIKey()"><ng-container i18n="Generate key button">Generate</ng-container></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <mat-divider></mat-divider>
             <div *ngIf="new_config" class="container-fluid">
                 <div class="row">
@@ -218,36 +230,6 @@
             </div>
         </ng-template>
     </mat-tab>
-    <!-- API 
-    <mat-tab label="API" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab>-->
-    <!-- Themes 
-    <mat-tab label="Themes" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab> -->
-    <!-- Subscriptions
-    <mat-tab label="Subscriptions" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab> -->
-    <!-- Extensions 
-    <mat-tab label="Extensions" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab> -->
-    <!-- Version Control
-    <mat-tab label="Versions" i18n-label="Host settings label">
-        <ng-template matTabContent>
-            
-        </ng-template>
-    </mat-tab> -->
     <!-- Advanced -->
     <mat-tab label="Advanced" i18n-label="Host settings label">
         <ng-template matTabContent>

src/app/settings/settings.component.scss

@@ -11,3 +11,13 @@
     margin-left: 10px;
     top: 20px;
 }
+
+.enable-api-key-div {
+    display: inline-block;
+    margin-bottom: 8px;
+    margin-right: 15px;
+}
+
+.api-key-div {
+    display: inline-block;
+}

src/app/settings/settings.component.ts

@@ -86,6 +86,15 @@ export class SettingsComponent implements OnInit {
     });
   }
 
+  generateAPIKey() {
+    this.postsService.generateNewAPIKey().subscribe(res => {
+      if (res['new_api_key']) {
+        this.initial_config.API.API_key = res['new_api_key'];
+        this.new_config.API.API_key = res['new_api_key'];
+      }
+    });
+  }
+
   localeSelectChanged(new_val) {
     localStorage.setItem('locale', new_val);
     this.openSnackBar('Language successfully changed! Reload to update the page.')