Moving to single password field for registration (internetarchive#7729)

* Use localized strings * Adjust margin for password inputs --------- Co-authored-by: James Champ <jameschamp@acm.org>
benbdeitch · Feb 13, 2024 · 5098757 · 5098757
1 parent 3765ba9
commit 5098757
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js
@@ -526,4 +526,10 @@ jQuery(function () {
             .then(module => module.initBreadcrumbSelect(crumbs));
     }
 
+    // Password visibility toggle:
+    const passwordVisibilityToggle = document.querySelector('.password-visibility-toggle')
+    if (passwordVisibilityToggle) {
+        import(/* webpackChunkName: "password-visibility-toggle" */ './password-toggle')
+            .then(module => module.initPasswordToggling(passwordVisibilityToggle))
+    }
 });
diff --git a/openlibrary/plugins/openlibrary/js/password-toggle.js b/openlibrary/plugins/openlibrary/js/password-toggle.js
@@ -0,0 +1,19 @@
+/**
+ * Adds ability to toggle a password field's visibilty.
+ *
+ * @param {HTMLElement} elem Reference to affordance that toggles a password input's visibility
+ */
+export function initPasswordToggling(elem) {
+    const i18nStrings = JSON.parse(elem.dataset.i18n)
+    const passwordInput = document.querySelector('input[type=password]')
+
+    elem.addEventListener('click', () => {
+        if (passwordInput.type === 'password') {
+            passwordInput.type = 'text'
+            elem.textContent = i18nStrings['hide_password']
+        } else {
+            passwordInput.type = 'password'
+            elem.textContent = i18nStrings['show_password']
+        }
+    })
+}
diff --git a/openlibrary/plugins/upstream/forms.py b/openlibrary/plugins/upstream/forms.py
@@ -102,15 +102,6 @@ class RegisterForm(Form):
             klass='required',
             validators=[vpass],
         ),
-        Password(
-            'password2',
-            description=_('Confirm password'),
-            klass='required',
-            validators=[
-                vpass,
-                EqualToValidator('password', _("Passwords didn't match.")),
-            ],
-        ),
         Checkbox(
             'ia_newsletter',
             description=_(

diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
@@ -29,11 +29,18 @@ <h1>$_("Sign Up")</h1>
         </div>
         <div class="input">
             $:input.render()
+            $if input.name == 'password':
+                $ i18n_strings = {
+                $    "show_password": _('Show password'),
+                $    "hide_password": _('Hide password')
+                $  }
+                <a href="javascript:;" class="password-visibility-toggle" data-i18n="$json_encode(i18n_strings)">$i18n_strings["show_password"]</a>
             <span class="invalid clearfix" id="$(input.id)Message">$input.note</span>
             <span class="sansserif smaller lighter">$:suffix</span>
         </div>
     </div>
 
+
 $if ctx.user:
     $def user_link(): <a href="$ctx.user.key">$ctx.user.displayname</a>
     <p>$:_("You are already logged into Open Library as %(user)s.", user=str(user_link()))</p>
@@ -48,9 +55,7 @@ <h1>$_("Sign Up")</h1>
         $:field(form.email)
         $:field(form.username, suffix=str(screenname_url()))
         $:field(form.password)
-        $:field(form.password2)
 
-        <br/>
         <label>
             $:form.ia_newsletter.render() $:form.ia_newsletter.description
         </label>
@@ -71,5 +76,4 @@ <h1>$_("Sign Up")</h1>
             <a href="javascript:history.go(-1);" class="smaller attn">$_("Cancel")</a>
         </div>
     </form>
-
 </div>
diff --git a/static/css/components/form.olform.less b/static/css/components/form.olform.less
@@ -85,7 +85,8 @@
   }
 
   input[type=number],
-  input[type=text] {
+  input[type=text],
+  input[type=password] {
     margin: 0 10px 5px 0;
   }