Change checkboxes to slide toggles

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

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

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

@@ -81,21 +81,23 @@
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">
-              <mat-checkbox
+              <mat-slide-toggle
                 color="primary"
+                hideIcon="true"
                 [checked]="info.globalPermissions.includes(permissions.createUserAccount)"
                 (change)="onEnableUserSignupModeChange($event)"
-              ></mat-checkbox>
+              ></mat-slide-toggle>
             </div>
           </div>
           <div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
             <div class="w-50" i18n>Read-only Mode</div>
             <div class="w-50">
-              <mat-checkbox
+              <mat-slide-toggle
                 color="primary"
+                hideIcon="true"
                 [checked]="info?.isReadOnlyMode"
                 (change)="onReadOnlyModeChange($event)"
-              ></mat-checkbox>
+              ></mat-slide-toggle>
             </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 { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/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],