diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.tsx index 30c85ea22..68de4d658 100644 --- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.tsx @@ -1,5 +1,6 @@ -import { SignInIdentifier } from '@logto/schemas'; +import { AlternativeSignUpIdentifier, SignInIdentifier } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; +import { useCallback } from 'react'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -48,22 +49,49 @@ function SignInMethodEditBox() { const { identifier: signUpIdentifier, - identifiers: signUpIdentifiers, + identifiers, password: isSignUpPasswordRequired, verify: isSignUpVerificationRequired, } = signUp; const requiredSignInIdentifiers = signUpIdentifiersMapping[signUpIdentifier]; + const signUpIdentifiers = identifiers.map(({ identifier }) => identifier); // TODO: Remove this dev feature guard when multi sign-up identifiers are launched const ignoredWarningConnectors = isDevFeaturesEnabled - ? getSignUpIdentifiersRequiredConnectors(signUpIdentifiers.map(({ identifier }) => identifier)) + ? getSignUpIdentifiersRequiredConnectors(signUpIdentifiers) : getSignUpRequiredConnectorTypes(signUpIdentifier); const signInIdentifierOptions = signInIdentifiers.filter((candidateIdentifier) => fields.every(({ identifier }) => identifier !== candidateIdentifier) ); + const isVerificationCodeCheckable = useCallback( + (identifier: SignInIdentifier) => { + if (identifier === SignInIdentifier.Username) { + return false; + } + + if (isSignUpPasswordRequired) { + return true; + } + + if (!isDevFeaturesEnabled) { + return !isSignUpVerificationRequired; + } + + // If the sign-in identifier is also enabled for sign-up. + const signUpVerificationRequired = signUpIdentifiers.some( + (signUpIdentifier) => + signUpIdentifier === identifier || + signUpIdentifier === AlternativeSignUpIdentifier.EmailOrPhone + ); + + return !signUpVerificationRequired; + }, + [isSignUpPasswordRequired, isSignUpVerificationRequired, signUpIdentifiers] + ); + return (
@@ -116,9 +144,7 @@ function SignInMethodEditBox() { identifier !== SignInIdentifier.Username && (isDevFeaturesEnabled || !isSignUpPasswordRequired) } - isVerificationCodeCheckable={ - !(isSignUpVerificationRequired && !isSignUpPasswordRequired) - } + isVerificationCodeCheckable={isVerificationCodeCheckable(value.identifier)} isDeletable={ isDevFeaturesEnabled || !requiredSignInIdentifiers.includes(identifier) } diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpForm.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpForm.tsx index 58e87f84d..6d756a2b9 100644 --- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpForm.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpForm.tsx @@ -1,5 +1,5 @@ import { AlternativeSignUpIdentifier, SignInIdentifier } from '@logto/schemas'; -import { useEffect, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -22,16 +22,9 @@ function SignUpForm() { setValue, getValues, trigger, - formState: { submitCount, dirtyFields }, + formState: { submitCount }, } = useFormContext(); - // Note: `useWatch` is a hook that returns the updated value on every render. - // Unlike `watch`, it doesn't require a re-render to get the updated value (alway return the current ref). - const signUp = useWatch({ - control, - name: 'signUp', - }); - const signUpIdentifiers = useWatch({ control, name: 'signUp.identifiers', @@ -44,40 +37,11 @@ function SignUpForm() { }; }, [signUpIdentifiers]); - // Should sync the sign-up identifier auth settings when the sign-up identifiers changed - // TODO: need to check with designer - useEffect(() => { - // Only trigger the effect when the identifiers field is dirty - const isIdentifiersDirty = dirtyFields.signUp?.identifiers; - if (!isIdentifiersDirty) { - return; - } - - const identifiers = signUpIdentifiers.map(({ identifier }) => identifier); - if (identifiers.length === 0) { - setValue('signUp.password', false); - setValue('signUp.verify', false); - return; - } - - if (identifiers.includes(SignInIdentifier.Username)) { - setValue('signUp.password', true); - } - - // Disable verification when the primary identifier is username, - // otherwise enable it for the rest of the identifiers (email, phone, emailOrPhone) - setValue('signUp.verify', identifiers[0] !== SignInIdentifier.Username); - }, [dirtyFields.signUp?.identifiers, setValue, signUpIdentifiers]); - // Sync sign-in methods when sign-up methods change - useEffect(() => { - // Only trigger the effect when the sign-up field is dirty - const isIdentifiersDirty = dirtyFields.signUp; - if (!isIdentifiersDirty) { - return; - } - + const syncSignInMethods = useCallback(() => { const signInMethods = getValues('signIn.methods'); + const signUp = getValues('signUp'); + const { password, identifiers } = signUp; const enabledSignUpIdentifiers = identifiers.reduce( @@ -129,7 +93,7 @@ function SignUpForm() { void trigger('signIn.methods'); }, 0); } - }, [dirtyFields.signUp, getValues, setValue, signUp, submitCount, trigger]); + }, [getValues, setValue, submitCount, trigger]); return ( @@ -138,7 +102,7 @@ function SignUpForm() { {t('sign_in_exp.sign_up_and_sign_in.sign_up.identifier_description')} - + {shouldShowAuthenticationFields && ( @@ -153,7 +117,10 @@ function SignUpForm() { { + onChange(value); + syncSignInMethods(); + }} /> )} /> diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpIdentifiersEditBox/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpIdentifiersEditBox/index.tsx index fe51a7c25..c5323eefa 100644 --- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpIdentifiersEditBox/index.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpIdentifiersEditBox/index.tsx @@ -4,7 +4,7 @@ import { type SignUpIdentifier, } from '@logto/schemas'; import { t } from 'i18next'; -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { DragDropProvider, DraggableItem } from '@/ds-components/DragDrop'; @@ -29,8 +29,15 @@ const emailOrPhoneOption = { const signUpIdentifierOptions = [...signInIdentifierOptions, emailOrPhoneOption]; -function SignUpIdentifiersEditBox() { - const { control } = useFormContext(); +type Props = { + /** + * Sync the sign-in methods when the sign-up settings change. + */ + readonly syncSignInMethods: () => void; +}; + +function SignUpIdentifiersEditBox({ syncSignInMethods }: Props) { + const { control, getValues, setValue } = useFormContext(); const signUpIdentifiers = useWatch({ control, name: 'signUp.identifiers' }); @@ -41,6 +48,37 @@ function SignUpIdentifiersEditBox() { name: 'signUp.identifiers', }); + // Revalidate the primary identifier authentication fields when the identifiers change + const onSignUpIdentifiersChange = useCallback(() => { + const identifiers = getValues('signUp.identifiers').map(({ identifier }) => identifier); + setValue('signUp.verify', identifiers[0] !== SignInIdentifier.Username); + syncSignInMethods(); + }, [getValues, setValue, syncSignInMethods]); + + const onDeleteSignUpIdentifier = useCallback(() => { + const identifiers = getValues('signUp.identifiers').map(({ identifier }) => identifier); + + if (identifiers.length === 0) { + setValue('signUp.password', false); + setValue('signUp.verify', false); + // Password changed need to sync sign-in methods + syncSignInMethods(); + return; + } + + onSignUpIdentifiersChange(); + }, [getValues, onSignUpIdentifiersChange, setValue, syncSignInMethods]); + + const onAppendSignUpIdentifier = useCallback( + (identifier: SignUpIdentifier) => { + if (identifier === SignInIdentifier.Username) { + setValue('signUp.password', true); + } + onSignUpIdentifiersChange(); + }, + [onSignUpIdentifiersChange, setValue] + ); + const options = useMemo< Array<{ value: SignUpIdentifier; @@ -89,7 +127,10 @@ function SignUpIdentifiersEditBox() { key={id} id={id} sortIndex={index} - moveItem={swap} + moveItem={(dragIndex, hoverIndex) => { + swap(dragIndex, hoverIndex); + onSignUpIdentifiersChange(); + }} className={styles.draggleItemContainer} > { remove(index); + onDeleteSignUpIdentifier(); }} /> )} @@ -135,6 +177,7 @@ function SignUpIdentifiersEditBox() { hasSelectedIdentifiers={signUpIdentifiers.length > 0} onSelected={(identifier) => { append({ identifier }); + onAppendSignUpIdentifier(identifier); }} />
diff --git a/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/happy-path.test.ts b/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/happy-path.test.ts index f64b77248..d924e088a 100644 --- a/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/happy-path.test.ts +++ b/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/happy-path.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-lines */ import { logtoConsoleUrl as logtoConsoleUrlString } from '#src/constants.js'; import { expectModalWithTitle, @@ -7,7 +8,13 @@ import { goToAdminConsole, waitForToast, } from '#src/ui-helpers/index.js'; -import { expectNavigation, appendPathname, devFeatureDisabledTest } from '#src/utils.js'; +import { + expectNavigation, + appendPathname, + devFeatureDisabledTest, + devFeatureTest, + waitFor, +} from '#src/utils.js'; import { expectToSaveSignInExperience, waitForFormCard } from '../helpers.js'; @@ -21,7 +28,9 @@ import { expectToDeleteSocialConnector, } from './connector-setup-helpers.js'; import { + cleanUpSignInAndSignUpIdentifiers, expectToAddSignInMethod, + expectToAddSignUpMethod, expectToAddSocialSignInConnector, expectToClickSignInMethodAuthnOption, expectToClickSignUpAuthnOption, @@ -30,6 +39,7 @@ import { expectToResetSignUpAndSignInConfig, expectToSelectSignUpIdentifier, expectToSwapSignInMethodAuthnOption, + resetSignUpAndSignInConfigToUsernamePassword, } from './helpers.js'; await page.setViewport({ width: 1920, height: 1080 }); @@ -75,7 +85,7 @@ describe('sign-in experience(happy path): sign-up and sign-in', () => { await expectToResetSignUpAndSignInConfig(page); }); - it('select email as sign-in method and disable password settings for sign-up', async () => { + it('select email as sign-up method and disable password settings for sign-up', async () => { await expectToSelectSignUpIdentifier(page, 'Email address'); // Disable password settings for sign-up await expectToClickSignUpAuthnOption(page, 'Create your password'); @@ -594,6 +604,391 @@ describe('sign-in experience(happy path): sign-up and sign-in', () => { }); }); + devFeatureTest.describe('email as sign-up identifier', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select email as sign-up identifier', async () => { + await expectToAddSignUpMethod(page, 'Email address', false); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update email sign-in method', async () => { + /** + * Sign-in method + * - Toggle off password + * - Email address: verification code + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Password', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Toggle on password + * - Email address: verification code + password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Password', + }); + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('add username sign-in method', async () => { + /** + * Sign-in method + * - Email address: verification code + password + * - Username: password + */ + await expectToAddSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('add & update phone number sign-in method', async () => { + await expectToAddSignInMethod(page, 'Phone number'); + /** + * Sign-in method + * - Email address: verification code + password + * - Username: password + * - Phone number: password + verification code + */ + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + password + * - Username: password + * - Phone number: verification code + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Password', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + password + * - Phone number: verification code + */ + await expectToRemoveSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + password + * - Phone number: password + verification code + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Password', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + + devFeatureTest.describe('email as sign-up identifier (password and verify)', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select email as sign-up identifier and enable password settings for sign-up', async () => { + await expectToAddSignUpMethod(page, 'Email address', false); + // Enable password settings for sign-up + await expectToClickSignUpAuthnOption(page, 'Create your password'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update email sign-in method', async () => { + /** + * Sign-in method + * - Email address: verification code + password + */ + // Sign-in method: Email address + verification code + password + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await expectToSaveSignInExperience(page); + + /** + * Sign-in method + * - Email address: password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Verification code', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('add phone number & username as sign-in method', async () => { + /** + * Sign-in method + * - Email address: password + * - Phone number: password + verification code + */ + await expectToAddSignInMethod(page, 'Phone number'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Verification code', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + * - Username: password + */ + await expectToAddSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + verification code + * - Username: password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Verification code', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + + devFeatureTest.describe('email or phone as sign-up identifier (verify only', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select email or phone as sign-up identifier and disable password settings for sign-up', async () => { + await expectToAddSignUpMethod(page, 'Email address or phone number', false); + /** + * Sign-in method + * - Email address: password + verification code + * - Phone number: password + verification code + */ + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update sign-in method configs', async () => { + /** + * Sign-in method + * - Email address: verification code + password + * - Phone number: verification code + password + */ + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await waitFor(100); + await expectToSwapSignInMethodAuthnOption(page, 'Phone number'); + await expectToSaveSignInExperience(page); + + /** + * Sign-in method + * - Email address: verification code + * - Phone number: verification code + password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Password', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + * - Phone number: verification code + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Password', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + * - Phone number: verification code + * - Username: password + */ + await expectToAddSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + + devFeatureTest.describe('email or phone as sign-up identifier (password & verify)', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select email or phone as sign-up identifier and enable password settings for sign-up', async () => { + await expectToAddSignUpMethod(page, 'Email address or phone number', false); + /** + * Sign-in method + * - Email address: password + verification code + * - Phone number: password + verification code + */ + await expectToClickSignUpAuthnOption(page, 'Create your password'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update sign-in method configs', async () => { + /** + * Sign-in method + * - Email address: verification code + password + */ + // Sign-in method: Email address + verification code + password + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await waitFor(100); + await expectToSwapSignInMethodAuthnOption(page, 'Phone number'); + await expectToSaveSignInExperience(page); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Verification code', + }); + await waitFor(100); + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Verification code', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: verification code + * - Phone number: verification code + * - Username: password + */ + await expectToAddSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + + devFeatureTest.describe('username and email as sign-up identifier', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select username and email as sign-up identifier', async () => { + await expectToAddSignUpMethod(page, 'Email address', false); + await expectToAddSignUpMethod(page, 'Username'); + /** + * Sign-in method + * - Email address: password + verification code + * - Username: password + */ + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update sign-in method configs', async () => { + /** + * Sign-in method + * - Email address: verification code + password + * - Username: password + */ + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await expectToSaveSignInExperience(page); + + /** + * Sign-in method + * - Email address: verification code + password + */ + await expectToRemoveSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + + devFeatureTest.describe('username and email or phone as sign-up identifier', () => { + beforeAll(async () => { + await cleanUpSignInAndSignUpIdentifiers(page); + }); + afterAll(async () => { + await resetSignUpAndSignInConfigToUsernamePassword(page); + }); + + it('select username and email or phone as sign-up identifier', async () => { + await expectToAddSignUpMethod(page, 'Username', false); + await expectToAddSignUpMethod(page, 'Email address or phone number'); + /** + * Sign-in method + * - Email address: password + verification code + * - Phone number: password + verification code + * - Username: password + */ + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + + it('update sign-in method configs', async () => { + /** + * Sign-in method + * - Email address: verification code + password + * - Username: password + */ + await expectToSwapSignInMethodAuthnOption(page, 'Email address'); + await waitFor(100); + await expectToSwapSignInMethodAuthnOption(page, 'Phone number'); + await expectToSaveSignInExperience(page); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + * - Username: password + */ + await expectToClickSignInMethodAuthnOption(page, { + method: 'Email address', + option: 'Verification code', + }); + await waitFor(100); + await expectToClickSignInMethodAuthnOption(page, { + method: 'Phone number', + option: 'Verification code', + }); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + + /** + * Sign-in method + * - Email address: password + * - Phone number: password + */ + await expectToRemoveSignInMethod(page, 'Username'); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + }); + }); + it('can disable user registration', async () => { const switchSelector = 'label[class$=switch]:has(input[name=createAccountEnabled])'; await expect(page).toClick(switchSelector); @@ -604,3 +999,4 @@ describe('sign-in experience(happy path): sign-up and sign-in', () => { await expectToSaveSignInExperience(page); }); }); +/* eslint-enable max-lines */ diff --git a/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/helpers.ts b/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/helpers.ts index ef563acb7..f4cd7578b 100644 --- a/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/helpers.ts +++ b/packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/helpers.ts @@ -226,3 +226,79 @@ export const expectErrorsOnNavTab = async ( text: error, }); }; + +/* eslint-disable no-await-in-loop */ + +const cleanUpAllSignUpMethods = async (page: Page) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, no-constant-condition + while (true) { + const signUpItems = await page.$$('div[class$=signUpMethodItem]'); + if (signUpItems.length === 0) { + break; + } + await expect(signUpItems[0]).toClick('button:last-of-type'); + await waitFor(100); + } +}; + +const cleanUpAllSignInMethods = async (page: Page) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, no-constant-condition + while (true) { + const signInItems = await page.$$('div[class$=signInMethodItem]'); + if (signInItems.length === 0) { + break; + } + await expect(signInItems[0]).toClick('div[class$=anchor] button:last-of-type'); + await waitFor(100); + } +}; + +export const cleanUpSignInAndSignUpIdentifiers = async (page: Page, needSave = true) => { + const signUpItems = await page.$$('div[class$=signUpMethodItem]'); + const signInItems = await page.$$('div[class$=signInMethodItem]'); + + // Directly return if there is no sign-up or sign-in method + if (signUpItems.length === 0 && signInItems.length === 0) { + return; + } + + await cleanUpAllSignUpMethods(page); + await cleanUpAllSignInMethods(page); + + if (needSave) { + await waitFor(100); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); + } +}; + +export const resetSignUpAndSignInConfigToUsernamePassword = async (page: Page) => { + await cleanUpSignInAndSignUpIdentifiers(page, false); + await expectToAddSignUpMethod(page, 'Username', false); + await waitFor(100); + await expectToSaveSignInExperience(page, { needToConfirmChanges: true }); +}; + +export const expectToAddSignUpMethod = async (page: Page, method: string, isAddAnother = true) => { + const signUpMethodsField = await expect(page).toMatchElement( + 'div[class$=field]:has(div[class$=headline] > div[class$=title])', + { + text: 'Sign-up identifiers', + } + ); + + // Click Add another + await expect(signUpMethodsField).toClick('button span', { + text: isAddAnother ? 'Add another' : 'Add sign-up method', + }); + + // Wait for the dropdown to be rendered in the correct position + await waitFor(100); + await expect(page).toClick('.ReactModalPortal div[class$=dropdownContainer] div[role=menuitem]', { + text: method, + }); + + await page.waitForSelector('.ReactModalPortal div[class$=dropdownContainer]', { + hidden: true, + }); +}; +/* eslint-enable no-await-in-loop */