Feature/Improve login dialog (#2124)

* Improve login dialog

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

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`

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();

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">