+ {user ? `Logged in as: ${user.user_metadata.first_name}` : 'Not logged in'}
+
+ );
+};
+
+export default LoginStatus;
diff --git a/Client/Auth/Signup.jsx b/Client/Auth/Signup.jsx
new file mode 100644
index 0000000..0a8db8a
--- /dev/null
+++ b/Client/Auth/Signup.jsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useHistory } from 'react-router-dom';
+import { Typography, CircularProgress, Snackbar, Alert } from '@mui/material';
+import { useAuth } from './AuthContext';
+import AuthNavigationButton from '../components/AuthNavigationButton';
+import '../styles/AuthForm.css';
+
+const Signup = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [firstName, setFirstName] = useState('');
+ const [lastName, setLastName] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: '' });
+ const history = useHistory();
+ const { login } = useAuth();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ try {
+ const response = await axios.post('/api/signup', { email, password, firstName, lastName });
+ const { user, session } = response.data;
+ login(user, session);
+ setTimeout(() => {
+ setSnackbar({ open: true, message: 'Signup successful', severity: 'success' });
+ setTimeout(() => {
+ history.push('/search');
+ }, 2000); // Redirect after 2 seconds to ensure the user sees the Snackbar
+ }, 1000); // Ensure spinner shows for at least 1 second
+ } catch (error) {
+ setTimeout(() => {
+ setSnackbar({ open: true, message: 'Signup failed', severity: 'error' });
+ }, 1000); // Ensure spinner shows for at least 1 second
+ console.error('AxiosError:', error);
+ } finally {
+ setTimeout(() => {
+ setLoading(false);
+ }, 1000); // Ensure spinner shows for at least 1 second
+ }
+ };
+
+ const handleCloseSnackbar = () => {
+ setSnackbar({ ...snackbar, open: false });
+ };
+
+ return (
+
+
My Account
+
+
+ First Name: {first_name}
+
+
+ {editField === 'first_name' && (
+
handleFieldUpdate('first_name', first_name)}
+ />
+ )}
+
+
+
+ Last Name: {last_name}
+
+
+ {editField === 'last_name' && (
+
handleFieldUpdate('last_name', last_name)}
+ />
+ )}
+
+
+
+ Email: {email}
+
+
+ {editField === 'email' && (
+
handleFieldUpdate('email', email)}
+ />
+ )}
+
+
+
+ Password: ******
+
+
+ {editField === 'password' && (
+
handleFieldUpdate('password', password)}
+ />
+ )}
+
+
+
+ Avatar:
+
+
+
+
+