Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create Signup page for users from Invite link (#2052)
* refactor: user creation screen cleanup * feat: deprecation notice for google sso * fix: docs openid typo * user invite hook mock
- Loading branch information
Showing
13 changed files
with
256 additions
and
205 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 was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -1,113 +1,137 @@ | ||
| import useLoading from 'hooks/useLoading'; | ||
| import { TextField, Typography } from '@mui/material'; | ||
| import StandaloneBanner from '../StandaloneBanner/StandaloneBanner'; | ||
| import ResetPasswordDetails from '../common/ResetPasswordDetails/ResetPasswordDetails'; | ||
| import { useStyles } from './NewUser.styles'; | ||
| import { Box, TextField, Typography } from '@mui/material'; | ||
| import useResetPassword from 'hooks/api/getters/useResetPassword/useResetPassword'; | ||
| import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout'; | ||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
| import InvalidToken from '../common/InvalidToken/InvalidToken'; | ||
| import AuthOptions from '../common/AuthOptions/AuthOptions'; | ||
| import DividerText from 'component/common/DividerText/DividerText'; | ||
| import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails'; | ||
| import { useInviteUserToken } from 'hooks/api/getters/useInviteUserToken/useInviteUserToken'; | ||
| import ResetPasswordForm from '../common/ResetPasswordForm/ResetPasswordForm'; | ||
| import InvalidToken from '../common/InvalidToken/InvalidToken'; | ||
| import { NewUserWrapper } from './NewUserWrapper/NewUserWrapper'; | ||
|
|
||
| export const NewUser = () => { | ||
| const { authDetails } = useAuthDetails(); | ||
| const { token, data, loading, setLoading, invalidToken } = | ||
| useResetPassword(); | ||
| const ref = useLoading(loading); | ||
| const { classes: styles } = useStyles(); | ||
| const { | ||
| token, | ||
| data, | ||
| loading: resetLoading, | ||
| setLoading, | ||
| invalidToken, | ||
| } = useResetPassword(); | ||
| const { invite, loading: inviteLoading } = useInviteUserToken(); | ||
| const passwordDisabled = authDetails?.defaultHidden === true; | ||
|
|
||
| return ( | ||
| <div ref={ref}> | ||
| <StandaloneLayout | ||
| showMenu={false} | ||
| BannerComponent={<StandaloneBanner title={'Unleash'} />} | ||
| > | ||
| <div className={styles.newUser}> | ||
| <ConditionallyRender | ||
| condition={invalidToken} | ||
| show={<InvalidToken />} | ||
| elseShow={ | ||
| <ResetPasswordDetails | ||
| token={token} | ||
| setLoading={setLoading} | ||
| > | ||
| <h2 className={styles.title}> | ||
| Enter your personal details and start your | ||
| journey | ||
| </h2> | ||
| <ConditionallyRender | ||
| condition={data?.createdBy} | ||
| show={ | ||
| <Typography | ||
| variant="body1" | ||
| data-loading | ||
| className={styles.inviteText} | ||
| > | ||
| {data?.createdBy} | ||
| <br></br> has invited you to join | ||
| Unleash. | ||
| </Typography> | ||
| } | ||
| /> | ||
| if (invalidToken && !invite) { | ||
| return ( | ||
| <NewUserWrapper loading={resetLoading || inviteLoading}> | ||
| <InvalidToken /> | ||
| </NewUserWrapper> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <NewUserWrapper | ||
| loading={resetLoading || inviteLoading} | ||
| title={ | ||
| passwordDisabled | ||
| ? 'Connect your account and start your journey' | ||
| : 'Enter your personal details and start your journey' | ||
| } | ||
| > | ||
| <ConditionallyRender | ||
| condition={data?.createdBy} | ||
| show={ | ||
| <Typography | ||
| variant="body1" | ||
| data-loading | ||
| sx={{ textAlign: 'center', mb: 2 }} | ||
| > | ||
| {data?.createdBy} | ||
| <br /> has invited you to join Unleash. | ||
| </Typography> | ||
| } | ||
| /> | ||
| <Typography color="text.secondary"> | ||
| We suggest using{' '} | ||
| <Typography component="strong" fontWeight="bold"> | ||
| the email you use for work | ||
| </Typography> | ||
| . | ||
| </Typography> | ||
| <ConditionallyRender | ||
| condition={Boolean(authDetails?.options?.length)} | ||
| show={ | ||
| <Box sx={{ mt: 2 }}> | ||
| <AuthOptions options={authDetails?.options} /> | ||
| </Box> | ||
| } | ||
| /> | ||
| <ConditionallyRender | ||
| condition={ | ||
| Boolean(authDetails?.options?.length) && !passwordDisabled | ||
| } | ||
| show={ | ||
| <DividerText | ||
| text="or sign-up with an email address" | ||
| data-loading | ||
| /> | ||
| } | ||
| /> | ||
| <ConditionallyRender | ||
| condition={!passwordDisabled} | ||
| show={ | ||
| <> | ||
| <ConditionallyRender | ||
| condition={data?.email} | ||
| show={() => ( | ||
| <Typography | ||
| data-loading | ||
| variant="body1" | ||
| className={styles.subtitle} | ||
| sx={{ my: 1 }} | ||
| > | ||
| Your username is | ||
| </Typography> | ||
|
|
||
| )} | ||
| /> | ||
| <TextField | ||
| data-loading | ||
| type="email" | ||
| value={data?.email || ''} | ||
| id="username" | ||
| label="Email" | ||
| variant="outlined" | ||
| size="small" | ||
| sx={{ my: 1 }} | ||
| disabled={Boolean(data?.email)} | ||
| fullWidth | ||
| required | ||
| /> | ||
| <ConditionallyRender | ||
| condition={Boolean(invite)} | ||
| show={() => ( | ||
| <TextField | ||
| data-loading | ||
| value={data?.email || ''} | ||
| value="" | ||
| id="username" | ||
| label="Username" | ||
| label="Full name" | ||
| variant="outlined" | ||
| size="small" | ||
| className={styles.emailField} | ||
| disabled | ||
| sx={{ my: 1 }} | ||
| fullWidth | ||
| required | ||
| /> | ||
| <div className={styles.roleContainer}> | ||
| <ConditionallyRender | ||
| condition={Boolean( | ||
| authDetails?.options?.length | ||
| )} | ||
| show={ | ||
| <> | ||
| <DividerText | ||
| text="sign in with" | ||
| data-loading | ||
| /> | ||
|
|
||
| <AuthOptions | ||
| options={ | ||
| authDetails?.options | ||
| } | ||
| /> | ||
| <DividerText | ||
| text="or set a new password for your account" | ||
| data-loading | ||
| /> | ||
| </> | ||
| } | ||
| elseShow={ | ||
| <Typography | ||
| variant="body1" | ||
| data-loading | ||
| > | ||
| Set a password for your account. | ||
| </Typography> | ||
| } | ||
| /> | ||
| </div> | ||
| </ResetPasswordDetails> | ||
| } | ||
| /> | ||
| </div> | ||
| </StandaloneLayout> | ||
| </div> | ||
| )} | ||
| /> | ||
| <Typography variant="body1" data-loading sx={{ mt: 2 }}> | ||
| Set a password for your account. | ||
| </Typography> | ||
| <ResetPasswordForm | ||
| token={token} | ||
| setLoading={setLoading} | ||
| /> | ||
| </> | ||
| } | ||
| /> | ||
| </NewUserWrapper> | ||
| ); | ||
| }; |
53 changes: 53 additions & 0 deletions
53
frontend/src/component/user/NewUser/NewUserWrapper/NewUserWrapper.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,53 @@ | ||
| import { FC } from 'react'; | ||
| import { Box, Typography } from '@mui/material'; | ||
| import StandaloneLayout from 'component/user/common/StandaloneLayout/StandaloneLayout'; | ||
| import StandaloneBanner from 'component/user/StandaloneBanner/StandaloneBanner'; | ||
| import useLoading from 'hooks/useLoading'; | ||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
|
|
||
| interface INewUserWrapperProps { | ||
| loading?: boolean; | ||
| title?: string; | ||
| } | ||
|
|
||
| export const NewUserWrapper: FC<INewUserWrapperProps> = ({ | ||
| children, | ||
| loading, | ||
| title, | ||
| }) => { | ||
| const ref = useLoading(loading || false); | ||
|
|
||
| return ( | ||
| <div ref={ref}> | ||
| <StandaloneLayout | ||
| showMenu={false} | ||
| BannerComponent={<StandaloneBanner title={'Unleash'} />} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| width: ['100%', '350px'], | ||
| }} | ||
| > | ||
| <ConditionallyRender | ||
| condition={Boolean(title)} | ||
| show={ | ||
| <Typography | ||
| component="h2" | ||
| sx={{ | ||
| fontSize: theme => | ||
| theme.fontSizes.mainHeader, | ||
| marginBottom: 2, | ||
| textAlign: 'center', | ||
| fontWeight: theme => theme.fontWeight.bold, | ||
| }} | ||
| > | ||
| {title} | ||
| </Typography> | ||
| } | ||
| /> | ||
| {children} | ||
| </Box> | ||
| </StandaloneLayout> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.
ce3db75There 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:
unleash – ./website
unleash-tawny.vercel.app
unleash-git-main-unleash-team.vercel.app
unleash-unleash-team.vercel.app
ce3db75There 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:
unleash-monorepo-frontend – ./frontend
unleash-monorepo-frontend.vercel.app
unleash-monorepo-frontend-unleash-team.vercel.app
unleash-monorepo-frontend-git-main-unleash-team.vercel.app