app page refactory

src/react/components/AppBar.tsx

@@ -0,0 +1,23 @@
+import { Button, Navbar } from 'react-daisyui';
+import { firebase } from "../utils"
+
+export const AppBar = () => {
+
+
+    return <Navbar className='bg-base-100 w-full border-b-4 border-b-red mb-4'>
+        <div className='flex-1'>
+            <img
+                src="/assets/vectors/logo_full.svg"
+                alt="Devfest Logo"
+                className="h-6"
+            />
+
+        </div>
+        <Button
+            onClick={() => firebase.auth.signOut()}
+            className='bg-base-100 text-white hover:bg-red-pastel hover:text-base-100 border-none'
+        >
+            Logout
+        </Button>
+    </Navbar>
+}

src/react/pages/AppPage.tsx

@@ -1,51 +1,36 @@
-import { Button } from "react-daisyui"
 import { AppMain } from "../AppMain"
 import { firebase } from "../utils"
 import { useEffect } from "react"
 import { useFirebaseUserInfo } from "../utils/query";
-import { sendEmailVerification } from "firebase/auth"
-import { showNotification } from "@mantine/notifications"
-
-
+import { AppBar } from "../components/AppBar";
+import { UserInfoPage } from "./app/UserInfoPage";
+import { EmailVerificationPage } from "./app/EmailVerificationPage";
 
 export const AppPage = () => {
 
     const { user, hasLoaded } = useFirebaseUserInfo()
     useEffect(() => {
-        if(user == null && hasLoaded) {
+        if (user == null && hasLoaded) {
             location.href = "/login"
         }
     }, [user])
 
-    const emailVerified = firebase.auth.currentUser?.emailVerified??false
+    const emailVerified = firebase.auth.currentUser?.emailVerified ?? false
+
+    let subPage = <AppMain>Loading...</AppMain>;
+
+    //TODO: Implement Sub Router for App Page
+    if(user && emailVerified){
+        subPage = UserInfoPage(user);
+    }else if(user && !emailVerified){
+        subPage = EmailVerificationPage(user);
+    }
+
+    return <div className="flex flex-col h-full w-full justify-start">
+        <AppBar></AppBar>
+        <div className="flex-1 text-center">
 
-    return <>
-        {user?<AppMain>
-            Welcome to your app menù!
-            <b>You are {firebase.auth.currentUser?.displayName} with {firebase.auth.currentUser?.email}</b>
-            <b>email verified: {emailVerified?"yes":"no"}</b>
-            {!emailVerified && <Button onClick={() => {
-                sendEmailVerification(user).then(() => {
-                    showNotification({
-                        title: "Verification email sent",
-                        message: "Check your inbox",
-                        color: "blue"
-                    })
-                }).catch((error) => {
-                    showNotification({
-                        title: `Error sending verification email [${error.code}]`,
-                        message: error.message,
-                        color: "red"
-                    })
-                })
-            }}>
-                Resend verification email
-            </Button>}
-            <b>UID: {firebase.auth.currentUser?.uid}</b>
-            <Button onClick={() => {
-                firebase.auth.signOut()
-            }}>Logout</Button>
-
-        </AppMain>:<AppMain>Loading...</AppMain>}
-    </>
+            {subPage}
+        </div>
+    </div>
 }

src/react/pages/app/EmailVerificationPage.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from "react"
+import { useFirebaseUserInfo } from "../../utils/query"
+import { sendEmailVerification, type User } from "firebase/auth"
+import { Button } from "react-daisyui"
+import { showNotification } from "@mantine/notifications"
+import { AppMain } from "../../AppMain"
+
+export const EmailVerificationPage = (user: User) => {
+    return <AppMain>
+        <div className="h-full flex flex-col justify-center items-center">
+            <div className="max-w-[60vw]">
+                <h1 className="text-2xl mb-10">
+                    Your email has not been verified.
+                    You must verify it before continue
+                    with this application.
+                </h1>
+
+                <Button onClick={() => {
+                    sendEmailVerification(user!).then(() => {
+                        showNotification({
+                            title: "Verification email sent",
+                            message: "Check your inbox",
+                            color: "blue"
+                        })
+                    }).catch((error) => {
+                        showNotification({
+                            title: `Error sending verification email [${error.code}]`,
+                            message: error.message,
+                            color: "red"
+                        })
+                    })
+                }}>
+                    Resend verification email
+                </Button>
+            </div>
+        </div>
+    </AppMain>
+}

src/react/pages/app/UserInfoPage.tsx

@@ -0,0 +1,12 @@
+import type { User } from "firebase/auth"
+import { AppMain } from "../../AppMain"
+import { firebase } from "../../utils"
+
+export const UserInfoPage = (user: User) => {
+    return <AppMain>
+        <p>Welcome to your app menù!</p>
+        <p><b>You are {firebase.auth.currentUser?.displayName} with {firebase.auth.currentUser?.email}</b></p>
+        <p><b>email verified: {user.emailVerified ? "yes" : "no"}</b></p>
+        <p><b>UID: {firebase.auth.currentUser?.uid}</b></p>
+    </AppMain>
+}