diff --git a/backend/routes/routes.js b/backend/routes/routes.js
index 4c7fe9fb96dfec6f211a1d03b72ce04a5e3fdbe0..3cc5d693da9249993b74fb606845f85d70ed173d 100644
--- a/backend/routes/routes.js
+++ b/backend/routes/routes.js
@@ -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{
diff --git a/frontend/src/App.js b/frontend/src/App.js
index f92680dc94810a838e994c767aa08308469d28b6..b804a7e7227e91c9601b61e9adb24fd50f53ac0f 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,53 +1,15 @@
-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/>
+ </>
);
}
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
deleted file mode 100644
index be4382fdede3601b91701b9fe4442beeff7b33fd..0000000000000000000000000000000000000000
--- a/frontend/src/components/Login.js
+++ /dev/null
@@ -1,78 +0,0 @@
-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
diff --git a/frontend/src/components/LoginForm.js b/frontend/src/components/LoginForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5475422ec7b6726edd5d2ffc03a1e3095595d1b
--- /dev/null
+++ b/frontend/src/components/LoginForm.js
@@ -0,0 +1,41 @@
+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
diff --git a/frontend/src/components/Posts.js b/frontend/src/components/Posts.js
new file mode 100644
index 0000000000000000000000000000000000000000..4f37486567cb1585ab917dea150e88e4e9920fbe
--- /dev/null
+++ b/frontend/src/components/Posts.js
@@ -0,0 +1,45 @@
+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
diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
index 6fe05e2e04bdc8e02da6e576cfbe5f9ae6896954..62dc8363ec209d0a106a3c30c59eb68ed3e84d69 100644
--- a/frontend/src/components/SignUp.js
+++ b/frontend/src/components/SignUp.js
@@ -1,100 +1,53 @@
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>
- )}
- </>
+
)
}
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index de53aa68e4fd854e46a86458c80f103a9e66f5e9..f543bf418ed71d9cf3c7fc72bc62b33334f9db67 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -1,20 +1,22 @@
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>
)
}
diff --git a/frontend/src/pages/Register.js b/frontend/src/pages/Register.js
index 4110e55c848928c7c21fb7a81304cce399f50e99..8e52bca3c3d51f6878d901b7e8803bc7f1a0e097 100644
--- a/frontend/src/pages/Register.js
+++ b/frontend/src/pages/Register.js
@@ -1,11 +1,19 @@
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>
)
}
diff --git a/frontend/src/styles/header.module.css b/frontend/src/styles/header.module.css
index d69e8b4fe16f4f483b85cad0f413e6957b61b917..544ffac84bc905e7139f53ef2a38fcea763fc71f 100644
--- a/frontend/src/styles/header.module.css
+++ b/frontend/src/styles/header.module.css
@@ -3,7 +3,7 @@ height: 10vh;
margin: 0;
padding: 10px;
display: flex;
-justify-content: end;
+justify-content: flex-end;
}
.button {
appearance: none;
diff --git a/frontend/src/styles/login.module.css b/frontend/src/styles/login.module.css
index 854bda70c89b73e967394b9869e731c34cc022ae..c97f90778ce7028f398da827fc1f30a7bc7b7bce 100644
--- a/frontend/src/styles/login.module.css
+++ b/frontend/src/styles/login.module.css
@@ -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