feat: enhance login and registration pages with session handling
- Added `useEffect` to redirect authenticated users to the home page in both `LoginPage` and `RegisterPage`. - Integrated `useSession` from `next-auth/react` to manage session state and loading indicators. - Implemented loading state display while checking session status, improving user experience during authentication. - Prevented form display for authenticated users, streamlining the login and registration process.
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { signIn, getSession } from 'next-auth/react'
|
import { signIn, getSession, useSession } from 'next-auth/react'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { Button } from '@/components/ui/Button'
|
import { Button } from '@/components/ui/Button'
|
||||||
@@ -15,6 +15,14 @@ export default function LoginPage() {
|
|||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const { data: session, status } = useSession()
|
||||||
|
|
||||||
|
// Redirection si l'utilisateur est déjà connecté
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === 'authenticated' && session) {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}, [status, session, router])
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
@@ -44,6 +52,23 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Afficher un loader pendant la vérification de session
|
||||||
|
if (status === 'loading') {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen relative overflow-hidden">
|
||||||
|
<TowerBackground />
|
||||||
|
<div className="relative z-10 min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-[var(--foreground)]">Chargement...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ne pas afficher le formulaire si l'utilisateur est connecté
|
||||||
|
if (status === 'authenticated') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen relative overflow-hidden">
|
<div className="min-h-screen relative overflow-hidden">
|
||||||
<TowerBackground />
|
<TowerBackground />
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useSession } from 'next-auth/react'
|
||||||
import { Button } from '@/components/ui/Button'
|
import { Button } from '@/components/ui/Button'
|
||||||
import { Input } from '@/components/ui/Input'
|
import { Input } from '@/components/ui/Input'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
@@ -18,6 +19,14 @@ export default function RegisterPage() {
|
|||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const { data: session, status } = useSession()
|
||||||
|
|
||||||
|
// Redirection si l'utilisateur est déjà connecté
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === 'authenticated' && session) {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}, [status, session, router])
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
@@ -67,6 +76,23 @@ export default function RegisterPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Afficher un loader pendant la vérification de session
|
||||||
|
if (status === 'loading') {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen relative overflow-hidden">
|
||||||
|
<TowerBackground />
|
||||||
|
<div className="relative z-10 min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-[var(--foreground)]">Chargement...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ne pas afficher le formulaire si l'utilisateur est connecté
|
||||||
|
if (status === 'authenticated') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen relative overflow-hidden">
|
<div className="min-h-screen relative overflow-hidden">
|
||||||
<TowerBackground />
|
<TowerBackground />
|
||||||
|
|||||||
Reference in New Issue
Block a user