Mp create snap shop account

package.json

@@ -12,7 +12,8 @@
 		"@mui/icons-material": "^6.1.2",
 		"@mui/material": "^6.1.2",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
-		"firebase": "^10.12.5",
+		"firebase": "^10.14.1",
+		"firebase-auth": "^0.1.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^6.26.0"
@@ -35,7 +36,7 @@
 		"lint-staged": "^15.2.8",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
-		"tailwindcss": "^3.4.13",
+		"tailwindcss": "^3.4.14",
 		"vite": "^5.3.5",
 		"vite-plugin-pwa": "^0.20.1",
 		"vite-plugin-svgr": "^4.2.0",

src/App.jsx

@@ -7,6 +7,8 @@ import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
 
 import { useState, useEffect } from 'react';
+import CreateAccount from './components/CreateAccount';
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -75,6 +77,7 @@ export function App() {
 						path="/share-list"
 						element={<ShareList userId={userId} list={data} />}
 					/>
+					<Route path="/create-account" element={<CreateAccount />} />
 				</Route>
 			</Routes>
 		</Router>

src/api/firebase.js

@@ -107,7 +107,7 @@ export async function addUserToDatabase(user) {
 		// than their uid.
 		await setDoc(doc(db, 'users', user.email), {
 			email: user.email,
-			name: user.displayName,
+			name: user.displayName || 'New User', //default name if displayName is not set
 			uid: user.uid,
 		});
 	}

src/components/CreateAccount.jsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { auth } from '../api/config';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { addUserToDatabase } from '../api';
+import { useNavigate } from 'react-router-dom';
+
+export function CreateAccount() {
+	const [email, setEmail] = useState('');
+	const [password, setPassword] = useState('');
+	const [name, setName] = useState('');
+	const [error, setError] = useState('');
+	const navigate = useNavigate();
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+
+		try {
+			//create user with email and password
+			const userCredential = await createUserWithEmailAndPassword(
+				auth,
+				email,
+				password,
+			);
+			const user = userCredential.user;
+
+			//Add the user to firestore
+			await addUserToDatabase({ ...user, displayName: name });
+
+			//show success message
+			window.alert('Account created successfully!');
+
+			//Reset input fields or redirect as needed
+			setEmail('');
+			setPassword('');
+			setName('');
+
+			//redirect to the home page
+			navigate('/');
+		} catch (error) {
+			//Handle errors
+			console.error('Error signing up', error);
+			setError(error.message);
+		}
+	};
+
+	return (
+		<div className="flex items-center justify-center min-h-screen bg-gray-100">
+			<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
+				<h2 className="text-2xl font-bold mb-6 text-center">Create Account</h2>
+				<form onSubmit={handleSubmit}>
+					<div className="mb-4">
+						<label
+							htmlFor="name"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Name:
+						</label>
+						<input
+							type="text"
+							id="name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<div className="mb-4">
+						<label
+							htmlFor="email"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Email:
+						</label>
+						<input
+							type="email"
+							id="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<div className="mb-4">
+						<label
+							htmlFor="password"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Password:
+						</label>
+						<input
+							type="password"
+							id="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<button
+						type="submit"
+						className="w-full bg-accent text-white py-2 rounded-md hover:bg-accent-dark transition"
+					>
+						Create Account
+					</button>
+					{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
+				</form>
+			</div>
+		</div>
+	);
+}
+
+export default CreateAccount;

src/components/index.js

@@ -1,3 +1,4 @@
 export * from './ListItem';
 export * from './SingleList';
 export * from './ShareListComponent';
+export * from './CreateAccount';

src/views/Layout.jsx

@@ -26,21 +26,30 @@ export function Layout() {
 						</div>
 
 						{/* Navbar on Desktop */}
-						<div className="space-x-8 navbar-end hidden sm:block">
+						<div className="space-x-8 navbar-end hidden sm:flex items-center">
 							<NavLink to="/" style={handleActive}>
 								Home
 							</NavLink>
 
 							<NavLink to="/list" style={handleActive}>
 								List
 							</NavLink>
+							{!user && (
+								<NavLink
+									to="/create-account"
+									style={handleActive}
+									className="whitespace-nowrap"
+								>
+									Create Account
+								</NavLink>
+							)}
 
 							{user ? <SignOutButton /> : <SignInButton />}
 						</div>
 
 						{/* Mobile Screen Icon Dropdown */}
 						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden  text-accent">
-							<button className="btn btn-square btn-ghost ">
+							<button className="btn btn-square btn-ghost">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
@@ -63,6 +72,15 @@ export function Layout() {
 								<NavLink to="/list" style={handleActive} className="text-3xl">
 									List
 								</NavLink>
+								{!user && (
+									<NavLink
+										to="/create-account"
+										style={handleActive}
+										className="text-3xl"
+									>
+										Create Account
+									</NavLink>
+								)}
 
 								{user ? <SignOutButton /> : <SignInButton />}
 							</div>