g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
NotII
2025-03-23 22:14:05 +00:00
parent 6ab5a9ac43
commit e3e630c211
3 changed files with 61 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/auth/login/page.tsx
View File

@@ -1,13 +1,9 @@
"use client";
import { fetchData } from "@/lib/data-service";
import { clientFetch } from "@/lib/client-utils";
"use client"
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
@@ -16,18 +12,9 @@ export default function LoginPage() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isRedirecting, setIsRedirecting] = useState(false);
const [authStatus, setAuthStatus] = useState<{
loading: boolean;
progress: number;
message: string;
}>({
loading: false,
progress: 0,
message: "Preparing your session..."
});
const [error, setError] = useState("");
const router = useRouter();
const searchParams = useSearchParams();
const redirectUrl = searchParams.get("redirectUrl") || "/dashboard";
// Check if already logged in
useEffect(() => {
@@ -41,116 +28,37 @@ export default function LoginPage() {
}
}, [router]);
// Function to verify authentication and prepare navigation
const prepareNavigation = async (token: string) => {
try {
setAuthStatus(prev => ({
...prev,
loading: true,
message: "Verifying your credentials..."
}));
// Step 1: Verify token is valid by making a simple auth check
// This ensures we don't redirect with an invalid token
await clientFetch("/auth/me", {
headers: { Authorization: `Bearer ${token}` }
});
setAuthStatus(prev => ({
...prev,
progress: 50,
message: "Authentication successful!"
}));
// Slight delay to show success message
await new Promise(resolve => setTimeout(resolve, 300));
setAuthStatus(prev => ({
...prev,
progress: 100,
message: "Redirecting to dashboard..."
}));
// Tell Next.js to prefetch the dashboard page
// This helps with faster page load but doesn't affect server data fetching
router.prefetch('/dashboard');
// Short delay to show completion
await new Promise(resolve => setTimeout(resolve, 500));
// Redirect to dashboard
router.push("/dashboard");
// Fallback redirect if router.push fails
setTimeout(() => {
window.location.href = "/dashboard";
}, 1000);
} catch (error) {
console.error("Authentication verification error:", error);
// Even if verification fails, still try to redirect
// The dashboard will handle invalid auth
setAuthStatus(prev => ({
...prev,
progress: 100,
message: "Authentication issue, redirecting anyway..."
}));
toast.warning("Authentication issue detected", {
description: "You may need to log in again if the dashboard doesn't load."
});
// Still redirect
setTimeout(() => {
router.push("/dashboard");
// Ultimate fallback
setTimeout(() => {
window.location.href = "/dashboard";
}, 1000);
}, 500);
}
};
async function handleLogin(e: React.FormEvent) {
e.preventDefault();
if (isLoading || isRedirecting) return;
setIsLoading(true);
try {
const response = await fetch(`/api/auth/login`, {
// Using fetch directly with the proxy path
const response = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
credentials: "include",
});
const data = await response.json();
if (response.ok && data.token) {
// Set redirecting state to prevent multiple redirect attempts
setIsRedirecting(true);
// Store the token in both cookie and localStorage for redundancy
document.cookie = `Authorization=${data.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
localStorage.setItem("Authorization", data.token);
// Show toast before redirect
toast.success("Login successful");
// Now verify auth and handle redirect
await prepareNavigation(data.token);
// Redirect to dashboard or the original redirect URL
router.push(redirectUrl);
} else {
// Handle HTTP error responses (including 401)
// Handle HTTP error responses
const errorMessage = data.error || "Invalid credentials";
toast.error("Login Failed", {
description: errorMessage,
});
}
} catch (error) {
// This will now only catch network errors or JSON parsing errors
toast.error("Connection Error", {
description: "Unable to connect to the server. Please check your internet connection and try again.",
});
@@ -160,30 +68,6 @@ export default function LoginPage() {
}
}
// If already redirecting, show loading state with progress
if (isRedirecting) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
<h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Logging in</h2>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{authStatus.message}</p>
{/* Progress bar */}
<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-6">
<div
className="bg-primary h-2.5 rounded-full transition-all duration-300 ease-in-out"
style={{ width: `${authStatus.progress}%` }}
></div>
</div>
<div className="mt-6 flex justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
</div>
</div>
);
}
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
@@ -222,7 +106,7 @@ export default function LoginPage() {
</div>
</div>
<Button type="submit" className="w-full" disabled={isLoading || isRedirecting}>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "Signing in..." : "Sign in"}
</Button>
</form>