Skip to content

Commit c3670d7

Browse files
spidermanspiderman
spiderman
authored and
spiderman
committed
* added override options to given_name, family_name fields in signup
hide, notRequired, placeholder, label
1 parent 9c756b7 commit c3670d7

File tree

2 files changed

+108
-148
lines changed

2 files changed

+108
-148
lines changed

‎src/components/AuthorizerRoot.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useAuthorizer } from '../contexts/AuthorizerContext';
66
import { StyledWrapper } from '../styledComponents';
77
import { Views } from '../constants';
88
import { AuthorizerSignup } from './AuthorizerSignup';
9+
import type { FormFieldsOverrides } from './AuthorizerSignup';
910
import { AuthorizerForgotPassword } from './AuthorizerForgotPassword';
1011
import { AuthorizerSocialLogin } from './AuthorizerSocialLogin';
1112
import { AuthorizerMagicLinkLogin } from './AuthorizerMagicLinkLogin';
@@ -19,13 +20,15 @@ export const AuthorizerRoot: FC<{
1920
onForgotPassword?: (data: any) => void;
2021
onPasswordReset?: () => void;
2122
roles?: string[];
23+
signupFieldsOverrides?: FormFieldsOverrides
2224
}> = ({
2325
onLogin,
2426
onSignup,
2527
onMagicLinkLogin,
2628
onForgotPassword,
2729
onPasswordReset,
2830
roles,
31+
signupFieldsOverrides
2932
}) => {
3033
const [view, setView] = useState(Views.Login);
3134
const { config } = useAuthorizer();
@@ -79,6 +82,7 @@ export const AuthorizerRoot: FC<{
7982
onSignup={onSignup}
8083
urlProps={urlProps}
8184
roles={roles}
85+
fieldOverrides={signupFieldsOverrides}
8286
/>
8387
)}
8488

‎src/components/AuthorizerSignup.tsx‎

Lines changed: 104 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,27 @@ import { OtpDataType } from '../types';
1414
import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
1515
import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
1616

17-
interface InputDataType {
18-
given_name: string | null;
19-
family_name: string | null;
20-
email_or_phone_number: string | null;
21-
password: string | null;
22-
confirmPassword: string | null;
23-
}
17+
type Field =
18+
| 'given_name'
19+
| 'family_name'
20+
| 'email_or_phone_number'
21+
| 'password'
22+
| 'confirmPassword';
23+
24+
type FieldOverride = {
25+
label: string;
26+
placeholder: string;
27+
hide?: boolean;
28+
notRequired?: boolean;
29+
};
30+
31+
type InputDataType = {
32+
[K in Field]: string | null;
33+
};
34+
35+
export type FormFieldsOverrides = {
36+
[K in Field]?: FieldOverride;
37+
};
2438

2539
const initOtpData: OtpDataType = {
2640
is_screen_visible: false,
@@ -33,7 +47,8 @@ export const AuthorizerSignup: FC<{
3347
onSignup?: (data: AuthToken) => void;
3448
urlProps?: Record<string, any>;
3549
roles?: string[];
36-
}> = ({ setView, onSignup, urlProps, roles }) => {
50+
fieldOverrides?: FormFieldsOverrides;
51+
}> = ({ setView, onSignup, urlProps, roles, fieldOverrides }) => {
3752
const [error, setError] = useState(``);
3853
const [loading, setLoading] = useState(false);
3954
const [otpData, setOtpData] = useState<OtpDataType>({ ...initOtpData });
@@ -55,9 +70,8 @@ export const AuthorizerSignup: FC<{
5570
const { authorizerRef, config, setAuthData } = useAuthorizer();
5671
const [disableSignupButton, setDisableSignupButton] = useState(false);
5772

58-
const onInputChange = async (field: string, value: string) => {
73+
const onInputChange = async (field: string, value: string) =>
5974
setFormData({ ...formData, [field]: value });
60-
};
6175

6276
const onSubmit = async (e: any) => {
6377
e.preventDefault();
@@ -81,8 +95,8 @@ export const AuthorizerSignup: FC<{
8195
return;
8296
}
8397
const data: SignupInput = {
84-
email: email,
85-
phone_number: phone_number,
98+
email,
99+
phone_number,
86100
given_name: formData.given_name || '',
87101
family_name: formData.family_name || '',
88102
password: formData.password || '',
@@ -151,11 +165,15 @@ export const AuthorizerSignup: FC<{
151165
}
152166
};
153167

154-
const onErrorClose = () => {
155-
setError(``);
156-
};
168+
const onErrorClose = () => setError(``);
157169

158170
useEffect(() => {
171+
if (
172+
fieldOverrides?.given_name?.notRequired ||
173+
fieldOverrides?.given_name?.hide
174+
) {
175+
return;
176+
}
159177
if ((formData.given_name || '').trim() === '') {
160178
setErrorData({ ...errorData, given_name: 'First Name is required' });
161179
} else {
@@ -164,6 +182,12 @@ export const AuthorizerSignup: FC<{
164182
}, [formData.given_name]);
165183

166184
useEffect(() => {
185+
if (
186+
fieldOverrides?.family_name?.notRequired ||
187+
fieldOverrides?.family_name?.hide
188+
) {
189+
return;
190+
}
167191
if ((formData.family_name || '').trim() === '') {
168192
setErrorData({ ...errorData, family_name: 'Last Name is required' });
169193
} else {
@@ -247,6 +271,55 @@ export const AuthorizerSignup: FC<{
247271
);
248272
}
249273

274+
const renderField = (
275+
key: Field,
276+
label: string,
277+
placeholder: string,
278+
type?: 'text' | 'password'
279+
) => {
280+
const fieldOverride = fieldOverrides?.[key];
281+
if (fieldOverride?.hide) {
282+
return null;
283+
}
284+
return (
285+
<div className={styles['styled-form-group']}>
286+
<label
287+
className={styles['form-input-label']}
288+
htmlFor={`authorizer-sign-up-${key}`}
289+
>
290+
{!fieldOverride?.notRequired && <span>* </span>}
291+
{fieldOverride?.label ?? label}
292+
</label>
293+
<input
294+
name={key}
295+
id={`authorizer-sign-up-${key}`}
296+
className={`${styles['form-input-field']} ${
297+
errorData[key] ? styles['input-error-content'] : null
298+
}`}
299+
placeholder={fieldOverride?.placeholder ?? placeholder}
300+
type={type}
301+
value={formData[key] || ''}
302+
onChange={e => onInputChange(key, e.target.value)}
303+
/>
304+
{errorData[key] && (
305+
<div className={styles['form-input-error']}>{errorData[key]}</div>
306+
)}
307+
</div>
308+
);
309+
};
310+
311+
const shouldFieldBlockSubmit = (key: Field) => {
312+
if (
313+
(formData[key] ||
314+
fieldOverrides?.[key]?.notRequired ||
315+
fieldOverrides?.[key]?.hide) &&
316+
!errorData[key]
317+
) {
318+
return false;
319+
}
320+
return true;
321+
};
322+
250323
return (
251324
<>
252325
{error && (
@@ -260,135 +333,20 @@ export const AuthorizerSignup: FC<{
260333
!config.is_magic_link_login_enabled && (
261334
<>
262335
<form onSubmit={onSubmit} name="authorizer-sign-up-form">
263-
<div className={styles['styled-form-group']}>
264-
<label
265-
className={styles['form-input-label']}
266-
htmlFor="authorizer-sign-up-given-name"
267-
>
268-
<span>* </span>First Name
269-
</label>
270-
<input
271-
name="given_name"
272-
id="authorizer-sign-up-given-name"
273-
className={`${styles['form-input-field']} ${
274-
errorData.given_name ? styles['input-error-content'] : null
275-
}`}
276-
placeholder="eg. John"
277-
type="text"
278-
value={formData.given_name || ''}
279-
onChange={e => onInputChange('given_name', e.target.value)}
280-
/>
281-
{errorData.given_name && (
282-
<div className={styles['form-input-error']}>
283-
{errorData.given_name}
284-
</div>
285-
)}
286-
</div>
287-
<div className={styles['styled-form-group']}>
288-
<label
289-
className={styles['form-input-label']}
290-
htmlFor="authorizer-sign-up-family-name"
291-
>
292-
<span>* </span>Last Name
293-
</label>
294-
<input
295-
name="family_name"
296-
id="authorizer-sign-up-family-name"
297-
className={`${styles['form-input-field']} ${
298-
errorData.family_name ? styles['input-error-content'] : null
299-
}`}
300-
placeholder="eg. Doe"
301-
type="text"
302-
value={formData.family_name || ''}
303-
onChange={e => onInputChange('family_name', e.target.value)}
304-
/>
305-
{errorData.family_name && (
306-
<div className={styles['form-input-error']}>
307-
{errorData.family_name}
308-
</div>
309-
)}
310-
</div>
311-
<div className={styles['styled-form-group']}>
312-
<label
313-
className={styles['form-input-label']}
314-
htmlFor="authorizer-sign-up-email-or-phone-number"
315-
>
316-
<span>* </span>
317-
{getEmailPhoneLabels(config)}
318-
</label>
319-
<input
320-
name="email_or_phone_number"
321-
id="authorizer-sign-up-email-or-phone-number"
322-
className={`${styles['form-input-field']} ${
323-
errorData.email_or_phone_number
324-
? styles['input-error-content']
325-
: null
326-
}`}
327-
placeholder={getEmailPhonePlaceholder(config)}
328-
type="text"
329-
value={formData.email_or_phone_number || ''}
330-
onChange={e =>
331-
onInputChange('email_or_phone_number', e.target.value)
332-
}
333-
/>
334-
{errorData.email_or_phone_number && (
335-
<div className={styles['form-input-error']}>
336-
{errorData.email_or_phone_number}
337-
</div>
338-
)}
339-
</div>
340-
<div className={styles['styled-form-group']}>
341-
<label
342-
className={styles['form-input-label']}
343-
htmlFor="authorizer-sign-up-password"
344-
>
345-
<span>* </span>Password
346-
</label>
347-
<input
348-
name="password"
349-
id="authorizer-sign-up-password"
350-
className={`${styles['form-input-field']} ${
351-
errorData.password ? styles['input-error-content'] : null
352-
}`}
353-
placeholder="********"
354-
type="password"
355-
value={formData.password || ''}
356-
onChange={e => onInputChange('password', e.target.value)}
357-
/>
358-
{errorData.password && (
359-
<div className={styles['form-input-error']}>
360-
{errorData.password}
361-
</div>
362-
)}
363-
</div>
364-
<div className={styles['styled-form-group']}>
365-
<label
366-
className={styles['form-input-label']}
367-
htmlFor="authorizer-sign-up-confirm-password"
368-
>
369-
<span>* </span>Confirm Password
370-
</label>
371-
<input
372-
name="confirmPassword"
373-
id="authorizer-sign-up-confirm-password"
374-
className={`${styles['form-input-field']} ${
375-
errorData.confirmPassword
376-
? styles['input-error-content']
377-
: null
378-
}`}
379-
placeholder="********"
380-
type="password"
381-
value={formData.confirmPassword || ''}
382-
onChange={e =>
383-
onInputChange('confirmPassword', e.target.value)
384-
}
385-
/>
386-
{errorData.confirmPassword && (
387-
<div className={styles['form-input-error']}>
388-
{errorData.confirmPassword}
389-
</div>
390-
)}
391-
</div>
336+
{renderField('given_name', 'First Name', 'eg. John', 'text')}
337+
{renderField('family_name', 'Last Name', 'eg. Doe', 'text')}
338+
{renderField(
339+
'email_or_phone_number',
340+
getEmailPhoneLabels(config),
341+
getEmailPhonePlaceholder(config)
342+
)}
343+
{renderField('password', 'Password', '********', 'password')}
344+
{renderField(
345+
'confirmPassword',
346+
'Confirm Password',
347+
'********',
348+
'password'
349+
)}
392350
{config.is_strong_password_enabled && (
393351
<>
394352
<PasswordStrengthIndicator
@@ -404,13 +362,11 @@ export const AuthorizerSignup: FC<{
404362
disabled={
405363
loading ||
406364
disableSignupButton ||
407-
!!errorData.given_name ||
408-
!!errorData.family_name ||
365+
shouldFieldBlockSubmit('given_name') ||
366+
shouldFieldBlockSubmit('family_name') ||
409367
!!errorData.email_or_phone_number ||
410368
!!errorData.password ||
411369
!!errorData.confirmPassword ||
412-
!formData.given_name ||
413-
!formData.family_name ||
414370
!formData.email_or_phone_number ||
415371
!formData.password ||
416372
!formData.confirmPassword

0 commit comments

Comments
 (0)