From 6d09c3cb064074700fd11657ae1a602c41fefd4b Mon Sep 17 00:00:00 2001 From: roshni73 Date: Thu, 7 Nov 2024 15:11:51 +0545 Subject: [PATCH] remove unnecessary fields --- package.json | 1 + src/views/Register/index.tsx | 278 ++++++++++++----------------------- yarn.lock | 8 + 3 files changed, 102 insertions(+), 185 deletions(-) diff --git a/package.json b/package.json index 0e56e1a0..bac25904 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@sentry/react": "^7.81.1", "@togglecorp/fujs": "^2.1.1", "@togglecorp/re-map": "^0.2.0-beta-6", + "@togglecorp/toggle-form": "^2.0.4", "@turf/bbox": "^6.5.0", "@turf/circle": "^6.5.0", "graphql": "^16.8.1", diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx index 2b73584a..748329fa 100644 --- a/src/views/Register/index.tsx +++ b/src/views/Register/index.tsx @@ -1,22 +1,20 @@ -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { Button, SelectInput, - TextArea, TextInput, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { - isWhitelistedEmail, resolveToComponent, } from '@ifrc-go/ui/utils'; import { - isDefined, isTruthyString, isValidEmail, } from '@togglecorp/fujs'; import { addCondition, + createSubmitHandler, emailCondition, getErrorObject, type ObjectSchema, @@ -31,6 +29,21 @@ import Page from '#components/Page'; import i18n from './i18n.json'; import styles from './styles.module.css'; +interface defaultFormValue { + first_name: string; + last_name: string; + email: string; + password: string; + confirm_password: string; + country: string; + city: string; + organization: string; + organization_type: string; + department: string; + position: string; + phone_number: string; +} + function getPasswordMatchCondition(referenceVal: string | undefined) { return (val: string | undefined) => ( isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal @@ -39,72 +52,43 @@ function getPasswordMatchCondition(referenceVal: string | undefined) { ); } -const registerationData = { - whitelistedDomains: [ - { id: '1', domain: 'example.org' }, - { id: '2', domain: 'example.com' }, - { id: '3', domain: 'nonprofit.net' }, - ], - organizationTypes: [ - { id: '101', key: 'NTLS', value: 'National Society' }, - { id: '102', key: 'NGO', value: 'Non-Governmental Organization' }, - { id: '103', key: 'UN', value: 'United Nations Agency' }, - ], - nationalSocietyOptions: [ - { id: '201', society_name: 'Red Cross Society' }, - { id: '202', society_name: 'Red Crescent Society' }, - ], - strings: { - registerTitle: 'Register Account', - registerHeader: 'Create Your Account', - registerSubHeader: 'Join us to access exclusive content.', - registerFirstName: 'First Name', - registerLastName: 'Last Name', - registerEmail: 'Email Address', - registerPassword: 'Password', - registerConfirmPassword: 'Confirm Password', - registerCountry: 'Country', - registerCity: 'City', - registerOrganizationType: 'Organization Type', - registerOrganizationName: 'Organization Name', - registerDepartment: 'Department', - registerPosition: 'Position', - registerPhoneNumber: 'Phone Number', - registerJustify: 'Please provide a justification for access.', - registerJustification: 'Justification', - registerSubmit: 'Register', - registerAccountPresent: 'Already have an account? Login', - registerLogin: 'Login', - requestAccess: 'Request Access', - }, - defaultFormValue: { - first_name: '', - last_name: '', - email: '', - password: '', - confirm_password: '', - country: '', - city: '', - organization: '', - organization_type: '', - department: '', - position: '', - phone_number: '', - justification: '', - }, -}; +const organizationTypes = [ + { id: '101', key: 'NTLS', value: 'National Society' }, + { id: '102', key: 'NGO', value: 'Non-Governmental Organization' }, + { id: '103', key: 'UN', value: 'United Nations Agency' }, +]; +const nationalSocietyOptions = [ + { id: '201', society_name: 'Red Cross Society' }, + { id: '202', society_name: 'Red Crescent Society' }, +]; +const whitelistedDomains = [ + 'example.com', + 'anotherdomain.org', + 'somedomain.net', +]; -type FormFields = typeof registerationData['defaultFormValue']; +type FormFields = defaultFormValue; -const keySelector = (option: { key: string; label: string }) => option.key; -const labelSelector = (option: { key: string; label: string }) => option.label; +const keySelector = (option: { id: string; key: string; value: string }): string => option.id; +const labelSelector = (option: { id: string; key: string; value: string }) => option.value; -type FormSchema = ObjectSchema; -type FormSchemaFields = ReturnType +type FormSchema = ObjectSchema; +type FormSchemaFields = ReturnType; + +const isWhitelistedEmail = (email: string): boolean => { + const domain = email.split('@')[1]; + return whitelistedDomains.includes(domain); +}; + +const emailWhitelistValidation = (email: string) => { + if (!isWhitelistedEmail(email)) { + return 'Email not allowed'; + } + return undefined; +}; const formSchema: FormSchema = { - fields: (value, _, context): FormSchemaFields => { + fields: (value): FormSchemaFields => { let fields: FormSchemaFields = { first_name: { required: true, @@ -117,7 +101,7 @@ const formSchema: FormSchema = { email: { required: true, requiredValidation: requiredStringCondition, - validations: [emailCondition], + validations: [emailCondition, emailWhitelistValidation], }, password: { required: true, @@ -152,9 +136,6 @@ const formSchema: FormSchema = { phone_number: { defaultValue: undefinedValue, }, - justification: { - forceValue: undefinedValue, - }, }; fields = addCondition( fields, @@ -171,34 +152,6 @@ const formSchema: FormSchema = { }), ); - fields = addCondition( - fields, - value, - ['email'], - ['justification'], - (safeValue) => { - const justificationNeeded = ( - isDefined(safeValue) - && isTruthyString(safeValue.email) - && isValidEmail(safeValue.email) - && context.whitelistedDomains - && !isWhitelistedEmail(safeValue.email, context.whitelistedDomains) - ); - - return !justificationNeeded - ? { - justification: { - forceValue: undefinedValue, - }, - } - : { - justification: { - required: true, - requiredValidation: requiredStringCondition, - }, - }; - }, - ); return fields; }, }; @@ -206,22 +159,39 @@ const formSchema: FormSchema = { // eslint-disable-next-line import/prefer-default-export export function Component() { const strings = useTranslation(i18n); - const [formValue] = useState(registerationData.defaultFormValue); + const [formValue] = useState({ + first_name: '', + last_name: '', + email: '', + password: '', + confirm_password: '', + country: '', + city: '', + organization: '', + organization_type: '', + department: '', + position: '', + phone_number: '', + }); - const { value, error, setFieldValue } = useForm(formSchema, { - value: registerationData.defaultFormValue, + const { + value, + error, + setFieldValue, + setError, + validate, + } = useForm(formSchema, { + value: formValue, }); - const fieldError = getErrorObject(error); - const isNationalSociety = formValue.organization_type === 'NTLS'; - const justificationNeeded = ( - isTruthyString(formValue.email) - && isValidEmail(formValue.email) - ); + const fieldError = getErrorObject(error) as FormSchemaFields; + + const handleFormSubmit = createSubmitHandler(validate, setError, () => {}); + const isNationalSociety = formValue?.organization_type === 'NTLS'; const loginInfo = resolveToComponent(strings.registerAccountPresent, { loginLink: ( {strings.registerLogin} @@ -255,6 +225,7 @@ export function Component() { withAsterisk /> +
setFieldValue} + value={value.organization_type} + onChange={setFieldValue} error={fieldError?.organization_type} - withAsterisk /> -
- setFieldValue} - keySelector={keySelector} - labelSelector={labelSelector} - options={registerationData.organizationTypes} - error={fieldError?.organization_type} - disabled={false} - withAsterisk /> {isNationalSociety ? ( setFieldValue} + value={value.organization} + onChange={setFieldValue} error={fieldError?.organization} - withAsterisk /> ) : ( )} - - - - {justificationNeeded && ( - <> -
- {strings.registerJustify} -
-