Allow fname & lname & fix labels

lakhansamani · lakhansamani · commit ae54872e9ec8 · 2024-04-02T10:57:23.000+05:30
diff --git a/src/components/AuthorizerBasicAuthLogin.tsx b/src/components/AuthorizerBasicAuthLogin.tsx
@@ -11,6 +11,7 @@ import { Message } from './Message';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 import { OtpDataType, TotpDataType } from '../types';
 import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 const initOtpData: OtpDataType = {
   is_screen_visible: false,
@@ -232,7 +233,8 @@ export const AuthorizerBasicAuthLogin: FC<{
               className={styles['form-input-label']}
               htmlFor="authorizer-login-email"
             >
-              <span>* </span>Email / Phone Number
+              <span>* </span>
+              {getEmailPhoneLabels(config)}
             </label>
             <input
               name="email_or_phone_number"
@@ -242,7 +244,7 @@ export const AuthorizerBasicAuthLogin: FC<{
                   ? styles['input-error-content']
                   : null
               }`}
-              placeholder="eg. hello@world.com / +919999999999"
+              placeholder={getEmailPhonePlaceholder(config)}
               type="text"
               value={formData.email_or_phone_number || ''}
               onChange={e =>
diff --git a/src/components/AuthorizerForgotPassword.tsx b/src/components/AuthorizerForgotPassword.tsx
@@ -10,6 +10,7 @@ import { formatErrorMessage } from '../utils/format';
 import { Message } from './Message';
 import { OtpDataType } from '../types';
 import { AuthorizerResetPassword } from './AuthorizerResetPassword';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 interface InputDataType {
   email_or_phone_number: string | null;
@@ -145,8 +146,8 @@ export const AuthorizerForgotPassword: FC<{
         <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
       )}
       <p style={{ textAlign: 'center', margin: '10px 0px' }}>
-        Please enter your email address.
-        <br /> We will send you an email to reset your password.
+        Please enter your {getEmailPhoneLabels(config)}.
+        <br /> We will send you an email / otp to reset your password.
       </p>
       <br />
       <form onSubmit={onSubmit} name="authorizer-forgot-password-form">
@@ -155,7 +156,8 @@ export const AuthorizerForgotPassword: FC<{
             className={styles['form-input-label']}
             htmlFor="authorizer-forgot-password-email-or-phone-number"
           >
-            <span>* </span>Email / Phone Number
+            <span>* </span>
+            {getEmailPhoneLabels(config)}
           </label>
           <input
             name="email_or_phone_number"
@@ -165,10 +167,10 @@ export const AuthorizerForgotPassword: FC<{
                 ? styles['input-error-content']
                 : null
             }`}
-            placeholder="eg. hello@world.com / +919999999999"
+            placeholder={getEmailPhonePlaceholder(config)}
             type="text"
             value={formData.email_or_phone_number || ''}
-            onChange={(e) =>
+            onChange={e =>
               onInputChange('email_or_phone_number', e.target.value)
             }
           />
diff --git a/src/components/AuthorizerSignup.tsx b/src/components/AuthorizerSignup.tsx
@@ -12,8 +12,11 @@ import { Message } from './Message';
 import PasswordStrengthIndicator from './PasswordStrengthIndicator';
 import { OtpDataType } from '../types';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 interface InputDataType {
+  given_name: string | null;
+  family_name: string | null;
   email_or_phone_number: string | null;
   password: string | null;
   confirmPassword: string | null;
@@ -36,11 +39,15 @@ export const AuthorizerSignup: FC<{
   const [otpData, setOtpData] = useState<OtpDataType>({ ...initOtpData });
   const [successMessage, setSuccessMessage] = useState(``);
   const [formData, setFormData] = useState<InputDataType>({
+    given_name: null,
+    family_name: null,
     email_or_phone_number: null,
     password: null,
     confirmPassword: null,
   });
   const [errorData, setErrorData] = useState<InputDataType>({
+    given_name: null,
+    family_name: null,
     email_or_phone_number: null,
     password: null,
     confirmPassword: null,
@@ -76,6 +83,8 @@ export const AuthorizerSignup: FC<{
       const data: SignupInput = {
         email: email,
         phone_number: phone_number,
+        given_name: formData.given_name || '',
+        family_name: formData.family_name || '',
         password: formData.password || '',
         confirm_password: formData.confirmPassword || '',
       };
@@ -146,6 +155,22 @@ export const AuthorizerSignup: FC<{
     setError(``);
   };
 
+  useEffect(() => {
+    if ((formData.given_name || '').trim() === '') {
+      setErrorData({ ...errorData, given_name: 'First Name is required' });
+    } else {
+      setErrorData({ ...errorData, given_name: null });
+    }
+  }, [formData.given_name]);
+
+  useEffect(() => {
+    if ((formData.family_name || '').trim() === '') {
+      setErrorData({ ...errorData, family_name: 'Last Name is required' });
+    } else {
+      setErrorData({ ...errorData, family_name: null });
+    }
+  }, [formData.family_name]);
+
   useEffect(() => {
     if (formData.email_or_phone_number === '') {
       setErrorData({
@@ -238,19 +263,68 @@ export const AuthorizerSignup: FC<{
               <div className={styles['styled-form-group']}>
                 <label
                   className={styles['form-input-label']}
-                  htmlFor="authorizer-sign-up-email"
+                  htmlFor="authorizer-sign-up-given-name"
+                >
+                  <span>* </span>First Name
+                </label>
+                <input
+                  name="given_name"
+                  id="authorizer-sign-up-given-name"
+                  className={`${styles['form-input-field']} ${
+                    errorData.given_name ? styles['input-error-content'] : null
+                  }`}
+                  placeholder="eg. John"
+                  type="text"
+                  value={formData.given_name || ''}
+                  onChange={e => onInputChange('given_name', e.target.value)}
+                />
+                {errorData.given_name && (
+                  <div className={styles['form-input-error']}>
+                    {errorData.given_name}
+                  </div>
+                )}
+              </div>
+              <div className={styles['styled-form-group']}>
+                <label
+                  className={styles['form-input-label']}
+                  htmlFor="authorizer-sign-up-family-name"
+                >
+                  <span>* </span>Last Name
+                </label>
+                <input
+                  name="family_name"
+                  id="authorizer-sign-up-family-name"
+                  className={`${styles['form-input-field']} ${
+                    errorData.family_name ? styles['input-error-content'] : null
+                  }`}
+                  placeholder="eg. Doe"
+                  type="text"
+                  value={formData.family_name || ''}
+                  onChange={e => onInputChange('family_name', e.target.value)}
+                />
+                {errorData.family_name && (
+                  <div className={styles['form-input-error']}>
+                    {errorData.family_name}
+                  </div>
+                )}
+              </div>
+              <div className={styles['styled-form-group']}>
+                <label
+                  className={styles['form-input-label']}
+                  htmlFor="authorizer-sign-up-email-or-phone-number"
                 >
-                  <span>* </span>Email / Phone Number
+                  <span>* </span>
+                  {getEmailPhoneLabels(config)}
                 </label>
                 <input
-                  name="eemail_or_phone_numbermail"
-                  id="authorizer-login-email-or-phone-number"
+                  name="email_or_phone_number"
+                  id="authorizer-sign-up-email-or-phone-number"
                   className={`${styles['form-input-field']} ${
                     errorData.email_or_phone_number
                       ? styles['input-error-content']
                       : null
                   }`}
-                  placeholder="eg. hello@world.com / +919999999999"
+                  placeholder={getEmailPhonePlaceholder(config)}
                   type="text"
                   value={formData.email_or_phone_number || ''}
                   onChange={e =>
@@ -330,9 +404,13 @@ export const AuthorizerSignup: FC<{
                 disabled={
                   loading ||
                   disableSignupButton ||
+                  !!errorData.given_name ||
+                  !!errorData.family_name ||
                   !!errorData.email_or_phone_number ||
                   !!errorData.password ||
                   !!errorData.confirmPassword ||
+                  !formData.given_name ||
+                  !formData.family_name ||
                   !formData.email_or_phone_number ||
                   !formData.password ||
                   !formData.confirmPassword
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,31 +1,33 @@
 import { AuthToken, User, Authorizer } from '@authorizerdev/authorizer-js';
 import { AuthorizerProviderActionType } from '../constants';
 
+export type AuthorizerConfig = {
+  authorizerURL: string;
+  redirectURL: string;
+  client_id: string;
+  is_google_login_enabled: boolean;
+  is_github_login_enabled: boolean;
+  is_facebook_login_enabled: boolean;
+  is_linkedin_login_enabled: boolean;
+  is_apple_login_enabled: boolean;
+  is_twitter_login_enabled: boolean;
+  is_microsoft_login_enabled: boolean;
+  is_twitch_login_enabled: boolean;
+  is_email_verification_enabled: boolean;
+  is_basic_authentication_enabled: boolean;
+  is_magic_link_login_enabled: boolean;
+  is_sign_up_enabled: boolean;
+  is_strong_password_enabled: boolean;
+  is_multi_factor_auth_enabled: boolean;
+  is_mobile_basic_authentication_enabled: boolean;
+  is_phone_verification_enabled: boolean;
+};
+
 export type AuthorizerState = {
   user: User | null;
   token: AuthToken | null;
   loading: boolean;
-  config: {
-    authorizerURL: string;
-    redirectURL: string;
-    client_id: string;
-    is_google_login_enabled: boolean;
-    is_github_login_enabled: boolean;
-    is_facebook_login_enabled: boolean;
-    is_linkedin_login_enabled: boolean;
-    is_apple_login_enabled: boolean;
-    is_twitter_login_enabled: boolean;
-    is_microsoft_login_enabled: boolean;
-    is_twitch_login_enabled: boolean;
-    is_email_verification_enabled: boolean;
-    is_basic_authentication_enabled: boolean;
-    is_magic_link_login_enabled: boolean;
-    is_sign_up_enabled: boolean;
-    is_strong_password_enabled: boolean;
-    is_multi_factor_auth_enabled: boolean;
-    is_mobile_basic_authentication_enabled: boolean;
-    is_phone_verification_enabled: boolean;
-  };
+  config: AuthorizerConfig;
 };
 
 export type AuthorizerProviderAction = {
diff --git a/src/utils/labels.ts b/src/utils/labels.ts
@@ -0,0 +1,34 @@
+import { AuthorizerConfig } from '../types';
+
+export const getEmailPhoneLabels = (config: AuthorizerConfig): string => {
+  const emailLabel = 'Email';
+  const phoneLabel = 'Phone Number';
+  if (
+    config.is_basic_authentication_enabled &&
+    config.is_mobile_basic_authentication_enabled
+  ) {
+    return `${emailLabel} / ${phoneLabel}`;
+  } else if (config.is_basic_authentication_enabled) {
+    return emailLabel;
+  } else if (config.is_mobile_basic_authentication_enabled) {
+    return phoneLabel;
+  }
+  return emailLabel;
+};
+
+export const getEmailPhonePlaceholder = (config: AuthorizerConfig): string => {
+  const emailPlaceholder = 'hello@world.com';
+  const phonePlaceholder = '+919999999999';
+  const prefix = 'eg.';
+  if (
+    config.is_basic_authentication_enabled &&
+    config.is_mobile_basic_authentication_enabled
+  ) {
+    return `${prefix} ${emailPlaceholder} / ${phonePlaceholder}`;
+  } else if (config.is_basic_authentication_enabled) {
+    return `${prefix} ${emailPlaceholder}`;
+  } else if (config.is_mobile_basic_authentication_enabled) {
+    return `${prefix} ${phonePlaceholder}`;
+  }
+  return emailPlaceholder;
+};
