Advertisement
Guest User

Untitled

a guest
Jan 18th, 2020
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import {
  3.   Grid,
  4.   Button,
  5.   Typography,
  6.   FormControl,
  7.   FormControlLabel,
  8.   Checkbox
  9. } from '@material-ui/core';
  10. import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
  11. import Logo_img from 'Images/Logo_img.png';
  12. import { useTranslation } from 'react-i18next';
  13. import { makeStyles } from '@material-ui/core/styles';
  14. import { connect } from 'react-redux';
  15. import { login } from 'Api/AuthorizationApi';
  16.  
  17. const useStyles = makeStyles(theme => ({
  18.   secondaryText: {
  19.     color: '#a5a5a5',
  20.     marginBottom: '2em',
  21.   },
  22.   header: {
  23.     marginBottom: '1em',
  24.   },
  25.   formControl: {
  26.     width: '100%',
  27.   },
  28.   inputGrid: {
  29.     marginBottom: '2em',
  30.   },
  31.   loginGrid: {
  32.     marginTop: '2em',
  33.   },
  34.   loginMain: {
  35.     padding: '0 230px 0 0',
  36.     backgroundColor: 'white',
  37.   },
  38. }))
  39.  
  40. function Authorization(props) {
  41.   const classes = useStyles();
  42.   const { t } = useTranslation();
  43.   const [credentials, setCredentials] = useState({
  44.     email: '',
  45.     password: '',
  46.   });
  47.   const [remember, setRemember] = useState(false);
  48.  
  49.   const handleSubmit = () => {
  50.     props.login(credentials);
  51.   };
  52.  
  53.  
  54.   useEffect(() => {
  55.     if (props.authenticated) {
  56.       props.history.push('/')
  57.     }
  58.   }, [props.authenticated])
  59.  
  60.   const handleChange = (event) => {
  61.     const { value, name } = event.target;
  62.     setCredentials(oldValues => ({
  63.       ...oldValues,
  64.       [name]: value,
  65.     }));
  66.   };
  67.  
  68.   const handleRemember = (event) => {
  69.     setRemember(event.target.checked);
  70.   };
  71.  
  72.   return (
  73.     <main className={classes.loginMain}>
  74.         <ValidatorForm onSubmit={handleSubmit}>
  75.         <Grid container justify="center">
  76.           <Grid item container xs={12} justify="center">
  77.             <img src={Logo_img} placeholder='Logo_img'/>
  78.           </Grid>
  79.           <Grid item container xs={12} justify="center" className={classes.header}>
  80.             <Typography variant="h2">
  81.               {t('appName')}
  82.             </Typography>
  83.           </Grid>
  84.           <Grid item container xs={12} justify="center">
  85.             <Typography component="span" className={classes.secondaryText}>
  86.             {t('welcomeMessage')}
  87.             </Typography>
  88.           </Grid>
  89.           <Grid item container xs={12} direction="column" alignItems="center">
  90.             <Grid item container xs={3} justify="center" className={classes.inputGrid}>
  91.               <FormControl className={classes.formControl}>
  92.                 <TextValidator
  93.                   label={t('email')}
  94.                   id="email"
  95.                   name="email"
  96.                   validators={['required', 'isEmail']}
  97.                   errorMessages={[t('requiredField'), t('invalidEmail')]}
  98.                   value={credentials.email}
  99.                   onChange={handleChange}
  100.                 />
  101.               </FormControl>
  102.             </Grid>
  103.             <Grid item container xs={3} justify="center" className={classes.inputGrid}>
  104.               <FormControl className={classes.formControl}>
  105.                 <TextValidator
  106.                   label={t('password')}
  107.                   type="password"
  108.                   id="password"
  109.                   name="password"
  110.                   validators={['required']}
  111.                   errorMessages={[t('requiredField')]}
  112.                   value={credentials.password}
  113.                   onChange={handleChange}
  114.                 />
  115.               </FormControl>
  116.             </Grid>
  117.           </Grid>
  118.           {/* <Grid item container xs={12} justify="center">
  119.             <FormControlLabel
  120.               control={
  121.                 <Checkbox
  122.                   checked={remember}
  123.                   onChange={handleRemember}
  124.                   value="rememberMe"
  125.                   color="primary"
  126.                 />
  127.               }
  128.               label="Remember me"
  129.             />
  130.           </Grid> */}
  131.           <Grid item container xs={12} justify="center" className={classes.loginGrid}>
  132.             <Button variant="contained" color="primary" type="submit" style={{width: "10%"}}>{t('login')}</Button>
  133.           </Grid>
  134.         </Grid>
  135.       </ValidatorForm>
  136.     </main>
  137.   );
  138. };
  139.  
  140. const mapStateToProps = state => ({
  141.   user: state.authorization.user,
  142.   authenticated: state.authorization.authenticated
  143. });
  144.  
  145. const mapDispatchToProps = dispatch => ({
  146.   login: (credentials) => dispatch(login(credentials)),
  147. });
  148.  
  149. export default connect(mapStateToProps, mapDispatchToProps)(Authorization);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement