Merge pull request #23 from Mundreanuc223/Aaron

Updated login and registration pages

vault/public/manifest.json

@@ -8,13 +8,13 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
+      "src": "vault_logo.jpg",
+      "type": "image/jpg",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
+      "src": "vault_logo.jpg",
+      "type": "image/jpg",
       "sizes": "512x512"
     }
   ],

vault/src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import { Routes, Route } from 'react-router-dom';
 import LoginForm from './Components/LoginForm/LoginForm';
 import RegistrationForm from "./Components/RegistrationForm/RegistrationForm";
+import Home from "./Components/Home/Home";
 
 function App() {
 
@@ -11,6 +12,7 @@ function App() {
           <Route path="/" element={<LoginForm />} />
           <Route path="/login" element={<LoginForm />} />
           <Route path="/register" element={<RegistrationForm />} />
+          <Route path="/home" element={<Home />} />
       </Routes>
   );
 }

vault/src/Components/Home/Home.jsx

@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+import './Home.css';
+import { Link } from 'react-router-dom';
+
+const Home = () => {
+    return (
+        <div>
+            <h1>Successful!</h1>
+        </div>
+    );
+};
+
+export default Home;

vault/src/Components/LoginForm/LoginForm.jsx

@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import './LoginForm.css';
 import { FaUser } from "react-icons/fa";
 import { FaLock } from "react-icons/fa";
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 const LoginForm = () => {
     // State to store the username and password
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
+    const navigate = useNavigate();
 
     // Function to handle form submission
     const handleSubmit = async (e) => {
@@ -27,8 +28,10 @@ const LoginForm = () => {
 
             if (response.ok) {
                 console.log('Login successful:', data.message);
+                setErrorMessage('');
+                navigate('/home');
             } else {
-                setErrorMessage(data.message); // Show error message to the user
+                setErrorMessage(data.message);
             }
         } catch (error) {
             console.error('Error during login:', error);
@@ -41,7 +44,7 @@ const LoginForm = () => {
             <form onSubmit={handleSubmit}>
                 <h1>Login</h1>
                 <div className="input-box">
-                    <input type="text" placeholder='Username' required value={username} onChange={(e) => setUsername(e.target.value)} />
+                    <input type="text" placeholder='Username/Email' required value={username} onChange={(e) => setUsername(e.target.value)} />
                     <FaUser className= 'icons' />
                 </div>
                 <div className="input-box">

vault/src/Components/RegistrationForm/RegistrationForm.jsx

@@ -2,20 +2,51 @@ import React, { useState } from 'react';
 import './RegistrationForm.css';
 import { FaUser } from "react-icons/fa";
 import { FaLock } from "react-icons/fa";
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 const RegistrationForm = () => {
 
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
+    const [email, setEmail] = useState('');
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [confirmedPassword, setConfirmedPassword] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
+    const navigate = useNavigate();
+
+    // Function to handle form submission
+    const handleSubmit = async (e) => {
+        e.preventDefault(); // Prevents page reload or default form submission
+        try {
+            // Send a POST request to backend
+            const response = await fetch('http://127.0.0.1:5000/register', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ firstName, lastName, email, username, password, confirmedPassword }), // Send user info
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                console.log('Account created!', data.message);
+                setErrorMessage('');
+                navigate('/home');
+            } else {
+                setErrorMessage(data.message);
+            }
+        } catch (error) {
+            console.error('Error during registration:', error);
+            setErrorMessage('Something went wrong. Please try again.');
+        }
+    };
+
 
     return (
         <div className='wrapper'>
-            <form>
+            <form onSubmit={handleSubmit}>
                 <h1>Create an Account</h1>
                 <div className="input-box">
                     <input type="text" placeholder='First Name' required value={firstName}
@@ -27,6 +58,11 @@ const RegistrationForm = () => {
                            onChange={(e) => setLastName(e.target.value)}/>
                     <FaUser className='icons'/>
                 </div>
+                <div className="input-box">
+                    <input type="text" placeholder='Email' required value={email}
+                           onChange={(e) => setEmail(e.target.value)}/>
+                    <FaUser className='icons'/>
+                </div>
                 <div className="input-box">
                     <input type="text" placeholder='Username' required value={username}
                            onChange={(e) => setUsername(e.target.value)}/>

vault/src/backend/app.py

@@ -16,8 +16,10 @@ def init_db():
         CREATE TABLE IF NOT EXISTS users (
             user_id INTEGER PRIMARY KEY AUTOINCREMENT,
             username TEXT UNIQUE NOT NULL,
-            email TEXT UNIQUE,
+            email TEXT UNIQUE NOT NULL,
             password TEXT NOT NULL,
+            first_name TEXT NOT NULL,
+            last_name TEXT NOT NULL,
             profile_pic TEXT,                               
             bio TEXT,
             created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
@@ -83,10 +85,16 @@ def login():
     conn = get_db_connection()
     cursor = conn.cursor()
 
-    # Checking if username is in database and if password is correct
-    cursor.execute("SELECT username, password FROM users WHERE username = ? AND password = ?", (username, password))
-    user = cursor.fetchone()
-    conn.close()
+    if '@' not in username:
+        # Checking if username is in database and if password is correct
+        cursor.execute("SELECT username, password FROM users WHERE username = ? AND password = ?", (username, password))
+        user = cursor.fetchone()
+        conn.close()
+    else:
+        # Checking if email is in database and if password is correct
+        cursor.execute("SELECT email, password FROM users WHERE email = ? AND password = ?", (username, password))
+        user = cursor.fetchone()
+        conn.close()
 
     if user:
         return jsonify({"status": "success", "message": "Login successful!"}), 200
@@ -97,8 +105,13 @@ def login():
 @app.route('/register', methods=['POST'])
 def register():
     data = request.json
+
+    firstName = data['firstName']
+    lastName = data['lastName']
+    email = data['email']
     username = data['username']
     password = data['password']
+    confirmedPassword = data['confirmedPassword']
 
     conn = get_db_connection()
     cursor = conn.cursor()
@@ -109,15 +122,19 @@ def register():
     if existing_user:
         # Username is already in database/is taken
         conn.close()
-        return jsonify({"error": "Username already taken"}), 409
+        return jsonify({"status": "failure", "message": "Username already taken"}), 409
+
+    # Checking if passwords match
+    if password != confirmedPassword:
+        return jsonify({"status": "failure", "message": "Passwords do not match."}), 401
 
-    # Adding username and password into the database
-    cursor.execute("INSERT INTO users (username, password) VALUES (?, ?)", (username, password))
+    # Adding user info into the database
+    cursor.execute("INSERT INTO users (username, email, password, first_name, last_name) VALUES (?, ?, ?, ?, ?)", 
+                   (username, email, password, firstName, lastName))
     conn.commit()
     conn.close()
     return jsonify({"status": "success", "message": "Account created!"}), 201
 
-
 # Retrieve single user by ID
 @app.route('/users/<int:user_id>', methods=['GET'])
 def get_user(user_id):