🦋 Update Personal details page

app/inputs/patternfly_input_input.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# TODO: when input is required, add input_html: required prop instead of doing it manually in every form.
+
 class PatternflyInputInput < Formtastic::Inputs::StringInput
   delegate :tag, to: :template
 

app/lib/fields/patternfly_form_builder.rb

@@ -3,14 +3,20 @@
 class Fields::PatternflyFormBuilder < Fields::FormBuilder
   delegate :tag, to: :template
 
+  # Overrides the one used in Fields::FormBuilder#user_defined_form
   def output_html(field, options = {})
     typed_input_field = input_field(field, options)
     builder_options = typed_input_field.builder_options
 
     default_type = default_input_type(field.name.to_sym, builder_options)
     type = default_type == :select ? :patternfly_select : :patternfly_input
+    builder_options[:as] = type
 
-    typed_input_field.input(self, builder_options.merge({ as: type }))
+    builder_options[:input_html] = {
+      required: field.required
+    }
+
+    typed_input_field.input(self, builder_options)
   end
 
   def commit_button(title, opts = {})
@@ -29,9 +35,7 @@ def collection_select(*opts)
   def inputs(*args, &block)
     tag.section(class: 'pf-c-form__section', role: 'group') do
       tag.div(args.first, class: 'pf-c-form__section-title') +
-        tag.div do # TODO: remove this div, ideally concat title + block
-          yield block
-        end
+        template.capture { yield block } # FIXME: Is this making the first render super slow?
     end
   end
 end

app/views/provider/admin/user/personal_details/edit.html.slim

@@ -1,21 +1,35 @@
-- content_for :page_header_title, 'Personal Details'
+- content_for :page_header_title, t('.header_title')
 
-= semantic_form_for current_user,
-  builder: Fields::FormBuilder,
-  url: provider_admin_user_personal_details_path do |form|
+- content_for :javascripts do
+  = stylesheet_packs_chunks_tag 'pf_form'
 
-  = hidden_field_tag :origin, params[:origin]
-  = form.inputs name: 'User Information' do
-    = form.user_defined_form
-    - if current_user.using_password?
-      = form.input :password, label: "New Password", required: current_user.password_required?, input_html: { value: "" }
+- if current_user.can_set_password? && !current_account.settings.enforce_sso?
+  - content_for :page_header_alert do
+      br
+      = pf_inline_alert t('.set_password_html', href: new_provider_password_path), variant: :info
 
-  - if current_user.using_password?
-    = form.inputs name: "Provide your current password and update your personal details" do
-      = form.input :current_password, required: true
-  = form.actions do
-    = form.commit_button I18n.t('provider.admin.user.personal_details.edit.form.submit_button_label')
+- using_password = current_user.using_password?
 
-- if current_user.can_set_password? && !current_account.settings.enforce_sso?
-  p You have no password set. If you'd like to set one use the
-    #{link_to 'password reset form', new_provider_password_path}.
+div class="pf-c-card"
+  div class="pf-c-card__body"
+    = semantic_form_for current_user, builder: Fields::PatternflyFormBuilder,
+                                      url: provider_admin_user_personal_details_path,
+                                      html: { class: 'pf-c-form pf-m-limit-width', autocomplete: 'new-password' } do |form|
+
+      = hidden_field_tag :origin, params[:origin]
+
+      = form.inputs 'User Information' do
+        = form.user_defined_form
+        - if using_password
+          = form.input :password, as: :patternfly_input,
+                                  label: t('.new_password_label'),
+                                  required: current_user.password_required?,
+                                  input_html: { value: '', required: current_user.password_required? }
+
+      - if using_password
+        = form.inputs "Provide your current password and update your personal details" do
+          = form.input :current_password, as: :patternfly_input,
+                                          required: true,
+                                          input_html: { value: '', type: 'password', required: true }
+      = form.actions do
+        = form.commit_button t('.submit_button_label')

config/locales/en.yml

@@ -528,8 +528,10 @@ en:
             success: Notification preferences successfully updated.
         personal_details:
           edit:
-            form:
-              submit_button_label: 'Update Details'
+            header_title: Personal Details
+            submit_button_label: Update Details
+            set_password_html: You have no password set. If you'd like to set one use the <a href="%{href}">password reset form</a>.
+            new_password_label: New password
 
       dashboards:
         show: