add: implemented loading on login request

gdgbari · Sep 17, 2024 · 466a5a8 · 466a5a8
1 parent a6e968e
commit 466a5a8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 13 deletions.
diff --git a/src/react/pages/LoginPage.tsx b/src/react/pages/LoginPage.tsx
@@ -3,7 +3,7 @@ import { Card, Checkbox, Form, Input } from "react-daisyui"
 import { useForm } from "@mantine/form"
 import { WebsiteConfig } from "../../config";
 import { useTranslations } from "../../i18n/utils";
-import { showNotification } from "@mantine/notifications";
+import { notifications, showNotification } from "@mantine/notifications";
 import { firebase, isEmailValid, useFirebaseUserInfo } from "../utils";
 import { useEffect, useState } from "react";
 import { signInWithEmailAndPassword } from "firebase/auth";
@@ -26,6 +26,7 @@ export const LoginPage = () => {
     })
 
     const [showPassword, setShowPassword] = useState(false)
+    const [loading, setLoading] = useState(false)
 
     const t = useTranslations("en")
 
@@ -49,20 +50,35 @@ export const LoginPage = () => {
     return (
         <AppMain>
             <Form onSubmit={form.onSubmit((data)=>{
+                    const requestId = notifications.show({
+                        loading: true,
+                        title: "Logging in...",
+                        message: "Please wait untils the login is complete",
+                        autoClose: false
+                    })
+                    setLoading(true)
                     signInWithEmailAndPassword(firebase.auth, data.email, data.password)
                         .then((userCredential) => {
                             const user = userCredential.user;
-                            showNotification({
+                            notifications.update({
+                                id: requestId,
+                                loading: false,
                                 title: "Login success",
                                 message: `Welcome ${user.displayName}`,
-                                color: "green"
+                                color: "green",
+                                autoClose: true
                             })
                         }).catch((error) => {
-                            showNotification({
+                            notifications.update({
+                                id: requestId,
+                                loading: false,
                                 title: `Login error [${error.code}]`,
                                 message: error.message,
-                                color: "red"
+                                color: "red",
+                                autoClose: true
                             })
+                        }).finally(() => {
+                            setLoading(false)
                         })
                 })
             }>
@@ -90,7 +106,7 @@ export const LoginPage = () => {
                             </div>
                         </div>
                         <div className="flex flex-col mt-10 items-center w-full">
-                        <Input type="submit" value="Login" className="btn btn-primary btn-wide" onClick={checkErrors} />
+                        <Input type="submit" value={loading?"Loading":"Login"} className={`btn btn-primary btn-wide ${loading?"opacity-40 btn-warning":""}`} onClick={checkErrors} disabled={loading} />
                         </div>
                     </div>
                 </Card>

diff --git a/src/react/pages/SignupPage.tsx b/src/react/pages/SignupPage.tsx
@@ -2,7 +2,7 @@ import { AppMain } from "../AppMain";
 import { Card, Checkbox, Form, Input } from "react-daisyui"
 import { useForm } from "@mantine/form"
 import { useEffect, useState } from "react";
-import { showNotification } from "@mantine/notifications";
+import { notifications, showNotification } from "@mantine/notifications";
 import { isEmailValid, useFirebaseUserInfo } from "../utils";
 import { WebsiteConfig } from "../../config";
 import { useTranslations } from "../../i18n/utils";
@@ -40,7 +40,7 @@ export const SignupPage = ({ token }: { token:string }) => {
     })
 
     const [showPasswords, setShowPasswords] = useState(false)
-
+    const [loading, setLoading] = useState(false)
 
     const { user, hasLoaded } = useFirebaseUserInfo()
     useEffect(() => {
@@ -57,11 +57,35 @@ export const SignupPage = ({ token }: { token:string }) => {
             {/* <p>registration token: {token}</p> */}
 
             <Form onSubmit={form.onSubmit((data)=>{
-                    showNotification({
-                        title: "Function not implemented",
-                        message: JSON.stringify(data),
-                        color: "blue"
+                    const requestId = notifications.show({
+                        loading: true,
+                        title: "Signing up...",
+                        message: "Please wait untils the registration is complete",
+                        autoClose: false
                     })
+                    setLoading(true)
+                    fetch("http://127.0.0.1/fakeAPI")
+                        .then((userInfo) => {
+                            notifications.update({
+                                id: requestId,
+                                loading: false,
+                                title: "Registration Completed",
+                                message: `Welcome ${user?.displayName}`,
+                                color: "green",
+                                autoClose: true
+                            })
+                        }).catch((error) => {
+                            notifications.update({
+                                id: requestId,
+                                loading: false,
+                                title: `Registration error [${error.code}]`,
+                                message: error.message,
+                                color: "red",
+                                autoClose: true
+                            })
+                        }).finally(() => {
+                            setLoading(false)
+                        })
                 })
             }>
                 <Card className="md:px-20 md:py-16 bg-black md:bg-opacity-60 bg-opacity-25 z-10 md:h-fit md:w-fit h-screen w-screen justify-center rounded-none px-5 md:rounded-xl">
@@ -89,7 +113,7 @@ export const SignupPage = ({ token }: { token:string }) => {
                             </div>
                         </div>
                         <div className="flex flex-col mt-10 items-center w-full">
-                        <Input type="submit" value="Signup" className="btn btn-primary btn-wide" onClick={checkErrors} />
+                        <Input type="submit" value={loading?"Loading":"Signup"} className={`btn btn-primary btn-wide ${loading?"opacity-40 btn-warning":""}`} onClick={checkErrors} disabled={loading} />
                         </div>
                     </div>
                 </Card>