Add the possibility to enable/disable default OAuths (#303)

app/javascript/components/TenantSignUp/TenantSignUpP.tsx

@@ -45,6 +45,8 @@ export interface ITenantSignUpTenantForm {
   subdomain: string;
 }
 
+export type AuthMethod = 'none' | 'email' | 'oauth';
+
 const TenantSignUpP = ({
   oAuths,
   oAuthLoginCompleted,
@@ -58,9 +60,12 @@ const TenantSignUpP = ({
   baseUrl,
   authenticityToken
 }: Props) => {
+  // authMethod is either 'none', 'email' or 'oauth'
+  const [authMethod, setAuthMethod] = useState<AuthMethod>(oAuthLoginCompleted ? 'oauth' : 'none');
+
   const [userData, setUserData] = useState({
-    fullName: '',
-    email: '',
+    fullName: oAuthLoginCompleted ? oauthUserName : '',
+    email: oAuthLoginCompleted ? oauthUserEmail : '',
     password: '',
     passwordConfirmation: '',
   });
@@ -72,20 +77,18 @@ const TenantSignUpP = ({
 
   const [currentStep, setCurrentStep] = useState(oAuthLoginCompleted ? 2 : 1);
 
-  const [emailAuth, setEmailAuth] = useState(false);
-
   const handleSignUpSubmit = (siteName: string, subdomain: string) => {
     handleSubmit(
-      oAuthLoginCompleted ? oauthUserName : userData.fullName,
-      oAuthLoginCompleted ? oauthUserEmail : userData.email,
+      userData.fullName,
+      userData.email,
       userData.password,
       siteName,
       subdomain,
-      oAuthLoginCompleted,
+      authMethod == 'oauth',
       authenticityToken,
     ).then(res => {
       if (res?.status !== HttpStatus.Created) return;
-      if (oAuthLoginCompleted) {
+      if (authMethod == 'oauth') {
         let redirectUrl = new URL(baseUrl);
         redirectUrl.hostname = `${subdomain}.${redirectUrl.hostname}`;
         window.location.href = `${redirectUrl.toString()}users/sign_in`;
@@ -107,12 +110,9 @@ const TenantSignUpP = ({
           <UserSignUpForm
             currentStep={currentStep}
             setCurrentStep={setCurrentStep}
-            emailAuth={emailAuth}
-            setEmailAuth={setEmailAuth}
+            authMethod={authMethod}
+            setAuthMethod={setAuthMethod}
             oAuths={oAuths}
-            oAuthLoginCompleted={oAuthLoginCompleted}
-            oauthUserEmail={oauthUserEmail}
-            oauthUserName={oauthUserName}
             userData={userData}
             setUserData={setUserData}
           />

app/javascript/components/TenantSignUp/UserSignUpForm.tsx

@@ -5,7 +5,7 @@ import I18n from 'i18n-js';
 import Box from '../common/Box';
 import Button from '../common/Button';
 import OAuthProviderLink from '../common/OAuthProviderLink';
-import { ITenantSignUpUserForm } from './TenantSignUpP';
+import { AuthMethod, ITenantSignUpUserForm } from './TenantSignUpP';
 import { DangerText } from '../common/CustomTexts';
 import { getLabel, getValidationMessage } from '../../helpers/formUtils';
 import { EMAIL_REGEX } from '../../constants/regex';
@@ -16,12 +16,9 @@ import { BackIcon, EditIcon } from '../common/Icons';
 interface Props {
   currentStep: number;
   setCurrentStep(step: number): void;
-  emailAuth: boolean;
-  setEmailAuth(enabled: boolean): void;
+  authMethod: AuthMethod;
+  setAuthMethod(method: AuthMethod): void;
   oAuths: Array<IOAuth>;
-  oAuthLoginCompleted: boolean;
-  oauthUserEmail?: string;
-  oauthUserName?: string;
   userData: ITenantSignUpUserForm;
   setUserData({}: ITenantSignUpUserForm): void;
 }
@@ -29,12 +26,9 @@ interface Props {
 const UserSignUpForm = ({
   currentStep,
   setCurrentStep,
-  emailAuth,
-  setEmailAuth,
+  authMethod,
+  setAuthMethod,
   oAuths,
-  oAuthLoginCompleted,
-  oauthUserEmail,
-  oauthUserName,
   userData,
   setUserData,
 }: Props) => {
@@ -44,7 +38,15 @@ const UserSignUpForm = ({
     setError,
     getValues,
     formState: { errors }
-  } = useForm<ITenantSignUpUserForm>();
+  } = useForm<ITenantSignUpUserForm>({
+    defaultValues: {
+      fullName: userData.fullName,
+      email: userData.email,
+      password: userData.password,
+      passwordConfirmation: userData.passwordConfirmation,
+    }
+  });
+
   const onSubmit: SubmitHandler<ITenantSignUpUserForm> = data => {
     if (data.password !== data.passwordConfirmation) {
       setError('passwordConfirmation', I18n.t('common.validations.password_mismatch'));
@@ -60,36 +62,40 @@ const UserSignUpForm = ({
       <h3>Create user account</h3>
 
       {
-        currentStep === 1 && !emailAuth && 
+        currentStep === 1 && authMethod == 'none' && 
         <>
-        <Button className="emailAuth" onClick={() => setEmailAuth(true)}>
+        <Button className="emailAuth" onClick={() => setAuthMethod('email')}>
           Sign up with email
         </Button>
 
-        {
-          oAuths.filter(oAuth => oAuth.isEnabled).map((oAuth, i) =>
-            <OAuthProviderLink
-              oAuthId={oAuth.id}
-              oAuthName={oAuth.name}
-              oAuthLogo={oAuth.logo}
-              oAuthReason='tenantsignup'
-              isSignUp
-              key={i}
-            />
-          )
-        }
+        { oAuths.length > 0 && <hr /> }
+
+        <div className="oauthProviderList">
+          {
+            oAuths.filter(oAuth => oAuth.isEnabled).map((oAuth, i) =>
+              <OAuthProviderLink
+                oAuthId={oAuth.id}
+                oAuthName={oAuth.name}
+                oAuthLogo={oAuth.logo}
+                oAuthReason='tenantsignup'
+                isSignUp
+                key={i}
+              />
+            )
+          }
+        </div>
         </>
       }
 
       {
-        currentStep === 1 && emailAuth &&
+        currentStep === 1 && (authMethod == 'email' || authMethod == 'oauth') &&
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionLink
-            onClick={() => setEmailAuth(false)}
+            onClick={() => setAuthMethod('none')}
             icon={<BackIcon />}
             customClass="backButton"
           >
-            {I18n.t('common.buttons.back')}
+            Use another method
           </ActionLink>
 
           <div className="formRow">
@@ -106,6 +112,7 @@ const UserSignUpForm = ({
           <div className="formRow">
             <input
               {...register('email', { required: true, pattern: EMAIL_REGEX })}
+              disabled={authMethod == 'oauth'}
               type="email"
               placeholder={getLabel('user', 'email')}
               id="userEmail"
@@ -117,29 +124,32 @@ const UserSignUpForm = ({
             </DangerText>
           </div>
 
-          <div className="formRow">
-            <div className="userPasswordDiv">
-              <input
-                {...register('password', { required: true, minLength: 6, maxLength: 128 })}
-                type="password"
-                placeholder={getLabel('user', 'password')}
-                id="userPassword"
-                className="formControl"
-              />
-              <DangerText>{ errors.password && I18n.t('common.validations.password', { n: 6 }) }</DangerText>
-            </div>
+          {
+            authMethod == 'email' &&
+            <div className="formRow">
+              <div className="userPasswordDiv">
+                <input
+                  {...register('password', { required: true, minLength: 6, maxLength: 128 })}
+                  type="password"
+                  placeholder={getLabel('user', 'password')}
+                  id="userPassword"
+                  className="formControl"
+                />
+                <DangerText>{ errors.password && I18n.t('common.validations.password', { n: 6 }) }</DangerText>
+              </div>
 
-            <div className="userPasswordConfirmationDiv">
-              <input
-                {...register('passwordConfirmation')}
-                type="password"
-                placeholder={getLabel('user', 'password_confirmation')}
-                id="userPasswordConfirmation"
-                className="formControl"
-              />
-              <DangerText>{ errors.passwordConfirmation && I18n.t('common.validations.password_mismatch') }</DangerText>
+              <div className="userPasswordConfirmationDiv">
+                <input
+                  {...register('passwordConfirmation')}
+                  type="password"
+                  placeholder={getLabel('user', 'password_confirmation')}
+                  id="userPasswordConfirmation"
+                  className="formControl"
+                />
+                <DangerText>{ errors.passwordConfirmation && I18n.t('common.validations.password_mismatch') }</DangerText>
+              </div>
             </div>
-          </div>
+          }
 
           <Button
             onClick={() => null}
@@ -151,9 +161,9 @@ const UserSignUpForm = ({
       }
 
       {
-        currentStep === 2 && !oAuthLoginCompleted &&
+        currentStep === 2 &&
         <p className="userRecap">
-          <b>{oAuthLoginCompleted ? oauthUserName : userData.fullName}</b> ({oAuthLoginCompleted ? oauthUserEmail : userData.email})
+          <b>{userData.fullName}</b> ({userData.email})
           <ActionLink onClick={() => setCurrentStep(currentStep-1)} icon={<EditIcon />} customClass="editUser">Edit</ActionLink>
         </p>
       }