FinalProject/src/pages/MyAccountPage.jsx

import Header from "../components/Header";
import Footer from "../components/Footer";
import Breadcrumb from "../components/Breadcrumbs";
import {
    Box,
    Button,
    Container,
    FormControl,
    OutlinedInput,
    TextField,
    Typography,
    useMediaQuery
} from "@mui/material";
import UnstyledButtonCustom from "../components/MainButton";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import {useState} from "react";
import Link from "react-router-dom/es/Link";
import {connect} from 'react-redux';
import {actionFullLogin, actionFullRegister} from "../actions/ActionLogin";
import Redirect from "react-router-dom/es/Redirect";

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)

        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)
        const [flagPassword, setFlagPass] = useState(false)

        return (
            <Box
                sx={{
                    backgroundColor: "#fff",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                    padding: "40px 60px"
                }}
            >
                <Typography
                    variant='h4'
                    letterSpacing='10px'
                    marginBottom='30px'
                >
                    REGISTER
                </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'}}
                />
                <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>
                }
                <UnstyledButtonCustom
                    onClick={() => {
                        if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
                            valueLogin.length >= 3 && valueLogin.length <= 20){
                            onRegister(valueLogin, valuePassword)
                        }
                    }}
                    text={'REGISTER'}
                />
                <Box
                    width='100%'
                    display='flex'
                    justifyContent='flex-end'
                    marginTop='20px'
                >
                    <Button
                        onClick={() => setStatus('login')}
                    >
                        Login
                        <ArrowForwardIosIcon/>
                    </Button>
                </Box>
            </Box>
        )
    }

    return (
        <>
            <Header/>
            <Breadcrumb links={['my account']}/>
            <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}/>
                    }
                </Container>
            </main>
            <Footer/>
        </>
    )
}
const CLoginForm = connect(state => ({auth: state.auth, promise: state.promise}), {onLogin: actionFullLogin, onRegister: actionFullRegister})(MyAccountPage)

export default CLoginForm