better login dialog

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

@@ -16,6 +16,8 @@ import { TokenStorageService } from '@ghostfolio/client/services/token-storage.s
   templateUrl: 'login-with-access-token-dialog.html'
 })
 export class LoginWithAccessTokenDialog {
+  public hide = true;
+
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<LoginWithAccessTokenDialog>,
@@ -47,4 +49,10 @@ 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,15 +6,20 @@
 
 <div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">
-    <mat-form-field appearance="outline" class="without-hint w-100">
+    <form id="login" class="display-contents" (ngSubmit)="onSubmit()">
-      <mat-label i18n>Security Token</mat-label>
+      <mat-form-field appearance="outline" class="without-hint w-100">
-      <textarea
+        <mat-label i18n>Security Token</mat-label>
-        cdkTextareaAutosize
+        <input
-        matInput
+          matInput
-        type="text"
+          [type]="hide ? 'password' : 'text'"
-        [(ngModel)]="data.accessToken"
+          name="password"
-      ></textarea>
+          [(ngModel)]="data.accessToken"
-    </mat-form-field>
+        />
+        <div id="hide-password" matSuffix (click)="hide = !hide">
+          <ion-icon name="{{hide ? 'eye-outline' : 'eye-off-outline'}}"></ion-icon>
+        </div>
+      </mat-form-field>
+    </form>
     <ng-container *ngIf="data.hasPermissionToUseSocialLogin">
       <div class="my-3 text-center text-muted" i18n>or</div>
       <div class="d-flex flex-column">

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

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