Hours Completed
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
index 10a3666..a630183 100644
--- a/src/components/SignUp.js
+++ b/src/components/SignUp.js
@@ -1,18 +1,82 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
+import { Button } from './ui/button.js';
function SignUp() {
const navigate = useNavigate();
+
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
+ const [firstname, setFirstname] = useState('');
+ const [lastname, setLastname] = useState('');
+ const [email, setEmail] = useState('');
+ const [zipcode, setZipcode] = useState('');
+ const [state, setState] = useState('');
+ const [area, setArea] = useState('');
+ const [areas, setAreas] = useState([]);
const [error, setError] = useState('');
- const [success, setSuccess] = useState(false);
- const handleSignUp = async (event) => {
- event.preventDefault();
+ const states = [
+ { name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' },
+ { name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'Colorado', code: 'CO' },
+ { name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DE' }, { name: 'District of Columbia', code: 'DC' },
+ { name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' },
+ { name: 'Idaho', code: 'ID' }, { name: 'Illinois', code: 'IL' }, { name: 'Indiana', code: 'IN' },
+ { name: 'Iowa', code: 'IA' }, { name: 'Kansas', code: 'KS' }, { name: 'Kentucky', code: 'KY' },
+ { name: 'Louisiana', code: 'LA' }, { name: 'Maine', code: 'ME' }, { name: 'Maryland', code: 'MD' },
+ { name: 'Massachusetts', code: 'MA' }, { name: 'Michigan', code: 'MI' }, { name: 'Minnesota', code: 'MN' },
+ { name: 'Mississippi', code: 'MS' }, { name: 'Missouri', code: 'MO' }, { name: 'Montana', code: 'MT' },
+ { name: 'Nebraska', code: 'NE' }, { name: 'Nevada', code: 'NV' }, { name: 'New Hampshire', code: 'NH' },
+ { name: 'New Jersey', code: 'NJ' }, { name: 'New Mexico', code: 'NM' }, { name: 'New York', code: 'NY' },
+ { name: 'North Carolina', code: 'NC' }, { name: 'North Dakota', code: 'ND' }, { name: 'Ohio', code: 'OH' },
+ { name: 'Oklahoma', code: 'OK' }, { name: 'Oregon', code: 'OR' }, { name: 'Pennsylvania', code: 'PA' },
+ { name: 'Rhode Island', code: 'RI' }, { name: 'South Carolina', code: 'SC' }, { name: 'South Dakota', code: 'SD' },
+ { name: 'Tennessee', code: 'TN' }, { name: 'Texas', code: 'TX' }, { name: 'Utah', code: 'UT' },
+ { name: 'Vermont', code: 'VT' }, { name: 'Virginia', code: 'VA' }, { name: 'Washington', code: 'WA' },
+ { name: 'West Virginia', code: 'WV' }, { name: 'Wisconsin', code: 'WI' }, { name: 'Wyoming', code: 'WY' },
+ ];
- if (!username || !password) {
- setError('Please enter a username and password');
+ useEffect(() => {
+ const fetchAreas = async () => {
+ if (!state) {
+ setAreas([]);
+ return;
+ }
+ try {
+ const res = await fetch(`/api/areas?state=${state}`);
+ const data = await res.json();
+ setAreas(data.areas || []);
+ } catch (err) {
+ console.error('Error fetching areas:', err);
+ setAreas([]);
+ }
+ };
+
+ fetchAreas();
+ }, [state]);
+
+ const handleSignUp = async (e) => {
+ e.preventDefault();
+ setError('');
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+ const zipRegex = /^\d{5}$/;
+ const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
+
+ if (!username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
+ setError('All fields are required.');
+ return;
+ }
+ if (!emailRegex.test(email)) {
+ setError('Enter a valid email address.');
+ return;
+ }
+ if (!zipRegex.test(zipcode)) {
+ setError('ZIP code must be exactly 5 digits.');
+ return;
+ }
+ if (!passwordRegex.test(password)) {
+ setError('Password must include at least 8 characters, one uppercase, one lowercase, one number, and one special character.');
return;
}
@@ -21,71 +85,57 @@ function SignUp() {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
- userId: Math.floor(Math.random() * 10000000), // Temporary ID logic
- username,
- password,
+ userId: Math.floor(Math.random() * 1000000000),
+ username, password, firstname, lastname, email, zipcode, state, area,
}),
});
- if (response.ok) {
- setSuccess(true);
- console.log('User registered successfully');
- // Redirect to GettingStarted after successful sign-up
- navigate('/getting-started');
- } else {
- const data = await response.json();
- setError(data.error || 'Failed to register user');
+ const data = await response.json();
+
+ if (!response.ok) {
+ setError(data.error || 'Registration failed. Please try again.');
+ return;
}
+
+ navigate('/getting-started');
} catch (err) {
- console.error('Error during registration:', err.message);
- setError('An error occurred while registering. Please try again.');
+ console.error(err);
+ setError('An unexpected error occurred. Please try again later.');
}
};
return (
-
-
-
Sign Up
+
+
+
Sign Up
{error && (
-
+
{error}
-
+
)}
- {/*
- Success is briefly shown, but you navigate away immediately
- after a successful response. You may keep or remove this.
- */}
- {success && (
-
- Registration successful!
-
- )}
+
diff --git a/user_profile.db b/user_profile.db
index a694451..093ed49 100644
Binary files a/user_profile.db and b/user_profile.db differ