Fix update password form (#670)

* fix: update form layout to avoid nested forms

* style: update order of fields and tweak box styles

* style: tweak layout

Author: annavik

ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss

@@ -4,6 +4,7 @@
 .miniForm {
   border-radius: 8px;
   border: 1px solid $color-neutral-100;
+  overflow: hidden;
 }
 
 .miniFormContent {

ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx

@@ -11,6 +11,7 @@ import { useUpdateUserInfo } from 'data-services/hooks/auth/useUpdateUserInfo'
 import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { IconType } from 'design-system/components/icon/icon'
 import { InputContent } from 'design-system/components/input/input'
+import { useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import { API_MAX_UPLOAD_SIZE } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -55,6 +56,7 @@ const config: FormConfig = {
 }
 
 export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
+  const formRef = useRef<HTMLFormElement>(null)
   const {
     control,
     handleSubmit,
@@ -68,29 +70,29 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
   const errorMessage = useFormError({ error, setFieldError })
 
   return (
-    <form onSubmit={handleSubmit((values) => updateUserInfo(values))}>
-      {errorMessage && (
-        <FormError
-          inDialog
-          intro={translate(STRING.MESSAGE_COULD_NOT_SAVE)}
-          message={errorMessage}
-        />
-      )}
+    <>
       <FormSection>
+        {errorMessage && (
+          <FormError
+            inDialog
+            intro={translate(STRING.MESSAGE_COULD_NOT_SAVE)}
+            message={errorMessage}
+          />
+        )}
         <FormRow>
           <UserEmailField value={userInfo.email} />
           <UserPasswordField value="************" />
-        </FormRow>
-        <>
-          <FormRow>
+          <form
+            ref={formRef}
+            onSubmit={handleSubmit((values) => updateUserInfo(values))}
+            className="grid gap-8"
+          >
             <FormField
               name="name"
               type="text"
               config={config}
               control={control}
             />
-          </FormRow>
-          <FormRow>
             <FormController
               name="image"
               control={control}
@@ -109,18 +111,22 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
                 </InputContent>
               )}
             />
-          </FormRow>
-        </>
+          </form>
+        </FormRow>
       </FormSection>
       <FormActions>
         <Button
           label={isSuccess ? translate(STRING.SAVED) : translate(STRING.SAVE)}
           icon={isSuccess ? IconType.RadixCheck : undefined}
-          type="submit"
+          onClick={() => {
+            formRef.current?.dispatchEvent(
+              new Event('submit', { cancelable: true, bubbles: true })
+            )
+          }}
           theme={ButtonTheme.Success}
           loading={isLoading}
         />
       </FormActions>
-    </form>
+    </>
   )
 }

ui/src/components/header/user-info-dialog/user-info-form/user-password-field.tsx

@@ -87,13 +87,13 @@ const UpdatePasswordForm = ({ onCancel }: { onCancel: () => void }) => {
       )}
       <div className={styles.miniFormContent}>
         <FormField
-          name="new_password"
+          name="current_password"
           type="password"
           config={config}
           control={control}
         />
         <FormField
-          name="current_password"
+          name="new_password"
           type="password"
           config={config}
           control={control}

ui/src/utils/language.ts

@@ -290,7 +290,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_DESCRIPTION]: 'Description',
   [STRING.FIELD_LABEL_DURATION]: 'Duration',
   [STRING.FIELD_LABEL_EMAIL]: 'Email',
-  [STRING.FIELD_LABEL_EMAIL_NEW]: 'Email new',
+  [STRING.FIELD_LABEL_EMAIL_NEW]: 'New email',
   [STRING.FIELD_LABEL_ERRORS]: 'Errors',
   [STRING.FIELD_LABEL_FINISHED_AT]: 'Finished at',
   [STRING.FIELD_LABEL_GENERAL]: 'General configuration',