Settings is now a route instead of a dialog

src/app/app-routing.module.ts

@@ -7,12 +7,14 @@ import { SubscriptionComponent } from './subscription/subscription/subscription.
 import { PostsService } from './posts.services';
 import { LoginComponent } from './components/login/login.component';
 import { DownloadsComponent } from './components/downloads/downloads.component';
+import { SettingsComponent } from './settings/settings.component';
 
 const routes: Routes = [
   { path: 'home', component: MainComponent, canActivate: [PostsService] },
   { path: 'player', component: PlayerComponent, canActivate: [PostsService]},
   { path: 'subscriptions', component: SubscriptionsComponent, canActivate: [PostsService] },
   { path: 'subscription', component: SubscriptionComponent, canActivate: [PostsService] },
+  { path: 'settings', component: SettingsComponent, canActivate: [PostsService] },
   { path: 'login', component: LoginComponent },
   { path: 'downloads', component: DownloadsComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' }

src/app/app.component.html

@@ -23,10 +23,10 @@
                           <span i18n="Dark mode toggle label">Dark</span>
                           <mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
                         </button>
-                        <button *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('settings')))" (click)="openSettingsDialog()" mat-menu-item>
+                        <!-- <button *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('settings')))" (click)="openSettingsDialog()" mat-menu-item>
                           <mat-icon>settings</mat-icon>
                           <span i18n="Settings menu label">Settings</span>
-                        </button>
+                        </button> -->
                         <button (click)="openAboutDialog()" mat-menu-item>
                             <mat-icon>info</mat-icon>
                             <span i18n="About menu label">About</span>
@@ -42,9 +42,10 @@
                 <mat-nav-list>
                     <a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
                     <a *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode && !postsService.isLoggedIn" mat-list-item (click)="sidenav.close()" routerLink='/login'><ng-container i18n="Navigation menu Login Page title">Login</ng-container></a>
-                    <a *ngIf="postsService.config && allowSubscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
-                    <a *ngIf="postsService.config && enableDownloadsManager && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('downloads_manager')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
-                    <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))">
+                    <a *ngIf="postsService.config && allowSubscriptions && postsService.hasPermission('subscriptions')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a *ngIf="postsService.config && enableDownloadsManager && postsService.hasPermission('downloads_manager')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
+                    <a *ngIf="postsService.config && postsService.hasPermission('settings')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/settings'><ng-container i18n="Settings menu label">Settings</ng-container></a>
+                    <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && postsService.hasPermission('subscriptions')">
                         <mat-divider></mat-divider>
                         <a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar>{{subscription.name}}</a>
                     </ng-container>

src/app/components/logs-viewer/logs-viewer.component.html

@@ -1,4 +1,4 @@
-<div style="height: 275px;">
+<div style="height: 100%;">
     <div *ngIf="logs_loading" style="z-index: 999; position: absolute; top: 40%; left: 50%">
         <mat-spinner [diameter]="32"></mat-spinner>
     </div>

src/app/main/main.component.ts

@@ -230,7 +230,7 @@ export class MainComponent implements OnInit {
   async loadConfig() {
     // loading config
     this.fileManagerEnabled = this.postsService.config['Extra']['file_manager_enabled']
-                              && (!this.postsService.isLoggedIn || this.postsService.permissions.includes('filemanager'));
+                              && this.postsService.hasPermission('filemanager');
     this.downloadOnlyMode = this.postsService.config['Extra']['download_only_mode'];
     this.allowMultiDownloadMode = this.postsService.config['Extra']['allow_multi_download_mode'];
     this.audioFolderPath = this.postsService.config['Downloader']['path-audio'];
@@ -242,7 +242,7 @@ export class MainComponent implements OnInit {
     this.youtubeAPIKey = this.youtubeSearchEnabled ? this.postsService.config['API']['youtube_API_key'] : null;
     this.allowQualitySelect = this.postsService.config['Extra']['allow_quality_select'];
     this.allowAdvancedDownload = this.postsService.config['Advanced']['allow_advanced_download']
-                                  && (!this.postsService.isLoggedIn || this.postsService.permissions.includes('advanced_download'));
+                                  && this.postsService.hasPermission('advanced_download');
     this.useDefaultDownloadingAgent = this.postsService.config['Advanced']['use_default_downloading_agent'];
     this.customDownloadingAgent = this.postsService.config['Advanced']['custom_downloading_agent'];
 

src/app/posts.services.ts

@@ -498,6 +498,12 @@ export class PostsService implements CanActivate {
         this.resetHttpParams();
     }
 
+    hasPermission(permission) {
+        // assume not logged in users never have permission
+        if (this.config.Advanced.multi_user_mode && !this.isLoggedIn) return false;
+        return this.config.Advanced.multi_user_mode ? this.permissions.includes(permission) : true;
+    }
+
     // user methods
     register(username, password) {
         const call = this.http.post(this.path + 'auth/register', {userid: username,

src/app/settings/settings.component.html

@@ -1,13 +1,12 @@
-<h4 i18n="Settings title" mat-dialog-title>Settings</h4>
+<h4 class="settings-title" i18n="Settings title">Settings</h4>
 <!-- <ng-container i18n="Allow subscriptions setting"></ng-container> -->
-<mat-dialog-content>
 
 <!-- Language
 <div style="margin-bottom: 10px;">
 
 </div> -->
 
-<mat-tab-group>
+<mat-tab-group style="height: 79vh" mat-align-tabs="center">
     <!-- Server -->
     <mat-tab label="Main" i18n-label="Main settings label">
         <ng-template matTabContent style="padding: 15px;">
@@ -391,7 +390,7 @@
                 <app-updater></app-updater>
             </div>
             <mat-divider></mat-divider>
-            <div *ngIf="new_config" class="container">
+            <div *ngIf="new_config" class="container-fluid">
                 <div class="row">
                     <div class="col-12 mt-4">
                         <button (click)="restartServer()" mat-stroked-button color="warn"><ng-container i18n="Restart server button">Restart server</ng-container></button>
@@ -450,21 +449,19 @@
     </mat-tab>
     <mat-tab *ngIf="postsService.config" label="Logs" i18n-label="Logs settings label">
         <ng-template matTabContent>
-            <div style="margin-left: 48px; margin-top: 24px; height: 340px">
+            <div style="margin-top: 15px; height: 84%;">
                 <app-logs-viewer></app-logs-viewer>
             </div>
         </ng-template>
     </mat-tab>
 </mat-tab-group>
-</mat-dialog-content>
 
-<mat-dialog-actions>
-    <div style="margin-bottom: 10px;">
-        <button color="accent" (click)="saveSettings()" [disabled]="settingsSame()" mat-raised-button><mat-icon>done</mat-icon>&nbsp;&nbsp;
+    <div style="margin-top: 10px;">
+        <button style="margin-left: 10px;" color="accent" (click)="saveSettings()" [disabled]="settingsSame()" mat-raised-button><mat-icon>done</mat-icon>&nbsp;&nbsp;
             <ng-container i18n="Settings save button">Save</ng-container>
         </button>
-        <button mat-flat-button [mat-dialog-close]="false"><mat-icon>cancel</mat-icon>&nbsp;&nbsp;
-            <span i18n="Settings cancel and close button">{settingsAreTheSame + "", select, true {Close} false {Cancel} other {otha}}</span>
+        <button style="margin-left: 10px;" mat-flat-button (click)="cancelSettings()" [disabled]="settingsSame()"><mat-icon>cancel</mat-icon>&nbsp;&nbsp;
+            <span i18n="Settings cancel button">Cancel</span>
         </button>
     </div>
-</mat-dialog-actions>
+

src/app/settings/settings.component.scss

@@ -2,6 +2,15 @@
     margin-bottom: 20px;
 }
 
+.settings-title {
+    text-align: center;
+    margin-top: 15px;
+}
+
+::ng-deep .mat-tab-body {
+    margin-left: 15px;
+}
+
 .ext-divider {
     margin-bottom: 14px;
 }

src/app/settings/settings.component.ts

@@ -85,6 +85,10 @@ export class SettingsComponent implements OnInit {
     })
   }
 
+  cancelSettings() {
+    this.new_config = JSON.parse(JSON.stringify(this.initial_config));
+  }
+
   dropCategory(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.postsService.categories, event.previousIndex, event.currentIndex);
     this.postsService.updateCategories(this.postsService.categories).subscribe(res => {