Merge pull request #3 from ucmo-cs/frontend/init

(Frontend): init the front end + login page layout
ucmo-cs · Oct 18, 2024 · 5cacc9b · 5cacc9b
2 parents 4a5ecac + f7e4b00
commit 5cacc9b
Show file tree

Hide file tree

Showing 19 changed files with 436 additions and 37 deletions.
diff --git a/src/main/frontend/index.html b/src/main/frontend/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/main/frontend/package-lock.json b/src/main/frontend/package-lock.json
diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.453.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/src/main/frontend/public/commerce_globe_45x48.png b/src/main/frontend/public/commerce_globe_45x48.png
diff --git a/src/main/frontend/public/commerce_globe_green_45x48.png b/src/main/frontend/public/commerce_globe_green_45x48.png
diff --git a/src/main/frontend/public/favicon.ico b/src/main/frontend/public/favicon.ico
diff --git a/src/main/frontend/public/vite.svg b/src/main/frontend/public/vite.svg
diff --git a/src/main/frontend/src/App.tsx b/src/main/frontend/src/App.tsx
@@ -1,24 +1,87 @@
-import { useState } from 'react'
-import {Button} from "@/components/ui/button.tsx";
-import "@/index.css"
+import {useCallback, useEffect, useState} from 'react';
+import {Button} from "@/components/ui/button";
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import "@/index.css";
 
 function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className={"flex m-auto w-1/2 h-screen justify-center flex-col items-center"}>
-      <h1>Vite + React</h1>
-        <Button onClick={() => setCount((count) => count + 1)} variant={"destructive"}>
-          count is {count}
-        </Button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
+    const [accounts, setAccounts] = useState<Account[]>([]);
+
+    const getFakeAccounts = useCallback(() => {
+        fetch("http://localhost:8080/accounts")
+            .then(response => response.json())
+            .then(data => setAccounts(data))
+            .catch(error => console.error(error));
+    }, [accounts]);
+
+    const postFakeAccount = () => {
+        fetch("http://localhost:8080/account", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                "acctId": 12,
+                "userType": 0,
+                "username": "test",
+                "password": "password",
+                "email": "[email protected]",
+                "phoneNumber": "123-456-7890",
+            })
+        }).then(response => response.json())
+            .then(data => console.log(data))
+            .then(() => getFakeAccounts())
+            .catch(error => console.error(error));
+    };
+
+    useEffect(() => {
+        console.log("mounted"); // TODO remove
+
+        getFakeAccounts();
+
+        return () => {
+          console.log("unmounted"); // TODO remove
+        }
+    }, []);
+
+    return (
+        <div className={"flex flex-col items-center"}>
+            <h1>Commerce Bank Frontend</h1>
+            <Button className="my-6" onClick={postFakeAccount}>This creates a fake class</Button>
+            <Table>
+                <TableCaption>list of Accounts in DB</TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Id</TableHead>
+                        <TableHead>Type</TableHead>
+                        <TableHead>username</TableHead>
+                        <TableHead>Password</TableHead>
+                        <TableHead>email</TableHead>
+                        <TableHead>phoneNumber</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {accounts.map((account) => (
+                        <TableRow key={account.acctId}>
+                            <TableCell>{account.acctId}</TableCell>
+                            <TableCell>{account.userType}</TableCell>
+                            <TableCell>{account.username}</TableCell>
+                            <TableCell>{account.password}</TableCell>
+                            <TableCell>{account.email}</TableCell>
+                            <TableCell>{account.phoneNumber}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
 }
 
 export default App
diff --git a/src/main/frontend/src/components/Layout.tsx b/src/main/frontend/src/components/Layout.tsx
@@ -0,0 +1,18 @@
+import {Outlet} from "react-router-dom";
+
+function Layout() {
+  return (
+    <>
+        <nav className={"py-3 w-11/12 mx-auto"}>
+            <div className={"flex items-center bg-commerce-green rounded-full px-2 py-1 nav-shadow"}>
+                <img src={"/commerce_globe_45x48.png"} alt={"Logo"} />
+            </div>
+        </nav>
+        <div className={"grow flex justify-center items-center"}>
+            <Outlet />
+        </div>
+    </>
+  );
+}
+
+export default Layout;
diff --git a/src/main/frontend/src/components/ui/input.tsx b/src/main/frontend/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/main/frontend/src/components/ui/label.tsx b/src/main/frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }