Feature/migrate slide toggle components to angular material 15 (#1840)

* Upgrade @angular/material

* Change MatSlideToggle to MatCheckbox

* Update changelog

CHANGELOG.md

@@ -9,7 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Changed the slide toggles to checkboxes on the account page
+- Changed the slide toggles to checkboxes in the admin control panel
 - Migrated the style of various components to `@angular/material` `15` (mdc)
+- Upgraded `@angular/material` from version `15.2.5` to `15.2.6`
 
 ## 1.251.0 - 2023-04-07
 

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -166,14 +166,14 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
+  public onReadOnlyModeChange(aEvent: MatCheckboxChange) {
     this.putAdminSetting({
       key: PROPERTY_IS_READ_ONLY_MODE,
       value: aEvent.checked ? true : undefined
     });
   }
 
-  public onEnableUserSignupModeChange(aEvent: MatSlideToggleChange) {
+  public onEnableUserSignupModeChange(aEvent: MatCheckboxChange) {
     this.putAdminSetting({
       key: PROPERTY_IS_USER_SIGNUP_ENABLED,
       value: aEvent.checked ? undefined : false

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -101,21 +101,21 @@
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="info.globalPermissions.includes(permissions.createUserAccount)"
                 (change)="onEnableUserSignupModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
             <div class="w-50" i18n>Read-only Mode</div>
             <div class="w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="info?.isReadOnlyMode"
                 (change)="onReadOnlyModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -3,8 +3,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -18,9 +18,9 @@ import { AdminOverviewComponent } from './admin-overview.component';
     FormsModule,
     GfValueModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatCardModule,
     MatSelectModule,
-    MatSlideToggleModule,
     ReactiveFormsModule
   ],
   providers: [CacheService],

apps/client/src/app/pages/account/account-page.component.ts

@@ -5,11 +5,8 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import {
-  MatLegacySlideToggle as MatSlideToggle,
-  MatLegacySlideToggleChange as MatSlideToggleChange
-} from '@angular/material/legacy-slide-toggle';
 import {
   MatSnackBar,
   MatSnackBarRef,
@@ -39,7 +36,7 @@ import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/cre
 })
 export class AccountPageComponent implements OnDestroy, OnInit {
   @ViewChild('toggleSignInWithFingerprintEnabledElement')
-  signInWithFingerprintElement: MatSlideToggle;
+  signInWithFingerprintElement: MatCheckbox;
 
   public accesses: Access[];
   public appearancePlaceholder = $localize`Auto`;
@@ -215,7 +212,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) {
+  public onExperimentalFeaturesChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ isExperimentalFeatures: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -280,7 +277,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onRestrictedViewChange(aEvent: MatSlideToggleChange) {
+  public onRestrictedViewChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ isRestrictedView: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -298,7 +295,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onSignInWithFingerprintChange(aEvent: MatSlideToggleChange) {
+  public onSignInWithFingerprintChange(aEvent: MatCheckboxChange) {
     if (aEvent.checked) {
       this.registerDevice();
     } else {
@@ -314,7 +311,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onViewModeChange(aEvent: MatSlideToggleChange) {
+  public onViewModeChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/account/account-page.html

@@ -88,12 +88,12 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.isRestrictedView"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onRestrictedViewChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="d-flex mt-4 py-1">
@@ -226,23 +226,23 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.viewMode === 'ZEN'"
                 [disabled]="!hasPermissionToUpdateViewMode"
                 (change)="onViewModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
             <div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 #toggleSignInWithFingerprintEnabledElement
                 color="primary"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onSignInWithFingerprintChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div
@@ -256,12 +256,12 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.isExperimentalFeatures"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onExperimentalFeaturesChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">

apps/client/src/app/pages/account/account-page.module.ts

@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
@@ -28,10 +28,10 @@ import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-di
     GfValueModule,
     MatButtonModule,
     MatCardModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatFormFieldModule,
     MatSelectModule,
-    MatSlideToggleModule,
     ReactiveFormsModule,
     RouterModule
   ]

package.json

@@ -58,7 +58,7 @@
     "@angular/compiler": "15.2.5",
     "@angular/core": "15.2.5",
     "@angular/forms": "15.2.5",
-    "@angular/material": "15.2.5",
+    "@angular/material": "15.2.6",
     "@angular/platform-browser": "15.2.5",
     "@angular/platform-browser-dynamic": "15.2.5",
     "@angular/router": "15.2.5",

yarn.lock

@@ -350,10 +350,10 @@
     glob "8.1.0"
     yargs "^17.2.1"
 
-"@angular/material@15.2.5":
+"@angular/material@15.2.6":
-  version "15.2.5"
+  version "15.2.6"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-15.2.5.tgz#a0531b629334dfd2997dd01e549bd0c40680f4e9"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-15.2.6.tgz#ac094216961a22058db7af898489808f02093038"
-  integrity sha512-Lk6l1VsBA2ActVN9YsX2W5lVFYHJEVwswbbUdBPjWaXJzp7TdgghTFczac7vsNA6y3DM3Rd+CvRsJPD2kK4g4A==
+  integrity sha512-r5feEcgs+xufI+GaO01XCehpnJVNB8sMS4l8DRV72DzgEIXhqYoLSWnQy7gYOKRXCUT66r1BxDmPG5fGa7jNzg==
   dependencies:
     "@material/animation" "15.0.0-canary.684e33d25.0"
     "@material/auto-init" "15.0.0-canary.684e33d25.0"