Refactoring

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts

@@ -16,7 +16,7 @@ import { TokenStorageService } from '@ghostfolio/client/services/token-storage.s
   templateUrl: 'login-with-access-token-dialog.html'
 })
 export class LoginWithAccessTokenDialog {
-  public hide = true;
+  public isAccessTokenHidden = true;
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -40,6 +40,12 @@ export class LoginWithAccessTokenDialog {
     this.dialogRef.close();
   }
 
+  public onLoginWithAccessToken() {
+    if (this.data.accessToken) {
+      this.dialogRef.close(this.data);
+    }
+  }
+
   public async onLoginWithInternetIdentity() {
     try {
       const { authToken } = await this.internetIdentityService.login();
@@ -49,10 +55,4 @@ export class LoginWithAccessTokenDialog {
       this.router.navigate(['/']);
     } catch {}
   }
-
-  public onSubmit() {
-    if (this.data.accessToken) {
-      this.dialogRef.close(this.data);
-    }
-  }
 }

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -6,18 +6,25 @@
 
 <div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">
-    <form id="login" class="display-contents" (ngSubmit)="onSubmit()">
+    <form class="w-100" (ngSubmit)="onLoginWithAccessToken()">
       <mat-form-field appearance="outline" class="without-hint w-100">
         <mat-label i18n>Security Token</mat-label>
         <input
           matInput
-          [type]="hide ? 'password' : 'text'"
           name="password"
+          [type]="isAccessTokenHidden ? 'password' : 'text'"
           [(ngModel)]="data.accessToken"
         />
-        <div id="hide-password" matSuffix (click)="hide = !hide">
+        <button
-          <ion-icon name="{{hide ? 'eye-outline' : 'eye-off-outline'}}"></ion-icon>
+          mat-button
-        </div>
+          matSuffix
+          type="button"
+          (click)="isAccessTokenHidden = !isAccessTokenHidden"
+        >
+          <ion-icon
+            [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'"
+          ></ion-icon>
+        </button>
       </mat-form-field>
     </form>
     <ng-container *ngIf="data.hasPermissionToUseSocialLogin">

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss

@@ -1,14 +1,3 @@
 :host {
   display: block;
-
-  .display-contents {
-    display: contents;
-  }
-
-  #hide-password {
-    padding: 10px;
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-  }
 }