Skip to content

Commit

Permalink
Merge pull request #5 from mykovasyl/sign-up-styling
Browse files Browse the repository at this point in the history 
Sign up styling
  • Loading branch information
@mykovasyl
mykovasyl committed Mar 29, 2023
2 parents 96f9699 + 78ab62d commit 44b3b43
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 106 deletions.
2 changes: 0 additions & 2 deletions client/src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const UserContext = createContext();

function App() {
const [currentUser, setCurrentUser] = useState({});
const [avatar, setAvatar] = useState(null);
const [errors, setErrors] = useState([]);

const navigate = useNavigate();
Expand Down Expand Up @@ -154,7 +153,6 @@ function App() {
value={{
currentUser,
setCurrentUser,
avatar,
handleLogOut,
handleAddRecipe,
handleUpdateRecipe,
Expand Down
99 changes: 66 additions & 33 deletions client/src/components/LogIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,24 @@ import React, { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "./App";
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";

function LogIn() {
const [login, setLogin] = useState({
username: "",
password: "",
});
const theme = createTheme();
const { setCurrentUser } = useContext(UserContext);
const navigate = useNavigate();

Expand All @@ -34,39 +46,60 @@ function LogIn() {
}

return (
<>
<h2
style={{
border: ".5px solid grey",
marginBottom: "24px",
borderRadius: "8px",
padding: "8px",
}}
>
Log in:
</h2>
<form onSubmit={handleSubmit}>
<p>Username:</p>
<input
type='text'
name='username'
value={login.username}
onChange={handleInputChange}
/>

<p>Password:</p>
<input
type='password'
name='password'
value={login.password}
onChange={handleInputChange}
/>

<Button type='submit' variant='contained' style={{ margin: "16px" }}>
Log in!
</Button>
</form>
</>
<ThemeProvider theme={theme}>
<Container component='main' maxWidth='xs'>
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Typography component='h1' variant='h5'>
Sign in
</Typography>
<Box
component='form'
onSubmit={handleSubmit}
noValidate
sx={{ mt: 1 }}
>
<TextField
margin='normal'
required
fullWidth
label='Username'
name='username'
autoComplete='username'
value={login.username}
onChange={handleInputChange}
autoFocus
/>
<TextField
margin='normal'
required
fullWidth
name='password'
label='Password'
type='password'
value={login.password}
onChange={handleInputChange}
autoComplete='current-password'
/>
<Button
type='submit'
fullWidth
variant='contained'
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
</Box>
</Box>
</Container>
</ThemeProvider>
);
}

Expand Down
167 changes: 96 additions & 71 deletions client/src/components/SignUp.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
import { Button } from "@mui/material";
import React, { useState, useContext } from "react";
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { UserContext } from "./App";
import Avatar from "@mui/material/Avatar";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";

function SignUp() {
const { setCurrentUser, avatar, setAvatar } = useContext(UserContext);

const { setCurrentUser } = useContext(UserContext);
const theme = createTheme();
const [error, setError] = useState([]);
const [signupForm, setSignupForm] = useState({
username: "",
Expand All @@ -25,18 +37,13 @@ function SignUp() {
formData.append(data, signupForm[data]);
}

if (avatar !== null) {
formData.append("avatar", avatar.avatar);
}

fetch("/signup", {
method: "POST",
body: formData,
}).then((resp) => {
if (resp.ok) {
resp.json().then((user) => {
setCurrentUser(user);
// setAvatar(user.image_url);
navigate("/");
});
} else {
Expand All @@ -49,70 +56,88 @@ function SignUp() {
setSignupForm({ ...signupForm, [e.target.name]: e.target.value });
}

function handleFileChange(e) {
setAvatar({ avatar: e.target.files[0] });
}

return (
<div>
<h2
style={{
border: ".5px solid grey",
marginBottom: "24px",
borderRadius: "8px",
padding: "8px",
}}
>
Join now and get cooking!
</h2>
<form onSubmit={handleSubmit}>
<p>Username</p>
<input
name='username'
type='username'
value={signupForm.username}
onChange={handleInputChange}
/>

<p>Password</p>
<input
name='password'
type='password'
value={signupForm.password}
onChange={handleInputChange}
/>
<p>
Your password must be 8-20 characters long, contain letters and
numbers, and must not contain spaces, special characters, or emoji.
</p>

<p>Confirm password</p>
<input
name='password_confirmation'
type='password'
value={signupForm.password_confirmation}
onChange={handleInputChange}
/>

<p>Name</p>
<input
name='name'
type='name'
value={signupForm.name}
onChange={handleInputChange}
/>

<p>Upload an avatar (optional):</p>
<input name='avatar' type='file' onChange={handleFileChange} />

<Button type='submit' variant='contained'>
Sign up!
</Button>
{/* {error.map((err) => {
return <h4>{err}</h4>;
})} */}
</form>
</div>
<ThemeProvider theme={theme}>
<Container component='main' maxWidth='xs'>
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Typography component='h1' variant='h5'>
Join now and get cooking!
</Typography>
<Box
component='form'
noValidate
onSubmit={handleSubmit}
sx={{ mt: 3 }}
>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
autoComplete='given-name'
name='name'
required
fullWidth
label='Full name'
value={signupForm.name}
onChange={handleInputChange}
autoFocus
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
label='Username'
name='username'
autoComplete='username'
value={signupForm.username}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
name='password'
label='Password'
type='password'
autoComplete='new-password'
value={signupForm.password}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
label='Confirm Password'
name='password_confirmation'
type='password'
autoComplete='confirm-password'
value={signupForm.password_confirmation}
onChange={handleInputChange}
/>
</Grid>
</Grid>
<Button
type='submit'
fullWidth
variant='contained'
sx={{ mt: 3, mb: 2 }}
>
Sign Up
</Button>
</Box>
</Box>
</Container>
</ThemeProvider>
);
}

Expand Down

0 comments on commit 44b3b43

Please sign in to comment.