Update Login

src/app/(web)/login/page.jsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+import axios from "axios";
+import { useUser } from "@clerk/nextjs";
+
+import {
+	SignInButton,
+	SignedOut,
+} from '@clerk/nextjs';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+
+export default function LoginPage() {
+
+	const { user } = useUser();
+	const [userData, setUserData] = useState(null);
+
+	useEffect(() => {
+		if (user) {
+			axios.get(`/api/user?userId=${user.id}`).then(response => {
+				setUserData(response.data);
+			});
+		}
+	}, [user]);
+
+	if (userData) {
+		if (userData.role === "caregiver") {
+			window.location.href = "suite/doctor/dashboard";
+		}
+		if (userData.role === "patient") {
+			window.location.href = "suite/patient/dashboard";
+		}
+	}
+
+
+	return (
+		<div className="min-h-screen flex bg-gray-100">
+			<Card className="h-1/4 w-1/4 mx-auto my-20">
+				<CardHeader className="text-center">
+					<CardTitle>Welcome</CardTitle>
+					<CardDescription>Choose your login type</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<SignedOut>
+						<Button className="w-full">
+							<SignInButton>Patient Login</SignInButton>
+						</Button>
+						<Button asChild variant="outline" className="w-full">
+							<SignInButton>Doctor Login</SignInButton>
+						</Button>
+					</SignedOut>
+				</CardContent>
+			</Card>
+		</div>
+	)
+}
+

src/app/(web)/login/page.tsx

@@ -1,25 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-export default function LoginPage() {
-	return (
-		<div className="min-h-screen flex bg-gray-100">
-			<Card className="h-1/4 w-1/4 mx-auto my-20">
-				<CardHeader className="text-center">
-					<CardTitle>Welcome</CardTitle>
-					<CardDescription>Choose your login type</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-4">
-					<Button asChild className="w-full">
-						<Link href="/patient-login">Patient Login</Link>
-					</Button>
-					<Button asChild variant="outline" className="w-full">
-						<Link href="/doctor-login">Doctor Login</Link>
-					</Button>
-				</CardContent>
-			</Card>
-		</div>
-	)
-}
-

src/components/hero.tsx

@@ -16,7 +16,7 @@ export function Hero() {
 					</p>
 					<Button>
 						<Link
-							href="/get-started"
+							href="/login"
 							className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center rounded-lg bg-primary-700 hover:bg-primary-800 "
 						>
 							Get started

src/components/navbar.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import Link from "next/link"
 
 import {
-	SignInButton,
 	SignedIn,
 	SignedOut,
 	UserButton
@@ -35,14 +34,19 @@ export function Navbar() {
 				</div>
 				<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
 					<ModeToggle />
-					<div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md">
 					<SignedOut>
-							<SignInButton />
+						<Link
+							href="/login"
+							className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
+						>
+							Login
+						</Link>
 					</SignedOut>
 					<SignedIn>
+						<div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md">
 							<UserButton />
-						</SignedIn>
 						</div>
+					</SignedIn>
 				</div>
 			</div>
 		</header>

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx"],
   "exclude": ["node_modules"]
 }