Finalized Chat migration to Material Ui

frontend/src/pages/Signup/Signup.js

@@ -1,15 +1,60 @@
 import React, { useState } from "react";
+
 import { useHistory } from "react-router-dom";
 import api from "../../util/api";
-import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
-import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
+import { Link as RouterLink } from "react-router-dom";
 
-import { Container, Form, Button } from "react-bootstrap";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+// import FormControlLabel from "@material-ui/core/FormControlLabel";
+// import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
 
-const Signup = () => {
+function Copyright() {
+	return (
+		<Typography variant="body2" color="textSecondary" align="center">
+			{"Copyright © "}
+			<Link color="inherit" href="https://material-ui.com/">
+				Canove
+			</Link>{" "}
+			{new Date().getFullYear()}
+			{"."}
+		</Typography>
+	);
+}
+
+const useStyles = makeStyles(theme => ({
+	paper: {
+		marginTop: theme.spacing(8),
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+	},
+	avatar: {
+		margin: theme.spacing(1),
+		backgroundColor: theme.palette.secondary.main,
+	},
+	form: {
+		width: "100%", // Fix IE 11 issue.
+		marginTop: theme.spacing(3),
+	},
+	submit: {
+		margin: theme.spacing(3, 0, 2),
+	},
+}));
+
+const SignUp = () => {
+	const classes = useStyles();
 	const history = useHistory();
-	const initialState = { name: "", email: "", password: "" };
-	const [user, setUser] = useState(initialState);
+	const [user, setUser] = useState({ name: "", email: "", password: "" });
 
 	const handleChangeInput = e => {
 		setUser({ ...user, [e.target.name]: e.target.value });
@@ -26,63 +71,83 @@ const Signup = () => {
 	};
 
 	return (
-		<div>
-			{localStorage.getItem("token") ? (
-				<div>
-					<LogedinNavbar />
-					<h1> Você está logado </h1>
-				</div>
-			) : (
-				<div>
-					<DefaultNavbar />
-					<br></br>
-					<Container>
-						<Form onSubmit={handleSignUp}>
-							<Form.Group>
-								{/* <Form.Label>Nome</Form.Label> */}
-								<Form.Control
-									name="name"
-									type="text"
-									placeholder="Nome"
-									value={user.name}
-									onChange={handleChangeInput}
-								/>
-							</Form.Group>
-							<Form.Group>
-								{/* <Form.Label>Email address</Form.Label> */}
-								<Form.Control
-									name="email"
-									type="email"
-									placeholder="Email"
-									value={user.email}
-									onChange={handleChangeInput}
-								/>
-							</Form.Group>
+		<Container component="main" maxWidth="xs">
+			<CssBaseline />
+			<div className={classes.paper}>
+				<Avatar className={classes.avatar}>
+					<LockOutlinedIcon />
+				</Avatar>
+				<Typography component="h1" variant="h5">
+					Cadastre-se
+				</Typography>
+				<form className={classes.form} noValidate onSubmit={handleSignUp}>
+					<Grid container spacing={2}>
+						<Grid item xs={12}>
+							<TextField
+								autoComplete="name"
+								name="name"
+								variant="outlined"
+								required
+								fullWidth
+								id="name"
+								label="Nome"
+								value={user.name}
+								onChange={handleChangeInput}
+								autoFocus
+							/>
+						</Grid>
 
-							<Form.Group>
-								{/* <Form.Label>Password</Form.Label> */}
-								<Form.Control
-									name="password"
-									type="password"
-									placeholder="Senha"
-									value={user.password}
-									onChange={handleChangeInput}
-								/>
-								<Form.Text className="text-muted">
-									Mínimo de 5 caracteres.
-								</Form.Text>
-							</Form.Group>
-
-							<Button variant="primary" type="submit">
-								Submit
-							</Button>
-						</Form>
-					</Container>
-				</div>
-			)}
-			<br></br>
-		</div>
+						<Grid item xs={12}>
+							<TextField
+								variant="outlined"
+								required
+								fullWidth
+								id="email"
+								label="Email"
+								name="email"
+								autoComplete="email"
+								value={user.email}
+								onChange={handleChangeInput}
+							/>
+						</Grid>
+						<Grid item xs={12}>
+							<TextField
+								variant="outlined"
+								required
+								fullWidth
+								name="password"
+								label="Senha"
+								type="password"
+								id="password"
+								autoComplete="current-password"
+								value={user.password}
+								onChange={handleChangeInput}
+							/>
+						</Grid>
+					</Grid>
+					<Button
+						type="submit"
+						fullWidth
+						variant="contained"
+						color="primary"
+						className={classes.submit}
+					>
+						Cadastrar
+					</Button>
+					<Grid container justify="flex-end">
+						<Grid item>
+							<Link href="#" variant="body2" component={RouterLink} to="/login">
+								Já tem uma conta? Entre!
+							</Link>
+						</Grid>
+					</Grid>
+				</form>
+			</div>
+			<Box mt={5}>
+				<Copyright />
+			</Box>
+		</Container>
 	);
 };
 
-export default Signup;
+export default SignUp;