diff options
Diffstat (limited to 'driver')
| -rw-r--r-- | driver/package.json | 1 | ||||
| -rw-r--r-- | driver/pnpm-lock.yaml | 27 | ||||
| -rw-r--r-- | driver/src/App.tsx | 173 | ||||
| -rw-r--r-- | driver/src/components/RideDialog.tsx | 110 | ||||
| -rw-r--r-- | driver/src/components/ui/avatar.tsx | 48 | ||||
| -rw-r--r-- | driver/src/components/ui/badge.tsx | 36 | ||||
| -rw-r--r-- | driver/src/components/ui/card.tsx | 79 | ||||
| -rw-r--r-- | driver/src/main.tsx | 5 | ||||
| -rw-r--r-- | driver/src/pages/Home.tsx | 150 | ||||
| -rw-r--r-- | driver/src/pages/LandingPage.tsx | 45 | ||||
| -rw-r--r-- | driver/src/pages/Login.tsx | 92 | ||||
| -rw-r--r-- | driver/src/pages/SignUp.tsx | 184 | ||||
| -rw-r--r-- | driver/src/utils/fetchUserDetails.ts | 27 |
13 files changed, 722 insertions, 255 deletions
diff --git a/driver/package.json b/driver/package.json index fd6315d..9853e7c 100644 --- a/driver/package.json +++ b/driver/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", diff --git a/driver/pnpm-lock.yaml b/driver/pnpm-lock.yaml index 64c74ff..21624a2 100644 --- a/driver/pnpm-lock.yaml +++ b/driver/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-avatar': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) @@ -1154,6 +1157,30 @@ packages: '@babel/runtime': 7.23.6 dev: false + /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.6 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@types/react': 18.2.45 + '@types/react-dom': 18.2.18 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.45)(react@18.2.0): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: diff --git a/driver/src/App.tsx b/driver/src/App.tsx index 233b96d..9b3bb03 100644 --- a/driver/src/App.tsx +++ b/driver/src/App.tsx @@ -1,176 +1,15 @@ -import { addDoc, collection } from "firebase/firestore" -import { db } from "./firebase/firebase_config" -import { Button } from "@/components/ui/button" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { useState } from "react" - -interface RideOrder { - driverName: string - carModel: string - carColor: string - plateNumber: string - status: string - orderTime: Date - fromLocation: string - toLocation: string -} +import RideDialog from "./components/RideDialog" +import Home from "./pages/Home" +import LandingPage from "./pages/LandingPage" function App() { - - const [driverName, setDriverName] = useState<string>() - const [carModel, setCarModel] = useState<string>() - const [carColor, setCarColor] = useState<string>() - const [plateNumber, setPlateNumber] = useState<string>() - const [status, _setStatus] = useState<string>('Pending') - const [orderTime, _setOrderTime] = useState<Date>(new Date()) - const [fromLocation, setFromLocation] = useState<string>() - const [toLocation, setToLocation] = useState<string>() - - const [_rideOrder, _setRideOrder] = useState<RideOrder>({ - driverName: "Mahmoud", - carModel: "Toyota Corolla", - carColor: "Red", - plateNumber: "ABC-123", - status: "Pending", - orderTime: new Date("2023-12-20"), - fromLocation: "Abdu-Basha", - toLocation: "5th Settlement", - }) - - const addRideOrderToFirestore = async () => { - try { - // Get a reference to the 'rideOrders' collection - const rideOrdersCollection = collection(db, 'Rides'); - - // Add a new document to the 'rideOrders' collection with the data from the RideOrder object - const newRideOrderRef = await addDoc(rideOrdersCollection, { - driverName: driverName, - carModel: carModel, - carColor: carColor, - plateNumber: plateNumber, - status: status, - orderTime: orderTime, - fromLocation: fromLocation, - toLocation: toLocation, - }); - - console.log('Ride order added with ID:', newRideOrderRef.id); - // 'newRideOrderRef.id' will give you the document ID of the added ride order - } catch (error) { - console.error('Error adding ride order:', error); - } - }; - return ( - <div className="bg-white h-screen w-screen flex items-center justify-center"> - <Dialog> - <DialogTrigger asChild> - <Button className="rounded-xl" variant="outline">Add Ride</Button> - </DialogTrigger> - <DialogContent className="sm:max-w-[425px]"> - <DialogHeader> - <DialogTitle>Ride details</DialogTitle> - <DialogDescription> - Please enter details about your ride and click submit for the ride to appear to other students! - </DialogDescription> - </DialogHeader> - <div className="grid gap-4 py-4"> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="name" className="text-right"> - Name - </Label> - <Input - id="Name" - defaultValue="" - className="col-span-3" - onChange={(e) => setDriverName(e.target.value)} - /> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="Car Model" className="text-right"> - Car Model - </Label> - <Input - id="Car Model" - defaultValue="" - className="col-span-3" - onChange={(e) => setCarModel(e.target.value)} - /> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="To Location" className="text-right"> - To Location - </Label> - <Input - id="To Location" - defaultValue="" - className="col-span-3" - onChange={(e) => setToLocation(e.target.value)} - /> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="From location" className="text-right"> - From location - </Label> - <Input - id="From location" - defaultValue="" - className="col-span-3" - onChange={(e) => setFromLocation(e.target.value)} - /> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="Car color" className="text-right"> - Car color - </Label> - <Input - id="Car color" - defaultValue="" - className="col-span-3" - onChange={(e) => setCarColor(e.target.value)} - /> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="Plate Number" className="text-right"> - Plate Number - </Label> - <Input - id="Plate Number" - defaultValue="" - className="col-span-3" - onChange={(e) => setPlateNumber(e.target.value)} - /> - </div> - </div> - <DialogFooter> - <Button type="submit" onClick={addRideOrderToFirestore}>Add Ride</Button> - </DialogFooter> - </DialogContent> - </Dialog> - </div> + <LandingPage /> + // <Home /> + // <RideDialog /> ) } -// interface RideOrder { -// driverName: string -// carModel: string -// carColor: string -// plateNumber: string -// status: string -// orderTime: Date -// fromLocation: string -// toLocation: string -// } export default App diff --git a/driver/src/components/RideDialog.tsx b/driver/src/components/RideDialog.tsx new file mode 100644 index 0000000..da7767b --- /dev/null +++ b/driver/src/components/RideDialog.tsx @@ -0,0 +1,110 @@ +import { addDoc, collection, doc, getDoc } from "firebase/firestore" +import { db } from "../firebase/firebase_config" +import { auth } from "../firebase/firebase_config" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { useState } from "react" + +interface RideOrder { + driverName: string + carBrand: string + carModel: string + carColor: string + plateNumber: string + status: string + orderTime: Date + pickUpLocation: string + dropOffLocation: string +} + + +function RideDialog({ name, brand, model, color, plateNumber }: any) { + + const [status, _setStatus] = useState<string>('Pending') + const [orderTime, _setOrderTime] = useState<Date>(new Date()) + const [pickUpLocation, setPickUpLocation] = useState<string>() + const [dropOffLocation, setDropOffLocation] = useState<string>() + + + const addRideOrderToFirestore = async () => { + try { + // Get a reference to the 'rideOrders' collection + const rideOrdersCollection = collection(db, 'Rides'); + + // Add a new document to the 'rideOrders' collection with the data from the RideOrder object + const newRideOrderRef = await addDoc(rideOrdersCollection, { + driverName: name, + carModel: model, + carBrand: brand, + carColor: color, + plateNumber: plateNumber, + status: status, + orderTime: orderTime, + fromLocation: pickUpLocation, + toLocation: dropOffLocation, + }); + + console.log('Ride order added with ID:', newRideOrderRef.id); + // 'newRideOrderRef.id' will give you the document ID of the added ride order + } catch (error) { + console.error('Error adding ride order:', error); + } + }; + + return ( + <div> + <Dialog> + <DialogTrigger asChild> + <Button className="bg-green-600 text-black text-xl">Add Ride</Button> + </DialogTrigger> + <DialogContent className="sm:max-w-[425px]"> + <DialogHeader> + <DialogTitle>Ride details</DialogTitle> + <DialogDescription> + Please enter details about your ride and click submit for the ride to appear to other students! + </DialogDescription> + </DialogHeader> + <div className="grid gap-4 py-4"> + <div className="grid grid-cols-4 items-center gap-4"> + <Label htmlFor="To Location" className="text-right"> + Pickup + </Label> + <Input + id="To Location" + defaultValue="" + className="col-span-3" + onChange={(e) => setDropOffLocation(e.target.value)} + /> + </div> + <div className="grid grid-cols-4 items-center gap-4"> + <Label htmlFor="From location" className="text-right"> + Drop off + </Label> + <Input + id="From location" + defaultValue="" + className="col-span-3" + onChange={(e) => setPickUpLocation(e.target.value)} + /> + </div> + </div> + <DialogFooter> + <Button className="bg-green-500 text-black" type="submit" onClick={addRideOrderToFirestore}>Submit</Button> + </DialogFooter> + </DialogContent> + </Dialog> + </div> + ) +} + +export default RideDialog; diff --git a/driver/src/components/ui/avatar.tsx b/driver/src/components/ui/avatar.tsx new file mode 100644 index 0000000..991f56e --- /dev/null +++ b/driver/src/components/ui/avatar.tsx @@ -0,0 +1,48 @@ +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef<typeof AvatarPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> +>(({ className, ...props }, ref) => ( + <AvatarPrimitive.Root + ref={ref} + className={cn( + "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", + className + )} + {...props} + /> +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef<typeof AvatarPrimitive.Image>, + React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> +>(({ className, ...props }, ref) => ( + <AvatarPrimitive.Image + ref={ref} + className={cn("aspect-square h-full w-full", className)} + {...props} + /> +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef<typeof AvatarPrimitive.Fallback>, + React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> +>(({ className, ...props }, ref) => ( + <AvatarPrimitive.Fallback + ref={ref} + className={cn( + "flex h-full w-full items-center justify-center rounded-full bg-muted", + className + )} + {...props} + /> +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/driver/src/components/ui/badge.tsx b/driver/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/driver/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes<HTMLDivElement>, + VariantProps<typeof badgeVariants> {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( + <div className={cn(badgeVariants({ variant }), className)} {...props} /> + ) +} + +export { Badge, badgeVariants } diff --git a/driver/src/components/ui/card.tsx b/driver/src/components/ui/card.tsx new file mode 100644 index 0000000..afa13ec --- /dev/null +++ b/driver/src/components/ui/card.tsx @@ -0,0 +1,79 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> +>(({ className, ...props }, ref) => ( + <div + ref={ref} + className={cn( + "rounded-lg border bg-card text-card-foreground shadow-sm", + className + )} + {...props} + /> +)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> +>(({ className, ...props }, ref) => ( + <div + ref={ref} + className={cn("flex flex-col space-y-1.5 p-6", className)} + {...props} + /> +)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes<HTMLHeadingElement> +>(({ className, ...props }, ref) => ( + <h3 + ref={ref} + className={cn( + "text-2xl font-semibold leading-none tracking-tight", + className + )} + {...props} + /> +)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes<HTMLParagraphElement> +>(({ className, ...props }, ref) => ( + <p + ref={ref} + className={cn("text-sm text-muted-foreground", className)} + {...props} + /> +)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> +>(({ className, ...props }, ref) => ( + <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> +)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> +>(({ className, ...props }, ref) => ( + <div + ref={ref} + className={cn("flex items-center p-6 pt-0", className)} + {...props} + /> +)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/driver/src/main.tsx b/driver/src/main.tsx index 300ddc1..ab11de5 100644 --- a/driver/src/main.tsx +++ b/driver/src/main.tsx @@ -5,6 +5,7 @@ import App from './App.tsx' import './index.css' import Login from './pages/Login.tsx' import SignUp from './pages/SignUp.tsx' +import Home from './pages/Home.tsx' @@ -14,6 +15,10 @@ const router = createBrowserRouter([ element: <App /> }, { + path: "/home", + element: <Home /> + }, + { path: "/signup", element: <SignUp /> }, diff --git a/driver/src/pages/Home.tsx b/driver/src/pages/Home.tsx new file mode 100644 index 0000000..81f1fb9 --- /dev/null +++ b/driver/src/pages/Home.tsx @@ -0,0 +1,150 @@ +import RideDialog from "@/components/RideDialog" +import { Avatar } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card" +import { auth, db } from "@/firebase/firebase_config" +import { fetchUserDetails } from "@/utils/fetchUserDetails" +import { DocumentData, collection, doc, getDoc, getDocs, query, where } from "firebase/firestore" +import { useEffect, useState } from "react" +import { Navigate } from "react-router-dom" + +interface IDriver { + uid: string, + name: string, + phoneNumber: string, + plateNumber: string, + carBrand: string, + carModel: string, + carColor: string, +} + +interface IPassengerRequest { + passengerName: string, + pickUp: string, + dropOff: string, +} + +interface ITrip { + pickUp: string, + dropOff: string, +} + +function PassengerRequestCard({ passengerName, pickUp, dropOff }: IPassengerRequest) { + return ( + <li className="py-2"> + <p> + <strong>Passenger:</strong> {passengerName} + </p> + <p> + <strong>Pickup:</strong> {pickUp} + </p> + <p> + <strong>Dropoff:</strong> {dropOff} + </p> + <div className="flex justify-between mt-2"> + <Button className="text-green-500 border-green-500" variant="outline"> + Accept + </Button> + <Button className="border-red-500 text-red-500" variant="outline"> + Reject + </Button> + </div> + </li> + ) + +} + +export default function Home() { + const [driverData, setDriverData] = useState<IDriver | null | undefined>() + const [currentTrip, setCurrentTrip] = useState<ITrip>() + + + useEffect(() => { + async function fetchData() { + const data: IDriver | null | undefined = await fetchUserDetails(); + setDriverData(data) + } + fetchData() + }, [auth.currentUser, db]); + + return ( + !auth.currentUser ? <Navigate to="/login" /> : + ( + <main className="flex flex-col gap-6 p-6 bg-gray-900 text-white min-h-screen"> + <header className="flex justify-between items-center"> + <div className="flex items-center gap-4"> + <h1 className="text-3xl font-bold">Driver Dashboard</h1> + <Avatar alt="Driver Avatar" className="w-10 h-10" src="/placeholder.svg?height=40&width=40" /> + <h2 className="text-xl font-bold">{driverData?.name}</h2> + <Badge className="bg-white text-black" variant="secondary"> + Active Driver + </Badge> + </div> + <div className="flex gap-4 items-center"> + <Button className="text-black bg-white" variant="outline"> + Log Out + </Button> + </div> + </header> + <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> + <Card className="bg-slate-950 text-white"> + <CardHeader className="bg-slate-800"> + <CardTitle className="text-lg font-semibold">Vehicle Details</CardTitle> + </CardHeader> + <CardContent className="mt-5"> + <ul className="space-y-2"> + <li> + <strong>Brand:</strong> {driverData?.carBrand} + </li> + <li> + <strong>Model:</strong> {driverData?.carModel} + </li> + <li> + <strong>License Plate:</strong> {driverData?.plateNumber} + </li> + </ul> + </CardContent> + </Card> + <Card className="bg-slate-950 text-white"> + <CardHeader className="bg-slate-800"> + <CardTitle className="text-lg font-semibold">Current Trip</CardTitle> + </CardHeader> + <CardContent className="mt-5"> + <p> + <strong>Pickup:</strong> {currentTrip?.pickUp} + </p> + <p> + <strong>Dropoff:</strong> {currentTrip?.dropOff} + </p> + <Button className="w-full mt-4 border-blue-500 text-white" variant="outline"> + Start Trip + </Button> + <Button className="w-full mt-4 border-green-500 text-white" variant="outline"> + Finish Trip + </Button> + <Button className="w-full mt-4 border-red-500 text-white" variant="outline"> + Cancel Trip + </Button> + </CardContent> + </Card> + <Card className="bg-slate-950 text-white shadow-2xl transform transition hover:scale-105"> + <CardHeader className="bg-slate-800"> + <CardTitle className="text-lg font-semibold">Passenger Requests</CardTitle> + </CardHeader> + <CardContent className="mt-3"> + <ul className="divide-y divide-gray-600"> + <PassengerRequestCard passengerName="Jane doe" pickUp="Gate 3/4" dropOff="5th Settelment" /> + </ul> + </CardContent> + </Card> + </section> + <div className="flex justify-end items-center mt-6"> + <RideDialog /> + </div> + <footer className="mt-auto"> + </footer> + </main> + ) + ) +} diff --git a/driver/src/pages/LandingPage.tsx b/driver/src/pages/LandingPage.tsx new file mode 100644 index 0000000..ec8b364 --- /dev/null +++ b/driver/src/pages/LandingPage.tsx @@ -0,0 +1,45 @@ +import { Button } from "@/components/ui/button" +import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "@/components/ui/card" +import { Navigate, redirect } from "react-router-dom"; +import { Badge } from "@/components/ui/badge" + +export default function LandingPage() { + if (true) { + return <Navigate to="/signup" /> + } + return ( + <main key="1" className="bg-black min-h-screen px-4 py-8 md:px-16 lg:px-24"> + <header className="flex justify-between items-center mb-8"> + <h1 className="text-4xl font-bold text-white">Carpool</h1> + <div className="space-x-4"> + <Button className="text-white bg-gray-700" variant="outline"> + <a href="/login">Login</a> + </Button> + <Button className="bg-blue-500 text-white"> + <a href="/signup">Sign Up</a> + </Button> + </div> + </header> + <section className="max-w-2xl mx-auto space-y-8"> + <Card className="bg-gray-950 text-white border-2 border-amber-400"> + <CardHeader> + <CardTitle>Welcome to Carpool</CardTitle> + <CardDescription>Join our community and share your journey.</CardDescription> + </CardHeader> + <CardContent> + <p className="text-gray-300"> + Find or offer rides, Made by students for students ❤️ ❤️ + </p> + </CardContent> + </Card> + <div className="flex justify-center"> + <Badge className="text-lg font-bold text-black bg-yellow-500" /> + </div> + </section> + <footer className="mt-16 text-center text-gray-500"> + <p>© 2023 Carpool. All rights reserved.</p> + </footer> + </main> + ) +} + diff --git a/driver/src/pages/Login.tsx b/driver/src/pages/Login.tsx index 0605dc8..1841d03 100644 --- a/driver/src/pages/Login.tsx +++ b/driver/src/pages/Login.tsx @@ -1,8 +1,10 @@ import { useState } from 'react'; import { auth } from '../firebase/firebase_config'; import { signInWithEmailAndPassword } from 'firebase/auth'; +import { Navigate, redirect } from "react-router-dom"; const Login = () => { + const [isLoggedIn, setIsLoggedIn] = useState(false) const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -10,7 +12,8 @@ const Login = () => { try { const userCredential = await signInWithEmailAndPassword(auth, email, password); console.log('User logged in:', userCredential.user); - // TODO: redirect the user to another page or perform some other action + setIsLoggedIn(true) + } catch (error) { console.error('Error logging in:', error); // TODO: Handle error messages or display them to the user. @@ -18,48 +21,53 @@ const Login = () => { }; 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">Login</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={handleLogin} - > - Login - </button> + isLoggedIn ? ( + <Navigate to="/home" /> + ) : + ( + <div className="flex justify-center items-center h-screen bg-black"> + <div className="bg-slate-900 shadow-md rounded px-8 pt-6 w-1/3 pb-8 mb-4"> + <h2 className="text-2xl font-bold mb-4">Login</h2> + <form> + <div className="mb-4"> + <label className="block text-white 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 placeholder-gray-800" + id="email" + type="email" + placeholder="Email" + value={email} + onChange={(e) => setEmail(e.target.value)} + /> + </div> + <div className="mb-6"> + <label className="block text-white 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 placeholder-gray-800" + 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={handleLogin} + > + Login + </button> + </div> + </form> </div> - </form> - </div> - </div> + </div> + ) ); }; 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, setPhoneNum |