This repository has been archived by the owner on Nov 21, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show differnt success message for password on success, refactor
- Loading branch information
Showing
14 changed files
with
440 additions
and
382 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
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 |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React, { useState } from 'react'; | ||
| import { useNavigate } from 'react-router'; | ||
|
|
||
| import { RecaptchaAction } from '@graasp/sdk'; | ||
|
|
||
| import { LoadingButton } from '@mui/lab'; | ||
|
|
||
| import { useAuthTranslation } from '../config/i18n'; | ||
| import { SIGN_IN_MAGIC_LINK_SUCCESS_PATH } from '../config/paths'; | ||
| import { mutations } from '../config/queryClient'; | ||
| import { EMAIL_SIGN_IN_FIELD_ID, SIGN_IN_BUTTON_ID } from '../config/selectors'; | ||
| import { useRecaptcha } from '../context/RecaptchaContext'; | ||
| import { useMobileAppLogin } from '../hooks/mobile'; | ||
| import { useRedirection } from '../hooks/searchParams'; | ||
| import { AUTH } from '../langs/constants'; | ||
| import { emailValidator } from '../utils/validation'; | ||
| import EmailInput from './EmailInput'; | ||
| import ErrorDisplay from './common/ErrorDisplay'; | ||
|
|
||
| const { SIGN_IN_BUTTON } = AUTH; | ||
|
|
||
| const MagicLinkForm = () => { | ||
| const navigate = useNavigate(); | ||
| const { t } = useAuthTranslation(); | ||
| const { executeCaptcha } = useRecaptcha(); | ||
|
|
||
| const { isMobile, challenge } = useMobileAppLogin(); | ||
| const redirect = useRedirection(); | ||
|
|
||
| const [email, setEmail] = useState(''); | ||
|
|
||
| // enable validation after first click | ||
| const [shouldValidate, setShouldValidate] = useState(false); | ||
|
|
||
| const { | ||
| mutateAsync: signIn, | ||
| isLoading: isLoadingSignIn, | ||
| error: webSignInError, | ||
| } = mutations.useSignIn(); | ||
| const { | ||
| mutateAsync: mobileSignIn, | ||
| isLoading: isLoadingMobileSignIn, | ||
| error: mobileSignInError, | ||
| } = mutations.useMobileSignIn(); | ||
|
|
||
| const signInError = webSignInError || mobileSignInError; | ||
|
|
||
| const handleSignIn = async () => { | ||
| const lowercaseEmail = email.toLowerCase(); | ||
| const checkingEmail = emailValidator(lowercaseEmail); | ||
| if (checkingEmail) { | ||
| setShouldValidate(true); | ||
| } else { | ||
| try { | ||
| const token = await executeCaptcha( | ||
| isMobile ? RecaptchaAction.SignInMobile : RecaptchaAction.SignIn, | ||
| ); | ||
| await (isMobile | ||
| ? mobileSignIn({ email: lowercaseEmail, captcha: token, challenge }) | ||
| : signIn({ | ||
| email: lowercaseEmail, | ||
| captcha: token, | ||
| url: redirect.url, | ||
| })); | ||
|
|
||
| // navigate to success path | ||
| navigate({ | ||
| pathname: SIGN_IN_MAGIC_LINK_SUCCESS_PATH, | ||
| search: `email=${email}`, | ||
| }); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const handleKeypress = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| // signInMethod email when true | ||
| // sign in by pressing the enter key | ||
| if (e.key === 'Enter') { | ||
| handleSignIn(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <EmailInput | ||
| value={email} | ||
| setValue={setEmail} | ||
| id={EMAIL_SIGN_IN_FIELD_ID} | ||
| onKeyPress={handleKeypress} | ||
| shouldValidate={shouldValidate} | ||
| /> | ||
| <ErrorDisplay error={signInError} /> | ||
| <LoadingButton | ||
| id={SIGN_IN_BUTTON_ID} | ||
| variant="contained" | ||
| onClick={handleSignIn} | ||
| loading={isLoadingMobileSignIn || isLoadingSignIn} | ||
| > | ||
| {t(SIGN_IN_BUTTON)} | ||
| </LoadingButton> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MagicLinkForm; |
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,106 @@ | ||
| import { useState } from 'react'; | ||
| import { Trans } from 'react-i18next'; | ||
| import { useNavigate, useSearchParams } from 'react-router-dom'; | ||
|
|
||
| import { RecaptchaAction } from '@graasp/sdk'; | ||
| import { namespaces } from '@graasp/translations'; | ||
| import { Button } from '@graasp/ui'; | ||
|
|
||
| import MailOutlineIcon from '@mui/icons-material/MailOutline'; | ||
| import { Container, Stack, Typography } from '@mui/material'; | ||
|
|
||
| import { useAuthTranslation } from '../config/i18n'; | ||
| import { mutations } from '../config/queryClient'; | ||
| import { | ||
| BACK_BUTTON_ID, | ||
| RESEND_EMAIL_BUTTON_ID, | ||
| SUCCESS_CONTENT_ID, | ||
| } from '../config/selectors'; | ||
| import { useRecaptcha } from '../context/RecaptchaContext'; | ||
| import { useRedirection } from '../hooks/searchParams'; | ||
| import { AUTH } from '../langs/constants'; | ||
| import FullscreenContainer from './FullscreenContainer'; | ||
|
|
||
| const MagicLinkSuccessContent = () => { | ||
| const navigate = useNavigate(); | ||
| const [searchParams] = useSearchParams(); | ||
| const { t } = useAuthTranslation(); | ||
| const { executeCaptcha } = useRecaptcha(); | ||
| const [isEmailSent, setIsEmailSent] = useState(false); | ||
|
|
||
| // used for resend email | ||
| const redirect = useRedirection(); | ||
| const { mutate: signIn } = mutations.useSignIn(); | ||
|
|
||
| const email = searchParams.get('email'); | ||
|
|
||
| // used for resend email | ||
| const handleResendEmail = async () => { | ||
| const lowercaseEmail = email.toLowerCase(); | ||
| const token = await executeCaptcha(RecaptchaAction.SignIn); | ||
| signIn({ | ||
| email: lowercaseEmail, | ||
| captcha: token, | ||
| url: redirect.url, | ||
| }); | ||
| }; | ||
|
|
||
| const onClickResendEmail = () => { | ||
| setIsEmailSent(true); | ||
| handleResendEmail(); | ||
| }; | ||
|
|
||
| const handleBackButtonClick = () => { | ||
| navigate(-1); | ||
| }; | ||
|
|
||
| return ( | ||
| <FullscreenContainer> | ||
| <Container id={SUCCESS_CONTENT_ID} maxWidth="sm"> | ||
| <Stack direction="column" spacing={2}> | ||
| <Typography | ||
| variant="h4" | ||
| display="flex" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| > | ||
| <MailOutlineIcon fontSize="large" sx={{ marginRight: 1 }} /> | ||
| {t(AUTH.SIGN_IN_SUCCESS_TITLE)} | ||
| </Typography> | ||
| <Typography variant="body1" align="justify"> | ||
| <Trans | ||
| ns={namespaces.auth} | ||
| i18nKey={AUTH.SIGN_IN_SUCCESS_TEXT} | ||
| values={{ email }} | ||
| components={{ bold: <strong /> }} | ||
| /> | ||
| </Typography> | ||
| <Typography variant="body1" align="justify"> | ||
| {t(AUTH.SIGN_IN_SUCCESS_EMAIL_PROBLEM)} | ||
| </Typography> | ||
| <Stack direction="row" justifyContent="center" spacing={1}> | ||
| <Button | ||
| variant="text" | ||
| color="primary" | ||
| id={BACK_BUTTON_ID} | ||
| onClick={handleBackButtonClick} | ||
| > | ||
| {t(AUTH.BACK_BUTTON)} | ||
| </Button> | ||
| <Button | ||
| variant="outlined" | ||
| color="primary" | ||
| onClick={onClickResendEmail} | ||
| id={RESEND_EMAIL_BUTTON_ID} | ||
| disabled={isEmailSent} | ||
| > | ||
| {t(AUTH.RESEND_EMAIL_BUTTON)} | ||
| </Button> | ||
| </Stack> | ||
| </Stack> | ||
| </Container> | ||
| </FullscreenContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default MagicLinkSuccessContent; |
Oops, something went wrong.