add notifications for sign up and login

Author: DystoriaX

package-lock.json

@@ -10,6 +10,7 @@
     "@mantine/hooks": "^6.0.1",
     "@mantine/notifications": "^6.0.1",
     "@mantine/nprogress": "^6.0.1",
+    "@tabler/icons-react": "^2.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

package.json

@@ -19,10 +19,11 @@ export type LoginFields = z.infer<typeof schema>;
 
 type Props = {
   onSubmit: (f: LoginFields) => void;
+  isLoading: boolean;
 };
 
 const Login = (props: Props) => {
-  const { onSubmit } = props;
+  const { onSubmit, isLoading } = props;
 
   const form = useForm<LoginFields>({
     initialValues: {
@@ -52,7 +53,9 @@ const Login = (props: Props) => {
         />
 
         <Group mt="lg" position="right">
-          <Button type="submit">Login</Button>
+          <Button type="submit" loading={isLoading}>
+            Login
+          </Button>
         </Group>
       </form>
     </Stack>

src/components/auth/Login.tsx

@@ -13,8 +13,9 @@ import { z } from "zod";
 const schema = z
   .object({
     name: z.string().nonempty({ message: "Required" }),
-    committee: z.string().nonempty({ message: "Required" }),
+    subcomms: z.string().nonempty({ message: "Required" }),
     email: z.string().email().nonempty({ message: "Required" }),
+    contactNum: z.string().regex(new RegExp(/^\d+$/), "Invalid phone number"),
     password: z.string().min(6),
     confirmPassword: z.string().nonempty({ message: "Required" }),
   })
@@ -32,15 +33,17 @@ export type SignupFields = z.infer<typeof schema>;
 
 type Props = {
   onSubmit: (f: SignupFields) => void;
+  isLoading: boolean;
 };
 
 const Signup = (props: Props) => {
-  const { onSubmit } = props;
+  const { onSubmit, isLoading } = props;
 
   const form = useForm<SignupFields>({
     initialValues: {
       name: "",
-      committee: "",
+      subcomms: "",
+      contactNum: "",
       email: "",
       password: "",
       confirmPassword: "",
@@ -74,6 +77,13 @@ const Signup = (props: Props) => {
           mt="md"
           {...form.getInputProps("email")}
         />
+        <TextInput
+          withAsterisk
+          label="Contact Number"
+          placeholder="12341234"
+          mt="md"
+          {...form.getInputProps("contactNum")}
+        />
         <PasswordInput
           withAsterisk
           label="Password"
@@ -90,7 +100,9 @@ const Signup = (props: Props) => {
         />
 
         <Group mt="lg" position="right">
-          <Button type="submit">Sign Up</Button>
+          <Button type="submit" loading={isLoading}>
+            Sign Up
+          </Button>
         </Group>
       </form>
     </Stack>

src/components/auth/Signup.tsx

@@ -0,0 +1,26 @@
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { notifications, NotificationProps } from "@mantine/notifications";
+
+export const useNotification = () => {
+  const showSuccess = (props: NotificationProps) => {
+    notifications.show({
+      ...props,
+      color: "green",
+      icon: <IconCheck />,
+    });
+  };
+
+  const showError = (props: NotificationProps) => {
+    notifications.show({
+      ...props,
+      color: "red",
+      icon: <IconX />,
+    });
+  };
+
+  return {
+    notifications,
+    showSuccess,
+    showError,
+  };
+};

src/hooks/notification.tsx

@@ -1,15 +1,52 @@
+import { login } from "api/auth";
+import { FirebaseError } from "firebase/app";
+import { useNotification } from "hooks/notification";
 import React from "react";
 import Login, { LoginFields } from "../components/auth/Login";
 
 const LoginPage = () => {
+  const { showSuccess, showError } = useNotification();
+  const [isLoading, setLoading] = React.useState(false);
+
   const onSubmit = async (values: LoginFields) => {
     const { email, password } = values;
 
-    console.log(email);
-    console.log(password);
+    setLoading(true);
+    try {
+      await login({
+        email,
+        password,
+      });
+      showSuccess({
+        title: "Login Success",
+        message: "Logged in successfully",
+      });
+    } catch (e) {
+      let errorMessage = "";
+
+      if (e instanceof FirebaseError) {
+        if (e.code === "auth/user-not-found") {
+          errorMessage = "User not found";
+        } else if (e.code === "auth/wrong-password") {
+          errorMessage = "Wrong password";
+        } else {
+          console.log(e.code);
+          errorMessage = "Unknown error";
+        }
+      } else {
+        errorMessage = "Unknown error";
+      }
+
+      showError({
+        title: "Error",
+        message: errorMessage,
+      });
+    }
+
+    setLoading(false);
   };
 
-  return <Login onSubmit={onSubmit} />;
+  return <Login onSubmit={onSubmit} isLoading={isLoading} />;
 };
 
 export default LoginPage;

src/pages/Login.tsx

@@ -1,8 +1,52 @@
+import { FirebaseError } from "firebase/app";
+import { useNotification } from "hooks/notification";
 import React from "react";
-import Signup from "../components/auth/Signup";
+import { signUp } from "../api/auth";
+import Signup, { SignupFields } from "../components/auth/Signup";
 
 const SignupPage = () => {
-  return <Signup onSubmit={() => {}} />;
+  const { showSuccess, showError } = useNotification();
+  const [isLoading, setLoading] = React.useState(false);
+
+  const onSubmit = async (values: SignupFields) => {
+    const { name, email, subcomms, password, contactNum } = values;
+
+    setLoading(true);
+    try {
+      await signUp({
+        name,
+        email,
+        subcomms,
+        password,
+        contactNum,
+      });
+      showSuccess({
+        title: "Sign up Success",
+        message: "Signed up successfully",
+      });
+    } catch (e) {
+      let errorMessage = "";
+
+      if (e instanceof FirebaseError) {
+        if (e.code === "auth/email-already-exists") {
+          errorMessage = "Email already exists";
+        } else {
+          console.log(e.code);
+          errorMessage = "Unknown error";
+        }
+      } else {
+        errorMessage = "Unknown error";
+      }
+
+      showError({
+        title: "Error",
+        message: errorMessage,
+      });
+    }
+    setLoading(false);
+  };
+
+  return <Signup onSubmit={onSubmit} isLoading={isLoading} />;
 };
 
 export default SignupPage;

src/pages/Signup.tsx

@@ -2494,6 +2494,19 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tabler/icons-react@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.11.0.tgz"
+  integrity sha512-Mbie8IFLrtI0sGm802Bmierle0ixIi7FVczShoLjPZwRM0da1HcD588TF7oMuQ09zd241BY+L7M/f0Q6lquBng==
+  dependencies:
+    "@tabler/icons" "2.11.0"
+    prop-types "^15.7.2"
+
+"@tabler/[email protected]":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tabler/icons/-/icons-2.11.0.tgz"
+  integrity sha512-KPESQnvHoSpbAdgzDdrSmeZ9AE8fSU12fU3Cag79uXJCUkC8f741fcvPJPsFMDe0S96VSq3mMYF8JnA7a570uQ==
+
 "@testing-library/dom@^8.5.0", "@testing-library/dom@>=7.21.4":
   version "8.20.0"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz"
@@ -8343,7 +8356,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8655,7 +8668,7 @@ [email protected]:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-"react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.6.0, react@>=16.8, react@>=16.8.0:
+"react@^16.5.1 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.6.0, react@>=16.8, react@>=16.8.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==