From d84a70374731e0e0fab1dc659eaa9f1d4cc39902 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:53:03 +0100
Subject: [PATCH] Minor improvements

---
 .../show-access-token-dialog.component.ts     | 10 ++--
 .../show-access-token-dialog.html             | 60 +++++++------------
 .../show-access-token-dialog.scss             | 14 +----
 3 files changed, 30 insertions(+), 54 deletions(-)

diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts
index fa47e71ea..fbf2f1186 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts
@@ -11,18 +11,18 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  selector: 'gf-show-access-token-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-show-access-token-dialog',
+  standalone: false,
   styleUrls: ['./show-access-token-dialog.scss'],
-  templateUrl: 'show-access-token-dialog.html',
-  standalone: false
+  templateUrl: 'show-access-token-dialog.html'
 })
 export class ShowAccessTokenDialog {
   @ViewChild(MatStepper) stepper!: MatStepper;
   public accessToken: string;
   public authToken: string;
-  public disclaimerChecked = false;
   public isCreateAccountButtonDisabled = true;
+  public isDisclaimerChecked = false;
   public role: string;
 
   private unsubscribeSubject = new Subject<void>();
@@ -33,7 +33,7 @@ export class ShowAccessTokenDialog {
   ) {}
 
   public onChangeDislaimerChecked() {
-    this.disclaimerChecked = !this.disclaimerChecked;
+    this.isDisclaimerChecked = !this.isDisclaimerChecked;
   }
 
   public enableCreateAccountButton() {
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
index f6691e3bd..4cb15ad08 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
@@ -4,56 +4,49 @@
     <span class="badge badge-light ml-2">{{ role }}</span>
   }
 </h1>
-<div class="py-3" mat-dialog-content>
-  <mat-stepper #stepper linear>
-    <mat-step
-      editable="false"
-      state="disclaimer"
-      [completed]="disclaimerChecked"
-    >
+<div class="px-0" mat-dialog-content>
+  <mat-stepper #stepper animationDuration="0ms" linear>
+    <mat-step editable="false" [completed]="isDisclaimerChecked">
       <ng-template i18n matStepLabel>Terms and Conditions</ng-template>
-      <div class="terms-and-conditions pt-2" i18n>
-        Please take a moment to read and accept the
-        <a
-          href="https://ghostfol.io/en/about/privacy-policy"
-          target="_blank"
-          title="Terms and Conditions"
+      <div class="pt-2">
+        <ng-container i18n>
+          Please keep your security token safe. If you lose it, you will not be
+          able to recover your account.</ng-container
         >
-          terms and conditions</a
-        >. Remember to keep your security token safe. If you lose it, you will
-        not be able to recover your account.
       </div>
       <mat-checkbox
         class="pt-2"
         color="primary"
-        i18n
         (change)="onChangeDislaimerChecked()"
       >
-        I agree to the terms and understand that if I lose my security token, I
-        cannot recover my account.
+        <ng-container i18n
+          >I understand that if I lose my security token, I cannot recover my
+          account.</ng-container
+        >
       </mat-checkbox>
-      <div mat-dialog-actions>
+      <div class="mt-3" mat-dialog-actions>
         <div class="flex-grow-1">
           <button i18n mat-button [mat-dialog-close]="undefined">Cancel</button>
         </div>
         <div>
           <button
             color="primary"
-            i18n
             mat-flat-button
-            [disabled]="!disclaimerChecked"
+            [disabled]="!isDisclaimerChecked"
             (click)="createAccount()"
           >
-            Continue
+            <ng-container i18n>Continue</ng-container>
           </button>
         </div>
       </div>
     </mat-step>
-    <mat-step editable="false" state="copy">
+    <mat-step editable="false">
       <ng-template i18n matStepLabel>Security Token</ng-template>
-      <div class="pt-2" i18n>
-        Here is your security token. It is only visible once, please store and
-        keep it in a safe place.
+      <div class="pt-2">
+        <ng-container i18n
+          >Here is your security token. It is only visible once, please store
+          and keep it in a safe place.</ng-container
+        >
       </div>
       <mat-form-field appearance="outline" class="w-100 pt-3">
         <mat-label i18n>Security Token</mat-label>
@@ -72,11 +65,11 @@
             (click)="enableCreateAccountButton()"
           >
             <ion-icon class="mr-1" name="copy-outline" />
-            <span i18n> Copy to clipboard </span>
+            <span i18n>Copy to clipboard</span>
           </button>
         </div>
       </mat-form-field>
-      <div align="end" mat-dialog-actions>
+      <div align="end" class="mt-3" mat-dialog-actions>
         <div>
           <button
             color="primary"
@@ -93,15 +86,6 @@
     </mat-step>
 
     <!-- Custom icons -->
-    <ng-template matStepperIcon="disclaimer">
-      <ion-icon name="information-outline"></ion-icon>
-    </ng-template>
-    <ng-template matStepperIcon="create">
-      <ion-icon name="information-outline"></ion-icon>
-    </ng-template>
-    <ng-template matStepperIcon="copy">
-      <ion-icon name="copy-outline"></ion-icon>
-    </ng-template>
     <ng-template matStepperIcon="done">
       <ion-icon name="checkmark-outline"></ion-icon>
     </ng-template>
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
index c43725e93..777c8c854 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
@@ -1,14 +1,6 @@
 :host {
-  .terms-and-conditions {
-    text-align: justify;
-
-    a {
-      color: rgba(var(--palette-primary-500), 1);
-      font-weight: 500;
-
-      &:hover {
-        color: rgba(var(--palette-primary-300), 1);
-      }
-    }
+  .mat-mdc-dialog-actions {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 }