Toggleable password input

packages/frontend/src/app/app.scss

@@ -30,6 +30,14 @@ ion-menu.cookingToolbarOpen {
   font-size: 40px;
 }
 
+.medium-icon {
+  font-size: 2em;
+}
+
+.eye-icon {
+  vertical-align: middle;
+}
+
 ion-popover,
 .alert-wrapper {
   --width: 280px;

packages/frontend/src/app/directives/toggleable-password.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, ElementRef, Renderer2 } from "@angular/core";
+
+@Directive({
+  selector: "[appToggleablePassword]",
+})
+export class ToggleablePasswordDirective {
+  private showPassword = false;
+  private eyeIcon!: HTMLElement;
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) {
+    this.setup();
+  }
+
+  setup() {
+    // Create the eye icon for showing/hiding password
+    this.eyeIcon = this.renderer.createElement("ion-icon");
+    this.renderer.addClass(this.eyeIcon, "medium-icon");
+    this.renderer.addClass(this.eyeIcon, "eye-icon");
+    this.renderer.setAttribute(this.eyeIcon, "name", "eye-off-outline");
+    this.renderer.listen(this.eyeIcon, "click", () => this.toggleShow());
+
+    // Append the eye icon next to the input field
+    this.renderer.appendChild(this.el.nativeElement.parentNode, this.eyeIcon);
+  }
+
+  toggleShow() {
+    this.showPassword = !this.showPassword;
+    const passwordInput = this.el.nativeElement;
+    passwordInput.type = this.showPassword ? "text" : "password";
+
+    const iconName = this.showPassword ? "eye-outline" : "eye-off-outline";
+    this.renderer.setAttribute(this.eyeIcon, "name", iconName);
+  }
+}

packages/frontend/src/app/pages/auth/auth.module.ts

@@ -9,9 +9,10 @@ import { LogoIconModule } from "~/components/logo-icon/logo-icon.module";
 import { TosClickwrapAgreementModule } from "~/components/tos-clickwrap-agreement/tos-clickwrap-agreement.module";
 
 import { GlobalModule } from "~/global.module";
+import { ToggleablePasswordDirective } from "../../directives/toggleable-password.directive";
 
 @NgModule({
-  declarations: [AuthPage],
+  declarations: [AuthPage, ToggleablePasswordDirective],
   imports: [
     CommonModule,
     IonicModule,

packages/frontend/src/app/pages/auth/auth.page.html

@@ -65,6 +65,7 @@ <h2>{{ 'pages.auth.welcome.register' | translate }}</h2>
             [(ngModel)]="password"
             (keyup.enter)="showLogin && auth()"
             type="password"
+            appToggleablePassword
           />
         </label>
         <br /><br />
@@ -76,6 +77,7 @@ <h2>{{ 'pages.auth.welcome.register' | translate }}</h2>
               [(ngModel)]="confirmPassword"
               (keyup.enter)="auth()"
               type="password"
+              appToggleablePassword
             />
           </label>
           <br /><br />

packages/frontend/src/app/pages/auth/auth.page.scss

@@ -15,8 +15,9 @@
   }
 
   input {
-    width: 100%;
+    width: 90%;
     background: none;
+    margin-right: 10px;
     border: none;
     border-bottom: 1px solid;
     border-color: var(--ion-border-color);