Toggle password visiblity (hobbyfarm#189)

* Toggle password visiblity * Run prettier
svalabs · Jan 5, 2024 · c7e3ca2 · c7e3ca2
1 parent ef79c3b
commit c7e3ca2
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 24 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -65,6 +65,8 @@ import {
   windowCloseIcon,
   arrowIcon,
   hostIcon,
+  eyeIcon,
+  eyeHideIcon,
 } from '@cds/core/icon';
 
 ClarityIcons.addIcons(
@@ -91,6 +93,8 @@ ClarityIcons.addIcons(
   windowCloseIcon,
   arrowIcon,
   hostIcon,
+  eyeIcon,
+  eyeHideIcon,
 );
 
 export function tokenGetter() {

diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
@@ -12,6 +12,16 @@
   justify-content: center;
 }
 
+cds-icon.clr-input-group-icon-action {
+  position: absolute;
+  color: var(--clr-icon-costum);
+  transform: translateX(-150%);
+}
+
+.clr-control-container {
+  position: relative;
+}
+
 .imprint {
   position: absolute;
   left: 5px;

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -22,19 +22,47 @@
                   >Email Address is required</clr-control-error
                 >
               </clr-input-container>
-              <clr-input-container>
-                <input
-                  type="password"
-                  name="password"
-                  clrInput
-                  formControlName="password"
-                  placeholder="Password"
-                />
-                <clr-control-error *clrIfError="'required'"
-                  >Password is required</clr-control-error
+              <div class="clr-form-control">
+                <div
+                  class="clr-control-container"
+                  [class.clr-error]="!passwordValidated()"
                 >
-              </clr-input-container>
-              <div class="error" [class.active]="error.length > 0">
+                  <div class="clr-input-wrapper">
+                    <input
+                      type="{{ showPassword ? 'text' : 'password' }}"
+                      name="password"
+                      class="clr-input"
+                      formControlName="password"
+                      placeholder="Password"
+                    />
+                    <cds-icon
+                      *ngIf="!showPassword"
+                      (click)="togglePasswordVisibility()"
+                      class="clr-input-group-icon-action"
+                      aria-label="toggle password visibility"
+                      shape="eye-hide"
+                      title="Show password"
+                    ></cds-icon>
+                    <cds-icon
+                      *ngIf="showPassword"
+                      (click)="togglePasswordVisibility()"
+                      class="clr-input-group-icon-action"
+                      aria-label="toggle password visibility"
+                      shape="eye"
+                      title="Hide password"
+                    ></cds-icon>
+                    <cds-icon
+                      class="clr-validate-icon"
+                      shape="exclamation-circle"
+                      status="info"
+                    ></cds-icon>
+                  </div>
+                  <span *ngIf="!passwordValidated()" class="clr-subtext"
+                    >Password is required</span
+                  >
+                </div>
+              </div>
+              <div class="error" [class.active]="error && error.length > 0">
                 {{ error }}
               </div>
               <button type="submit" class="btn btn-primary" (click)="login()">
@@ -84,18 +112,44 @@
                 </ul>
               </clr-control-error>
             </clr-input-container>
-            <clr-input-container>
-              <input
-                type="password"
-                name="password"
-                clrInput
-                formControlName="password"
-                placeholder="Password"
-              />
-              <clr-control-error *clrIfError="'required'"
-                >Password is required</clr-control-error
+            <div class="clr-form-control">
+              <div
+                class="clr-control-container"
+                [class.clr-error]="!passwordValidated()"
               >
-            </clr-input-container>
+                <div class="clr-input-wrapper">
+                  <input
+                    type="{{ showPassword ? 'text' : 'password' }}"
+                    name="password"
+                    class="clr-input"
+                    formControlName="password"
+                    placeholder="Password"
+                  />
+                  <cds-icon
+                    *ngIf="!showPassword"
+                    (click)="togglePasswordVisibility()"
+                    class="clr-input-group-icon-action"
+                    aria-label="toggle password visibility"
+                    shape="eye-hide"
+                  ></cds-icon>
+                  <cds-icon
+                    *ngIf="showPassword"
+                    (click)="togglePasswordVisibility()"
+                    class="clr-input-group-icon-action"
+                    aria-label="toggle password visibility"
+                    shape="eye"
+                  ></cds-icon>
+                  <cds-icon
+                    class="clr-validate-icon"
+                    shape="exclamation-circle"
+                    status="info"
+                  ></cds-icon>
+                </div>
+                <span *ngIf="!passwordValidated()" class="clr-subtext"
+                  >Password is required</span
+                >
+              </div>
+            </div>
             <clr-checkbox-container *ngIf="privacyPolicyRequired">
               <clr-checkbox-wrapper>
                 <input
@@ -114,7 +168,7 @@
                 >Accepting the privacy policy is required</clr-control-error
               >
             </clr-checkbox-container>
-            <div class="error" [class.active]="error.length > 0">
+            <div class="error" [class.active]="error && error.length > 0">
               {{ error }}
             </div>
             <button

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -16,6 +16,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 export class LoginComponent {
   public error = '';
 
+  public showPassword = false;
   public registrationDisabled = false;
 
   public globalRegistrationDisabled = true;
@@ -148,4 +149,16 @@ export class LoginComponent {
       }
     });
   }
+
+  passwordValidated(): boolean {
+    if (this.loginForm.controls['password'].errors?.required) {
+      return !this.loginForm.controls['password'].touched;
+    } else {
+      return true;
+    }
+  }
+
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
 }