-
-
Notifications
You must be signed in to change notification settings - Fork 440
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(experience): add identifier sso-only landing page (#6440)
- Loading branch information
Showing
9 changed files
with
172 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,4 +16,8 @@ | |
| margin-left: _.unit(0.5); | ||
| margin-top: _.unit(-3); | ||
| } | ||
|
|
||
| .terms { | ||
| margin-bottom: _.unit(4); | ||
| } | ||
| } | ||
116 changes: 116 additions & 0 deletions
116
packages/experience/src/pages/SingleSignOnEmail/SingleSignOnForm/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { AgreeToTermsPolicy, SignInIdentifier } from '@logto/schemas'; | ||
| import { useCallback, useContext, useEffect } from 'react'; | ||
| import { Controller, useForm } from 'react-hook-form'; | ||
|
|
||
| import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext'; | ||
| import LockIcon from '@/assets/icons/lock.svg?react'; | ||
| import Button from '@/components/Button'; | ||
| import ErrorMessage from '@/components/ErrorMessage'; | ||
| import SmartInputField, { | ||
| type IdentifierInputValue, | ||
| } from '@/components/InputFields/SmartInputField'; | ||
| import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox'; | ||
| import useOnSubmit from '@/hooks/use-check-single-sign-on'; | ||
| import useTerms from '@/hooks/use-terms'; | ||
| import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form'; | ||
|
|
||
| import styles from './index.module.scss'; | ||
|
|
||
| type FormState = { | ||
| identifier: IdentifierInputValue; | ||
| }; | ||
|
|
||
| type Props = { | ||
| readonly isTermsAndPrivacyCheckboxVisible?: boolean; | ||
| }; | ||
|
|
||
| const SingleSignOnForm = ({ isTermsAndPrivacyCheckboxVisible }: Props) => { | ||
| const { errorMessage, clearErrorMessage, onSubmit } = useOnSubmit(); | ||
| const { ssoEmail } = useContext(UserInteractionContext); | ||
| const { termsValidation, agreeToTermsPolicy } = useTerms(); | ||
|
|
||
| const { | ||
| handleSubmit, | ||
| control, | ||
| formState: { errors, isValid, isSubmitting }, | ||
| } = useForm<FormState>({ | ||
| reValidateMode: 'onBlur', | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!isValid) { | ||
| clearErrorMessage(); | ||
| } | ||
| }, [clearErrorMessage, isValid]); | ||
|
|
||
| const onSubmitHandler = useCallback( | ||
| async (event?: React.FormEvent<HTMLFormElement>) => { | ||
| /** | ||
| * Prevent the default form submission behavior to avoid page reload. | ||
| */ | ||
| event?.preventDefault(); | ||
|
|
||
| /** | ||
| * Check if the user has agreed to the terms and privacy policy when the policy is set to `Manual`. | ||
| */ | ||
| if (agreeToTermsPolicy === AgreeToTermsPolicy.Manual && !(await termsValidation())) { | ||
| return; | ||
| } | ||
|
|
||
| clearErrorMessage(); | ||
|
|
||
| await handleSubmit(async ({ identifier: { value } }) => onSubmit(value, true))(event); | ||
| }, | ||
| [agreeToTermsPolicy, clearErrorMessage, handleSubmit, onSubmit, termsValidation] | ||
| ); | ||
|
|
||
| return ( | ||
| <form className={styles.form} onSubmit={onSubmitHandler}> | ||
| <Controller | ||
| control={control} | ||
| name="identifier" | ||
| rules={{ | ||
| validate: ({ value }) => { | ||
| if (!value) { | ||
| return getGeneralIdentifierErrorMessage([SignInIdentifier.Email], 'required'); | ||
| } | ||
|
|
||
| const errorMessage = validateIdentifierField(SignInIdentifier.Email, value); | ||
|
|
||
| return errorMessage | ||
| ? getGeneralIdentifierErrorMessage([SignInIdentifier.Email], 'invalid') | ||
| : true; | ||
| }, | ||
| }} | ||
| render={({ field }) => ( | ||
| <SmartInputField | ||
| autoFocus | ||
| className={styles.inputField} | ||
| {...field} | ||
| isDanger={!!errors.identifier} | ||
| defaultValue={ssoEmail} | ||
| errorMessage={errors.identifier?.message} | ||
| enabledTypes={[SignInIdentifier.Email]} | ||
| /> | ||
| )} | ||
| /> | ||
|
|
||
| {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>} | ||
|
|
||
| {Boolean(isTermsAndPrivacyCheckboxVisible) && ( | ||
| <TermsAndPrivacyCheckbox className={styles.terms} /> | ||
| )} | ||
|
|
||
| <Button | ||
| title="action.single_sign_on" | ||
| htmlType="submit" | ||
| icon={<LockIcon />} | ||
| isLoading={isSubmitting} | ||
| /> | ||
|
|
||
| <input hidden type="submit" /> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default SingleSignOnForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/experience/src/pages/SingleSignOnLanding/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { AgreeToTermsPolicy, experience } from '@logto/schemas'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import FocusedAuthPageLayout from '@/Layout/FocusedAuthPageLayout'; | ||
| import useTerms from '@/hooks/use-terms'; | ||
|
|
||
| import SingleSignOnForm from '../SingleSignOnEmail/SingleSignOnForm'; | ||
|
|
||
| const SingleSignOnLanding = () => { | ||
| const { t } = useTranslation(); | ||
| const { agreeToTermsPolicy } = useTerms(); | ||
|
|
||
| return ( | ||
| <FocusedAuthPageLayout | ||
| pageMeta={{ titleKey: 'action.single_sign_on' }} | ||
| title="action.single_sign_on" | ||
| description={t('description.single_sign_on_email_form')} | ||
| footerTermsDisplayPolicies={[AgreeToTermsPolicy.Automatic]} | ||
| authOptionsLink={{ | ||
| to: `/${experience.routes.signIn}`, | ||
| text: 'description.all_sign_in_options', | ||
| }} | ||
| > | ||
| <SingleSignOnForm | ||
| /* Should display terms and privacy checkbox when we need to confirm the terms and privacy policy for both sign-in and sign-up */ | ||
| isTermsAndPrivacyCheckboxVisible={agreeToTermsPolicy === AgreeToTermsPolicy.Manual} | ||
| /> | ||
| </FocusedAuthPageLayout> | ||
| ); | ||
| }; | ||
|
|
||
| export default SingleSignOnLanding; |