Add login page

Mantine theme is used to style the inputs and buttons. This allows
global color changes to be changed easily and accurately.

Author: NorbertLoh

frontend/peerprep/app/app.css

@@ -7,7 +7,7 @@
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
+  background-color: var(--mantine-color-custom-grey-9);
 
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;

frontend/peerprep/app/assets/images/logo.svg

@@ -0,0 +1,70 @@
+import { Grid, TextInput, Button, PasswordInput, Divider, Text, Image } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { Link } from "react-router";
+import logo from "../assets/images/logo.svg";
+
+export function meta() {
+  return [
+    { title: "PeerPrep - Login" },
+    { name: "description", content: "Welcome to PeerPrep!" },
+  ];
+}
+
+export default function Login() {
+  const form = useForm({
+    initialValues: {
+      email: "",
+      password: "",
+    },
+
+    validate: {
+      email: (value) => (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
+      password: (value) =>
+        value.length < 6 ? "Password must be at least 6 characters" : null,
+    },
+  });
+
+  return (
+    <Grid>
+      <Grid.Col span={12}>
+        <Grid justify="center" gutter={"xs"} mt={{ base: 20, md: 200 }}>
+          <Grid.Col span={{ base: 12, md: 4 }}>
+            <Image src={logo} alt="PeerPrep Logo" />
+            <form onSubmit={form.onSubmit((values) => console.log(values))}>
+              <Grid.Col span={12}>
+                <TextInput
+                  label="Email"
+                  placeholder="Enter your email"
+                  type="email"
+                  key={form.key("email")}
+                  {...form.getInputProps('email')}
+                  error={undefined}
+                />
+              </Grid.Col>
+              <Grid.Col span={12}>
+                <PasswordInput
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  key={form.key("password")}
+                  {...form.getInputProps('password')}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} mt="md">
+                <Button type="submit" fullWidth autoContrast>
+                  Login
+                </Button>
+              </Grid.Col>
+            </form>
+            <Grid.Col span={12} mt="md">
+              <Divider my="xs" />
+            </Grid.Col>
+            <Grid.Col span={12} mt="md" className="text-center">
+              <Text span>Don't have an account? </Text><Link to="/signup"><Text span td="underline" c="blue" className="cursor-pointer">Sign up!</Text></Link>
+            </Grid.Col>
+          </Grid.Col>
+        </Grid>
+      </Grid.Col>
+    </Grid>
+  );
+}

frontend/peerprep/app/pages/login.tsx

@@ -7,8 +7,14 @@ import {
   ScrollRestoration,
 } from "react-router";
 
-import '@mantine/core/styles.css';
-import { createTheme, MantineProvider } from '@mantine/core';
+import "@mantine/core/styles.css";
+import {
+  createTheme,
+  MantineProvider,
+  Container,
+  Button,
+  Input,
+} from "@mantine/core";
 
 import type { Route } from "./+types/root";
 import "./app.css";
@@ -28,6 +34,55 @@ export const links: Route.LinksFunction = () => [
 
 const theme = createTheme({
   /** mantine theme overrides */
+  colors: {
+    "brand-yellow": [
+      "#fff9df",
+      "#fff2ca",
+      "#ffe399",
+      "#ffd463",
+      "#ffc736",
+      "#ffc01e",
+      "#ffba02",
+      "#e4a300",
+      "#cb9100",
+      "#af7c00",
+    ],
+    "custom-gray": [
+      "#f5f5f4",
+      "#e7e7e7",
+      "#cdcdcd",
+      "#b2b2b2",
+      "#9a9a9a",
+      "#8b8b8b",
+      "#848484",
+      "#717171",
+      "#646464",
+      "#343231",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        variant: "filled",
+        color: "brand-yellow",
+        c: "custom-gray.9",
+      },
+    }),
+
+    Input: Input.extend({
+    }),
+
+    InputWrapper: Input.Wrapper.extend({
+      classNames: {
+        label: "text-white",
+        error: "text-red-500",
+      },
+    }),
+  },
+
+  primaryColor: "brand-yellow",
+  primaryShade: { light: 6, dark: 6 },
 });
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -50,8 +105,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   return (
-    <MantineProvider theme={theme}>
-      {<Outlet />}
+    <MantineProvider theme={theme} defaultColorScheme="dark">
+      <Container fluid>{<Outlet />}</Container>
     </MantineProvider>
   );
 }

frontend/peerprep/app/root.tsx

@@ -1,3 +1,7 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+    index("routes/home.tsx"),
+    route("login", "pages/login.tsx"),
+    route("signup", "pages/signup.tsx"),
+] satisfies RouteConfig;