beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

redesign sigup form

Browse source
This commit is contained in:
Abhinav 2022-05-02 21:37:00 +05:30
parent adff989973
commit 288a364ef5
8 changed files with 153 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/Card/Title.tsx Normal file
View 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;

118
src/components/SignUp.tsx
View file

@ -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 }}>
<TextField
variant="filled"
fullWidth
margin="dense"
type="email" type="email"
placeholder={constants.ENTER_EMAIL} label={constants.ENTER_EMAIL}
value={values.email} value={values.email}
onChange={handleChange('email')} onChange={handleChange('email')}
isInvalid={Boolean( error={Boolean(errors.email)}
touched.email && errors.email helperText={errors.email}
)}
autoFocus autoFocus
disabled={loading} disabled={loading}
/> />
<FormControl.Feedback type="invalid">
{errors.email} <TextField
</FormControl.Feedback> fullWidth
</Form.Group> variant="filled"
<Form.Group> margin="dense"
<Form.Control
type="password" type="password"
placeholder={constants.PASSPHRASE_HINT} label={constants.PASSPHRASE_HINT}
value={values.passphrase} value={values.passphrase}
onChange={handleChange('passphrase')} onChange={handleChange('passphrase')}
isInvalid={Boolean( error={Boolean(errors.passphrase)}
touched.passphrase && errors.passphrase helperText={errors.passphrase}
)}
disabled={loading} disabled={loading}
/> />
<Form.Control.Feedback type="invalid">
{errors.passphrase} <TextField
</Form.Control.Feedback> fullWidth
</Form.Group> variant="filled"
<Form.Group> margin="dense"
<Form.Control
type="password" type="password"
placeholder={constants.RE_ENTER_PASSPHRASE} label={constants.CONFIRM_PASSPHRASE}
value={values.confirm} value={values.confirm}
onChange={handleChange('confirm')} onChange={handleChange('confirm')}
isInvalid={Boolean( error={Boolean(errors.confirm)}
touched.confirm && errors.confirm helperText={errors.confirm}
)}
disabled={loading} disabled={loading}
/> />
<Form.Control.Feedback type="invalid"> <FormGroup>
{errors.confirm} <FormControlLabel
</Form.Control.Feedback> sx={{
</Form.Group> color: 'text.secondary',
<Form.Group mt: 2,
style={{
marginBottom: '0',
textAlign: 'left',
}} }}
controlId="formBasicCheckbox-1"> control={
<Form.Check <Checkbox
disabled={loading}
checked={acceptTerms} checked={acceptTerms}
onChange={(e) => onChange={(e) =>
setAcceptTerms(e.target.checked) setAcceptTerms(
e.target.checked
)
}
color="success"
/>
} }
type="checkbox"
label={constants.TERMS_AND_CONDITIONS()} label={constants.TERMS_AND_CONDITIONS()}
/> />
</Form.Group> </FormGroup>
<br /> </Container>
<SubmitButton <SubmitButton
buttonText={constants.SUBMIT} buttonText={constants.CREATE_ACCOUNT}
loading={loading} loading={loading}
disabled={!acceptTerms} disabled={!acceptTerms}
/> />
<br /> </form>
<Button block variant="link" onClick={props.login}> <Divider />
<LinkButton
onClick={props.login}
color={'text.secondary'}
sx={{ mt: 3 }}>
{constants.ACCOUNT_EXISTS} {constants.ACCOUNT_EXISTS}
</Button> </LinkButton>
</Form> </>
)} )}
</Formik> </Formik>
</> </>

3
src/components/SubmitButton.tsx
View file

@ -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"

11
src/components/pages/gallery/LinkButton.tsx
View file

@ -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>
); );

15
src/darkThemeOptions.tsx
View file

@ -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: {

11
src/pages/signup/index.tsx
View file

@ -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>

12
src/styles/global.css
View file

@ -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;
} }

22
src/utils/strings/englishConstants.tsx
View file

@ -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;