Skip to content

Commit

Permalink
feat: update validation for Signup form
Browse files Browse the repository at this point in the history 
- updates validation rules as in Edit Profile
- removes unreqd translations files from serverSideTranslations for page
  • Loading branch information
@mohitb35
mohitb35 committed Nov 10, 2023
1 parent f0c6b0c commit 72772ed
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 61 deletions.
21 changes: 1 addition & 20 deletions pages/complete-signup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,7 @@ export async function getStaticProps({ locale }: GetStaticPropsContext) {
props: {
...(await serverSideTranslations(
locale || 'en',
[
'bulkCodes',
'common',
'country',
'donate',
'donationLink',
'editProfile',
'giftfunds',
'leaderboard',
'managePayouts',
'manageProjects',
'maps',
'me',
'planet',
'planetcash',
'redeem',
'registerTrees',
'tenants',
'treemapper',
],
['common', 'country', 'editProfile'],
null,
['en', 'de', 'fr', 'es', 'it', 'pt-BR', 'cs']
)),
Expand Down
119 changes: 78 additions & 41 deletions src/features/user/CompleteSignup/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ type FormData = Omit<

export default function CompleteSignup(): ReactElement | null {
const router = useRouter();
const { i18n, t, ready } = useTranslation(['editProfile', 'donate']);
const { i18n, t, ready } = useTranslation('editProfile');
const { setErrors, redirect } = React.useContext(ErrorHandlingContext);
const [addressSugggestions, setaddressSugggestions] = React.useState<
AddressSuggestionsType[]
Expand Down Expand Up @@ -176,7 +176,7 @@ export default function CompleteSignup(): ReactElement | null {
setRequestSent(false);
// successful signup -> goto me page
setUser(res);
setSnackbarMessage(ready ? t('editProfile:profileCreated') : '');
setSnackbarMessage(ready ? t('profileCreated') : '');
setSeverity('success');
handleSnackbarOpen();

Expand All @@ -199,18 +199,18 @@ export default function CompleteSignup(): ReactElement | null {
const profileTypes = [
{
id: 1,
title: ready ? t('editProfile:individual') : '',
title: ready ? t('individual') : '',
value: 'individual',
},
{
id: 2,
title: ready ? t('editProfile:organization') : '',
title: ready ? t('organization') : '',
value: 'organization',
},
{ id: 3, title: ready ? t('editProfile:tpo') : '', value: 'tpo' },
{ id: 3, title: ready ? t('tpo') : '', value: 'tpo' },
{
id: 4,
title: ready ? t('editProfile:education') : '',
title: ready ? t('education') : '',
value: 'education',
},
] as const;
Expand Down Expand Up @@ -276,14 +276,12 @@ export default function CompleteSignup(): ReactElement | null {
>
<CancelIcon color={styles.primaryFontColor} />
</div>
<div className={styles.headerTitle}>
{t('editProfile:signUpText')}
</div>
<div className={styles.headerTitle}>{t('signUpText')}</div>
</div>

{/* type of account buttons */}
<MuiTextField
label={t('editProfile:iamA')}
label={t('fieldLabels.profileType')}
select
defaultValue={profileTypes[0].value}
>
Expand All @@ -302,15 +300,24 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="firstname"
control={control}
rules={{ required: true }}
rules={{
required: t('validationErrors.firstNameRequired'),
maxLength: {
value: 50,
message: t('validationErrors.maxChars', { max: 50 }),
},
pattern: {
value: /^[\p{L}\p{N}\sß.'-]+$/u,
message: t('validationErrors.firstNameInvalid'),
},
}}
defaultValue={auth0User?.given_name || ''}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('donate:firstName')}
label={t('fieldLabels.firstName')}
error={errors.firstname !== undefined}
helperText={
errors.firstname !== undefined &&
t('donate:firstNameRequired')
errors.firstname !== undefined && errors.firstname.message
}
onChange={onChange}
value={value}
Expand All @@ -321,15 +328,24 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="lastname"
control={control}
rules={{ required: true }}
rules={{
required: t('validationErrors.lastNameRequired'),
maxLength: {
value: 50,
message: t('validationErrors.maxChars', { max: 50 }),
},
pattern: {
value: /^[\p{L}\p{N}\sß'-]+$/u,
message: t('validationErrors.lastNameInvalid'),
},
}}
defaultValue={auth0User?.family_name || ''}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('donate:lastName')}
label={t('fieldLabels.lastName')}
error={errors.lastname !== undefined}
helperText={
errors.lastname !== undefined &&
t('donate:lastNameRequired')
errors.lastname !== undefined && errors.lastname.message
}
onChange={onChange}
value={value}
Expand All @@ -343,16 +359,21 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="name"
control={control}
rules={{ required: true }}
rules={{
required: t('validationErrors.nameRequired'),
pattern: {
value: /^[\p{L}\p{N}\sß.,'&()!-]+$/u,
message: t('validationErrors.nameInvalid'),
},
}}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('editProfile:profileName', {
label={t('fieldLabels.name', {
type: selectUserType(type, t),
})}
error={errors.name !== undefined}
helperText={
errors.name !== undefined &&
t('editProfile:nameValidation')
errors.name !== undefined && errors.name.message
}
onChange={onChange}
value={value}
Expand All @@ -364,7 +385,7 @@ export default function CompleteSignup(): ReactElement | null {

<MuiTextField
defaultValue={auth0User?.email}
label={t('donate:email')}
label={t('fieldLabels.email')}
disabled
/>

Expand All @@ -373,14 +394,19 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="address"
control={control}
rules={{ required: true }}
rules={{
required: t('validationErrors.addressRequired'),
pattern: {
value: /^[\p{L}\p{N}\sß.,#/-]+$/u,
message: t('validationErrors.addressInvalid'),
},
}}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('donate:address')}
label={t('fieldLabels.address')}
error={errors.address !== undefined}
helperText={
errors.address !== undefined &&
t('donate:addressRequired')
errors.address !== undefined && errors.address.message
}
onChange={(event) => {
suggestAddress(event.target.value);
Expand Down Expand Up @@ -418,7 +444,13 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="city"
control={control}
rules={{ required: true }}
rules={{
required: t('validationErrors.cityRequired'),
pattern: {
value: /^[\p{L}\sß.,()-]+$/u,
message: t('validationErrors.cityInvalid'),
},
}}
defaultValue={
getStoredConfig('loc').city === 'T1' ||
getStoredConfig('loc').city === 'XX' ||
Expand All @@ -428,10 +460,10 @@ export default function CompleteSignup(): ReactElement | null {
}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('donate:city')}
label={t('fieldLabels.city')}
error={errors.city !== undefined}
helperText={
errors.city !== undefined && t('donate:cityRequired')
errors.city !== undefined && errors.city.message
}
onChange={onChange}
value={value}
Expand All @@ -442,7 +474,13 @@ export default function CompleteSignup(): ReactElement | null {
<Controller
name="zipCode"
control={control}
rules={{ required: true, pattern: postalRegex }}
rules={{
required: t('validationErrors.zipCodeRequired'),
pattern: {
value: postalRegex as RegExp,
message: t('validationErrors.zipCodeInvalid'),
},
}}
defaultValue={
getStoredConfig('loc').postalCode === 'T1' ||
getStoredConfig('loc').postalCode === 'XX' ||
Expand All @@ -452,11 +490,10 @@ export default function CompleteSignup(): ReactElement | null {
}
render={({ field: { onChange, value, onBlur } }) => (
<MuiTextField
label={t('donate:zipCode')}
label={t('fieldLabels.zipCode')}
error={errors.zipCode !== undefined}
helperText={
errors.zipCode !== undefined &&
t('donate:zipCodeAlphaNumValidation')
errors.zipCode !== undefined && errors.zipCode.message
}
onChange={onChange}
value={value}
Expand All @@ -468,7 +505,7 @@ export default function CompleteSignup(): ReactElement | null {
</>
) : null}
<AutoCompleteCountry
label={t('donate:country')}
label={t('fieldLabels.country')}
name="country"
onChange={setCountry}
defaultValue={
Expand All @@ -486,12 +523,12 @@ export default function CompleteSignup(): ReactElement | null {
className={styles.mainText}
style={{ cursor: 'pointer' }}
>
{t('editProfile:privateAccount')}
{t('fieldLabels.privateAccount')}
</label>{' '}
<br />
{isPrivate && (
<label className={styles.isPrivateAccountText}>
{t('editProfile:privateAccountTxt')}
{t('privateAccountTxt')}
</label>
)}
</div>
Expand All @@ -513,7 +550,7 @@ export default function CompleteSignup(): ReactElement | null {
<div className={styles.inlineToggleGroup}>
<div className={styles.mainText}>
<label htmlFor={'getNews'} style={{ cursor: 'pointer' }}>
{t('editProfile:subscribe')}
{t('fieldLabels.subscribe')}
</label>
</div>
<Controller
Expand All @@ -537,7 +574,7 @@ export default function CompleteSignup(): ReactElement | null {
<div className={styles.inlineToggleGroup}>
<div className={styles.mainText}>
<label htmlFor={'terms'} style={{ cursor: 'pointer' }}>
<Trans i18nKey="editProfile:termAndCondition">
<Trans i18nKey="termAndCondition">
<a
className={styles.termsLink}
rel="noopener noreferrer"
Expand All @@ -561,7 +598,7 @@ export default function CompleteSignup(): ReactElement | null {
</div>
{!acceptTerms && typeof acceptTerms !== 'object' && (
<div className={styles.termsError}>
{t('editProfile:termAndConditionError')}
{t('termAndConditionError')}
</div>
)}
</div>
Expand All @@ -576,7 +613,7 @@ export default function CompleteSignup(): ReactElement | null {
{submit ? (
<div className={styles.spinner}></div>
) : (
t('editProfile:createAccount')
t('createAccount')
)}
</button>
</div>
Expand Down

0 comments on commit 72772ed

Please sign in to comment.