Convert PasswordFields to GovukPasswordFields

Converts them directly in the following forms:
- LoginForm
- ConfirmPasswordForm

Changes the password function to return
GovukPasswordField instead of PasswordField which
effects the following forms:
- RegisterUserForm
- RegisterUserFromInviteForm
- RegisterUserFromOrgInviteForm
- NewPasswordForm
- ChangePasswordForm

It also updates StringField on RegisterUserFromOrgInviteForm
to GovukTextInputField

Also includes changes to templates that use this
form and associated tests.

app/main/forms.py

@@ -180,10 +180,14 @@ def international_phone_number(label='Mobile number'):
 
 
 def password(label='Password'):
-    return PasswordField(label,
-                         validators=[DataRequired(message='Cannot be empty'),
-                                     Length(8, 255, message='Must be at least 8 characters'),
-                                     CommonlyUsedPassword(message='Choose a password that’s harder to guess')])
+    return GovukPasswordField(
+        label,
+        validators=[
+            DataRequired(message='Cannot be empty'),
+            Length(8, 255, message='Must be at least 8 characters'),
+            CommonlyUsedPassword(message='Choose a password that’s harder to guess')
+        ]
+    )
 
 
 class GovukTextInputField(StringField):
@@ -547,7 +551,7 @@ class LoginForm(StripWhitespaceForm):
         DataRequired(message='Cannot be empty'),
         ValidEmail()
     ])
-    password = PasswordField('Password', validators=[
+    password = GovukPasswordField('Password', validators=[
         DataRequired(message='Enter your password')
     ])
 
@@ -590,7 +594,7 @@ class RegisterUserFromOrgInviteForm(StripWhitespaceForm):
             email_address=invited_org_user.email_address,
         )
 
-    name = StringField(
+    name = GovukTextInputField(
         'Full name',
         validators=[DataRequired(message='Cannot be empty')]
     )
@@ -1116,7 +1120,7 @@ class ConfirmPasswordForm(StripWhitespaceForm):
         self.validate_password_func = validate_password_func
         super(ConfirmPasswordForm, self).__init__(*args, **kwargs)
 
-    password = PasswordField(u'Enter password')
+    password = GovukPasswordField(u'Enter password')
 
     def validate_password(self, field):
         if not self.validate_password_func(field.data):

app/templates/views/new-password.html

@@ -1,5 +1,4 @@
 {% extends "withoutnav_template.html" %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -19,7 +18,7 @@
         You can now create a new password for your account.
       </p>
       {% call form_wrapper() %}
-        {{ textbox(form.new_password, hint="At least 8 characters") }}
+        {{ form.new_password(param_extensions={"hint": {"text": "At least 8 characters"}}) }}
         {{ page_footer("Continue") }}
       {% endcall %}
     {% else %}

app/templates/views/organisations/organisation/settings/edit-name/confirm.html

@@ -1,5 +1,4 @@
 {% extends "org_template.html" %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -19,7 +18,7 @@
     <div class="govuk-grid-column-three-quarters">
 
     {% call form_wrapper() %}
-      {{ textbox(form.password, autocomplete='current-password') }}
+      {{ form.password(param_extensions={"autocomplete": "current-password"}) }}
       <p class="govuk-body"> Your organisation name will be changed from {{ current_org.name }} to {{ new_name }} </p>
       {{ page_footer('Confirm') }}
     {% endcall %}

app/templates/views/register-from-invite.html

@@ -22,16 +22,20 @@ Create an account
         well as the password, but should not be visible to users, nor should
         the view process the input.
       #}
-      <div class="visually-hidden">
+      <div class="govuk-visually-hidden">
         <input type="email" name="username" id="username" value="{{ invited_user.email_address }}" disabled="disabled" tabindex="-1" aria-hidden="true" autocomplete="username" />
       </div>
-      {{ textbox(form.name, width='3-4') }}
+      {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       {% if invited_user.auth_type == 'sms_auth' %}
         <div class="extra-tracking">
           {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
         </div>
       {% endif %}
-      {{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
+      {{ form.password(param_extensions={
+          "classes": "govuk-!-width-three-quarters",
+          "hint": {"text": "At least 8 characters"},
+          "autocomplete": "new-password"
+        }) }}
       {{ page_footer("Continue") }}
       {{form.service}}
       {{form.email_address}}

app/templates/views/register-from-org-invite.html

@@ -14,11 +14,15 @@ Create an account
     <h1 class="heading-large">Create an account</h1>
     <p class="govuk-body">Your account will be created with this email: {{invited_org_user.email_address}}</p>
     {% call form_wrapper() %}
-      {{ textbox(form.name, width='3-4') }}
+      {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       <div class="extra-tracking">
         {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
       </div>
-      {{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
+      {{ form.password(param_extensions={
+          "classes": "govuk-!-width-three-quarters",
+          "hint": {"text": "At least 8 characters"},
+          "autocomplete": "new-password"
+        }) }}
       {{ page_footer("Continue") }}
       {{form.organisation}}
       {{form.email_address}}

app/templates/views/register.html

@@ -19,7 +19,7 @@ Create an account
         {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
       </div>
       <input class="govuk-visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
-      {{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
+      {{ form.password(param_extensions={"hint": {"text": "At least 8 characters"}, "classes": "govuk-!-width-three-quarters", "autocomplete": "new-password"}) }}
       {{form.auth_type}}
       {{ page_footer("Continue") }}
     {% endcall %}

app/templates/views/service-settings/confirm.html

@@ -19,7 +19,7 @@
     <div class="govuk-grid-column-three-quarters">
 
     {% call form_wrapper() %}
-      {{ textbox(form.password, autocomplete='current-password') }}
+      {{ form.password(param_extensions={"autocomplete": "current-password"}) }}
       {{ page_footer(
         'Confirm',
         destructive=destructive

app/templates/views/signin.html

@@ -33,7 +33,7 @@
 
     {% call form_wrapper(autocomplete=True) %}
       {{ textbox(form.email_address, autocomplete='email') }}
-      {{ textbox(form.password, autocomplete='current-password') }}
+      {{ form.password(param_extensions={"autocomplete": "current-password"}) }}
       {{ page_footer("Continue", secondary_link=url_for('.forgot_password'), secondary_link_text="Forgotten your password?") }}
     {% endcall %}
   </div>

app/templates/views/user-profile/authenticate.html

@@ -19,7 +19,7 @@
     <div class="govuk-grid-column-three-quarters">
 
     {% call form_wrapper(autocomplete=True) %}
-      {{ textbox(form.password, autocomplete='current-password') }}
+      {{ form.password(param_extensions={"autocomplete": "current-password"}) }}
       {{ page_footer('Confirm') }}
     {% endcall %}
     </div>

app/templates/views/user-profile/change-password.html

@@ -1,5 +1,4 @@
 {% extends "withoutnav_template.html" %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -18,8 +17,8 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
       {% call form_wrapper(autocomplete=True) %}
-        {{ textbox(form.old_password) }}
-        {{ textbox(form.new_password) }}
+        {{ form.old_password }}
+        {{ form.new_password }}
         {{ page_footer('Save') }}
       {% endcall %}
     </div>