Migrate change-password form to HDS input fields. (#1460)

* refactor: 💡 update scope form to use HDS input and textarea

* chore: 🤖 tweak "optional" label text color in dark mode

* fix: 🐛 add HDS field margins and fix form tests

* fix: 🐛 fix acceptance tests and add TextInput event handlers

* refactor: 💡 migrate change-password form to HDS inputs

* fix: 🐛 use input event and fix set-from-event to handle empty

* chore: 🤖 reverse order of isRequired and isOptional

* fix: 🐛 use @type as required by HDS

* chore: 🤖 fix linting

ui/admin/app/components/form/account/password/change-password/index.hbs

@@ -6,43 +6,33 @@
   as |form|
 >
 
-  <form.input
-    @name='currentPassword'
-    @type='password'
+  <Hds::Form::TextInput::Field
+    @isRequired={{true}}
+    @isOptional={{false}}
     @value={{this.currentPassword}}
-    @label={{t 'form.current_password.label'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    autocomplete='current-password'
-    as |field|
-  >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  <form.input
-    @name='newPassword'
     @type='password'
-    @value={{this.newPassword}}
-    @label={{t 'form.new_password.label'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    autocomplete='new-password'
-    as |field|
+    name='currentPassword'
+    autocomplete='current-password'
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event this 'currentPassword')}}
+    as |F|
   >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
+    <F.Label>{{t 'form.current_password.label'}}</F.Label>
+  </Hds::Form::TextInput::Field>
+
+  <Hds::Form::TextInput::Field
+    @isRequired={{true}}
+    @isOptional={{false}}
+    @value={{this.newPassword}}
+    @type='password'
+    name='newPassword'
+    autocomplete='new-password'
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event this 'newPassword')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.new_password.label'}}</F.Label>
+  </Hds::Form::TextInput::Field>
 
   <form.actions
     @submitDisabled={{this.cannotSave}}

ui/admin/app/components/form/scope/index.hbs

@@ -7,8 +7,8 @@
 >
 
   <Hds::Form::TextInput::Field
-    @isOptional={{true}}
     @isRequired={{false}}
+    @isOptional={{true}}
     @value={{@model.name}}
     @isInvalid={{@model.errors.name}}
     @type='text'
@@ -29,8 +29,8 @@
   </Hds::Form::TextInput::Field>
 
   <Hds::Form::Textarea::Field
-    @isOptional={{true}}
     @isRequired={{false}}
+    @isOptional={{true}}
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
     name='description'