Skip to content
Snippets Groups Projects
Commit 29c85b74 authored by Ludvig Damberg's avatar Ludvig Damberg
Browse files

frontend work 

completed:

-Sign up page
-Sign in page

the App page (home) was also cleaned up and from here we will as a standard build all pages with components and leave them as clean and readable as possible
parent 8c8af435
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 242 additions and 223 deletions
backend/routes/routes.js
+ 0
− 1
View file @ 29c85b74
......@@ -79,7 +79,6 @@ router.post("/register", asyncHandler(async (req,res) => {
email:user.email,
username:user.username,
password:user.password,
token: generateToken(user._id)
})
await user.save()
}else{
......
frontend/src/App.js
+ 5
− 43
View file @ 29c85b74
import axios from 'axios'
import React, {useState, useEffect} from 'react'
import styles from './styles/styles.module.css'
import Landing from './components/Landing'
import Post from './components/Post'
import Header from './components/Header'
function App() {
const [posts,setPosts] = useState([])
const [loading,setLoading] = useState(false)
const [drinks,setDrinks] = useState([])
const loadPosts = () => {
axios.get("http://localhost:5000/posts")
.then((res) => {
console.log(res.data)
setPosts(res.data)
})
}
useEffect(() => {
loadPosts()
function App() {
},[])
return (
<>
<Header/>
<Landing/>
<Post/>
<div>
<h1>POSTS</h1>
<div>{posts.map((post) => {
return(
<div className={styles.posts_container} key={post._id}>
<img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`}/>
<div>
<h1>{post.name}</h1>
<p>{post.description}</p>
</div>
</div>
)
})}</div>
</div>
</>
<>
<Header/>
<Landing/>
</>
);
}
......
frontend/src/components/Login.js deleted 100644 → 0
+ 0
− 78
View file @ 8c8af435
import React from 'react'
import {useState, useRef, useEffect} from 'react'
import axios from 'axios'
const Login = () => {
const userRef = useRef();
const errRef = useRef();
const[password,setPassword] = useState("")
const[email,setEmail] = useState("")
const [errMsg, setErrMsg] = useState('');
const [success, setSuccess] = useState(false);
// useEffect(()=>{
// userRef.current.focus();
// }, [])
useEffect(() => {
setErrMsg('');
}, [email, password])
const handleLogin = () => {
console.log({email,password})
setSuccess(true);
axios.post("http://localhost:5000/login", {email, password})
.then((res) => {
console.log(res.data)
}).catch((err) => console.log(err))
}
return (
<>
{success ? (
<section>
<h1>You are logged in!</h1>
<br />
</section>
) : (
<div>
<p ref={errRef} className = {errMsg ? "errmsg" : "offscreen"}
aria-live = "assertive">{errMsg}</p>
<h1>Sign In</h1>
<label htmlFor = "Email">Email: </label>
<input
type='text'
id='Email'
ref ={userRef}
autocomplete = "off"
onChange={(e) => setEmail(e.target.value)}
value = {email}
required/>
<label htmlFor = "password">Password: </label>
<input
type='text'
id="password"
ref ={userRef}
onChange={(e) => setPassword(e.target.value)}
value = {password}
required/>
<button onClick={handleLogin}>Sign in</button>
</div>
)}
</>
)
}
export default Login
\ No newline at end of file
frontend/src/components/LoginForm.js 0 → 100644
+ 41
− 0
View file @ 29c85b74
import React from 'react'
import {useState, useRef, useEffect} from 'react'
import axios from 'axios'
import styles from '../styles/login.module.css'
const LoginForm = () => {
const[password,setPassword] = useState("")
const[email,setEmail] = useState("")
const handleLogin = () => {
axios.post("http://localhost:5000/login", {email, password})
.then((res) => {
console.log(res.data)
}).catch((err) => console.log(err))
}
return (
<div className={styles.container}>
<div className={styles.inputs}>
<p>Email</p>
<input type='text' className={styles.input} onChange={(e) => setEmail(e.target.value)}/>
</div>
<div className={styles.inputs}>
<p>Password</p>
<input type='password' className={styles.input} onChange={(e) => setPassword(e.target.value)}/>
</div>
<div className={styles.inputs}>
<button className={styles.button} onClick={handleLogin}>Login</button>
</div>
</div>
)
}
export default LoginForm
\ No newline at end of file
frontend/src/components/Posts.js 0 → 100644
+ 45
− 0
View file @ 29c85b74
import React from 'react'
const Posts = () => {
const [posts,setPosts] = useState([])
const [loading,setLoading] = useState(false)
const [drinks,setDrinks] = useState([])
const loadPosts = () => {
axios.get("http://localhost:5000/posts")
.then((res) => {
console.log(res.data)
setPosts(res.data)
})
}
useEffect(() => {
loadPosts()
},[])
return (
<div>
<div>{posts.map((post) => {
return(
<div className={styles.posts_container} key={post._id}>
<img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`}/>
<div>
<h1>{post.name}</h1>
<p>{post.description}</p>
</div>
</div>
)
})}</div>
</div>
)
}
export default Posts
\ No newline at end of file
frontend/src/components/SignUp.js
+ 35
− 82
View file @ 29c85b74
import React from 'react'
import {useState, useRef, useEffect} from 'react'
import { useState } from 'react'
import axios from 'axios'
const USER_REGEX = /^[a-zA-Z][a-zA-Z0-9-_]{3,23}$/;
import styles from '../styles/login.module.css'
const SignUp = () => {
const userRef = useRef();
const errRef = useRef();
const[username,setUsername] = useState("")
const[password,setPassword] = useState("")
const[email,setEmail] = useState("")
const [validName, setValidName] = useState(false);
const [errMsg, setErrMsg] = useState('');
const [success, setSuccess] = useState(false);
useEffect(() => {
setErrMsg('');
}, [username, password])
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [email, setEmail] = useState("")
useEffect(() => {
const result = USER_REGEX.test(username);
setValidName(result);
}, [username])
const handleSignup = () => {
console.log({ email, username, password })
const handleSignup = () => {
setSuccess(true);
console.log({email,username,password})
const config = {
headers: {
"Content-type": "application/json",
},
};
const config = {
headers: {
"Content-type": "application/json",
},
};
axios.post("http://localhost:5000/register", { email, username, password }, config)
.then((res) => {
console.log(res.data)
}).catch((err) => console.log(err))
axios.post("http://localhost:5000/register", {email,username,password},config)
.then((res) => {
console.log(res.data)
}).catch((err) => console.log(err))
}
}
return (
<>
{success ? (
<section>
<h1>Success!</h1>
<p>
<a href="#">Sign In</a>
</p>
</section>
) : (
<div>
<h1>Register</h1>
<label htmlFor="email">Email:</label>
<input type='text'
placeholder='Email'
ref={userRef}
autoComplete="off"
onChange={(e) => setEmail(e.target.value)}
/>
<label htmlFor="username">Username:</label>
<input type='text'
placeholder='Username'
ref={userRef}
autoComplete="off"
onChange={(e) => setUsername(e.target.value)}
required
/>
<label htmlFor="password">Password:</label>
<input type='password'
placeholder='Password'
onChange={(e) => setPassword(e.target.value)}
value={password}/>
<button disabled={!validName ? true : false}
onClick={handleSignup}>
Sign up
</button>
<div className={styles.container}>
<div className={styles.inputs}>
<p>Username</p>
<input type='text' className={styles.input} onChange={(e) => setUsername(e.target.value)} />
</div>
<div className={styles.inputs}>
<p>Email</p>
<input type='text' className={styles.input} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className={styles.inputs}>
<p>Password</p>
<input type='password' className={styles.input} onChange={(e) => setPassword(e.target.value)} />
</div>
<div className={styles.inputs}>
<button className={styles.button} onClick={handleSignup}>Register</button>
</div>
</div>
)}
</>
)
}
......
frontend/src/pages/Login.js
+ 11
− 9
View file @ 29c85b74
import React from 'react'
import styles from '../styles/login.module.css'
import LoginForm from '../components/LoginForm'
const Login = () => {
return (
<div className={styles.parent}>
<div className={styles.left}>
<h1>LOGIN TO START SHARING THE FUN!</h1>
</div>
<div className={styles.right}>
<div className={styles.image_container}>
<img src='../content/cheers.jpg'/>
<div className={styles.parent}>
<div className={styles.left}>
<h1 className={styles.label}>LOGIN🎈</h1>
<LoginForm />
</div>
<div className={styles.right}>
<div className={styles.image_container}>
<img src='../content/cheers.jpg' />
</div>
</div>
</div>
</div>
</div>
)
}
......
frontend/src/pages/Register.js
+ 13
− 5
View file @ 29c85b74
import React from 'react'
import styles from '../styles/login.module.css'
import SignUp from '../components/SignUp'
const Register = () => {
return (
<>
</>
<div className={styles.parent}>
<div className={styles.left}>
<h1 className={styles.label}>Sign up❤️</h1>
<SignUp/>
</div>
<div className={styles.right}>
<div className={styles.image_container}>
<img src='../content/cheers.jpg' />
</div>
</div>
</div>
)
}
......
frontend/src/styles/header.module.css
+ 1
− 1
View file @ 29c85b74
......@@ -3,7 +3,7 @@ height: 10vh;
margin: 0;
padding: 10px;
display: flex;
justify-content: end;
justify-content: flex-end;
}
.button {
appearance: none;
......
frontend/src/styles/login.module.css
+ 91
− 4
View file @ 29c85b74
......@@ -3,15 +3,22 @@
height: 100vh;
}
.left{
width: 40%;
width: 30%;
background: rgb(49, 117, 121);
border-right: solid 4px rgb(255, 240, 153);
box-shadow: 200px 300px 300px 400px rgba(8, 8, 8, 0.863);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.left h1{
margin: 0;
margin: 10;
font-size: 300%;
color: rgb(255, 240, 153);
text-align: center;
}
.right{
width: 60%;
width: 70%;
height: 100vh;
background: black;
}
......@@ -28,4 +35,84 @@
max-width: 150%;
max-height: 150%;
object-fit: cover;
}
\ No newline at end of file
}
.input {
max-width: 190px;
height: 44px;
background-color: #05060f0a;
border-radius: .5rem;
padding: 0 1rem;
border: 2px solid transparent;
font-size: 1rem;
transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
}
.label {
display: block;
margin-bottom: .3rem;
font-size: .9rem;
font-weight: bold;
color: #05060f99;
transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
}
.input:hover, .input:focus, .input-group:hover .input {
outline: none;
border-color: #05060f;
}
.input-group:hover .label, .input:focus {
color: #05060fc2;
}
.inputs{
margin: 15px;
}
.container{
margin: auto;
align-items: center;
display: flex;
flex-direction: column;
}
.button {
appearance: none;
background-color: rgb(255, 240, 153);
border: 0.125em solid #383838;
border-radius: 0.9375em;
box-sizing: border-box;
color: #383838;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: normal;
margin: 0;
min-height: 3.75em;
min-width: 0;
outline: none;
padding: 1em 2.3em;
text-align: center;
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
will-change: transform;
margin: 5px;
}
.button:disabled {
pointer-events: none;
}
.button:hover {
color: #fff;
background-color: #1A1A1A;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}
.button:active {
box-shadow: none;
transform: translateY(0);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment