fix(clerk-js): Fix password field display logic, fix margin between o…

…auth & web3 providers
clerk · May 18, 2022 · fe601a4 · fe601a4
1 parent 8f9f296
commit fe601a4
Show file tree

Hide file tree

Showing 8 changed files with 416 additions and 489 deletions.
diff --git a/packages/clerk-js/src/ui/signUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/signUp/SignUpContinue.tsx
@@ -16,22 +16,21 @@ import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from 'u
 import { useNavigate } from 'ui/hooks';
 import { SignUpForm } from 'ui/signUp/SignUpForm';
 
+import { SignInLink } from './SignInLink';
 import {
   ActiveIdentifier,
   determineActiveFields,
   emailOrPhoneUsedForFF,
   getInitialActiveIdentifier,
   minimizeFieldsForExistingSignup,
   showFormFields,
-} from './sign_up_form_helpers';
-import { SignInLink } from './SignInLink';
+} from './signUpFormHelpers';
 import { SignUpOAuth } from './SignUpOAuth';
 import { SignUpWeb3 } from './SignUpWeb3';
 
 function _SignUpContinue(): JSX.Element | null {
   const { navigate } = useNavigate();
-  const environment = useEnvironment();
-  const { displayConfig, userSettings } = environment;
+  const { displayConfig, userSettings } = useEnvironment();
   const { attributes } = userSettings;
   const { setSession } = useCoreClerk();
   const { navigateAfterSignUp } = useSignUpContext();
@@ -68,7 +67,7 @@ function _SignUpContinue(): JSX.Element | null {
   const hasVerifiedWeb3 = signUp.verifications?.web3Wallet?.status == 'verified';
 
   const fields = determineActiveFields({
-    environment,
+    attributes,
     hasEmail,
     activeCommIdentifierType,
     signUp,
@@ -93,7 +92,7 @@ function _SignUpContinue(): JSX.Element | null {
     e.preventDefault();
 
     const fieldsToSubmit = Object.entries(fields).reduce(
-      (acc, [k, v]) => [...acc, ...(v.enabled && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
+      (acc, [k, v]) => [...acc, ...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
       [] as Array<FieldState<any>>,
     );
 

diff --git a/packages/clerk-js/src/ui/signUp/SignUpForm.tsx b/packages/clerk-js/src/ui/signUp/SignUpForm.tsx
@@ -4,7 +4,7 @@ import { Input } from '@clerk/shared/components/input';
 import { PhoneInput } from '@clerk/shared/components/phoneInput';
 import React from 'react';
 
-import { ActiveIdentifier, Fields, FormState } from './sign_up_form_helpers';
+import { ActiveIdentifier, Fields, FormState } from './signUpFormHelpers';
 
 type SignUpFormProps = {
   fields: Fields;
@@ -28,9 +28,9 @@ export function SignUpForm({
       submitButtonLabel='Sign up'
     >
       <>
-        {(fields.firstName.enabled || fields.lastName.enabled) && (
+        {(fields.firstName || fields.lastName) && (
           <div className='cl-field-row'>
-            {fields.firstName.enabled && (
+            {fields.firstName && (
               <Control
                 className='cl-half-field'
                 htmlFor='firstName'
@@ -48,7 +48,7 @@ export function SignUpForm({
               </Control>
             )}
 
-            {fields.lastName.enabled && (
+            {fields.lastName && (
               <Control
                 className='cl-half-field'
                 htmlFor='lastName'
@@ -68,7 +68,7 @@ export function SignUpForm({
           </div>
         )}
 
-        {fields.username.enabled && (
+        {fields.username && (
           <Control
             htmlFor='username'
             key='username'
@@ -85,7 +85,7 @@ export function SignUpForm({
           </Control>
         )}
 
-        {fields.emailAddress.enabled && (
+        {fields.emailAddress && (
           <Control
             key='emailAddress'
             htmlFor='emailAddress'
@@ -100,12 +100,12 @@ export function SignUpForm({
               name='emailAddress'
               value={formState.emailAddress.value}
               handleChange={el => formState.emailAddress.setValue(el.value || '')}
-              disabled={fields.emailAddress.showAsDisabled}
+              disabled={fields.emailAddress.disabled}
             />
           </Control>
         )}
 
-        {fields.phoneNumber.enabled && (
+        {fields.phoneNumber && (
           <Control
             key='phoneNumber'
             htmlFor='phoneNumber'
@@ -122,7 +122,7 @@ export function SignUpForm({
           </Control>
         )}
 
-        {fields.password.enabled && (
+        {fields.password && (
           <Control
             key='password'
             htmlFor='password'

diff --git a/packages/clerk-js/src/ui/signUp/SignUpStart.test.tsx b/packages/clerk-js/src/ui/signUp/SignUpStart.test.tsx
@@ -240,7 +240,7 @@ describe('<SignUpStart/>', () => {
           required: false,
         },
         password: {
-          enabled: false,
+          enabled: true,
           required: false,
         },
       },
@@ -260,6 +260,7 @@ describe('<SignUpStart/>', () => {
     screen.getByRole('button', { name: /Google/ });
     screen.getByRole('button', { name: /Facebook/ });
     expect(screen.queryByRole('button', { name: 'Sign up' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Password')).not.toBeInTheDocument();
   });
 
   describe('when the user does not grant access to their Facebook account', () => {
@@ -342,7 +343,7 @@ describe('<SignUpStart/>', () => {
                 required: false,
               },
               password: {
-                enabled: false,
+                enabled: true,
                 required: false,
               },
             },
@@ -353,20 +354,22 @@ describe('<SignUpStart/>', () => {
           setWindowQueryParams([]);
         });
 
-        it('it auto-completes sign up flow if sign up is complete after create', async () => {
+        it('it auto-completes sign up flow if sign-up is complete after create', async () => {
           mockCreateRequest.mockImplementation(() =>
             Promise.resolve({
               status: 'complete',
               emailAddress: 'jdoe@example.com',
             }),
           );
+
           render(<SignUpStart />);
+
           await waitFor(() => {
             expect(mockSetSession).toHaveBeenCalled();
           });
         });
 
-        it('it does not auto-complete sign up flow if sign up if requirements are missing', async () => {
+        it('it does not auto-complete sign up flow if sign up requirements are missing', async () => {
           // Require extra fields, like username and password
           mockUserSettings = new UserSettings({
             attributes: {
@@ -465,7 +468,7 @@ describe('<SignUpStart/>', () => {
                 required: false,
               },
               password: {
-                enabled: false,
+                enabled: true,
                 required: false,
               },
             },
@@ -479,10 +482,12 @@ describe('<SignUpStart/>', () => {
           );
 
           render(<SignUpStart />);
+
           await waitFor(() => {
             expect(mockSetSession).not.toHaveBeenCalled();
             screen.getByText(/First name/);
             screen.getByText(/Last name/);
+            expect(screen.queryByText('Password')).not.toBeInTheDocument();
           });
 
           // Submit the form
@@ -516,7 +521,7 @@ describe('<SignUpStart/>', () => {
                 required: false,
               },
               password: {
-                enabled: false,
+                enabled: true,
                 required: false,
               },
             },
@@ -551,7 +556,7 @@ describe('<SignUpStart/>', () => {
           used_for_first_factor: false,
         },
         password: {
-          enabled: false,
+          enabled: true,
           required: false,
         },
         username: {
@@ -579,5 +584,6 @@ describe('<SignUpStart/>', () => {
 
     render(<SignUpStart />);
     expect(screen.queryByRole('button', { name: 'Sign up' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Password')).not.toBeInTheDocument();
   });
 });
diff --git a/packages/clerk-js/src/ui/signUp/SignUpStart.tsx b/packages/clerk-js/src/ui/signUp/SignUpStart.tsx
@@ -19,22 +19,21 @@ import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from 'u
 import { useNavigate } from 'ui/hooks';
 import { getClerkQueryParam } from 'utils/getClerkQueryParam';
 
+import { SignInLink } from './SignInLink';
+import { SignUpForm } from './SignUpForm';
 import {
   ActiveIdentifier,
   determineActiveFields,
   emailOrPhoneUsedForFF,
   getInitialActiveIdentifier,
   showFormFields,
-} from './sign_up_form_helpers';
-import { SignInLink } from './SignInLink';
-import { SignUpForm } from './SignUpForm';
+} from './signUpFormHelpers';
 import { SignUpOAuth } from './SignUpOAuth';
 import { SignUpWeb3 } from './SignUpWeb3';
 
 function _SignUpStart(): JSX.Element {
   const { navigate } = useNavigate();
-  const environment = useEnvironment();
-  const { userSettings } = environment;
+  const { userSettings } = useEnvironment();
   const { attributes } = userSettings;
   const { setSession } = useCoreClerk();
   const { navigateAfterSignUp } = useSignUpContext();
@@ -65,7 +64,7 @@ function _SignUpStart(): JSX.Element {
   const hasEmail = !!formState.emailAddress.value;
 
   const fields = determineActiveFields({
-    environment,
+    attributes,
     hasTicket,
     hasEmail,
     activeCommIdentifierType,
@@ -102,7 +101,8 @@ function _SignUpStart(): JSX.Element {
   };
 
   React.useLayoutEffect(() => {
-    if (Object.values(fields).filter(f => f.enabled && !f.required).length) {
+    // Don't proceed with token flow if there are still optional fields to fill in
+    if (Object.values(fields).some(f => f && !f.required)) {
       return;
     }
 
@@ -149,11 +149,11 @@ function _SignUpStart(): JSX.Element {
     e.preventDefault();
 
     const fieldsToSubmit = Object.entries(fields).reduce(
-      (acc, [k, v]) => [...acc, ...(v.enabled && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
+      (acc, [k, v]) => [...acc, ...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
       [] as Array<FieldState<any>>,
     );
 
-    if (fields.ticket.enabled) {
+    if (fields.ticket) {
       // fieldsToSubmit: Constructing a fake fields object for strategy.
       fieldsToSubmit.push({
         name: 'strategy',