Feature/change checkboxes to slide toggles in admin control panel (#2551)

* Change checkboxes to slide toggles

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the usability and validation in the cash balance transfer from one to another account
+- Changed the checkboxes to slide toggles in the overview of the admin control panel
 - Improved the localized meta data (keywords) in `html` files
 - Improved the language localization for German (`de`)
 

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,
-      value: aEvent.checked ? true : undefined
+      key: PROPERTY_IS_USER_SIGNUP_ENABLED,
+      value: aEvent.checked ? undefined : false
     });
   }
 
-  public onEnableUserSignupModeChange(aEvent: MatCheckboxChange) {
+  public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
     this.putAdminSetting({
-      key: PROPERTY_IS_USER_SIGNUP_ENABLED,
-      value: aEvent.checked ? undefined : false
+      key: PROPERTY_IS_READ_ONLY_MODE,
+      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],