From d123de1f36849d9448ae0e3a4ac579472712d944 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 15 Jan 2025 11:42:55 +0100
Subject: [PATCH 1/3] fix: update form layout to avoid nested forms

---
 .../user-info-form/user-info-form.tsx         | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx
index d3792fffc..406bbca8e 100644
--- a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx
+++ b/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,28 @@ 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"
+          >
+            <UserEmailField value={userInfo.email} />
             <FormField
               name="name"
               type="text"
               config={config}
               control={control}
             />
-          </FormRow>
-          <FormRow>
             <FormController
               name="image"
               control={control}
@@ -109,18 +110,23 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
                 </InputContent>
               )}
             />
-          </FormRow>
-        </>
+          </form>
+          <UserPasswordField value="************" />
+        </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>
+    </>
   )
 }

From 63eff8447ac55a4e589e58fb2aff8847611db7ca Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 15 Jan 2025 11:44:58 +0100
Subject: [PATCH 2/3] style: update order of fields and tweak box styles

---
 .../user-info-form/user-info-form.module.scss                 | 1 +
 .../user-info-dialog/user-info-form/user-password-field.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss
index a73d0a3a8..b7b9a6c3c 100644
--- a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss
+++ b/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 {
diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-password-field.tsx b/ui/src/components/header/user-info-dialog/user-info-form/user-password-field.tsx
index 00b963425..ba26335b9 100644
--- a/ui/src/components/header/user-info-dialog/user-info-form/user-password-field.tsx
+++ b/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}

From 3cf892dacbb0dbc327f3349c2caba5a8dbd67866 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 16 Jan 2025 16:18:19 +0100
Subject: [PATCH 3/3] style: tweak layout

---
 .../header/user-info-dialog/user-info-form/user-info-form.tsx | 4 ++--
 ui/src/utils/language.ts                                      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx
index 406bbca8e..d0f02e0ca 100644
--- a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx
+++ b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx
@@ -80,12 +80,13 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
           />
         )}
         <FormRow>
+          <UserEmailField value={userInfo.email} />
+          <UserPasswordField value="************" />
           <form
             ref={formRef}
             onSubmit={handleSubmit((values) => updateUserInfo(values))}
             className="grid gap-8"
           >
-            <UserEmailField value={userInfo.email} />
             <FormField
               name="name"
               type="text"
@@ -111,7 +112,6 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => {
               )}
             />
           </form>
-          <UserPasswordField value="************" />
         </FormRow>
       </FormSection>
       <FormActions>
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 7ac125a91..5710e1a43 100644
--- a/ui/src/utils/language.ts
+++ b/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',