redesign sigup form
This commit is contained in:
parent
adff989973
commit
288a364ef5
19
src/components/Card/Title.tsx
Normal file
19
src/components/Card/Title.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import React, { FC } from 'react';
|
||||||
|
import { Typography, TypographyProps } from '@mui/material';
|
||||||
|
|
||||||
|
const CardTitle: FC<TypographyProps> = (props) => {
|
||||||
|
return (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontSize: '32px',
|
||||||
|
fontWeight: '600',
|
||||||
|
textAlign: 'left',
|
||||||
|
mb: 8,
|
||||||
|
}}
|
||||||
|
{...props}>
|
||||||
|
{props.children}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardTitle;
|
|
@ -1,25 +1,30 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Form from 'react-bootstrap/Form';
|
|
||||||
import FormControl from 'react-bootstrap/FormControl';
|
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { Formik, FormikHelpers } from 'formik';
|
import { Formik, FormikHelpers } from 'formik';
|
||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import { getOtt } from 'services/userService';
|
import { getOtt } from 'services/userService';
|
||||||
import Card from 'react-bootstrap/Card';
|
|
||||||
import { setData, LS_KEYS } from 'utils/storage/localStorage';
|
import { setData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import SubmitButton from 'components/SubmitButton';
|
import SubmitButton from 'components/SubmitButton';
|
||||||
import { Button } from 'react-bootstrap';
|
|
||||||
import {
|
import {
|
||||||
generateAndSaveIntermediateKeyAttributes,
|
generateAndSaveIntermediateKeyAttributes,
|
||||||
generateKeyAttributes,
|
generateKeyAttributes,
|
||||||
SaveKeyInSessionStore,
|
SaveKeyInSessionStore,
|
||||||
} from 'utils/crypto';
|
} from 'utils/crypto';
|
||||||
import { setJustSignedUp } from 'utils/storage';
|
import { setJustSignedUp } from 'utils/storage';
|
||||||
import LogoImg from './LogoImg';
|
|
||||||
import { logError } from 'utils/sentry';
|
import { logError } from 'utils/sentry';
|
||||||
import { SESSION_KEYS } from 'utils/storage/sessionStorage';
|
import { SESSION_KEYS } from 'utils/storage/sessionStorage';
|
||||||
import { PAGES } from 'constants/pages';
|
import { PAGES } from 'constants/pages';
|
||||||
|
import {
|
||||||
|
Checkbox,
|
||||||
|
Container,
|
||||||
|
Divider,
|
||||||
|
FormControlLabel,
|
||||||
|
FormGroup,
|
||||||
|
TextField,
|
||||||
|
} from '@mui/material';
|
||||||
|
import CardTitle from './Card/Title';
|
||||||
|
import LinkButton from './pages/gallery/LinkButton';
|
||||||
|
|
||||||
interface FormValues {
|
interface FormValues {
|
||||||
email: string;
|
email: string;
|
||||||
|
@ -87,10 +92,7 @@ export default function SignUp(props: SignUpProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Card.Title style={{ marginBottom: '32px' }}>
|
<CardTitle> {constants.SIGN_UP}</CardTitle>
|
||||||
<LogoImg src="/icon.svg" />
|
|
||||||
{constants.SIGN_UP}
|
|
||||||
</Card.Title>
|
|
||||||
<Formik<FormValues>
|
<Formik<FormValues>
|
||||||
initialValues={{
|
initialValues={{
|
||||||
email: '',
|
email: '',
|
||||||
|
@ -110,83 +112,87 @@ export default function SignUp(props: SignUpProps) {
|
||||||
{({
|
{({
|
||||||
values,
|
values,
|
||||||
errors,
|
errors,
|
||||||
touched,
|
|
||||||
handleChange,
|
handleChange,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
}): JSX.Element => (
|
}): JSX.Element => (
|
||||||
<Form noValidate onSubmit={handleSubmit}>
|
<>
|
||||||
<Form.Group controlId="registrationForm.email">
|
<form noValidate onSubmit={handleSubmit}>
|
||||||
<Form.Control
|
<Container disableGutters sx={{ mb: 1 }}>
|
||||||
type="email"
|
<TextField
|
||||||
placeholder={constants.ENTER_EMAIL}
|
variant="filled"
|
||||||
value={values.email}
|
fullWidth
|
||||||
onChange={handleChange('email')}
|
margin="dense"
|
||||||
isInvalid={Boolean(
|
type="email"
|
||||||
touched.email && errors.email
|
label={constants.ENTER_EMAIL}
|
||||||
)}
|
value={values.email}
|
||||||
autoFocus
|
onChange={handleChange('email')}
|
||||||
disabled={loading}
|
error={Boolean(errors.email)}
|
||||||
|
helperText={errors.email}
|
||||||
|
autoFocus
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
variant="filled"
|
||||||
|
margin="dense"
|
||||||
|
type="password"
|
||||||
|
label={constants.PASSPHRASE_HINT}
|
||||||
|
value={values.passphrase}
|
||||||
|
onChange={handleChange('passphrase')}
|
||||||
|
error={Boolean(errors.passphrase)}
|
||||||
|
helperText={errors.passphrase}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
variant="filled"
|
||||||
|
margin="dense"
|
||||||
|
type="password"
|
||||||
|
label={constants.CONFIRM_PASSPHRASE}
|
||||||
|
value={values.confirm}
|
||||||
|
onChange={handleChange('confirm')}
|
||||||
|
error={Boolean(errors.confirm)}
|
||||||
|
helperText={errors.confirm}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel
|
||||||
|
sx={{
|
||||||
|
color: 'text.secondary',
|
||||||
|
mt: 2,
|
||||||
|
}}
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
disabled={loading}
|
||||||
|
checked={acceptTerms}
|
||||||
|
onChange={(e) =>
|
||||||
|
setAcceptTerms(
|
||||||
|
e.target.checked
|
||||||
|
)
|
||||||
|
}
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={constants.TERMS_AND_CONDITIONS()}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</Container>
|
||||||
|
<SubmitButton
|
||||||
|
buttonText={constants.CREATE_ACCOUNT}
|
||||||
|
loading={loading}
|
||||||
|
disabled={!acceptTerms}
|
||||||
/>
|
/>
|
||||||
<FormControl.Feedback type="invalid">
|
</form>
|
||||||
{errors.email}
|
<Divider />
|
||||||
</FormControl.Feedback>
|
<LinkButton
|
||||||
</Form.Group>
|
onClick={props.login}
|
||||||
<Form.Group>
|
color={'text.secondary'}
|
||||||
<Form.Control
|
sx={{ mt: 3 }}>
|
||||||
type="password"
|
|
||||||
placeholder={constants.PASSPHRASE_HINT}
|
|
||||||
value={values.passphrase}
|
|
||||||
onChange={handleChange('passphrase')}
|
|
||||||
isInvalid={Boolean(
|
|
||||||
touched.passphrase && errors.passphrase
|
|
||||||
)}
|
|
||||||
disabled={loading}
|
|
||||||
/>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{errors.passphrase}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Control
|
|
||||||
type="password"
|
|
||||||
placeholder={constants.RE_ENTER_PASSPHRASE}
|
|
||||||
value={values.confirm}
|
|
||||||
onChange={handleChange('confirm')}
|
|
||||||
isInvalid={Boolean(
|
|
||||||
touched.confirm && errors.confirm
|
|
||||||
)}
|
|
||||||
disabled={loading}
|
|
||||||
/>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{errors.confirm}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group
|
|
||||||
style={{
|
|
||||||
marginBottom: '0',
|
|
||||||
textAlign: 'left',
|
|
||||||
}}
|
|
||||||
controlId="formBasicCheckbox-1">
|
|
||||||
<Form.Check
|
|
||||||
checked={acceptTerms}
|
|
||||||
onChange={(e) =>
|
|
||||||
setAcceptTerms(e.target.checked)
|
|
||||||
}
|
|
||||||
type="checkbox"
|
|
||||||
label={constants.TERMS_AND_CONDITIONS()}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
<br />
|
|
||||||
<SubmitButton
|
|
||||||
buttonText={constants.SUBMIT}
|
|
||||||
loading={loading}
|
|
||||||
disabled={!acceptTerms}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<Button block variant="link" onClick={props.login}>
|
|
||||||
{constants.ACCOUNT_EXISTS}
|
{constants.ACCOUNT_EXISTS}
|
||||||
</Button>
|
</LinkButton>
|
||||||
</Form>
|
</>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -15,7 +15,8 @@ const SubmitButton: FC<ButtonProps<'button', Props>> = ({
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
sx={{ my: 2 }}
|
size="large"
|
||||||
|
sx={{ my: 4, p: '12.25px', fontSize: '18px' }}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="success"
|
color="success"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
|
@ -31,13 +31,20 @@ export function getVariantColor(variant: string) {
|
||||||
|
|
||||||
const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
|
const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
|
||||||
children,
|
children,
|
||||||
|
sx,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
component="button"
|
component="button"
|
||||||
{...props}
|
sx={{
|
||||||
sx={{ color: props.color && `${props.color}.main` }}>
|
color:
|
||||||
|
props.color && typeof props.color === 'object'
|
||||||
|
? `${props.color}.main`
|
||||||
|
: props.color,
|
||||||
|
...sx,
|
||||||
|
}}
|
||||||
|
{...props}>
|
||||||
{children}
|
{children}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|
|
@ -34,7 +34,20 @@ const darkThemeOptions = createTheme({
|
||||||
components: {
|
components: {
|
||||||
MuiPaper: {
|
MuiPaper: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: { borderRadius: '8px', backgroundColor: '#040404' },
|
root: { borderRadius: '8px', backgroundColor: '#0f0f0f' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiLink: {
|
||||||
|
defaultProps: {
|
||||||
|
color: 'inherit',
|
||||||
|
},
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
textDecorationColor: 'inherit',
|
||||||
|
'&:hover': {
|
||||||
|
color: 'hsla(141, 66%, 50%, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
MuiButton: {
|
MuiButton: {
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import React, { useState, useEffect, useContext } from 'react';
|
import React, { useState, useEffect, useContext } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Card from 'react-bootstrap/Card';
|
|
||||||
import { AppContext } from 'pages/_app';
|
import { AppContext } from 'pages/_app';
|
||||||
import Container from 'components/Container';
|
import Container from 'components/Container';
|
||||||
import EnteSpinner from 'components/EnteSpinner';
|
import EnteSpinner from 'components/EnteSpinner';
|
||||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import SignUp from 'components/SignUp';
|
import SignUp from 'components/SignUp';
|
||||||
import { PAGES } from 'constants/pages';
|
import { PAGES } from 'constants/pages';
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import { CardContent } from '@mui/material';
|
||||||
|
|
||||||
export default function SignUpPage() {
|
export default function SignUpPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -29,14 +30,14 @@ export default function SignUpPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container style={{ alignItems: 'flex-end' }}>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<EnteSpinner />
|
<EnteSpinner />
|
||||||
) : (
|
) : (
|
||||||
<Card style={{ minWidth: '320px' }} className="text-center">
|
<Card sx={{ maxWidth: '360px' }}>
|
||||||
<Card.Body style={{ padding: '40px 30px' }}>
|
<CardContent sx={{ py: 4, px: 2 }}>
|
||||||
<SignUp login={login} />
|
<SignUp login={login} />
|
||||||
</Card.Body>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
|
|
|
@ -233,12 +233,8 @@ html, body {
|
||||||
background-color: #44774d;
|
background-color: #44774d;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #51cd7c;
|
|
||||||
}
|
|
||||||
.btn-link {
|
.btn-link {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
@ -469,9 +465,7 @@ div.otp-input input:not(:placeholder-shown) , div.otp-input input:focus{
|
||||||
.react-datepicker__day--disabled:hover {
|
.react-datepicker__day--disabled:hover {
|
||||||
background-color: #202020;
|
background-color: #202020;
|
||||||
}
|
}
|
||||||
.ente-form-group{
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
.form-check-input:hover, .form-check-label :hover{
|
.form-check-input:hover, .form-check-label :hover{
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import Link from '@mui/material/Link';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
@ -49,7 +50,7 @@ const englishConstants = {
|
||||||
'reliably replicated to a fallout shelter, designed to outlive',
|
'reliably replicated to a fallout shelter, designed to outlive',
|
||||||
COMPANY_NAME: 'ente',
|
COMPANY_NAME: 'ente',
|
||||||
LOGIN: 'log in',
|
LOGIN: 'log in',
|
||||||
SIGN_UP: 'sign up',
|
SIGN_UP: 'Signup',
|
||||||
NAME: 'name',
|
NAME: 'name',
|
||||||
ENTER_NAME: 'your name',
|
ENTER_NAME: 'your name',
|
||||||
EMAIL: 'email',
|
EMAIL: 'email',
|
||||||
|
@ -89,8 +90,7 @@ const englishConstants = {
|
||||||
</p>
|
</p>
|
||||||
),
|
),
|
||||||
PASSPHRASE_HINT: 'password',
|
PASSPHRASE_HINT: 'password',
|
||||||
RE_ENTER_PASSPHRASE: 'password again',
|
CONFIRM_PASSPHRASE: 'confirm password',
|
||||||
CONFIRM_PASSPHRASE: 'confirm your password',
|
|
||||||
PASSPHRASE_MATCH_ERROR: "passwords don't match",
|
PASSPHRASE_MATCH_ERROR: "passwords don't match",
|
||||||
CONSOLE_WARNING_STOP: 'STOP!',
|
CONSOLE_WARNING_STOP: 'STOP!',
|
||||||
CONSOLE_WARNING_DESC:
|
CONSOLE_WARNING_DESC:
|
||||||
|
@ -389,16 +389,19 @@ const englishConstants = {
|
||||||
<span>try searching for New York, April 14, Christmas...</span>
|
<span>try searching for New York, April 14, Christmas...</span>
|
||||||
),
|
),
|
||||||
TERMS_AND_CONDITIONS: () => (
|
TERMS_AND_CONDITIONS: () => (
|
||||||
<p>
|
<>
|
||||||
I agree to the{' '}
|
I agree to the{' '}
|
||||||
<a href="https://ente.io/terms" target="_blank" rel="noreferrer">
|
<Link href="https://ente.io/terms" target="_blank" rel="noreferrer">
|
||||||
terms
|
terms
|
||||||
</a>{' '}
|
</Link>{' '}
|
||||||
and{' '}
|
and{' '}
|
||||||
<a href="https://ente.io/privacy" target="_blank" rel="noreferrer">
|
<Link
|
||||||
|
href="https://ente.io/privacy"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer">
|
||||||
privacy policy
|
privacy policy
|
||||||
</a>{' '}
|
</Link>{' '}
|
||||||
</p>
|
</>
|
||||||
),
|
),
|
||||||
CONFIRM_PASSWORD_NOT_SAVED: () => (
|
CONFIRM_PASSWORD_NOT_SAVED: () => (
|
||||||
<p>
|
<p>
|
||||||
|
@ -722,6 +725,7 @@ const englishConstants = {
|
||||||
ENDS: 'Ends',
|
ENDS: 'Ends',
|
||||||
ENTER_TWO_FACTOR_OTP:
|
ENTER_TWO_FACTOR_OTP:
|
||||||
' enter the 6-digit code from your authenticator app.',
|
' enter the 6-digit code from your authenticator app.',
|
||||||
|
CREATE_ACCOUNT: 'Create Account',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default englishConstants;
|
export default englishConstants;
|
||||||
|
|
Loading…
Reference in a new issue