frontend integration partially done

backend/controllers/user.js

@@ -1,41 +1,69 @@
 const jwt = require('jsonwebtoken')
 const User = require('../models/user')
 
-module.exports.register = async ({ body: { email, password } }, res) => {
+module.exports.register = async (req, res) => {
+   const { name, email, password } = req.body;
+
    try {
-      if (!email || !password) return res.sendStatus(400)
+      // if any fields are missing
+      if (!email || !password){
+          return res.status(400).send("Fields missing")
+      }
+
+      // if the user is already registered
       let oldUser = await User.findOne({ email }).catch((err) => {
          console.error(err)
       })
-      if (oldUser) return res.status(400).send('Already Exists')
+      if (oldUser){
+         return res.status(409).send('User already exists')
+      }
+
+      // saving new user to database
       let user = new User({ email })
       user.setPassword(password)
+
       let validationError = false
       await user.save().catch((err) => {
          validationError = true
          return res.sendStatus(400)
       })
-      if (!validationError) return res.send(user.generateJWT())
+
+      if (!validationError){
+         return res.status(200).json({ jwt: user.generateJWT(), message: "User successfully registered"})
+      }
    } catch (e) {
       console.log(e)
-      return res.sendStatus(500)
+      return res.status(500).send('Internal Server Error')
    }
 }
-module.exports.login = async ({ body: { email, password } }, res) => {
+
+
+module.exports.login = async (req, res) => {
+   const { email, password } = req.body;
+
    try {
-      if (!email || !password) return res.sendStatus(400)
+      // if any fields are missing
+      if (!email || !password){
+         return res.status(400).send("Fields missing")
+      }
+
       let user = await User.findOne({ email }).catch((err) =>
          console.error(err)
       )
 
+      console.log(user);
+
       if (user && user.validatePassword(password))
-         return res.json({ access_token: user.generateJWT() })
+         return res.status(200).json({ access_token: user.generateJWT(), message: "Logged In" })
       return res.status(401).send(null)
-   } catch (err) {
+   } 
+   catch (err) {
       console.log(err)
       return res.sendStatus(500)
    }
 }
+
+
 module.exports.me = async (req, res) => {
    try {
       if (!req.user.isAuthenticated) {

frontend/.env

@@ -1,2 +1,2 @@
 NODE_ENV=dev
-NEXT_PUBLIC_API_URL=https://api.minfy.xyz
+NEXT_PUBLIC_API_URL=http://localhost:5000

frontend/components/Login/Login.jsx

@@ -2,31 +2,52 @@ import React from 'react'
 import LoginStyle from './Login.style'
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faUser,
-  faEnvelope,
-  faLock,
-} from '@fortawesome/free-solid-svg-icons'
+import { faUser, faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
 import { UserContext } from '../../helpers/user/usercontext'
 import { useState } from 'react'
 import Link from 'next/link'
 import { useContext } from 'react'
+import CloseIcon from '@mui/icons-material/Close'
+import axios from 'helpers/Axios'
 
 function Login() {
-  const [userData, setUserData] = useState({
-    email: '',
-    password: '',
-  })
+  const [email, setEmail] = useState('tejascs84@gmail.com')
+  const [password, setPassword] = useState('123')
+  const [message, setMessage] = useState('')
+  const [isLoading, setisLoading] = useState(false)
 
-  const handleInput = (event) => {
-    const name = event.target.name
-    const value = event.target.value
-    setUserData({ ...userData, [name]: value })
+  async function handleSubmit(e) {
+    e.preventDefault()
+    
+
+    if (!email) {
+      setMessage('Email should not be blank')
+      return
+    }
+
+    if (!password) {
+      setMessage('Password should not be blank')
+      return
+    }
+
+    setisLoading(true)
+
+    try {
+      const res = await axios.post(`/user/login`, { email, password })
+      console.log(res);
+      setMessage(res.data.message)
+    } 
+    catch (error) {
+      console.log(error);
+      setMessage('Error occured while Loggin in, please try again!!')
+    }
+    
+    setisLoading(false)
   }
 
   return (
     <LoginStyle>
-      <form className="form-wrapper">
+      <form className="form-wrapper" onSubmit={handleSubmit}>
         <p className="reg-title">Sign in</p>
 
         <img src="/images/user.png"></img>
@@ -39,9 +60,9 @@ function Login() {
             className="reg-input"
             name="email"
             autoComplete="off"
-            onChange={handleInput}
+            onChange={(e) => setEmail(e.target.value)}
             type="text"
-            value={userData.email}
+            value={email}
             placeholder="Email Address"
           />
         </div>
@@ -54,18 +75,28 @@ function Login() {
             className="reg-input"
             name="password"
             autoComplete="off"
-            onChange={handleInput}
+            onChange={(e) => setPassword(e.target.value)}
             type="password"
-            value={userData.password}
+            value={password}
             placeholder="Password"
           />
         </div>
 
-        <Link href="/">
-          <button type="submit" className="submit-button">
-            Submit
-          </button>
-        </Link>
+
+        <div className="message_container">
+        {isLoading && <div className="loader"></div>}
+
+          {message && (
+            <div className="message">
+              {message}
+              <CloseIcon className="close" onClick={() => setMessage('')} />
+            </div>
+          )}
+        </div>
+
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
 
         <p className="foot-text">
           New here?&nbsp;

frontend/components/Reg/Reg.jsx

@@ -6,26 +6,46 @@ import { faUser, faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
 import { useState, useContext } from 'react'
 import { Link } from '@mui/material'
 import UserAuth from 'helpers/user/usercontext'
+import CloseIcon from '@mui/icons-material/Close'
+import axios from 'helpers/Axios'
 
 function Reg() {
-  const [userData, setUserData] = useState({
-    username: '',
-    email: '',
-    password: '',
-    repassword: '',
-  })
+  const [name, setName] = useState('Tejas')
+  const [email, setEmail] = useState('tejascs84@gmail.com')
+  const [password, setPassword] = useState('123')
+  const [repassword, setRepassword] = useState('123')
+  const [message, setMessage] = useState('')
+  const [isLoading, setisLoading] = useState(false)
 
-  const handleInput = (event) => {
-    const name = event.target.name
-    const value = event.target.value
-    setUserData({ ...userData, [name]: value })
-  }
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    setUserData(userData)
-    context.createAcc(userData)
-  }
   const context = useContext(UserAuth);
+
+  async function handleSubmit(e){
+    e.preventDefault()
+    
+    if(!name || !email || !password || !repassword){
+      setMessage("Please fill all fields")
+      return
+    }
+    
+    if(repassword !== password){
+      setMessage("Password doesn't match")
+      return
+    }
+    
+    setisLoading(true)
+
+    try {
+      const res = await axios.post(`/user/register`, { name, email, password })
+      console.log(res)
+      setMessage(res.data.message)
+    } 
+    catch (error) {
+      setMessage(error.response.data)
+    }
+
+    setisLoading(false)
+  }
+
   return (
     <RegStyle>
       <form onSubmit={handleSubmit} className="form-wrapper">
@@ -40,8 +60,8 @@ function Reg() {
             name="username"
             autoComplete="off"
             type="text"
-            value={userData.username}
-            onChange={handleInput}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
             placeholder="Full Name"
           />
         </div>
@@ -54,9 +74,9 @@ function Reg() {
             className="reg-input"
             name="email"
             autoComplete="off"
-            onChange={handleInput}
+            onChange={(e) => setEmail(e.target.value)}
             type="text"
-            value={userData.email}
+            value={email}
             placeholder="Email Address"
           />
         </div>
@@ -69,9 +89,9 @@ function Reg() {
             className="reg-input"
             name="password"
             autoComplete="off"
-            onChange={handleInput}
+            onChange={(e) => setPassword(e.target.value)}
             type="password"
-            value={userData.password}
+            value={password}
             placeholder="Password"
           />
         </div>
@@ -84,13 +104,24 @@ function Reg() {
             className="reg-input"
             name="repassword"
             autoComplete="off"
-            onChange={handleInput}
+            onChange={(e) => setRepassword(e.target.value)}
             type="password"
-            value={userData.repassword}
+            value={repassword}
             placeholder="Confirm Password"
           />
         </div>
 
+        <div className="message_container">
+        {isLoading && <div className="loader"></div>}
+
+          {message && (
+            <div className="message">
+              {message}
+              <CloseIcon className="close" onClick={() => setMessage('')} />
+            </div>
+          )}
+        </div>
+
         <button type="submit" className="submit-button">
           Submit
         </button>

frontend/helpers/Axios.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-var API_URL = process.env.NEXT_PUBLIC_API_URL
+const API_URL = process.env.NEXT_PUBLIC_API_URL
 
 export default axios.create({
   baseURL: API_URL,

frontend/styles/formStyles.css

@@ -84,6 +84,54 @@
   transition: 0.1s;
 }
 
+/* spinner for forms */
+.loader {
+  border-radius: 50%;
+  border-top: 4px solid purple;
+  border-bottom: 4px solid purple;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  margin: 10px auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.message_container {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.message {
+  width: 100%;
+  font-size: 1.1rem;
+  background-color: white;
+  padding: 7px;
+  border-radius: 6px;
+  margin: 8px 0;
+  position: relative;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: medium;
+  cursor: pointer;
+}
+
 .foot-text {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;