From 2bf4f1237a42a7b8d510ce2ea4830f8ded45488c Mon Sep 17 00:00:00 2001
From: bptrgx <47859535+bptrgx@users.noreply.github.com>
Date: Sat, 15 Jul 2023 22:09:12 +0200
Subject: [PATCH] Feature/Improve login dialog (#2124)

* Improve login dialog

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 ...ogin-with-access-token-dialog.component.ts |  8 +++++
 .../login-with-access-token-dialog.html       | 30 +++++++++++++------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 074737a6c..e3d3ea887 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the login dialog
 - Disabled the caching in the health check endpoints for data providers
 - Improved the content of the Frequently Asked Questions (FAQ) page
 - Upgraded `prisma` from version `4.15.0` to `4.16.2`
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts
index 85af8aaee..b3236b2be 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts
+++ b/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 isAccessTokenHidden = true;
+
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<LoginWithAccessTokenDialog>,
@@ -38,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();
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
index 5dfc84a02..080ad4428 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
@@ -6,15 +6,27 @@
 
 <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">
-      <mat-label i18n>Security Token</mat-label>
-      <textarea
-        cdkTextareaAutosize
-        matInput
-        type="text"
-        [(ngModel)]="data.accessToken"
-      ></textarea>
-    </mat-form-field>
+    <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
+          name="password"
+          [type]="isAccessTokenHidden ? 'password' : 'text'"
+          [(ngModel)]="data.accessToken"
+        />
+        <button
+          mat-button
+          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">
       <div class="my-3 text-center text-muted" i18n>or</div>
       <div class="d-flex flex-column">