add reveal button in password fields

Author: odelcroi

frontend/src/templates.css

@@ -18,6 +18,8 @@
 @import url("./components/Footer/Footer.module.css");
 @import url("./components/PageHeading/PageHeading.module.css");
 
+@import url("../node_modules/@vector-im/compound-web/src/components/Form/Controls/Action/Action.module.css");
+
 .cpd-text-body-lg-regular {
   font: var(--cpd-font-body-lg-regular);
   letter-spacing: var(--cpd-font-letter-spacing-body-lg);

templates/components/password_field.html

@@ -0,0 +1,31 @@
+{% import "components/icon.html" as icon %}
+{% import "components/field.html" as field %}
+
+{% macro password_field(input_attributes, input_autocomplete="password", class="") %}
+<div class="password-field-container">
+  <input {{ input_attributes }} class="cpd-text-control" type="password" autocomplete="{{input_autocomplete}}" required />
+  <button type="button" class="action" onclick="togglePasswordVisibility(this)">
+    {{ icon.visibility_off() }}
+  </button>
+</div>
+
+
+
+<script>
+function togglePasswordVisibility(button) {
+  const input = button.previousElementSibling;
+  if (input.type === "password") {
+    input.type = "text";
+    button.innerHTML = `{{ icon.visibility_on() }}`;
+    //todo translate this
+    button.setAttribute('aria-label', 'Hide');
+  } else {
+    input.type = "password";
+    button.innerHTML = `{{ icon.visibility_off() }}`;
+    //todo translate this
+    button.setAttribute('aria-label', 'Show');
+  }
+}
+</script>
+
+{% endmacro %}

templates/pages/login.html

@@ -9,6 +9,7 @@
 {% extends "base.html" %}
 
 {% from "components/idp_brand.html" import logo %}
+{% from "components/password_field.html" import password_field %}
 
 {% block content %}
   <form method="POST" class="flex flex-col gap-10">
@@ -52,11 +53,11 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
         {% endcall %}
       {% endif %}
 
-      {% if features.password_login %}
+       {% if features.password_login %}
         {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
-          <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
+          <!-- <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />         -->
+          {{ password_field(input_attributes=field.attributes(f), input_autocomplete="password") }}
         {% endcall %}
-
         {% if features.account_recovery %}
           {{ button.link_text(text=_("mas.login.forgot_password"), href="/recover", class="self-center") }}
         {% endif %}

templates/pages/register/password.html

@@ -8,6 +8,8 @@
 
 {% extends "base.html" %}
 
+{% from "components/password_field.html" import password_field %}
+
 {% block content %}
   <header class="page-heading">
     <div class="icon">
@@ -40,13 +42,14 @@ <h1 class="title">{{ _("mas.register.create_account.heading") }}</h1>
     {% endcall %}
 
     {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
-      <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+      <!--<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required /> -->
+      {{ password_field(input_attributes=field.attributes(f), input_autocomplete="new-password") }}
     {% endcall %}
-
+    
     {% call(f) field.field(label=_("common.password_confirm"), name="password_confirm", form_state=form) %}
-      <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+      <!--<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required /> -->
+      {{ password_field(input_attributes=field.attributes(f), input_autocomplete="new-password") }}   
     {% endcall %}
-
     {% if branding.tos_uri %}
       {% call(f) field.field(label=_("mas.register.terms_of_service", tos_uri=branding.tos_uri), name="accept_terms", form_state=form, inline=true, class="my-4") %}
         <div class="cpd-form-inline-field-control">

translations/en.json

@@ -10,11 +10,11 @@
     },
     "continue": "Continue",
     "@continue": {
-      "context": "form_post.html:25:28-48, pages/consent.html:57:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:68:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:74:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/registration_token.html:41:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:37:28-48"
+      "context": "form_post.html:25:28-48, pages/consent.html:57:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:69:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:77:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/registration_token.html:41:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:37:28-48"
     },
     "create_account": "Create Account",
     "@create_account": {
-      "context": "pages/login.html:94:33-59, pages/upstream_oauth2/do_register.html:191:26-52"
+      "context": "pages/login.html:95:33-59, pages/upstream_oauth2/do_register.html:191:26-52"
     },
     "sign_in": "Sign in",
     "@sign_in": {
@@ -79,7 +79,7 @@
     },
     "email_address": "Email address",
     "@email_address": {
-      "context": "pages/recovery/start.html:34:33-58, pages/register/password.html:38:33-58, pages/upstream_oauth2/do_register.html:114:37-62"
+      "context": "pages/recovery/start.html:34:33-58, pages/register/password.html:40:33-58, pages/upstream_oauth2/do_register.html:114:37-62"
     },
     "loading": "Loading…",
     "@loading": {
@@ -91,15 +91,15 @@
     },
     "password": "Password",
     "@password": {
-      "context": "pages/login.html:56:37-57, pages/reauth.html:28:35-55, pages/register/password.html:42:33-53"
+      "context": "pages/login.html:57:37-57, pages/reauth.html:28:35-55, pages/register/password.html:44:33-53"
     },
     "password_confirm": "Confirm password",
     "@password_confirm": {
-      "context": "pages/register/password.html:46:33-61"
+      "context": "pages/register/password.html:49:33-61"
     },
     "username": "Username",
     "@username": {
-      "context": "pages/login.html:50:37-57, pages/register/index.html:30:35-55, pages/register/password.html:34:33-53, pages/upstream_oauth2/do_register.html:101:35-55, pages/upstream_oauth2/do_register.html:106:39-59"
+      "context": "pages/login.html:51:37-57, pages/register/index.html:30:35-55, pages/register/password.html:36:33-53, pages/upstream_oauth2/do_register.html:101:35-55, pages/upstream_oauth2/do_register.html:106:39-59"
     }
   },
   "error": {
@@ -419,43 +419,43 @@
     "login": {
       "call_to_register": "Don't have an account yet?",
       "@call_to_register": {
-        "context": "pages/login.html:90:13-44"
+        "context": "pages/login.html:91:13-44"
       },
       "continue_with_provider": "Continue with %(provider)s",
       "@continue_with_provider": {
-        "context": "pages/login.html:81:15-67, pages/register/index.html:53:15-67",
+        "context": "pages/login.html:82:15-67, pages/register/index.html:53:15-67",
         "description": "Button to log in with an upstream provider"
       },
       "description": "Please sign in to continue:",
       "@description": {
-        "context": "pages/login.html:29:29-55"
+        "context": "pages/login.html:30:29-55"
       },
       "forgot_password": "Forgot password?",
       "@forgot_password": {
-        "context": "pages/login.html:61:35-65",
+        "context": "pages/login.html:62:35-65",
         "description": "On the login page, link to the account recovery process"
       },
       "headline": "Sign in",
       "@headline": {
-        "context": "pages/login.html:28:31-54"
+        "context": "pages/login.html:29:31-54"
       },
       "link": {
         "description": "Linking your <span class=\"break-keep text-links\">%(provider)s</span> account",
         "@description": {
-          "context": "pages/login.html:24:29-75"
+          "context": "pages/login.html:25:29-75"
         },
         "headline": "Sign in to link",
         "@headline": {
-          "context": "pages/login.html:22:31-59"
+          "context": "pages/login.html:23:31-59"
         }
       },
       "no_login_methods": "No login methods available.",
       "@no_login_methods": {
-        "context": "pages/login.html:100:11-42"
+        "context": "pages/login.html:101:11-42"
       },
       "username_or_email": "Username or Email",
       "@username_or_email": {
-        "context": "pages/login.html:46:37-69"
+        "context": "pages/login.html:47:37-69"
       }
     },
     "navbar": {
@@ -613,7 +613,7 @@
     "register": {
       "call_to_login": "Already have an account?",
       "@call_to_login": {
-        "context": "pages/register/index.html:59:35-66, pages/register/password.html:77:33-64",
+        "context": "pages/register/index.html:59:35-66, pages/register/password.html:80:33-64",
         "description": "Displayed on the registration page to suggest to log in instead"
       },
       "continue_with_email": "Continue with email address",
@@ -627,12 +627,12 @@
         },
         "heading": "Create an account",
         "@heading": {
-          "context": "pages/register/index.html:21:29-69, pages/register/password.html:18:27-67"
+          "context": "pages/register/index.html:21:29-69, pages/register/password.html:20:27-67"
         }
       },
       "terms_of_service": "I agree to the <a href=\"%s\" data-kind=\"primary\" class=\"cpd-link\">Terms and Conditions</a>",
       "@terms_of_service": {
-        "context": "pages/register/password.html:51:35-95, pages/upstream_oauth2/do_register.html:179:35-95"
+        "context": "pages/register/password.html:54:35-95, pages/upstream_oauth2/do_register.html:179:35-95"
       }
     },
     "registration_token": {