change header to client, move pages, fix mfa

src/app/[locale]/(account)/account/verify/page.tsx

@@ -0,0 +1,10 @@
+'use client'
+import PageLayout from '@/components/pageLayout'
+
+export default function Page() {
+  return (
+    <PageLayout title={'Verify your email'}>
+      Hi, please verify your email.
+    </PageLayout>
+  )
+}

src/app/[locale]/(account)/layout.tsx

@@ -1,10 +1,7 @@
 import { getUser } from '@/utils/server-api/account/user'
 import { redirect } from '@/navigation'
-import { createSessionServerClient } from '@/app/appwrite-session'
 
 export default async function Layout({ children }) {
-  const { account } = await createSessionServerClient()
-
   try {
     await getUser()
     return children

src/app/[locale]/(auth)/login/mfa/page.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Link } from '@/navigation'
-import MfaPageClient from '@/app/[locale]/(auth)/login/mfa/page.client'
+import MfaPageClient from './page.client'
 
 export const metadata = {
   title: 'Login',

src/app/[locale]/(auth)/login/page.client.tsx

@@ -26,6 +26,7 @@ import { createUser } from '@/utils/actions/login-actions'
 import { Link } from '@/navigation'
 import { account, client } from '@/app/appwrite-client'
 import PageLayout from '@/components/pageLayout'
+import { useUser } from '@/components/contexts/UserContext'
 
 export default function Login() {
   const [data, setData] = useState({
@@ -36,6 +37,7 @@ export default function Login() {
   const [acceptedTerms, setAcceptedTerms] = useState(false)
   const [isRegistering, setIsRegistering] = useState(false)
   const { toast } = useToast()
+  const { setUser } = useUser()
 
   const handleEmailLogin = async (e: any) => {
     e.preventDefault()
@@ -70,6 +72,7 @@ export default function Login() {
 
       const dataResponse = await signIn()
       client.setSession(dataResponse.secret)
+      await account.createVerification('https://headpat.place/i/verify-email')
       window.location.href = '/account'
     } else {
       const dataResponse = await signIn()
@@ -201,6 +204,9 @@ export default function Login() {
                     >
                       {isRegistering ? 'Register' : 'Login'}
                     </Button>
+                    <Button variant={'link'} className={'w-full'}>
+                      Forgot password?
+                    </Button>
                   </div>
                 </div>
               </form>

src/components/contexts/UserContext.tsx

@@ -5,7 +5,7 @@ import { account } from '@/app/appwrite-client'
 import { ID } from 'node-appwrite'
 
 interface UserContextValue {
-  current: Account.AccountType | null
+  current: Account.AccountPrefs | null
   setUser: React.Dispatch<React.SetStateAction<Account.AccountType | null>>
   login: (email: string, password: string) => Promise<void>
   loginOAuth: (userId: string, secret: string) => Promise<void>

src/components/header/header-resizable.tsx

@@ -11,7 +11,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 import { Nav } from '@/components/header/header-nav'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Nav1, Nav2, Nav3, NavFooter } from '@/components/header/data'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { ChevronUpIcon } from 'lucide-react'
@@ -22,30 +22,58 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Account, UserData } from '@/utils/types/models'
+import { UserData } from '@/utils/types/models'
 import { Link, useRouter } from '@/navigation'
+import { useUser } from '@/components/contexts/UserContext'
+import { databases } from '@/app/appwrite-client'
+import { toast } from 'sonner'
+
+const getAvatar = (id: string) => {
+  if (!id) return
+
+  return `${process.env.NEXT_PUBLIC_API_URL}/v1/storage/buckets/avatars/files/${id}/preview?project=${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}&width=250&height=250&quality=50`
+}
 
 export default function SidebarResizable({
   defaultLayout = [265, 440, 655],
   defaultCollapsed = false,
   navCollapsedSize,
-  accountData,
-  userData,
-  userImage,
   translations,
   children,
 }: {
   defaultLayout: number[]
   defaultCollapsed: boolean
   navCollapsedSize: number
-  accountData: Account.AccountPrefs
-  userData: UserData.UserDataDocumentsType
-  userImage: string
   translations: any
   children: React.ReactNode
 }) {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed)
+  const [userData, setUserData] =
+    useState<UserData.UserDataDocumentsType | null>(null)
+  const [userImage, setUserImage] = useState<string | null>(null)
   const router = useRouter()
+  const { current } = useUser()
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (current) {
+        try {
+          await databases
+            .getDocument('hp_db', 'userdata', `${current.$id}`)
+            .then((data: UserData.UserDataDocumentsType) => {
+              setUserData(data)
+              const image = getAvatar(data.avatarId)
+              setUserImage(image)
+            })
+        } catch (error) {
+          toast.error('Failed to fetch user data')
+        }
+      }
+    }
+
+    fetchData().then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current])
 
   return (
     <TooltipProvider delayDuration={0}>
@@ -118,7 +146,7 @@ export default function SidebarResizable({
                 <Separator />
                 <Nav
                   isCollapsed={isCollapsed}
-                  links={Nav2(accountData, translations)}
+                  links={Nav2(current, translations)}
                   translations={translations}
                 />
                 <Separator />
@@ -130,7 +158,7 @@ export default function SidebarResizable({
               </div>
             </ScrollArea>
             <div className={'mt-auto relative bottom-0 block'}>
-              {accountData ? (
+              {current ? (
                 <>
                   <Separator />
                   <DropdownMenu>
@@ -199,7 +227,7 @@ export default function SidebarResizable({
                   <Separator />
                   <Nav
                     isCollapsed={isCollapsed}
-                    links={NavFooter(accountData, translations)}
+                    links={NavFooter(current, translations)}
                     translations={translations}
                   />
                 </div>

src/components/header/header-server.tsx

@@ -1,10 +1,6 @@
 import { cookies } from 'next/headers'
 import SidebarResizable from '@/components/header/header-resizable'
 import MobileNav from '@/components/header/mobile-nav'
-import { getUserDataSingle } from '@/utils/server-api/user/getUserData'
-import { getUser } from '@/utils/server-api/account/user'
-
-export const dynamic = 'force-dynamic'
 
 export default async function HeaderServer({
   children,
@@ -18,42 +14,17 @@ export default async function HeaderServer({
   const defaultCollapsed = collapsed ? JSON.parse(collapsed.value) : undefined
   const navCollapsedSize = 4
 
-  const getAvatar = (id: string) => {
-    if (!id) return
-
-    return `${process.env.NEXT_PUBLIC_API_URL}/v1/storage/buckets/avatars/files/${id}/preview?project=${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}&width=250&height=250&quality=50`
-  }
-
-  let accountData = null
-  let userData = null
-  let userImage = null
-  try {
-    accountData = await getUser()
-    userData = await getUserDataSingle(accountData.$id)
-    userImage = getAvatar(userData.avatarId)
-  } catch (error) {
-    // do nothing
-  }
-
   return (
     <>
       <div className={'min-h-full'}>
         <div className="md:hidden">
-          <MobileNav
-            accountData={accountData || null}
-            translations={translations}
-          >
-            {children}
-          </MobileNav>
+          <MobileNav translations={translations}>{children}</MobileNav>
         </div>
         <div className="hidden flex-col md:flex">
           <SidebarResizable
             defaultLayout={defaultLayout}
             defaultCollapsed={defaultCollapsed}
             navCollapsedSize={navCollapsedSize}
-            accountData={accountData || null}
-            userData={userData || null}
-            userImage={userImage}
             translations={translations}
           >
             {children}

src/components/header/mobile-nav.tsx

@@ -19,10 +19,12 @@ import Image from 'next/image'
 import { useRouter } from '@/navigation'
 import ChangeLanguage from '@/components/system/changeLanguage'
 import { ThemeToggle } from '@/components/ThemeToggle'
+import { useUser } from '@/components/contexts/UserContext'
 
-export default function MobileNav({ accountData, translations, children }) {
+export default function MobileNav({ translations, children }) {
   const router = useRouter()
   const [isOpen, setIsOpen] = React.useState(false)
+  const { current } = useUser()
 
   return (
     <>
@@ -77,7 +79,7 @@ export default function MobileNav({ accountData, translations, children }) {
                       <Separator />
                       <Nav
                         isCollapsed={false}
-                        links={Nav2(accountData, translations)}
+                        links={Nav2(current, translations)}
                         setIsOpen={setIsOpen}
                         translations={translations}
                       />
@@ -95,7 +97,7 @@ export default function MobileNav({ accountData, translations, children }) {
                   <Separator className={'mb-2'} />
                   <Nav
                     isCollapsed={false}
-                    links={NavFooter(accountData, translations)}
+                    links={NavFooter(current, translations)}
                     setIsOpen={setIsOpen}
                     translations={translations}
                   />

src/navigation.ts

@@ -36,6 +36,7 @@ export const pathnames = {
   '/announcements': '/announcements',
   '/announcements/[announcementId]': '/announcements/[announcementId]',
   '/account': '/account',
+  '/account/verify': '/account/verify',
   '/account/gallery': '/account/gallery',
   '/account/gallery/upload': '/account/gallery/upload',
   '/account/gallery/[galleryId]': '/account/gallery/[galleryId]',