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

update singup form and page

Browse source
This commit is contained in:
Abhinav 2022-05-02 22:27:07 +05:30
parent adf9ffb40c
commit 9643f228f7
2 changed files with 82 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/components/SignUp.tsx
View file

@ -23,8 +23,9 @@ import {
FormGroup,
TextField,
} from '@mui/material';
import CardTitle from './Card/Title';
import FormPaperHeaderText from './Form/FormPaper/HeaderText';
import LinkButton from './pages/gallery/LinkButton';
import FormPaperFooter from './Form/FormPaper/Footer';
interface FormValues {
email: string;
@ -92,7 +93,7 @@ export default function SignUp(props: SignUpProps) {
return (
<>
<CardTitle> {constants.SIGN_UP}</CardTitle>
<FormPaperHeaderText> {constants.SIGN_UP}</FormPaperHeaderText>
<Formik<FormValues>
initialValues={{
email: '',
@ -115,86 +116,81 @@ export default function SignUp(props: SignUpProps) {
handleChange,
handleSubmit,
}): JSX.Element => (
<>
<form noValidate onSubmit={handleSubmit}>
<Container disableGutters sx={{ mb: 1 }}>
<TextField
variant="filled"
fullWidth
margin="dense"
type="email"
label={constants.ENTER_EMAIL}
value={values.email}
onChange={handleChange('email')}
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}
<form noValidate onSubmit={handleSubmit}>
<Container disableGutters sx={{ mb: 1 }}>
<TextField
variant="filled"
fullWidth
margin="dense"
type="email"
label={constants.ENTER_EMAIL}
value={values.email}
onChange={handleChange('email')}
error={Boolean(errors.email)}
helperText={errors.email}
autoFocus
disabled={loading}
/>
</form>
<Divider />
<LinkButton
onClick={props.login}
color={'text.secondary'}
sx={{ mt: 3 }}>
{constants.ACCOUNT_EXISTS}
</LinkButton>
</>
<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}
/>
</form>
)}
</Formik>
<Divider />
<FormPaperFooter>
<LinkButton onClick={props.login} color={'text.secondary'}>
{constants.ACCOUNT_EXISTS}
</LinkButton>
</FormPaperFooter>
</>
);
}

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

@ -1,13 +1,12 @@
import React, { useState, useEffect, useContext } from 'react';
import { useRouter } from 'next/router';
import { AppContext } from 'pages/_app';
import Container from 'components/Container';
import EnteSpinner from 'components/EnteSpinner';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import SignUp from 'components/SignUp';
import { PAGES } from 'constants/pages';
import Card from '@mui/material/Card';
import { CardContent } from '@mui/material';
import FormPaper from 'components/Form/FormPaper';
import FormContainer from 'components/Form/FormContainer';
export default function SignUpPage() {
const router = useRouter();
@ -30,16 +29,14 @@ export default function SignUpPage() {
};
return (
<Container style={{ alignItems: 'flex-end' }}>
<FormContainer>
{loading ? (
<EnteSpinner />
) : (
<Card sx={{ maxWidth: '360px' }}>
<CardContent sx={{ py: 4, px: 2 }}>
<SignUp login={login} />
</CardContent>
</Card>
<FormPaper>
<SignUp login={login} />
</FormPaper>
)}
</Container>
</FormContainer>
);
}