tcr-37-reset-password-page-khoa

[bachkhoaisme]

// index.js

import React, {useState} from "react"; import OutlinedInput from '@material-ui/core/OutlinedInput'; import FormHelperText from '@material-ui/core/FormHelperText'; import Button from '@material-ui/core/Button'; import useStyles from './styles'; import { FormControl, Input, InputLabel, Button as MuiButton, Paper, Typography } from "@material-ui/core";

const ResetPassword = (props) => { const classes = useStyles();

return(
    <form className = {classes.formContainer}>

        <Typography component="h1" variant="h1" gutterBottom className = {classes.title}>
            Reset Password
        </Typography>

        <FormControl  className = {classes.form} variant="outlined">
            <InputLabel htmlFor="new password">New Password</InputLabel>
            <OutlinedInput
                id="new password"
                error
            //    value={values.amount}
            //    onChange={handleChange('username')}
                labelWidth={100}
                fullWidth
                required={true}
                type="password"
            /> 
            <FormHelperText></FormHelperText>                
            </FormControl>

        <FormControl  className = {classes.form} variant="outlined">
            <InputLabel htmlFor="confirm new password">Confirm New Password</InputLabel>
            <OutlinedInput
                id="confirm new password"
                error
            //    value={values.amount}
            //    onChange={handleChange('username')}
                labelWidth={150}
                fullWidth
                required={true}
                type="new password"
            /> 
            <FormHelperText></FormHelperText>                
            </FormControl>

        <FormControl  className = {classes.form} variant="outlined">
            <InputLabel htmlFor="security code">Enter Security Code</InputLabel>
            <OutlinedInput
                id="security code"
                error
            //    value={values.amount}
            //    onChange={handleChange('username')}
                labelWidth={130}
                fullWidth
                required={true}
                type="s code"
            /> 
            <FormHelperText></FormHelperText>  
            </FormControl>
        <div className = {classes.btnGroup}>
            <Button variant="contained" color="light black">
                Resend Code
            </Button>  
            <Button variant="contained" color="primary">
                Reset Password
            </Button>      
        </div>

    </form>

);

};

export default (ResetPassword);

[bachkhoaisme]

// styles.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({ title: { opacity: '0.65' },

formContainer:{
    paddingTop: theme.spacing(5),
    marginLeft: theme.spacing(45),
    marginRight: theme.spacing(100),       
},

form:{
    width: "70%"
},

btnGroup: {
    display: 'flex',
    flexDirection: 'row',
    "& > *": {
      marginRight: theme.spacing(2),
      marginTop: theme.spacing(2),
    }
},

}));