Use GOVUKDesignSystemFormBuilder components for Devise forms

app/views/devise/confirmations/new.html.erb

@@ -3,14 +3,13 @@
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-  </div>
+  <%= f.govuk_email_field :email,
+    label: { text: "Email address" },
+    autocomplete: "email",
+    value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email)
+  %>
 
-  <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
-  </div>
+  <%= f.govuk_submit "Resend confirmation instructions" %>
 <% end %>
 
 <%= render "devise/shared/links" %>

app/views/devise/confirmations/reset.html.erb

@@ -1,6 +1,6 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <h1 class="govuk-heading-l"> Check your email</h1>
+    <h1 class="govuk-heading-l">Check your email</h1>
     <p class="govuk-body">We’ve sent a link to reset your password to <strong><%= @email %></strong>.</p>
     <p class="govuk-body">You’ll only this receive this link if your email address already exists in our system.</p>
     <p class="govuk-body">If you don’t receive the email within 5 minutes, check your spam or junk folders. Try again if you still haven’t received the email.</p>

app/views/devise/passwords/edit.html.erb

@@ -3,17 +3,16 @@
     <div class="govuk-grid-column-two-thirds">
       <h1 class="govuk-heading-l">Reset your password</h1>
       <%= render "devise/shared/error_messages", resource: resource %>
+
       <%= f.hidden_field :reset_password_token %>
 
-      <div class="govuk-form-group">
-        <%= f.label :password, "New password", class: "govuk-label" %>
-        <% if @minimum_password_length %>
-          <div class="govuk-hint">Your password must be at least 8 characters and hard to guess.</div>
-        <% end %>
-        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "govuk-input"  %>
-      </div>
+      <%= f.govuk_password_field :password,
+        label: { text: "New password" },
+        hint: @minimum_password_length ? { text: "Your password must be at least #{@minimum_password_length} characters and hard to guess." } : nil,
+        autocomplete: "new-password"
+      %>
 
-      <%= f.submit "Reset password", class: "govuk-button" %>
+      <%= f.govuk_submit "Reset password" %>
     </div>
   </div>
 <% end %>

app/views/devise/passwords/new.html.erb

@@ -14,12 +14,12 @@
       <p class="govuk-body">Enter the email address you used to create your account.</p>
       <p class="govuk-body">We’ll email you a link to reset your password. This link will expire in 3 hours.</p>
 
-      <div class="govuk-form-group">
-        <%= f.label :email, "Email address", class: "govuk-label" %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_email_field :email,
+        label: { text: "Email address" },
+        autocomplete: "email"
+      %>
 
-      <%= f.submit "Send email", class: "govuk-button" %>
+      <%= f.govuk_submit "Send email" %>
     </div>
   </div>
 <% end %>

app/views/devise/registrations/edit.html.erb

@@ -10,20 +10,16 @@
     <div class="govuk-grid-column-two-thirds">
       <h1 class="govuk-heading-l">Change your password</h1>
 
-      <div class="govuk-form-group">
-        <%= f.label :current_password, class: "govuk-label" %>
-        <%= f.password_field :current_password, autocomplete: "current-password", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_password_field :current_password,
+        autocomplete: "current-password"
+      %>
 
-      <div class="govuk-form-group">
-        <%= f.label :password, class: "govuk-label" %>
-        <div id="undefined-hint" class="govuk-hint">
-          Your password must be at least 8 characters and hard to guess.
-        </div>
-        <%= f.password_field :password, autocomplete: "new-password", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_password_field :password,
+        hint: @minimum_password_length ? { text: "Your password must be at least #{@minimum_password_length} characters and hard to guess." } : nil,
+        autocomplete: "new-password"
+      %>
 
-      <%= f.submit "Update", class: "govuk-button" %>
+      <%= f.govuk_submit "Update" %>
     </div>
   </div>
 <% end %>

app/views/devise/registrations/new.html.erb

@@ -3,27 +3,21 @@
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+  <%= f.govuk_email_field :email,
+    label: { text: "Email address" },
+    autocomplete: "email"
+  %>
 
-  <div class="field">
-    <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-  </div>
+  <%= f.govuk_password_field :password,
+    hint: @minimum_password_length ? { text: "#{@minimum_password_length} characters minimum" } : nil,
+    autocomplete: "new-password"
+  %>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
+  <%= f.govuk_password_field :password_confirmation,
+    autocomplete: "new-password"
+  %>
 
-  <div class="actions">
-    <%= f.submit "Sign up" %>
-  </div>
+  <%= f.govuk_submit "Sign up" %>
 <% end %>
 
 <%= render "devise/shared/links" %>

app/views/devise/sessions/new.html.erb

@@ -3,17 +3,16 @@
     <div class="govuk-grid-column-two-thirds">
       <h1 class="govuk-heading-l">Sign in to your account to submit CORE data</h1>
 
-      <div class="govuk-form-group">
-        <%= f.label :email, "Email address", class: "govuk-label" %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_email_field :email,
+        label: { text: "Email address" },
+        autocomplete: "email"
+      %>
 
-      <div class="govuk-form-group">
-        <%= f.label :password, class: "govuk-label" %>
-        <%= f.password_field :password, autocomplete: "current-password", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_password_field :password,
+        autocomplete: "current-password"
+      %>
 
-      <%= f.submit "Sign in", class: "govuk-button" %>
+      <%= f.govuk_submit "Sign in" %>
     </div>
   </div>
 <% end %>

app/views/devise/unlocks/new.html.erb

@@ -3,14 +3,12 @@
 <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+  <%= f.govuk_email_field :email,
+    label: { text: "Email address" },
+    autocomplete: "email"
+  %>
 
-  <div class="actions">
-    <%= f.submit "Resend unlock instructions" %>
-  </div>
+  <%= f.govuk_submit "Resend unlock instructions" %>
 <% end %>
 
 <%= render "devise/shared/links" %>

app/views/users/account/personal_details.html.erb

@@ -10,17 +10,16 @@
     <div class="govuk-grid-column-two-thirds">
       <h1 class="govuk-heading-l">Change your personal details</h1>
 
-      <div class="govuk-form-group">
-        <%= f.label :name, class: "govuk-label" %>
-        <%= f.text_field :name, autocomplete: "name", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_text_field :name,
+        autocomplete: "name"
+      %>
 
-      <div class="govuk-form-group">
-        <%= f.label :email, class: "govuk-label" %>
-        <%= f.email_field :email, autocomplete: "email", class: "govuk-input" %>
-      </div>
+      <%= f.govuk_email_field :email,
+        label: { text: "Email address" },
+        autocomplete: "email"
+      %>
 
-      <%= f.submit "Save changes", class: "govuk-button" %>
+      <%= f.govuk_submit "Save changes" %>
     </div>
   </div>
 <% end %>

spec/features/form/helpers.rb

@@ -18,8 +18,8 @@ module Helpers
 
   def sign_in(user)
     visit("/case_logs")
-    fill_in("user_email", with: user.email)
-    fill_in("user_password", with: user.password)
+    fill_in("user[email]", with: user.email)
+    fill_in("user[password]", with: user.password)
     click_button("Sign in")
   end
 end

spec/features/user_spec.rb

@@ -9,8 +9,8 @@ RSpec.describe "User Features" do
 
     it " is redirected to case logs after signing in" do
       visit("/case_logs")
-      fill_in("user_email", with: user.email)
-      fill_in("user_password", with: "pAssword1")
+      fill_in("user[email]", with: user.email)
+      fill_in("user[password]", with: "pAssword1")
       click_button("Sign in")
       expect(page).to have_current_path("/case_logs")
     end
@@ -25,34 +25,34 @@ RSpec.describe "User Features" do
 
     it " is redirected to check your email page after submitting an email on the reset password page" do
       visit("/users/password/new")
-      fill_in("user_email", with: user.email)
+      fill_in("user[email]", with: user.email)
       click_button("Send email")
       expect(page).to have_content("Check your email")
     end
 
     it " is shown their email on the password reset confirmation page" do
       visit("/users/password/new")
-      fill_in("user_email", with: user.email)
+      fill_in("user[email]", with: user.email)
       click_button("Send email")
       expect(page).to have_content(user.email)
     end
 
     it " is shown the reset password confirmation page even if their email doesn't exist in the system" do
       visit("/users/password/new")
-      fill_in("user_email", with: "idontexist@example.com")
+      fill_in("user[email]", with: "idontexist@example.com")
       click_button("Send email")
       expect(page).to have_current_path("/confirmations/reset?email=idontexist%40example.com")
     end
 
     it " is sent a reset password email" do
       visit("/users/password/new")
-      fill_in("user_email", with: user.email)
+      fill_in("user[email]", with: user.email)
       expect { click_button("Send email") }.to change { ActionMailer::Base.deliveries.count }.by(1)
     end
 
     it " is shown the password reset confirmation page and successful flash message shows" do
       visit("/users/password/new")
-      fill_in("user_email", with: user.email)
+      fill_in("user[email]", with: user.email)
       click_button("Send email")
       expect(page).to have_css ".govuk-notification-banner.govuk-notification-banner--success"
     end
@@ -68,8 +68,8 @@ RSpec.describe "User Features" do
       visit("/")
       expect(page).to have_link("Case logs")
       click_link("Case logs")
-      fill_in("user_email", with: user.email)
-      fill_in("user_password", with: "pAssword1")
+      fill_in("user[email]", with: user.email)
+      fill_in("user[password]", with: "pAssword1")
       click_button("Sign in")
       expect(page).to have_current_path("/case_logs")
     end
@@ -83,8 +83,8 @@ RSpec.describe "User Features" do
   context "Your Account " do
     before(:each) do
       visit("/case_logs")
-      fill_in("user_email", with: user.email)
-      fill_in("user_password", with: "pAssword1")
+      fill_in("user[email]", with: user.email)
+      fill_in("user[password]", with: "pAssword1")
       click_button("Sign in")
     end
 
@@ -114,8 +114,8 @@ RSpec.describe "User Features" do
       visit("/users/account")
       click_link("change-password")
       expect(page).to have_content("Change your password")
-      fill_in("user_current_password", with: "pAssword1")
-      fill_in("user_password", with: "Password123!")
+      fill_in("user[current_password]", with: "pAssword1")
+      fill_in("user[password]", with: "Password123!")
       click_button("Update")
       expect(page).to have_current_path("/users/account")
     end
@@ -124,7 +124,7 @@ RSpec.describe "User Features" do
       visit("/users/account")
       click_link("change-name")
       expect(page).to have_content("Change your personal details")
-      fill_in("user_name", with: "Test New")
+      fill_in("user[name]", with: "Test New")
       click_button("Save changes")
       expect(page).to have_current_path("/users/account")
       expect(page).to have_content("Test New")