TexteaInc · forrestbao · Nov 27, 2024 · Nov 2, 2024 · Nov 2, 2024 · Nov 2, 2024
diff --git a/.gitignore b/.gitignore
@@ -55,5 +55,6 @@ mercury_annotations.json
 .venv
 .idea
 mercury.sqlite
+users.sqlite
 
 test.jsonl
diff --git a/README.md b/README.md
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,7 @@ import { FluentProvider, webLightTheme } from "@fluentui/react-components"
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+      <html lang="en">
       <head>
         <title>Mercury</title>
         <style>
@@ -15,16 +15,16 @@ export default function RootLayout({ children }) {
         </style>
       </head>
       <body
-        style={{
-          margin: "0",
-          height: "100vh",
-        }}
+          style={{
+            margin: "0",
+            height: "100vh",
+          }}
       >
-        <FluentProvider theme={webLightTheme}>
-          <div style={{ width: "98%", padding: "1rem", margin: "0 auto" }}>{children}</div>
-        </FluentProvider>
+      <FluentProvider theme={webLightTheme}>
+        <div style={{ width: "98%", padding: "1rem", margin: "0 auto" }}>{children}</div>
+      </FluentProvider>
       </body>
-    </html>
+      </html>
   )
 }
 

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import {
+  Button,
+  Field,
+  Input,
+  makeResetStyles,
+  Title1, Toast, Toaster, ToastTitle,
+  tokens,
+  useId,
+  useToastController,
+} from "@fluentui/react-components"
+import { login } from "../../utils/request"
+import { useRouter } from "next/navigation"
+
+const useStackClassName = makeResetStyles({
+  display: "flex",
+  flexDirection: "column",
+  maxWidth: "350px",
+  rowGap: tokens.spacingVerticalL,
+})
+
+export default function Login() {
+  const router = useRouter()
+  const toasterId = useId("toaster")
+  const { dispatchToast } = useToastController(toasterId)
+
+  async function formAction(formData) {
+    if (formData.get("email") && formData.get("password")) {
+      const success = await login(formData.get("email"), formData.get("password"))
+      if (success) {
+        router.push("/")
+      } else {
+        dispatchToast(
+            <Toast>
+              <ToastTitle>User does not exist or mismatched email and password</ToastTitle>
+            </Toast>,
+            { position: "bottom-start", intent: "error" },
+        )
+      }
+    }
+  }
+
+  return (
+      <>
+        <Toaster toasterId={toasterId} />
+        <Title1>Login</Title1>
+        <form className={useStackClassName()} action={formAction}>
+          <Field label="Email" required>
+            <Input name="email" />
+          </Field>
+          <Field label="Password" required>
+            <Input name="password" />
+          </Field>
+          <Button appearance="primary" type="submit">
+            Login
+          </Button>
+        </form>
+      </>
+  )
+}
diff --git a/app/page.css b/app/page.css