improve login page, closes #57

Syndesi · Syndesi · commit ea1cc63b2163 · 2025-08-24T23:44:24.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 ### Changed
 - Refactor app plugin experimental to use app-core instead of web-sdk.
+- Improve login page, closes #57.
 
 ## 0.0.12 - 2024-12-16
 ### Added
diff --git a/src/Asset/Translation/ar.json b/src/Asset/Translation/ar.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "اكتب هنا",
     "page.login.passwordPlaceholder": "اكتب هنا",
     "page.login.actionClear": "واضح",
-    "page.login.actionLogin": "تسجيل الدخول"
+    "page.login.actionLogin": "تسجيل الدخول",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "إظهار كلمة المرور",
+    "page.login.toggleIsPasswordRedacted.titleText": "إخفاء كلمة المرور"
 }
diff --git a/src/Asset/Translation/de.json b/src/Asset/Translation/de.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Hier eingeben",
     "page.login.passwordPlaceholder": "Hier eingeben",
     "page.login.actionClear": "Formular leeren",
-    "page.login.actionLogin": "Login"
+    "page.login.actionLogin": "Login",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "zeige Passwort",
+    "page.login.toggleIsPasswordRedacted.titleText": "verstecke Passwort"
 }
diff --git a/src/Asset/Translation/en.json b/src/Asset/Translation/en.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Type here",
     "page.login.passwordPlaceholder": "Type here",
     "page.login.actionClear": "Clear",
-    "page.login.actionLogin": "Login"
+    "page.login.actionLogin": "Login",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "show password",
+    "page.login.toggleIsPasswordRedacted.titleText": "hide password"
 }
diff --git a/src/Asset/Translation/es.json b/src/Asset/Translation/es.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Escribe aquí",
     "page.login.passwordPlaceholder": "Escribe aquí",
     "page.login.actionClear": "Clara",
-    "page.login.actionLogin": "Acceso"
+    "page.login.actionLogin": "Acceso",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "mostrar contraseña",
+    "page.login.toggleIsPasswordRedacted.titleText": "ocultar contraseña"
 }
diff --git a/src/Asset/Translation/fr.json b/src/Asset/Translation/fr.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Tapez ici",
     "page.login.passwordPlaceholder": "Tapez ici",
     "page.login.actionClear": "Claire",
-    "page.login.actionLogin": "Se connecter"
+    "page.login.actionLogin": "Se connecter",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "afficher le mot de passe",
+    "page.login.toggleIsPasswordRedacted.titleText": "masquer le mot de passe"
 }
diff --git a/src/Asset/Translation/hi.json b/src/Asset/Translation/hi.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "यहाँ टाइप करें",
     "page.login.passwordPlaceholder": "यहाँ टाइप करें",
     "page.login.actionClear": "स्पष्ट",
-    "page.login.actionLogin": "लॉग इन करें"
+    "page.login.actionLogin": "लॉग इन करें",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "पासवर्ड दिखाएँ",
+    "page.login.toggleIsPasswordRedacted.titleText": "पासवर्ड छिपाएँ"
 }
diff --git a/src/Asset/Translation/it.json b/src/Asset/Translation/it.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Scrivi qui",
     "page.login.passwordPlaceholder": "Scrivi qui",
     "page.login.actionClear": "Chiara",
-    "page.login.actionLogin": "Login"
+    "page.login.actionLogin": "Login",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "mostra password",
+    "page.login.toggleIsPasswordRedacted.titleText": "nascondi password"
 }
diff --git a/src/Asset/Translation/ja.json b/src/Asset/Translation/ja.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "ここに入力してください",
     "page.login.passwordPlaceholder": "ここに入力してください",
     "page.login.actionClear": "クリア",
-    "page.login.actionLogin": "ログイン"
+    "page.login.actionLogin": "ログイン",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "パスワードを表示",
+    "page.login.toggleIsPasswordRedacted.titleText": "パスワードを非表示"
 }
diff --git a/src/Asset/Translation/ko.json b/src/Asset/Translation/ko.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "여기에 입력하세요",
     "page.login.passwordPlaceholder": "여기에 입력하세요",
     "page.login.actionClear": "분명한",
-    "page.login.actionLogin": "로그인"
+    "page.login.actionLogin": "로그인",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "비밀번호 표시",
+    "page.login.toggleIsPasswordRedacted.titleText": "비밀번호 숨기기"
 }
diff --git a/src/Asset/Translation/no.json b/src/Asset/Translation/no.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Skriv her",
     "page.login.passwordPlaceholder": "Skriv her",
     "page.login.actionClear": "Klar",
-    "page.login.actionLogin": "Logg inn"
+    "page.login.actionLogin": "Logg inn",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "vis passord",
+    "page.login.toggleIsPasswordRedacted.titleText": "skjul passord"
 }
diff --git a/src/Asset/Translation/ru.json b/src/Asset/Translation/ru.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Введите здесь",
     "page.login.passwordPlaceholder": "Введите здесь",
     "page.login.actionClear": "Прозрачный",
-    "page.login.actionLogin": "Авторизоваться"
+    "page.login.actionLogin": "Авторизоваться",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "показать пароль",
+    "page.login.toggleIsPasswordRedacted.titleText": "скрыть пароль"
 }
diff --git a/src/Asset/Translation/sw.json b/src/Asset/Translation/sw.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "Andika hapa",
     "page.login.passwordPlaceholder": "Andika hapa",
     "page.login.actionClear": "Wazi",
-    "page.login.actionLogin": "Ingia"
+    "page.login.actionLogin": "Ingia",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "onyesha nenosiri",
+    "page.login.toggleIsPasswordRedacted.titleText": "ficha nenosiri"
 }
diff --git a/src/Asset/Translation/zh-CN.json b/src/Asset/Translation/zh-CN.json
@@ -7,5 +7,7 @@
     "page.login.usernamePlaceholder": "在此处输入",
     "page.login.passwordPlaceholder": "在此处输入",
     "page.login.actionClear": "清除",
-    "page.login.actionLogin": "登录"
+    "page.login.actionLogin": "登录",
+    "page.login.toggleIsPasswordRedacted.titleRedacted": "显示密码",
+    "page.login.toggleIsPasswordRedacted.titleText": "隐藏密码"
 }
diff --git a/src/Machine/Page/loginPageMachine.ts b/src/Machine/Page/loginPageMachine.ts
@@ -32,6 +32,7 @@ const loginPageMachine = setup({
       {
         uniqueUserIdentifier: UniqueUserIdentifier;
         password: string;
+        isPasswordRedacted: boolean;
         serviceResolver: ServiceResolver;
       }
     >(({ input }) => {
@@ -45,6 +46,7 @@ const loginPageMachine = setup({
       htmlElement: HTMLElementWithOptionalOnServiceResolverLoaded;
       uniqueUserIdentifier: UniqueUserIdentifier | string;
       password: string;
+      isPasswordRedacted: boolean;
       error: null | unknown;
       serviceResolver: null | ServiceResolver;
     },
@@ -54,6 +56,7 @@ const loginPageMachine = setup({
     events: {} as
       | { type: 'formClear' }
       | { type: 'formUpdate'; uniqueUserIdentifier: UniqueUserIdentifier | string; password: string }
+      | { type: 'toggleIsPasswordRedacted' }
       | { type: 'formSubmit' },
   },
 }).createMachine({
@@ -62,6 +65,7 @@ const loginPageMachine = setup({
     htmlElement: input.htmlElement,
     uniqueUserIdentifier: '',
     password: '',
+    isPasswordRedacted: true,
     element: null,
     error: null,
     serviceResolver: null,
@@ -124,6 +128,12 @@ const loginPageMachine = setup({
           }),
           target: 'WaitingForFormUpdate',
         },
+        toggleIsPasswordRedacted: {
+          actions: assign({
+            isPasswordRedacted: ({ context }) => !context.isPasswordRedacted,
+          }),
+          target: 'WaitingForFormUpdate',
+        },
         formSubmit: {
           target: 'SubmittingForm',
         },
diff --git a/src/Page/LoginPage.ts b/src/Page/LoginPage.ts
@@ -1,6 +1,8 @@
 import { i18n } from 'i18next';
 import { LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Eye, EyeOff } from 'lucide-static';
 import { ActorRefFrom, SnapshotFrom } from 'xstate';
 
 import { withStateMachine } from '../Decorator/index.js';
@@ -47,6 +49,12 @@ class LoginPage extends LitElement {
     });
   }
 
+  private toggleIsPasswordRedacted(): void {
+    this.send({
+      type: 'toggleIsPasswordRedacted',
+    });
+  }
+
   private onClear(event: Event): void {
     event.preventDefault();
     this.send({
@@ -78,6 +86,12 @@ class LoginPage extends LitElement {
       errorBlock = html` <p class="text-error">${errorMessage}</p> `;
     }
     const t = this.i18n?.t;
+    const isPasswordRedactedTitle =
+      t?.(
+        this.state.context.isPasswordRedacted
+          ? 'page.login.toggleIsPasswordRedacted.titleRedacted'
+          : 'page.login.toggleIsPasswordRedacted.titleText',
+      ) ?? 'toggle password visibility';
     return html`
       <div class="card bg-base-100 w-full shadow-sm">
         <div class="card-body p-3">
@@ -86,7 +100,8 @@ class LoginPage extends LitElement {
             <legend class="fieldset-legend">${t?.('page.login.usernameLabel') ?? 'Email or username:'}</legend>
             <input
               type="text"
-              class="input"
+              class="input w-full"
+              autocomplete="email"
               .placeholder="${t?.('page.login.usernamePlaceholder') ?? 'Type here:'}"
               .value="${this.state.context.uniqueUserIdentifier}"
               @input=${this.onUniqueUserIdentifierChange}
@@ -95,14 +110,24 @@ class LoginPage extends LitElement {
           </fieldset>
           <fieldset class="fieldset">
             <legend class="fieldset-legend">${t?.('page.login.passwordLabel') ?? 'Password:'}</legend>
-            <input
-              type="password"
-              class="input"
-              .placeholder="${t?.('page.login.passwordPlaceholder') ?? 'Type here:'}"
-              .value="${this.state.context.password}"
-              @input=${this.onPasswordChange}
-              ?disabled=${this.stateTag !== loginPageMachineTags.WaitingForFormEdit}
-            />
+            <div class="join w-full flex">
+              <input
+                type="${this.state.context.isPasswordRedacted ? 'password' : 'text'}"
+                class="input join-item flex-1"
+                autocomplete="current-password"
+                .placeholder="${t?.('page.login.passwordPlaceholder') ?? 'Type here:'}"
+                .value="${this.state.context.password}"
+                @input=${this.onPasswordChange}
+                ?disabled=${this.stateTag !== loginPageMachineTags.WaitingForFormEdit}
+              />
+              <button
+                class="btn btn-square join-item flex-none"
+                @click=${this.toggleIsPasswordRedacted}
+                title="${isPasswordRedactedTitle}"
+              >
+                ${unsafeHTML(this.state.context.isPasswordRedacted ? Eye : EyeOff)}
+              </button>
+            </div>
           </fieldset>
           <div class="flex gap-2">
             <button
@@ -114,7 +139,7 @@ class LoginPage extends LitElement {
               ${t?.('page.login.actionClear') ?? 'Clear'}
             </button>
             <button
-              class="btn btn-soft btn-success basis-0 grow ${this.stateTag === loginPageMachineTags.WaitingForFormEdit
+              class="btn btn-success basis-0 grow ${this.stateTag === loginPageMachineTags.WaitingForFormEdit
                 ? ''
                 : 'btn-disabled'}"
               @click=${this.onSubmit}

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "اكتب هنا",`
`8`	`8`	`"page.login.passwordPlaceholder": "اكتب هنا",`
`9`	`9`	`"page.login.actionClear": "واضح",`
`10`		`- "page.login.actionLogin": "تسجيل الدخول"`
	`10`	`+ "page.login.actionLogin": "تسجيل الدخول",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "إظهار كلمة المرور",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "إخفاء كلمة المرور"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "Hier eingeben",`
`8`	`8`	`"page.login.passwordPlaceholder": "Hier eingeben",`
`9`	`9`	`"page.login.actionClear": "Formular leeren",`
`10`		`- "page.login.actionLogin": "Login"`
	`10`	`+ "page.login.actionLogin": "Login",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "zeige Passwort",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "verstecke Passwort"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "Type here",`
`8`	`8`	`"page.login.passwordPlaceholder": "Type here",`
`9`	`9`	`"page.login.actionClear": "Clear",`
`10`		`- "page.login.actionLogin": "Login"`
	`10`	`+ "page.login.actionLogin": "Login",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "show password",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "hide password"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "Escribe aquí",`
`8`	`8`	`"page.login.passwordPlaceholder": "Escribe aquí",`
`9`	`9`	`"page.login.actionClear": "Clara",`
`10`		`- "page.login.actionLogin": "Acceso"`
	`10`	`+ "page.login.actionLogin": "Acceso",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "mostrar contraseña",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "ocultar contraseña"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "Tapez ici",`
`8`	`8`	`"page.login.passwordPlaceholder": "Tapez ici",`
`9`	`9`	`"page.login.actionClear": "Claire",`
`10`		`- "page.login.actionLogin": "Se connecter"`
	`10`	`+ "page.login.actionLogin": "Se connecter",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "afficher le mot de passe",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "masquer le mot de passe"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "यहाँ टाइप करें",`
`8`	`8`	`"page.login.passwordPlaceholder": "यहाँ टाइप करें",`
`9`	`9`	`"page.login.actionClear": "स्पष्ट",`
`10`		`- "page.login.actionLogin": "लॉग इन करें"`
	`10`	`+ "page.login.actionLogin": "लॉग इन करें",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "पासवर्ड दिखाएँ",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "पासवर्ड छिपाएँ"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "Scrivi qui",`
`8`	`8`	`"page.login.passwordPlaceholder": "Scrivi qui",`
`9`	`9`	`"page.login.actionClear": "Chiara",`
`10`		`- "page.login.actionLogin": "Login"`
	`10`	`+ "page.login.actionLogin": "Login",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "mostra password",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "nascondi password"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "ここに入力してください",`
`8`	`8`	`"page.login.passwordPlaceholder": "ここに入力してください",`
`9`	`9`	`"page.login.actionClear": "クリア",`
`10`		`- "page.login.actionLogin": "ログイン"`
	`10`	`+ "page.login.actionLogin": "ログイン",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "パスワードを表示",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "パスワードを非表示"`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,7 @@`
`7`	`7`	`"page.login.usernamePlaceholder": "여기에 입력하세요",`
`8`	`8`	`"page.login.passwordPlaceholder": "여기에 입력하세요",`
`9`	`9`	`"page.login.actionClear": "분명한",`
`10`		`- "page.login.actionLogin": "로그인"`
	`10`	`+ "page.login.actionLogin": "로그인",`
	`11`	`+ "page.login.toggleIsPasswordRedacted.titleRedacted": "비밀번호 표시",`
	`12`	`+ "page.login.toggleIsPasswordRedacted.titleText": "비밀번호 숨기기"`
`11`	`13`	`}`