Skip to content

Instantly share code, notes, and snippets.

@ac205

ac205/App.js

Last active November 24, 2019 16:42
Show Gist options
  • Save ac205/f0f57d99ffb1aeb0ac538d30a9f89330 to your computer and use it in GitHub Desktop.
Save ac205/f0f57d99ffb1aeb0ac538d30a9f89330 to your computer and use it in GitHub Desktop.
Download ZIP
Login Demo
Raw
App.js
import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import MyAppbar from './components/MyAppbar';
import MainContent from './components/MainContent';
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div id="App">
<MyAppbar setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} />
{isLoggedIn
? <MainContent />
: <Typography variant="h6" style={{ textAlign: "center" }}>
Please Login to continue
</Typography>
}
</div>
)
}
export default App;
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Login App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Raw
LoginForm.js
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Formik, Field, Form } from 'formik';
import { TextField } from 'formik-material-ui';
import { makeStyles } from '@material-ui/core/styles';
import * as Yup from 'yup';
//import LinearProgress from '@material-ui/core/LinearProgress'
const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
dense: {
marginTop: theme.spacing(2),
},
menu: {
width: 200,
},
}));
const loginSchema = Yup.object().shape({
email: Yup.string().email("Must be a valid email address").required("Please enter an email"),
password: Yup.string().min(8, "Password 8 characters min").required("Please enter password")
});
export default function LoginForm(props) {
const classes = useStyles();
const [open, setOpen] = useState(false);
//Handlers for Open/Close of Login Dialog
const handleDialog = () => {
setOpen(!open);
};
return (
//Main Form Container
<div id="loginFormWrapper">
{props.isLoggedin
?
<Button variant="contained" onClick={handleDialog}>Logout</Button>
:
<Button variant="contained" onClick={handleDialog}>Login</Button>
}
{/* Formik Wrapper */}
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={loginSchema}
//Handle Login Form Submit
onSubmit={(values, { setSubmitting, resetForm }) => {
setSubmitting(true);
props.setIsLoggedIn(true);
setTimeout(() => {
console.log("Submitted Values: " + JSON.stringify(values, null, 2));
resetForm();
setOpen(false);
setSubmitting(false);
}, 500);
}}
>
{({ values, errors, isSubmitting, handleSubmit, handleBlur, handleChange }) => (
<Dialog
open={open}
onClose={handleDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<Form onSubmit={handleSubmit}>
<DialogTitle id="alert-dialog-title">{"Please Login to Continue"}</DialogTitle>
<DialogContent>
<Field
id="email"
type="email"
name="email"
label="Email"
value={values.email}
component={TextField}
className={classes.textField}
onChange={handleChange}
onBlur={handleBlur}
autoComplete="email"
margin="normal"
variant="outlined"
/>
<br />
<Field
id="password"
type="password"
name="password"
label="Password"
value={values.password}
component={TextField}
className={classes.textField}
onChange={handleChange}
onBlur={handleBlur}
autoComplete="password"
margin="normal"
variant="outlined"
/>
<br />
</DialogContent>
<DialogActions>
<Button onClick={handleDialog} color="primary">
Cancel
</Button>
<Button type="submit" disabled={isSubmitting} color="primary">
Login
</Button>
</DialogActions>
</Form>
</Dialog>
)}
</Formik>
</div>
);
}
Raw
MainContent
import React from 'react';
import Typography from '@material-ui/core/Typography';
const MainContent = () => {
return (
<Typography variant="h6" style={{textAlign: "center"}}>
Thank you for all your time and help Jody!!!
</Typography>
)
}
export default MainContent;
Raw
MyAppBar.js
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import LoginForm from './LoginForm';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function MyAppBar(props) {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
Top Secret Filesharing Site
</Typography>
<LoginForm setIsLoggedIn={props.setIsLoggedIn} isLoggedIn={props.isLoggedIn}/>
</Toolbar>
</AppBar>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment