|
@@ -23,89 +23,9 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
const matches = useMediaQuery('(max-width:899px)')
|
|
|
const [status, setStatus] = useState('login')
|
|
|
|
|
|
- const Login = ({onLogin}) => {
|
|
|
- const [valueLogin, setValueLogin] = useState('')
|
|
|
- const [valuePassword, setValuePassword] = useState('')
|
|
|
- const [flagLogin, setFlagLog] = useState(false)
|
|
|
- const [flagPassword, setFlagPass] = useState(false)
|
|
|
+ const Form = ({title, target, onClickEvent, children}) => {
|
|
|
+ const matches2 = useMediaQuery('(max-width:450px)')
|
|
|
|
|
|
- return (
|
|
|
- <Box
|
|
|
- sx={{
|
|
|
- backgroundColor: "#fff",
|
|
|
- display: "flex",
|
|
|
- flexDirection: "column",
|
|
|
- justifyContent: "center",
|
|
|
- alignItems: "center",
|
|
|
- padding: "40px 60px"
|
|
|
- }}
|
|
|
- >
|
|
|
- <Typography
|
|
|
- variant='h4'
|
|
|
- letterSpacing='10px'
|
|
|
- marginBottom='30px'
|
|
|
- >
|
|
|
- LOGIN
|
|
|
- </Typography>
|
|
|
- <TextField
|
|
|
- id="login"
|
|
|
- label="Login"
|
|
|
- variant="standard"
|
|
|
- type="text"
|
|
|
- required
|
|
|
- fullWidth
|
|
|
- value={valueLogin}
|
|
|
- onChange={e => {setValueLogin(e.target.value); setFlagLog(true)}}
|
|
|
- error={flagLogin && (valueLogin.length <= 3 || valueLogin.length > 20)}
|
|
|
- sx={{marginBottom: '20px'}}
|
|
|
- />
|
|
|
- <TextField
|
|
|
- id="password"
|
|
|
- label="Password"
|
|
|
- variant="standard"
|
|
|
- type="password"
|
|
|
- required
|
|
|
- fullWidth
|
|
|
- value={valuePassword}
|
|
|
- onChange={e => {setValuePassword(e.target.value); setFlagPass(true)}}
|
|
|
- error={flagPassword && (valuePassword.length <= 3 || valuePassword.length > 20)}
|
|
|
- sx={{marginBottom: '50px'}}
|
|
|
- />
|
|
|
- {promise?.login?.status === "RESOLVED" &&
|
|
|
- <Typography
|
|
|
- variant='body2'
|
|
|
- color='red'
|
|
|
- marginBottom='20px'
|
|
|
- >
|
|
|
- This user does not exist
|
|
|
- </Typography>
|
|
|
- }
|
|
|
- <UnstyledButtonCustom
|
|
|
- onClick={() => {
|
|
|
- if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
|
|
|
- valueLogin.length >= 3 && valueLogin.length <= 20) {
|
|
|
- onLogin(valueLogin, valuePassword)
|
|
|
- }
|
|
|
- }}
|
|
|
- text={'LOGIN'}
|
|
|
- />
|
|
|
- <Box
|
|
|
- width='100%'
|
|
|
- display='flex'
|
|
|
- justifyContent='flex-end'
|
|
|
- marginTop='20px'
|
|
|
- >
|
|
|
- <Button
|
|
|
- onClick={() => setStatus('register')}
|
|
|
- >
|
|
|
- Register
|
|
|
- <ArrowForwardIosIcon/>
|
|
|
- </Button>
|
|
|
- </Box>
|
|
|
- </Box>
|
|
|
- )
|
|
|
- }
|
|
|
- const Register = ({onRegister}) => {
|
|
|
const [valueLogin, setValueLogin] = useState('')
|
|
|
const [valuePassword, setValuePassword] = useState('')
|
|
|
const [flagLogin, setFlagLog] = useState(false)
|
|
@@ -119,7 +39,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
flexDirection: "column",
|
|
|
justifyContent: "center",
|
|
|
alignItems: "center",
|
|
|
- padding: "40px 60px"
|
|
|
+ padding: matches2 ? "30px 20px" : "40px 60px"
|
|
|
}}
|
|
|
>
|
|
|
<Typography
|
|
@@ -127,7 +47,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
letterSpacing='10px'
|
|
|
marginBottom='30px'
|
|
|
>
|
|
|
- REGISTER
|
|
|
+ {title}
|
|
|
</Typography>
|
|
|
<TextField
|
|
|
id="login"
|
|
@@ -138,7 +58,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
fullWidth
|
|
|
value={valueLogin}
|
|
|
onChange={e => {setValueLogin(e.target.value); setFlagLog(true)}}
|
|
|
- error={flagLogin && (valueLogin.length <= 3 || valueLogin.length > 20)}
|
|
|
+ error={flagLogin && (valueLogin.length < 3 || valueLogin.length > 20)}
|
|
|
sx={{marginBottom: '20px'}}
|
|
|
/>
|
|
|
<TextField
|
|
@@ -150,36 +70,18 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
fullWidth
|
|
|
value={valuePassword}
|
|
|
onChange={e => {setValuePassword(e.target.value); setFlagPass(true)}}
|
|
|
- error={flagPassword && (valuePassword.length <= 3 || valuePassword.length > 20)}
|
|
|
- sx={{marginBottom: '50px'}}
|
|
|
+ error={flagPassword && (valuePassword.length < 3 || valuePassword.length > 20)}
|
|
|
+ sx={{marginBottom: '30px'}}
|
|
|
/>
|
|
|
- <Typography
|
|
|
- variant='body2'
|
|
|
- color='#616161'
|
|
|
- textAlign='justify'
|
|
|
- marginBottom='40px'
|
|
|
- >
|
|
|
- Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our
|
|
|
- <Link style={{textDecoration: 'none'}} to='/privacy-policy'> privacy policy</Link>
|
|
|
- .
|
|
|
- </Typography>
|
|
|
- {promise?.register?.status === "RESOLVED" &&
|
|
|
- <Typography
|
|
|
- variant='body2'
|
|
|
- color='red'
|
|
|
- marginBottom='20px'
|
|
|
- >
|
|
|
- Such user already exists
|
|
|
- </Typography>
|
|
|
- }
|
|
|
+ {children}
|
|
|
<UnstyledButtonCustom
|
|
|
onClick={() => {
|
|
|
if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
|
|
|
- valueLogin.length >= 3 && valueLogin.length <= 20){
|
|
|
- onRegister(valueLogin, valuePassword)
|
|
|
+ valueLogin.length >= 3 && valueLogin.length <= 20) {
|
|
|
+ onClickEvent(valueLogin, valuePassword)
|
|
|
}
|
|
|
}}
|
|
|
- text={'REGISTER'}
|
|
|
+ text={title}
|
|
|
/>
|
|
|
<Box
|
|
|
width='100%'
|
|
@@ -188,9 +90,9 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
marginTop='20px'
|
|
|
>
|
|
|
<Button
|
|
|
- onClick={() => setStatus('login')}
|
|
|
+ onClick={() => setStatus(target)}
|
|
|
>
|
|
|
- Login
|
|
|
+ {target}
|
|
|
<ArrowForwardIosIcon/>
|
|
|
</Button>
|
|
|
</Box>
|
|
@@ -205,7 +107,43 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
|
|
|
<main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
|
|
|
<Container maxWidth="sm">
|
|
|
{auth?.payload ? <Redirect to={'/profile'}/> :
|
|
|
- status === 'login' ? <Login onLogin={onLogin}/> : <Register onRegister={onRegister}/>
|
|
|
+ status === 'login' ?
|
|
|
+ <Form title={'LOGIN'} target={'register'} onClickEvent={onLogin} children={
|
|
|
+ <>
|
|
|
+ {promise?.login?.status === "RESOLVED" &&
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ color='red'
|
|
|
+ marginBottom='20px'
|
|
|
+ >
|
|
|
+ This user does not exist
|
|
|
+ </Typography>
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ }/> :
|
|
|
+ <Form title={'REGISTER'} target={'login'} onClickEvent={onRegister} children={
|
|
|
+ <>
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ color='#616161'
|
|
|
+ textAlign='justify'
|
|
|
+ marginBottom='40px'
|
|
|
+ >
|
|
|
+ Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our
|
|
|
+ <Link style={{textDecoration: 'none'}} to='/privacy-policy'> privacy policy</Link>
|
|
|
+ .
|
|
|
+ </Typography>
|
|
|
+ {promise?.register?.status === "RESOLVED" &&
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ color='red'
|
|
|
+ marginBottom='20px'
|
|
|
+ >
|
|
|
+ Such user already exists
|
|
|
+ </Typography>
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ }/>
|
|
|
}
|
|
|
</Container>
|
|
|
</main>
|