From 892383d0caa589027d863c017bc8a48ffefc3a0d Mon Sep 17 00:00:00 2001 From: yoaaronw <117215469+yoaaronw@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:15:33 -0400 Subject: [PATCH] Updated login and registration pages, and when form is valid the user will be routed to home page --- vault/public/manifest.json | 8 ++-- vault/src/App.js | 2 + vault/src/Components/Home/Home.css | 0 vault/src/Components/Home/Home.jsx | 13 ++++++ vault/src/Components/LoginForm/LoginForm.jsx | 9 ++-- .../RegistrationForm/RegistrationForm.jsx | 40 +++++++++++++++++- vault/src/backend/app.py | 35 +++++++++++---- vault/src/backend/vault_database.db | Bin 45056 -> 45056 bytes 8 files changed, 89 insertions(+), 18 deletions(-) create mode 100644 vault/src/Components/Home/Home.css create mode 100644 vault/src/Components/Home/Home.jsx diff --git a/vault/public/manifest.json b/vault/public/manifest.json index 080d6c7..f98d721 100644 --- a/vault/public/manifest.json +++ b/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" } ], diff --git a/vault/src/App.js b/vault/src/App.js index 83d29a9..ce2944f 100644 --- a/vault/src/App.js +++ b/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() { } /> } /> } /> + } /> ); } diff --git a/vault/src/Components/Home/Home.css b/vault/src/Components/Home/Home.css new file mode 100644 index 0000000..e69de29 diff --git a/vault/src/Components/Home/Home.jsx b/vault/src/Components/Home/Home.jsx new file mode 100644 index 0000000..3204757 --- /dev/null +++ b/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 ( +
+

Successful!

+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/vault/src/Components/LoginForm/LoginForm.jsx b/vault/src/Components/LoginForm/LoginForm.jsx index 728fddb..1bc3826 100644 --- a/vault/src/Components/LoginForm/LoginForm.jsx +++ b/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 = () => {

Login

- setUsername(e.target.value)} /> + setUsername(e.target.value)} />
diff --git a/vault/src/Components/RegistrationForm/RegistrationForm.jsx b/vault/src/Components/RegistrationForm/RegistrationForm.jsx index ecde2a7..5bb535b 100644 --- a/vault/src/Components/RegistrationForm/RegistrationForm.jsx +++ b/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 (
- +

Create an Account

{ onChange={(e) => setLastName(e.target.value)}/>
+
+ setEmail(e.target.value)}/> + +
setUsername(e.target.value)}/> diff --git a/vault/src/backend/app.py b/vault/src/backend/app.py index 68940e6..46c3fcb 100644 --- a/vault/src/backend/app.py +++ b/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/', methods=['GET']) def get_user(user_id): diff --git a/vault/src/backend/vault_database.db b/vault/src/backend/vault_database.db index b64ec474fe04d26d37f4e1375c57e24bcdc96df0..7eeac5c236820eaed6cf0bf1f917b17288fa71c7 100644 GIT binary patch delta 618 zcmZp8z|`=7X@az%AOiyfHxx4iY0il{#)^UrdS%_byk8jDIW95qF5=_7N@+o2adCNmQ3_Pp$PmR~0}Cr7G=srHTwrIvVc`GD z|7NqG!vlU54rWnCkmH!Rn58+PhCx)_XW)O!e;=d)=)q(BN}|mAjL8{AnZ>-!@?b4s u&oK!xYs2(y{$bB9z{s>HAYhUKH!H{#PM{@^`1x3v85o&C1QRne11A7sx1A;c delta 536 zcmZp8z|`=7X@ayM4+8@OHxRP`F*6XeP1G?~rog z+QG>`cvaXy7AR;;F5r=!9LA$P*@#nm@-7~p$-bO2TnbR2$pzG@#BBt&jJrvegMIQ7 zzKIFzR4=%uEV z798zhLf3unRPi~HgEo6 n&o02oyeJ@m4`SMP2L3-l^F9I1d&1Ah!py+P3?i7AnHe|%RBwrf