+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/main/frontend/src/index.css b/src/main/frontend/src/index.css
new file mode 100644
index 0000000..89b96fd
--- /dev/null
+++ b/src/main/frontend/src/index.css
@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+@layer components {
+ .floating-shadow {
+ box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.25);
+ }
+
+ .nav-shadow {
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ }
+}
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem;
+ }
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ h1 {
+ @apply text-4xl font-bold;
+ }
+ #root {
+ @apply h-screen flex flex-col;
+ }
+}
diff --git a/src/main/frontend/src/lib/utils.ts b/src/main/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/main/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main/frontend/src/main.tsx b/src/main/frontend/src/main.tsx
new file mode 100644
index 0000000..7616a0f
--- /dev/null
+++ b/src/main/frontend/src/main.tsx
@@ -0,0 +1,30 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+import {createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider} from "react-router-dom";
+import Layout from "@/components/Layout.tsx";
+import Login from "@/routes/Login.tsx";
+import { AuthProvider } from "@/components/Auth.tsx";
+import ProtectedRoute from "@/components/ProtectedRoute.tsx";
+
+const router = createBrowserRouter(
+ createRoutesFromElements(
+ }>
+ } />
+ } />
+ HELLO OTHER ROUTE} />
+ }>
+ } />
+
+
+ )
+)
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+)
diff --git a/src/main/frontend/src/routes/Login.tsx b/src/main/frontend/src/routes/Login.tsx
new file mode 100644
index 0000000..5e4f72f
--- /dev/null
+++ b/src/main/frontend/src/routes/Login.tsx
@@ -0,0 +1,110 @@
+import {Input} from "@/components/ui/input.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import {zodResolver} from "@hookform/resolvers/zod";
+import {useForm} from "react-hook-form";
+import {z} from "zod"
+import {useAuth} from "@/components/Auth.tsx";
+import {useNavigate} from "react-router-dom";
+
+const formSchema = z.object({
+ email: z.string().email({
+ message: "Invalid email address",
+ }),
+ password: z.string({
+ message: "Invalid password",
+ }),
+})
+
+function Login() {
+ const { signIn } = useAuth();
+ const navigate = useNavigate();
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ email: "",
+ password: "",
+ },
+ })
+
+ const onSubmit = (data: z.infer) => {
+ fetch("http://localhost:8080/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ }).then((response) => {
+ if (!response.ok) {
+ throw new Error("Password is incorrect")
+ }
+ }).then(() => {
+ console.log(data);
+ signIn(data);
+ navigate("/app-demo");
+ }).catch((error) => {
+ form.setError(
+ "password",
+ {
+ type: "value",
+ message: error.message,
+ }
+ )
+ })
+ }
+
+ return (
+
+
+ Welcome Back!
+ Login to access loans and more.
+
+
+
+
+ ![{"Logo"}/]({"/commerce_globe_45x48.png"})
+ Commerce
+
+ |