From aae85c44d29cf381e27bbc16bf45cd2bede84ee1 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 15 Nov 2022 09:34:25 -0800
Subject: [PATCH] Migrate change-password form to HDS input fields. (#1460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../password/change-password/index.hbs        | 58 ++++++++-----------
 ui/admin/app/components/form/scope/index.hbs  |  4 +-
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/ui/admin/app/components/form/account/password/change-password/index.hbs b/ui/admin/app/components/form/account/password/change-password/index.hbs
index 46d2f0df9..1a34c7872 100644
--- a/ui/admin/app/components/form/account/password/change-password/index.hbs
+++ b/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}}
diff --git a/ui/admin/app/components/form/scope/index.hbs b/ui/admin/app/components/form/scope/index.hbs
index 6cf9fe2af..3cb25832d 100644
--- a/ui/admin/app/components/form/scope/index.hbs
+++ b/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'