fix reveal button password (#51)

Author: odelcroi

tchap/resources/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">
@@ -94,11 +95,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 %}
@@ -121,7 +122,6 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
           {{ _("mas.login.call_to_register") }}
         </p>
 
-
         {% set params = next["params"] | default({}) | to_params(prefix="?") %}
         {{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
       </div>

tchap/resources/translations/en.json

@@ -10,7 +10,7 @@
     },
     "continue": "Continue",
     "@continue": {
-      "context": "consent.html:57:28-48, form_post.html:25:28-48, pages/consent.html:64:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:110: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": "consent.html:57:28-48, form_post.html:25:28-48, pages/consent.html:64:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:111: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": {
@@ -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:120:37-62"
+      "context": "pages/recovery/start.html:34:33-58, pages/register/password.html:40:33-58, pages/upstream_oauth2/do_register.html:120:37-62"
     },
     "hide": "",
     "@hide": {},
@@ -93,17 +93,17 @@
     },
     "password": "Password",
     "@password": {
-      "context": "pages/login.html:98:37-57, pages/reauth.html:28:35-55, pages/register/password.html:42:33-53"
+      "context": "pages/login.html:99: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"
     },
     "show": "",
     "@show": {},
     "username": "Username",
     "@username": {
-      "context": "pages/login.html:92:37-57, pages/register/index.html:30:35-55, pages/register/password.html:34:33-53, pages/upstream_oauth2/do_register.html:104:35-55, pages/upstream_oauth2/do_register.html:109:39-59"
+      "context": "pages/login.html:93:37-57, pages/register/index.html:30:35-55, pages/register/password.html:36:33-53, pages/upstream_oauth2/do_register.html:104:35-55, pages/upstream_oauth2/do_register.html:109:39-59"
     }
   },
   "error": {
@@ -423,34 +423,34 @@
     "login": {
       "call_to_register": "Don't have an account yet?",
       "@call_to_register": {
-        "context": "pages/login.html:121:13-44"
+        "context": "pages/login.html:122:13-44"
       },
       "continue_with_provider": "Continue with %(provider)s",
       "@continue_with_provider": {
-        "context": "pages/login.html:66:11-63, pages/register/index.html:53:15-67",
+        "context": "pages/login.html:67:11-63, 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:30:34-60"
+        "context": "pages/login.html:31:34-60"
       },
       "forgot_password": "Forgot password?",
       "@forgot_password": {
-        "context": "pages/login.html:103:35-65",
+        "context": "pages/login.html:104:35-65",
         "description": "On the login page, link to the account recovery process"
       },
       "headline": "Sign in",
       "@headline": {
-        "context": "pages/login.html:29:31-54"
+        "context": "pages/login.html:30:31-54"
       },
       "link": {
         "description": "Linking your <span class=\"break-keep text-links\">%(provider)s</span> account",
         "@description": {
-          "context": "pages/login.html:25:29-75"
+          "context": "pages/login.html:26:29-75"
         },
         "headline": "Sign in to link",
         "@headline": {
-          "context": "pages/login.html:23:31-59"
+          "context": "pages/login.html:24:31-59"
         }
       },
       "no_login_methods": "No login methods available.",
@@ -459,7 +459,7 @@
       },
       "username_or_email": "Username or Email",
       "@username_or_email": {
-        "context": "pages/login.html:88:37-69"
+        "context": "pages/login.html:89:37-69"
       }
     },
     "navbar": {
@@ -617,7 +617,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",
@@ -631,12 +631,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:185:35-95"
+        "context": "pages/register/password.html:54:35-95, pages/upstream_oauth2/do_register.html:185:35-95"
       }
     },
     "registration_token": {

templates/components/password_field.html

@@ -2,8 +2,9 @@
 {% 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 />
+<!-- use @vector-im/compound-web/src/components/Form/Controls/Action/Action.module.css -->
+<div class="password-field-container container">
+  <input {{ input_attributes }} class="cpd-text-control control" type="password" autocomplete="{{input_autocomplete}}" required />
   <button type="button" class="action" onclick="togglePasswordVisibility(this)">
     {{ icon.visibility_off() }}
   </button>