Merge pull request #70 from ministryofjustice/error-message-update

Error message update

app/assets/javascripts/income_calculator.coffee

@@ -62,13 +62,17 @@ sendToDatabase = (remit, pay) ->
 checkValidation = ->
   $('input[data-check]').each ->
     test = $(this)
-    error = $('small.error[data-check-error=' + test.data('check') + ']')
+    error = $('label.error[data-check-error=' + test.data('check') + ']')
+    parent = error.parents('.form-group').children('div')
     if test.val().length == 0 or test.is(':radio') and $('input[name=' + test.attr('name') + ']:checked').val() == undefined
       error.removeClass 'hide'
+      parent.addClass 'field_with_errors'
     else
       error.addClass 'hide'
+      parent.removeClass 'field_with_errors'
+
     return
-  $('small.error:visible').length == 0
+  $('label.error:visible').length == 0
 
 setupPage = ->
   $('.panel.callout').hide()

app/assets/stylesheets/errors.scss

@@ -1,16 +1,14 @@
 @import 'colours';
 
-
-
 div.field_with_errors input {
   border-color: $error-colour;
 }
 
-div.form-group > div.field_with_errors {
+div.form-group div.field_with_errors {
   border-left: 2px solid $error-colour;
   padding-left: 10px;
 }
 
-div.field_with_errors > label.error {
+div.field_with_errors label.error {
   color: $error-colour;
 }

app/assets/stylesheets/r2_calculator.scss

@@ -1,5 +1,5 @@
 #r2_calculator {
-  .row {
-    margin-top:1em;
+  .form-group {
+    margin-bottom:1em;
   }
 }

app/models/user.rb

@@ -13,14 +13,13 @@ class User < ActiveRecord::Base
   scope :sorted_by_email, -> {  all.order(:email) }
 
   email_regex = /\A([^@\s]+)@(hmcts\.gsi|digital\.justice)\.gov\.uk\z/i
-  email_message =  <<-END.gsub(/^\s+\|/, '').gsub(/\n/, '')
-    |you’re not able to create an account with this email
-    | address. Only '[email protected]' emails can be used. For more help,
-    | contact us via #{Settings.mail_tech_support}
-  END
-
-  validates :email, format: { with: email_regex, on: :create, message: email_message }
   validates :role, :name, presence: true
+  validates :email, format: {
+    with: email_regex,
+    on: [:create, :update],
+    allow_nil: true,
+    message: I18n.t('dictionary.invalid_email', email: Settings.mail_tech_support)
+  }
   validates :role, inclusion: {
     in: ROLES,
     message: "%{value} is not a valid role",

app/views/calculator/income.html.slim

@@ -4,45 +4,51 @@ h2 Income check
 
 #r2_calculator
   .row
-    .small-12.medium-3.large-3.columns
-      label for='fee' Fee
-      .row.collapse.prefix-radius
-        .small-2.medium-2.large-3.columns
-          span.prefix
-            label.inline for='fee' £
-        .small-10.medium-10.large-9.columns style="padding:0px;"
-          input data-check='fee' id="fee" name="fee" type="number"
-        small.error data-check-error='fee' Please enter a fee value
+    .small-12.medium-3.large-3.columns.form-group
+      #fee-block
+        label.error data-check-error='fee' for='fee' Please enter a fee value
+        label for='fee' Fee
+        .row.collapse.prefix-radius
+          .small-2.medium-2.large-3.columns
+            span.prefix
+              label.inline for='fee' £
+          .small-10.medium-10.large-9.columns style="padding:0px;"
+            input data-check='fee' id="fee" name="fee" type="number"
   .row
-    .small-12.medium-3.large-3.columns
-      .row
-        .small-12.columns
-          label for='couple-no'
-            input id='couple-no' name="couple" type="radio" value='false'
-            |  Single
-          label for='couple-yes'
-            input data-check='couple' id='couple-yes' name="couple" type="radio" value='true'
-            |  Part of a couple
-      small.error data-check-error='couple' Please select a marital status
+    .small-12.columns.form-group
+      #status-block
+        label.error data-check-error='couple' Please select a marital status
+        .row
+          .columns.small-4
+            label Marital status
+            label for='couple-no'
+              input data-check='couple' id='couple-no' name="couple" type="radio" value='false'
+              |  Single
+            label for='couple-yes'
+              input data-check='couple' id='couple-yes' name="couple" type="radio" value='true'
+              |  Part of a couple
+
 
   .row
-    .small-12.medium-6.large-5.columns
-      label for='children' Number of children
-      .row
-        .columns.small-3
-          input data-check='children' id='children' type="number" min=0
-      small.error data-check-error='children' Please select a number of children
+    .small-12.medium-6.large-5.columns.form-group
+      #child-block
+        label.error data-check-error='children' for='children' Please select a number of children
+        label for='children' Number of children
+        .row
+          .columns.small-3
+            input data-check='children' id='children' type="number" min=0
 
   .row
-    .small-12.medium-3.large-3.columns
-      label for='income' Total monthly income
-      .row.collapse.prefix-radius
-        .small-2.medium-2.large-3.columns
-          span.prefix
-            label.inline for='income' £
-        .small-10.medium-10.large-9.columns
-          input data-check='income' name="income" id="income" type="number"
-        small.error data-check-error='income' Please enter an income
+    .small-12.medium-3.large-3.columns.form-group
+      #income-block
+        label.error data-check-error='income' for='income' Please enter an income
+        label for='income' Total monthly income
+        .row.collapse.prefix-radius
+          .small-2.medium-2.large-3.columns
+            span.prefix
+              label.inline for='income' £
+          .small-10.medium-10.large-9.columns
+            input data-check='income' name="income" id="income" type="number"
 
 .row
   .small-12.medium-8.large-5.columns

app/views/users/edit.html.slim

@@ -1,14 +1,9 @@
-h2 Edit #{@user.email}
+h2 Edit #{@user.name}
 
 = form_for @user do |f|
-  - if @user.errors.any?
-    #error_explanation
-      h2 = "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:"
-      ul
-        - @user.errors.full_messages.each do |message|
-          li = message
 
   .form-group
+    = f.label :email, @user.errors[:email].join(', ').html_safe, class: 'error' if @user.errors[:email].present?
     = f.label :email
     = f.text_field :email
   .form-group

app/views/users/invitations/edit.html.slim

@@ -1,15 +1,26 @@
 h2
   = t 'devise.invitations.edit.header'
 = form_for resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put } do |f|
-  = devise_error_messages!
   = f.hidden_field :invitation_token
-  p
-    = f.label :password
-    br
-    = f.password_field :password
-  p
-    = f.label :password_confirmation
-    br
-    = f.password_field :password_confirmation
-  p
+  .row
+    .small-12.columns
+      .form-group
+        .row
+          .columns.small-12
+            = f.label :password, resource.errors[:password].join(', ').html_safe, class: 'error' if resource.errors[:password].present?
+        .row
+          .columns.small-12.medium-8.large-5
+            = f.label :password
+            = f.text_field :password, { class: 'form-control' }
+  .row
+    .small-12.columns
+      .form-group
+        .row
+          .columns.small-12
+            = f.label :password_confirmation, resource.errors[:password_confirmation].join(', ').html_safe, class: 'error' if resource.errors[:password_confirmation].present?
+        .row
+          .columns.small-12.medium-8.large-5
+            = f.label :password_confirmation
+            = f.text_field :password_confirmation, { class: 'form-control' }
+  .actions
     = f.submit t("devise.invitations.edit.submit_button"), class: 'button btn tiny'

app/views/users/invitations/new.html.slim

@@ -1,21 +1,40 @@
 h2
   = t "devise.invitations.new.header"
 = form_for resource, as: resource_name, url: user_invitation_path, html: {:method => :post} do |f|
-  = devise_error_messages!
   - resource.class.invite_key_fields.each do |field|
-    p
-      = f.label field
-      br
-      = f.text_field field
-    p
-  .form-group
-    = f.label :name
-    = f.text_field :name, { class: 'form-control' }
-  .form-group
-    = f.label(:roles, 'Role')
-    = f.collection_select :role, User::ROLES, :to_s, :humanize
-  .form-group
-    = f.label(:office_id, 'Office')
-    = f.collection_select :office_id, Office.all, :id, :name
+    .row
+      .small-12.columns
+        .form-group
+          .row
+            .columns.small-12
+              = f.label field, resource.errors[field].join(', ').html_safe, class: 'error' if resource.errors[field].present?
+          .row
+            .columns.small-12.medium-8.large-5
+              = f.label field
+              = f.text_field field
+    .row
+      .small-12.columns
+        .form-group
+          .row
+            .columns.small-12
+              = f.label :name, resource.errors[:name].join(', ').html_safe, class: 'error' if resource.errors[:name].present?
+          .row
+            .columns.small-12.medium-8.large-5
+              = f.label :name
+              = f.text_field :name, { class: 'form-control' }
+  .row
+    .small-12.columns
+      .form-group
+        .row
+          .columns.small-12.medium-8.large-5
+            = f.label(:roles, 'Role')
+            = f.collection_select :role, User::ROLES, :to_s, :humanize
+  .row
+    .small-12.columns
+      .form-group
+        .row
+          .columns.small-12.medium-8.large-5
+            = f.label(:office_id, 'Office')
+            = f.collection_select :office_id, Office.all, :id, :name
   p
     = f.submit t("devise.invitations.new.submit_button"), class: 'button btn tiny'

app/views/users/passwords/new.html.slim

@@ -1,9 +1,16 @@
 h2 Forgot your password?
+#instructions Enter your email address and click ‘get new password’. You’ll receive an email with a link to create a new password.
 = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
-  = devise_error_messages!
-  .field
-    = f.label :email
-    = f.email_field :email, autofocus: true
+  .row
+    .small-12.columns
+      .form-group
+        .row
+          .columns.small-12
+            = f.label :email, resource.errors[:email].join(', ').html_safe, class: 'error' if resource.errors[:email].present?
+        .row
+          .columns.small-12.medium-8.large-5
+            = f.label :email
+            = f.text_field :email, { class: 'form-control' }
   .actions
     = f.submit "Send me reset password instructions", class: 'button btn tiny'
 = render "devise/shared/links"

app/views/users/sessions/new.html.slim

@@ -1,4 +1,4 @@
-h2 Log in
+h2 Help with fees
 = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
   .row
     .small-12.medium-8.large-5.columns

app/views/users/shared/_links.html.slim

@@ -5,7 +5,7 @@
   = link_to "Sign up", new_registration_path(resource_name)
   br
 - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
-  = link_to "Forgot your password?", new_password_path(resource_name)
+  = link_to "Forgotten password?", new_password_path(resource_name)
   br
 - if devise_mapping.confirmable? && controller_name != 'confirmations'
   = link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name)

config/locales/devise_invitable.en.yml

@@ -12,8 +12,8 @@ en:
         header: "Send invitation"
         submit_button: "Send an invitation"
       edit:
-        header: "Set your password"
-        submit_button: "Set my password"
+        header: "Create a new password"
+        submit_button: "Update password"
     mailer:
       invitation_instructions:
         subject: 'Set up your account to use the benefit checker'

config/locales/en.yml

@@ -20,6 +20,8 @@
 # available at http://guides.rubyonrails.org/i18n.html.
 
 en:
+  dictionary:
+    invalid_email: "You’re not able to create an account with this email address. Only '[email protected]' emails can be used. For more help, <a href='mailto:%{email}'>contact us</a>"
   descriptors:
     r2_calculator: 'Income check'
     feedback: 'Feedback'
@@ -31,6 +33,18 @@ en:
   activerecord:
     errors:
       models:
+        user:
+          attributes:
+            email:
+              blank: 'Enter your email address'
+              not_found: That email is not registered on our system
+            name:
+              blank: You must enter a name for the user
+            password:
+              blank: You must enter a password of at least %{count} characters
+              too_short: The password should be at least %{count} characters
+            password_confirmation:
+              confirmation: This must match the password above
         dwp_check:
           attributes:
             last_name:
@@ -42,6 +56,9 @@ en:
               blank: 'Enter the applicant’s National Insurance number'
               invalid: 'Enter 2 letters, 6 numbers and 1 letter for the National Insurance number'
     attributes:
+      user:
+        password: New password
+        password_confirmation: Confirm new password
       feedback:
         experience: 'What is your experience of using the service so far?'
         ideas: 'Do you have any ideas for how this service could be improved?'

spec/features/perform_an_income_check_spec.rb

@@ -32,7 +32,7 @@
       end
       scenario 'shows a successful result', js: true do
         expect(page).to have_xpath('//div[@class="panel callout"]', visible: true)
-        expect(page).to have_xpath('//small[@class="error hide"]', count: 0)
+        expect(page).to have_xpath('//label[@class="error hide"]', count: 0)
       end
       scenario 'calculates correct values', js: true do
         expect(page).to have_xpath('//span[@id="fee-remit"]', text: '£200')
@@ -46,7 +46,7 @@
         click_button 'Check'
 
         expect(page).to have_xpath('//div[@class="panel callout"]', visible: false)
-        expect(page).to have_xpath('//small[@class="error"]', count: 3)
+        expect(page).to have_xpath('//label[@class="error"]', count: 3)
       end
     end
   end

spec/features/user_can_accept_invite_spec.rb

@@ -17,7 +17,7 @@
       fill_in 'user_password', with: password
       fill_in 'user_password_confirmation', with: password
 
-      click_button 'Set my password'
+      click_button I18n.t('devise.invitations.edit.submit_button')
 
       expect(page).to have_xpath('//div', text: 'dashboard', count: 2)
       expect(page).to have_xpath('//div[@class="alert-box notice"]',

spec/models/user_spec.rb

@@ -45,9 +45,8 @@
           end
 
           it 'has an informative error message for non white listed emails' do
-            message = "you’re not able to create an account with this email address. Only '[email protected]' emails can be used. For more help, contact us via #{Settings.mail_tech_support}"
             user.valid?
-            expect(user.errors.messages[:email].first).to match message
+            expect(user.errors.messages[:email].first).to match I18n.t('dictionary.invalid_email', email: Settings.mail_tech_support)
           end
         end
       end