Added most of the logic on the driver side

1 files changed, 138 insertions, 46 deletions

diff --git a/driver/src/pages/SignUp.tsx b/driver/src/pages/SignUp.tsx
index 3ee09dc..b73d810 100644
--- a/driver/src/pages/SignUp.tsx
+++ b/driver/src/pages/SignUp.tsx
@@ -1,11 +1,24 @@
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
 import { useState, useEffect } from 'react';
-import { auth } from '../firebase/firebase_config';
+import { auth, db } from '../firebase/firebase_config';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
-
+import { Navigate, redirect } from "react-router-dom";
+import { addDoc, collection } from "firebase/firestore";
 
 const SignUp = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+
+  const [isSignedUp, setIsSignedUp] = useState(false)
+
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [name, setName] = useState<string>('')
+  const [phoneNumber, setPhoneNumber] = useState<string>('')
+  const [carBrand, setCarBrand] = useState<string>('')
+  const [carModel, setCarModel] = useState<string>('')
+  const [carColor, setCarColor] = useState<string>('')
+  const [plateNumber, setPlateNumber] = useState<string>('')
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
@@ -28,7 +41,20 @@ const SignUp = () => {
     try {
       // The onAuthStateChanged listener will handle the signed-in user state.
       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+      const usersCollection = collection(db, 'users');
+      const userUid = userCredential.user.uid; // Get the user's UID
+      console.log(userUid, name, phoneNumber, carBrand, carModel, carColor, plateNumber)
+      addDoc(usersCollection, {
+        uid: userUid,
+        name: name,
+        phoneNumber: phoneNumber,
+        carBrand: carBrand,
+        carModel: carModel,
+        carColor: carColor,
+        plateNumber: plateNumber,
+      })
       console.log('User signed up:', userCredential.user);
+      setIsSignedUp(true)
     } catch (error) {
       // TODO: Handle error messages or display them to the user.
       console.error('Error signing up:', error);
@@ -36,48 +62,114 @@ const SignUp = () => {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-200">
-      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 className="text-2xl font-bold mb-4">Sign Up</h2>
-        <form>
-          <div className="mb-4">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
-              Email
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="email"
-              type="email"
-              placeholder="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-          <div className="mb-6">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
-              Password
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="password"
-              type="password"
-              placeholder="********"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-              type="button"
-              onClick={handleSignUp}
-            >
-              Sign Up
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+    isSignedUp ?
+      (<Navigate to="/login" />) :
+      (<div className="flex justify-center items-center h-screen bg-black">
+        <div className="bg-gray-900 shadow-md rounded px-8 pt-6 w-1/3 pb-8 mb-4">
+          <h2 className="text-2xl font-bold mb-4">Sign Up</h2>
+          <form>
+            <div className="mb-4">
+              <Label htmlFor="email">
+                Email
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="email@eng.asu.edu.eg"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="password">
+                Password
+              </Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="********"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="name">
+                Name
+              </Label>
+              <Input
+                id="name"
+                placeholder="Hamza Omar"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="Phone number">
+                Phone number
+              </Label>
+              <Input
+                id="Phone number"
+                placeholder="01086319130"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="brand">
+                Car Brand
+              </Label>
+              <Input
+                id="brand"
+                placeholder="Toyota"
+                value={carBrand}
+                onChange={(e) => setCarBrand(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="model">
+                Car Model
+              </Label>
+              <Input
+                id="Model"
+                placeholder="Corolla"
+                value={carModel}
+                onChange={(e) => setCarModel(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="color">
+                Car Color
+              </Label>
+              <Input
+                id="Color"
+                placeholder="Silver"
+                value={carColor}
+                onChange={(e) => setCarColor(e.target.value)}
+              />
+            </div>
+            <div className="mb-6">
+              <Label htmlFor="plate">
+                Licencse Plate
+              </Label>
+              <Input
+                id="plate"
+                placeholder="ABC-123"
+                value={plateNumber}
+                onChange={(e) => setPlateNumber(e.target.value)}
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <Button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                type="button"
+                onClick={handleSignUp}
+              >
+                Sign Up
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>)
   );
 };