[User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema #27

shindigira · 2023-08-17T20:08:39Z

Closes #26
Closes #28

Changes

[feat] Created a link to the Profile Form
[feat] Created a route to the Profile Form
[feat] Started a Profile Form Component
[chore] Added react-hook-form, zod and @hookform/resolvers
[style] Started initial form look
[chore] form update with available fields
[chore] Started a store folder for hooks
[style] Utilized the CFPB style for the User Profile form buttons
[feat] First Name and Last Name implemented on the User Profile
[feat] User Profile email becomes auto-populated with the logged-in user email
[feat] Added zustand and immer for state management
[chore] Renamed the initial User Profile form as a Step1Form
[chore] Utilized User Profile state management via Zustand
[chore] Added 'login.gov' notice to email field
[feat] Added red borders on fields failing the validation
[feat] Added mock associated financial data for the validation schema
[chore] Created the InputEntry component
[chore] Created the ProfileForm.data.ts to place data and mock data
[feat] Added react-select and @types/react-select packages
[feat] Included all the initial validation schema fields
[feat] Included error messages for associated financial data
[chore] Included the svgr plugin to be able to import svg files

Changes: - [feat] Created a link to the Profile Form - [feat] Created a route to the Profile Form - [feat] Started a Profile Form Component

Changes: - [chore] Added `react-hook-form`, `zod` and `@hookform/resolvers` - [style] Started initial form look

Changes: - [chore] form update with available fields

Changes: - [chore] Started a `store` folder for hooks - [style] Utilized the CFPB style for the User Profile form buttons - [feat] First Name and Last Name implemented on the User Profile

…from useSblAuth hook

Changes: - [feat]: Added `zustand` and `immer` for state management - [chore]: Renamed the initial User Profile form as a Step1Form - [chore]: Utilized User Profile state management via Zustand

Changes: - [chore]: Created the `InputEntry` component - [chore]: Created the `ProfileForm.data.ts` to place data and mock data - [feat]: Added `react-select` and `@types/react-select` packages

…ion(s) field

Changes: - [feat] Included all the initial validation schema fields - [feat] Included error messages for associated financial data - [chore] Included the `svgr` plugin to be able to import svg files

Changes: - [chore] added error and disabled color class in the tailwind config - [chore] added the correct error icon

meissadia

This text feels a bit vertically cramped, could we increase the line height? Font also seems a bit smaller than the mockup.

I see this error box in the mockup but not in the UI when I hit submit

src/App.tsx

src/pages/ProfileForm/Step1Form.tsx

meissadia · 2023-08-22T19:22:45Z

src/pages/ProfileForm/Step1Form.tsx

+    lastName: "",
+    email: email ?? "",
+    financialInstitutions: [],
+    // fiData: fiData ?? []


Suggested change

// fiData: fiData ?? []

meissadia · 2023-08-22T19:24:35Z

src/pages/ProfileForm/Step1Form.tsx

+  const onSubmit: SubmitHandler<ValidationSchema> = (data) => {
+    console.log('data:', data);
+  }
+
+  console.log('errors:', errors)
+


I'm guessing there is no API endpoint for this data yet? This PR is just the UI?

Suggested change

const onSubmit: SubmitHandler<ValidationSchema> = (data) => {

console.log('data:', data);

}

console.log('errors:', errors)

const onSubmit: SubmitHandler<ValidationSchema> = (data) => {

console.log('data:', data);

}

console.log('errors:', errors)

@meissadia Not wired to a backend yet. Will mock some API calls soon.

src/pages/ProfileForm/Step1Form.tsx

meissadia · 2023-08-22T19:30:16Z

src/pages/ProfileForm/Step1Form.tsx

+                  // console.log("getValues:", getValues())
+                  // console.log('onclick errors', errors);


Suggested change

// console.log("getValues:", getValues())

// console.log('onclick errors', errors);

src/pages/ProfileForm/Step1FormHeader.tsx

meissadia · 2023-08-22T19:31:31Z

src/pages/ProfileForm/Step1FormHeader.tsx

+            {/* <h1>Complete your user profile</h1>
+            <p className="lead-paragraph">In order to complete your user profile and access the filing platform your financial institution must have a Legal Entity Identifier (LEI). Visit the Global LEI Foundation (GLEIF) website for information on how to obtain an LEI for your institution.</p> */}
+            <h1 className="text-[26px] md:text-[30px] font-semibold leading-tight mb-[0.44117647em]">Complete your user profile</h1>
+            <p className="text-[18px] md:text-[20px] font-normal leading-tight mb-[30px]">In order to complete your user profile and access the filing platform your financial institution must have a Legal Entity Identifier (LEI). Visit the Global LEI Foundation (GLEIF) website for information on how to obtain an LEI for your institution.</p>


Unintended duplicate paragraphs indicating user must have an LEI?

meissadia · 2023-08-22T19:37:15Z

src/pages/ProfileForm/Step1Form.tsx

+    <div className="ml-5 mr-5">
+      <div className="max-w-[1200px] mx-auto mb-12">
+        <div className="max-w-[770px] mx-auto">


Is it too early to turn these Tailwinded wrappers into reusable Form components? i.e. Do you think these styles would be used in other Steps and we could abstract this into a <FormWrapper> or something like that?

Fine if not...just contemplating how to make things more readable.

Resolved in 843c4bf

natalia-fitzgerald · 2023-08-23T20:41:38Z

@shindigira
Just to be sure you're pulling from the latest mock-up here it is. There's a difference with the inline error message (outdated design had a heading and paragraph text and updated design just has paragraph text). The size of that text should be 16px (standard paragraph styling).

shindigira · 2023-08-24T06:51:20Z

@shindigira Just to be sure you're pulling from the latest mock-up here it is. There's a difference with the inline error message (outdated design had a heading and paragraph text and updated design just has paragraph text). The size of that text should be 16px (standard paragraph styling).

@natalia-fitzgerald
Resolved in this PR #32. Check the screenshot to make sure this everything is correct.

shindigira · 2023-08-24T06:52:29Z

This text feels a bit vertically cramped, could we increase the line height? Font also seems a bit smaller than the mockup.

I see this error box in the mockup but not in the UI when I hit submit

@meissadia Resolved in this PR #32.

Co-authored-by: Meis <[email protected]>

- Removed `console.log` Co-authored-by: Meis <[email protected]>

Removed duplicate button Co-authored-by: Meis <[email protected]>

Removed duplicate paragraph Co-authored-by: Meis <[email protected]>

shindigira · 2023-08-24T07:12:13Z

Merging this PR and focusing on on the follow-up PR #32 that will address any remaining issues.

shindigira added 14 commits August 14, 2023 16:28

feature: Profile Form -- Start

7f68a3f

Changes: - [feat] Created a link to the Profile Form - [feat] Created a route to the Profile Form - [feat] Started a Profile Form Component

feat: Profile form

b5a1a81

Changes: - [chore] Added `react-hook-form`, `zod` and `@hookform/resolvers` - [style] Started initial form look

merged from 'main'

d05614a

feat: zod validation update

20d8fb5

Changes: - [chore] form update with available fields

feat: User Profile - Step 1

ebb4e43

Changes: - [chore] Started a `store` folder for hooks - [style] Utilized the CFPB style for the User Profile form buttons - [feat] First Name and Last Name implemented on the User Profile

chore: Auto-populate email in User Profile with logged-in user email …

5967302

…from useSblAuth hook

feat: Integrated Zustand/Immer, Step Forms

f1ad515

Changes: - [feat]: Added `zustand` and `immer` for state management - [chore]: Renamed the initial User Profile form as a Step1Form - [chore]: Utilized User Profile state management via Zustand

chore: Added 'login.gov' notice to email field

8d91e56

chore: red border on missing first and last name fields

40a64b0

feat: added mock associated financial data for the validation schema

8b6553b

chore: InputEntry component

6389396

Changes: - [chore]: Created the `InputEntry` component - [chore]: Created the `ProfileForm.data.ts` to place data and mock data - [feat]: Added `react-select` and `@types/react-select` packages

chore: added and yarn cache items

113a26f

fix: added error border styling for the associated financial institut…

911a0ec

…ion(s) field

feat: Initial User Profile form complete

e8e7f63

Changes: - [feat] Included all the initial validation schema fields - [feat] Included error messages for associated financial data - [chore] Included the `svgr` plugin to be able to import svg files

shindigira changed the title ~~[WIP] [User Profile] - Layout View - Initial User Profile Form~~ [User Profile] - Layout View - Initial User Profile Form Aug 19, 2023

chore: set a link - submit a technical question

c9f9246

shindigira requested review from meissadia and contolini August 19, 2023 04:43

shindigira added 2 commits August 19, 2023 00:49

chore: added default margin for mobile responsiveness

995c1c4

fix: removed dead code

d0cf487

shindigira requested review from natalia-fitzgerald and kristenshaw4 August 21, 2023 15:41

shindigira added 3 commits August 21, 2023 12:50

chore: fixed form padding

715eedd

chore: Tailwind colors, Error SVG correction

ae05160

Changes: - [chore] added error and disabled color class in the tailwind config - [chore] added the correct error icon

chore: added additional notice regarding LEI to the User Profile form

3384106

shindigira changed the title ~~[User Profile] - Layout View - Initial User Profile Form~~ [User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema Aug 22, 2023

meissadia requested changes Aug 22, 2023

View reviewed changes

shindigira added 2 commits August 24, 2023 01:50

rebased off of 'main'

ff0e8f0

chore: re-added @cfpb/cfpb-design-system

60b1b4a

shindigira and others added 4 commits August 24, 2023 02:53

fix: removed console.log

d7411a7

Co-authored-by: Meis <[email protected]>

Update src/pages/ProfileForm/Step1Form.tsx

ccaf2e4

- Removed `console.log` Co-authored-by: Meis <[email protected]>

Update src/pages/ProfileForm/Step1Form.tsx

c5e0f5d

Removed duplicate button Co-authored-by: Meis <[email protected]>

Update src/pages/ProfileForm/Step1FormHeader.tsx

6c94b45

Removed duplicate paragraph Co-authored-by: Meis <[email protected]>

shindigira requested a review from meissadia August 24, 2023 06:57

fix: fixed missing char

a4f0cd1

shindigira merged commit 9e33de0 into main Aug 24, 2023
1 of 2 checks passed

shindigira added the UI Tasks involving visual elements label Aug 30, 2023

meissadia deleted the 26-initial-user-profile-form branch September 6, 2023 20:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema #27

[User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema #27

shindigira commented Aug 17, 2023 •

edited

Loading

meissadia left a comment

meissadia Aug 22, 2023

meissadia Aug 22, 2023

shindigira Aug 24, 2023

meissadia Aug 22, 2023

meissadia Aug 22, 2023

shindigira Aug 24, 2023

meissadia Aug 22, 2023

shindigira Aug 24, 2023

natalia-fitzgerald commented Aug 23, 2023

shindigira commented Aug 24, 2023

shindigira commented Aug 24, 2023

shindigira commented Aug 24, 2023

		// console.log("getValues:", getValues())
		// console.log('onclick errors', errors);

[User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema #27

[User Profile] - Layout View - Initial User Profile Form, Frontend Validation Schema #27

Conversation

shindigira commented Aug 17, 2023 • edited Loading

Changes

meissadia left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

natalia-fitzgerald commented Aug 23, 2023

shindigira commented Aug 24, 2023

shindigira commented Aug 24, 2023

shindigira commented Aug 24, 2023

shindigira commented Aug 17, 2023 •

edited

Loading