add basic ui component for login and signup

src/App.tsx

@@ -1,5 +1,3 @@
-import logo from "./logo.svg";
-import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "pages/Login";
 import Signup from "pages/Signup";
@@ -17,3 +15,85 @@ function App() {
 }
 
 export default App;
+
+/*
+import logo from "./logo.svg";
+import "./App.css";
+import { useEffect, useState } from "react";
+import { db } from "./firebase/config";
+import { doc, getDoc } from "@firebase/firestore";
+import { login, signOut, signUp } from "api/auth";
+import { updateUserData } from "api/profile";
+
+function App() {
+  const [user, setUser] = useState<any>(null);
+  useEffect(() => {
+    (async () => {
+      console.log("test");
+      const docSnap = await getDoc(doc(db, "email", "jcsMut0LAVFz6yKcliHq"));
+      const user = await docSnap.data();
+      setUser(user);
+      console.log(user);
+    })();
+  }, []);
+
+  const buttonLogin = async () => {
+    console.log("logging in...");
+    const userCredential = await login({
+      email: "dummy@email.com",
+      password: "lala1234",
+    });
+    console.log("done");
+  };
+
+  const buttonSignup = async () => {
+    console.log("Signing up...");
+    const userCredential = await signUp({
+      name: "oh noo",
+      email: "dummy@email.com",
+      password: "lala1234",
+      subcomms: "Tech",
+      contactNum: "???",
+    });
+    console.log("Done");
+  };
+
+  const buttonSignout = async () => {
+    console.log("signing out...");
+    await signOut();
+    console.log("done");
+  };
+
+  const onUpdate = async () => {
+    console.log("updating...");
+    updateUserData({
+      profile: {
+        name: "ohlala",
+      },
+    });
+    console.log("done");
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <button onClick={buttonLogin}>Log me in</button>
+        <button onClick={buttonSignup}>Sign me up</button>
+        <button onClick={buttonSignout}>Log me out</button>
+        <button onClick={onUpdate}>Update</button>
+      </header>
+    </div>
+  );
+}
+
+export default App;
+*/

src/components/auth/Login.tsx

@@ -1,11 +1,57 @@
 import React from "react";
+import { useForm } from "@mantine/form";
+import {
+  Button,
+  Group,
+  PasswordInput,
+  Stack,
+  TextInput,
+  Title,
+} from "@mantine/core";
+
+export type LoginFields = {
+  email: string;
+  password: string;
+};
 
 type Props = {
-  onSubmit: () => void;
+  onSubmit: (f: LoginFields) => void;
 };
 
 const Login = (props: Props) => {
-  return <div>Login</div>;
+  const { onSubmit } = props;
+
+  const form = useForm<LoginFields>({
+    initialValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  return (
+    <Stack m="md" w="50%">
+      <Title order={1}>Welcome,</Title>
+      <form onSubmit={() => onSubmit(form.values)}>
+        <TextInput
+          withAsterisk
+          label="Email"
+          placeholder="your@email.com"
+          {...form.getInputProps("email")}
+        />
+        <PasswordInput
+          withAsterisk
+          label="Password"
+          placeholder="Password"
+          mt="md"
+          {...form.getInputProps("password")}
+        />
+
+        <Group mt="lg" position="right">
+          <Button type="submit">Login</Button>
+        </Group>
+      </form>
+    </Stack>
+  );
 };
 
 export default Login;

src/components/auth/Signup.tsx

@@ -1,11 +1,85 @@
 import React from "react";
+import {
+  Button,
+  Group,
+  PasswordInput,
+  Stack,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+
+export type SignupFields = {
+  name: string;
+  committee: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
 
 type Props = {
-  onSubmit: () => void;
+  onSubmit: (f: SignupFields) => void;
 };
 
 const Signup = (props: Props) => {
-  return <div>Signup</div>;
+  const { onSubmit } = props;
+
+  const form = useForm<SignupFields>({
+    initialValues: {
+      name: "",
+      committee: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  return (
+    <Stack m="md" w="50%">
+      <Title order={1}>Welcome,</Title>
+      <form onSubmit={() => onSubmit(form.values)}>
+        <TextInput
+          withAsterisk
+          label="Name"
+          placeholder="John Doe"
+          mt="md"
+          {...form.getInputProps("name")}
+        />
+        <TextInput
+          withAsterisk
+          label="Cell/Committee/Project"
+          placeholder="Committee Name"
+          mt="md"
+          {...form.getInputProps("committee")}
+        />
+        <TextInput
+          withAsterisk
+          label="Email"
+          placeholder="your@email.com"
+          mt="md"
+          {...form.getInputProps("email")}
+        />
+        <PasswordInput
+          withAsterisk
+          label="Password"
+          placeholder="Password"
+          mt="md"
+          {...form.getInputProps("password")}
+        />
+        <PasswordInput
+          withAsterisk
+          label="Confirm Password"
+          placeholder="Confirm Password"
+          mt="md"
+          {...form.getInputProps("confirmPassword")}
+        />
+
+        <Group mt="lg" position="right">
+          <Button type="submit">Sign Up</Button>
+        </Group>
+      </form>
+    </Stack>
+  );
 };
 
 export default Signup;

src/pages/Login.tsx

@@ -1,8 +1,15 @@
 import React from "react";
-import Login from "../components/auth/Login";
+import Login, { LoginFields } from "../components/auth/Login";
 
 const LoginPage = () => {
-  return <Login onSubmit={() => {}} />;
+  const onSubmit = async (values: LoginFields) => {
+    const { email, password } = values;
+
+    console.log(email);
+    console.log(password);
+  };
+
+  return <Login onSubmit={onSubmit} />;
 };
 
 export default LoginPage;