Feat: Add autocomplete attribute to certain user-data specific fields

openlibrary/plugins/upstream/forms.py

@@ -28,8 +28,15 @@ def find_ia_account(email=None):
 
 
 Login = Form(
-    Textbox('username', description=_('Username'), klass='required'),
-    Password('password', description=_('Password'), klass='required'),
+    Textbox(
+        'username', description=_('Username'), klass='required', autocomplete="username"
+    ),
+    Password(
+        'password',
+        description=_('Password'),
+        klass='required',
+        autocomplete="current-password",
+    ),
     Hidden('redirect'),
     Hidden('action'),
 )
@@ -90,6 +97,7 @@ class RegisterForm(Form):
                 email_not_disposable,
                 email_domain_not_blocked,
             ],
+            autocomplete="email",
         ),
         Textbox(
             'username',
@@ -101,6 +109,7 @@ class RegisterForm(Form):
             pattern=vlogin.rexp.pattern,
             title=vlogin.msg,
             required="true",
+            autocomplete="username",
         ),
         Password(
             'password',
@@ -110,6 +119,7 @@ class RegisterForm(Form):
             minlength="3",
             maxlength="20",
             required="true",
+            autocomplete="new-password",
         ),
     )
 
@@ -150,9 +160,15 @@ def verify_password(password):
         'email',
         description=_("Your email address"),
         validators=[vemail, email_already_used],
+        autocomplete="email",
     )
 )
 
 ResetPassword = Form(
-    Password('password', description=_("Choose a password"), validators=[vpass])
+    Password(
+        'password',
+        description=_("Choose a password"),
+        validators=[vpass],
+        autocomplete="new-password",
+    )
 )

openlibrary/templates/account/email/forgot-ia.html

@@ -22,13 +22,13 @@ <h2>$_('Forgot Your Internet Archive Email?')</h2>
 	<div>
 	  <label>$_('Open Library Email')</label>
 	</div>
-	<input type="text" name="email"/>
+	<input type="text" name="email" autocomplete="email"/>
       </div>
       <div class="form-row">
 	<div>
 	  <label>$_('Password')</label>
 	</div>
-	<input type="password" name="password"/>
+	<input type="password" name="password" autocomplete="current-password"/>
       </div>
       <div>
 	<input type="submit" value="$_('Retrieve Archive.org Email')"/>

openlibrary/templates/account/verify/failed.html

@@ -15,7 +15,7 @@ <h1>$_("Oops!")</h1>
         <input type="hidden" name="action" value="resent_verification_link"/>
 
         <div class="input">
-        <input type="text" name="email" id="email" value="$email" placeholder="$_('Enter your email address here')"/>
+        <input type="text" name="email" id="email" value="$email" autocomplete="email" placeholder="$_('Enter your email address here')"/>
         </div>
         $if email:
             <div class="invalid clearfix" htmlfor="email">$_("No user registered with this email address.")</div>

openlibrary/templates/login.html

@@ -52,7 +52,7 @@ <h1 class="ol-signup-hero__title">$_("Log In")</h1>
                 </div>
 
                 <div class="input">
-                <input type="email" id="username" name="username" value="$(form.username.value or query_param('username'))" placeholder="$_('Email')" autocapitalize="off" autocorrect="off" required />
+                <input type="email" id="username" name="username" autocomplete="username" value="$(form.username.value or query_param('username'))" placeholder="$_('Email')" autocapitalize="off" autocorrect="off" required />
                 </div>
             </div>
 
@@ -62,7 +62,7 @@ <h1 class="ol-signup-hero__title">$_("Log In")</h1>
                     <a class="ol-signup-form__note" href="https://archive.org/forgot-password">$_("Forgot your Password?")</a>
                 </div>
                 <div class="input">
-                    <input type="password" placeholder="$_('Password')" id="password" name="password" value="$form.password.value" required />
+                    <input type="password" autocomplete="current-password" placeholder="$_('Password')" id="password" name="password" value="$form.password.value" required />
                     <a href="javascript:;" class="password-visibility-toggle ol-signup-form__icon-wrap">
                         <img src="/static/images/icons/icon_eye-closed.svg" title="$_('Toggle Password Visibility')" alt="$_('Toggle Password Visibility')"/>
                     </a>