-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1000 from internxt/staging
[PB-115] release/Ability to change my email address for my account
- Loading branch information
Showing
17 changed files
with
145 additions
and
76 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 |
|---|---|---|
|
|
@@ -6,33 +6,50 @@ import Input from 'app/shared/components/Input'; | |
| import Button from 'app/shared/components/Button/Button'; | ||
| import { areCredentialsCorrect } from 'app/auth/services/auth.service'; | ||
| import Spinner from 'app/shared/components/Spinner/Spinner'; | ||
| import localStorageService from '../../services/local-storage.service'; | ||
| import userService from '../../../auth/services/user.service'; | ||
| import errorService from '../../services/error.service'; | ||
| import { userThunks } from '../../../store/slices/user'; | ||
| import { useDispatch } from 'react-redux'; | ||
|
|
||
| type StatusType = 'loading' | 'auth' | 'error' | 'success' | 'expired'; | ||
|
|
||
| const STATUS = { | ||
| LOADING: 'loading', | ||
| AUTH: 'auth', | ||
| ERROR: 'error', | ||
| SUCCESS: 'success', | ||
| EXPIRED: 'expired', | ||
| } as const; | ||
|
|
||
| export default function ChangeEmailView(): JSX.Element { | ||
| const { translate } = useTranslationContext(); | ||
| const dispatch = useDispatch(); | ||
| const { params } = useRouteMatch<{ token: string }>(); | ||
| const { token } = params; | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const newEmailParam = urlParams.get('n'); | ||
|
|
||
| const [status, setStatus] = useState<'auth' | 'loading' | 'error' | 'success' | 'expired'>('loading'); | ||
| const [status, setStatus] = useState<StatusType>(STATUS.LOADING); | ||
| const [email, setEmail] = useState<string>(''); | ||
| const [newEmail, setNewEmail] = useState<string>(''); | ||
| const [password, setPassword] = useState<string>(''); | ||
| const [expired, setExpired] = useState<boolean | null>(null); | ||
| const [auth, setAuth] = useState<boolean>(false); | ||
|
|
||
| async function getInfo() { | ||
| // TODO -> Get user "email", "newEmail" and "expired" from the token | ||
| const isExpired = false; //! Check if link has expired | ||
| const isExpired = (await userService.checkChangeEmailLinkExpiration(token)).isExpired; | ||
|
|
||
| if (isExpired) { | ||
| setStatus('expired'); | ||
| setStatus(STATUS.EXPIRED); | ||
| setExpired(true); | ||
| } else { | ||
| setStatus('auth'); | ||
| setStatus(STATUS.AUTH); | ||
| setExpired(false); | ||
|
|
||
| // TODO -> Set info from "email" and "newEmail" | ||
| setEmail('[email protected]'); //! Change with current email | ||
| setNewEmail('[email protected]'); //! Change with new email | ||
| const user = localStorageService.getUser(); | ||
| if (user) setEmail(user.email); | ||
| if (newEmailParam) setNewEmail(newEmailParam); | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -42,32 +59,30 @@ export default function ChangeEmailView(): JSX.Element { | |
|
|
||
| async function verify(e) { | ||
| e.preventDefault(); | ||
| setStatus('loading'); | ||
| setStatus(STATUS.LOADING); | ||
|
|
||
| try { | ||
| const correctPassword = await areCredentialsCorrect(email, password); | ||
| if (correctPassword) { | ||
| const isCorrectPassword = await areCredentialsCorrect(email, password); | ||
| if (isCorrectPassword) { | ||
| setAuth(true); | ||
|
|
||
| try { | ||
| // TODO -> Run changeEmail thunk (if chaged successfully return true, if not return false) | ||
| const emailChanged = true; //! Change for changeEmail thunk | ||
|
|
||
| if (emailChanged) { | ||
| setStatus('success'); | ||
| setAuth(true); | ||
| } else { | ||
| setStatus('error'); | ||
| setAuth(true); | ||
| } | ||
| } catch (err) { | ||
| console.error(err); | ||
| setStatus('error'); | ||
| const { newAuthentication } = await userService.verifyEmailChange(token); | ||
| const { user, token: oldToken, newToken } = newAuthentication; | ||
| dispatch(userThunks.updateUserEmailCredentialsThunk({ newUserData: user, token: oldToken, newToken })); | ||
|
|
||
| setStatus(STATUS.SUCCESS); | ||
| } catch (error) { | ||
| errorService.reportError(error); | ||
| setStatus(STATUS.ERROR); | ||
| } | ||
| } else { | ||
| setStatus('error'); | ||
| setStatus(STATUS.ERROR); | ||
| setAuth(false); | ||
| } | ||
| } catch (err) { | ||
| console.error(err); | ||
| setStatus('error'); | ||
| } catch (error) { | ||
| errorService.reportError(error); | ||
| setStatus(STATUS.ERROR); | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -123,27 +138,29 @@ export default function ChangeEmailView(): JSX.Element { | |
| return ( | ||
| <div className="flex min-h-screen items-center justify-center"> | ||
| <div className="flex w-full max-w-xs flex-col items-center space-y-5"> | ||
| {status === 'loading' && expired === null ? ( | ||
| {status === STATUS.LOADING && expired === null ? ( | ||
| <Spinner size={24} /> | ||
| ) : !expired && !auth ? ( | ||
| <> | ||
| <State {...layout['auth']} /> | ||
| <State {...layout[STATUS.AUTH]} /> | ||
|
|
||
| <form className="flex w-full flex-col space-y-3" onSubmit={verify}> | ||
| <Input | ||
| required | ||
| disabled={status === 'loading'} | ||
| disabled={status === STATUS.LOADING} | ||
| variant="password" | ||
| label={translate('views.emailChange.password')} | ||
| onChange={setPassword} | ||
| autofocus | ||
| accent={status === 'error' ? 'error' : undefined} | ||
| message={status === 'error' ? (translate('views.emailChange.auth.wrongPassword') as string) : undefined} | ||
| accent={status === STATUS.ERROR ? 'error' : undefined} | ||
| message={ | ||
| status === STATUS.ERROR ? (translate('views.emailChange.auth.wrongPassword') as string) : undefined | ||
| } | ||
| name="password" | ||
| /> | ||
|
|
||
| <Button loading={status === 'loading'} type="submit"> | ||
| {translate('views.account.tabs.account.accountDetails.changeEmail.sendingVerification')} | ||
| <Button loading={status === STATUS.LOADING} type="submit"> | ||
| {translate('views.account.tabs.account.accountDetails.changeEmail.confirm')} | ||
| </Button> | ||
| </form> | ||
| </> | ||
|
|
@@ -153,9 +170,9 @@ export default function ChangeEmailView(): JSX.Element { | |
|
|
||
| <Link | ||
| className="flex h-10 items-center justify-center rounded-lg bg-primary px-5 font-medium text-white no-underline hover:text-white" | ||
| to={cta[status].path} | ||
| to={cta[status]?.path} | ||
| > | ||
| {cta[status].label} | ||
| {cta[status]?.label} | ||
| </Link> | ||
| </> | ||
| )} | ||
|
|
||
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
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
Oops, something went wrong.
533a128There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
drive-web – ./
drive-web-nu.vercel.app
drive-web-internxt-web-team.vercel.app
drive-web-git-master-internxt-web-team.vercel.app