authentication done.
This commit is contained in:
parent
206df06a12
commit
0eb2854dab
@ -1,63 +1,392 @@
|
||||
'use client';
|
||||
import { useState } from "react";
|
||||
import { account } from "../lib/appwrite";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
// import { ID } from "../lib/appwrite";
|
||||
|
||||
export default function AuthForm() {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
export default function AuthPage() {
|
||||
const router = useRouter();
|
||||
const { user, loading: authLoading, isAuthenticated, login, register } = useAuth();
|
||||
const [isLoginForm, setIsLoginForm] = useState(true);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
// Form states
|
||||
const [loginData, setLoginData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
});
|
||||
|
||||
try {
|
||||
if (isLogin) {
|
||||
await account.createEmailPasswordSession(email, password);
|
||||
} else {
|
||||
await account.create('unique()', email, password);
|
||||
await account.createEmailPasswordSession(email, password);
|
||||
}
|
||||
const [signupData, setSignupData] = useState({
|
||||
fname: "",
|
||||
lname: "",
|
||||
email: "",
|
||||
password: "",
|
||||
agreeTerms: false,
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
agreeTerms: "",
|
||||
general: "",
|
||||
});
|
||||
|
||||
// Redirect if already authenticated
|
||||
useEffect(() => {
|
||||
if (!authLoading && isAuthenticated) {
|
||||
router.push("/pages/dashboard");
|
||||
} catch (err) {
|
||||
alert("Authentication error: " + err.message);
|
||||
}
|
||||
}, [isAuthenticated, authLoading, router]);
|
||||
|
||||
const handleLoginChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setLoginData({
|
||||
...loginData,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSignupChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setSignupData({
|
||||
...signupData,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
});
|
||||
if (name === "agreeTerms") {
|
||||
setErrors({ ...errors, agreeTerms: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const validateSignupForm = () => {
|
||||
let isValid = true;
|
||||
const newErrors = { ...errors };
|
||||
|
||||
if (!signupData.agreeTerms) {
|
||||
newErrors.agreeTerms = "You must agree to the terms and conditions";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (signupData.password.length < 8) {
|
||||
newErrors.general = "Password must be at least 8 characters";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setErrors({ ...errors, general: "" });
|
||||
|
||||
try {
|
||||
await login(loginData.email, loginData.password);
|
||||
router.push("/pages/dashboard");
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
let errorMessage = 'Login failed. Please try again.';
|
||||
|
||||
if (error.type === 'user_invalid_credentials') {
|
||||
errorMessage = 'Invalid email or password';
|
||||
} else if (error.type === 'general_argument_invalid') {
|
||||
errorMessage = 'Invalid email format';
|
||||
} else if (error.code === 401) {
|
||||
errorMessage = 'Authentication failed. Please try again.';
|
||||
}
|
||||
|
||||
setErrors({ ...errors, general: errorMessage });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignup = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!validateSignupForm()) return;
|
||||
|
||||
setLoading(true);
|
||||
setErrors({ ...errors, general: "" });
|
||||
|
||||
try {
|
||||
await register(
|
||||
signupData.email,
|
||||
signupData.password,
|
||||
`${signupData.fname} ${signupData.lname}`
|
||||
);
|
||||
router.push("/pages/dashboard");
|
||||
} catch (error) {
|
||||
console.error("Signup error:", error);
|
||||
let errorMessage = 'Signup failed. Please try again.';
|
||||
|
||||
if (error.type === 'user_already_exists') {
|
||||
errorMessage = 'Email already registered';
|
||||
} else if (error.type === 'general_argument_invalid') {
|
||||
errorMessage = 'Invalid email format';
|
||||
} else if (error.code === 401) {
|
||||
errorMessage = 'Authentication failed. Please try again.';
|
||||
}
|
||||
|
||||
setErrors({ ...errors, general: errorMessage });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="max-w-md mx-auto mt-10 p-6 border rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-bold mb-4">{isLogin ? 'Login' : 'Register'}</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button type="submit" className="w-full bg-blue-600 text-white py-2 rounded">
|
||||
{isLogin ? "Login" : "Register"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="mt-4 text-sm text-center">
|
||||
{isLogin ? "New user?" : "Already registered?"}{" "}
|
||||
<button
|
||||
onClick={() => setIsLogin(!isLogin)}
|
||||
className="text-blue-500 underline"
|
||||
>
|
||||
{isLogin ? "Register here" : "Login here"}
|
||||
</button>
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100 mx-auto"></div>
|
||||
<p className="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isAuthenticated) {
|
||||
return null; // Will redirect from useEffect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-auto ${darkMode ? "dark bg-gray-900" : "bg-white"}`}>
|
||||
<div className="flex flex-col items-center justify-center p-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-800 dark:text-white/90">
|
||||
{isLoginForm ? "Sign In" : "Sign Up"}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{isLoginForm
|
||||
? "Enter your email and password to sign in"
|
||||
: "Create your account to get started"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{errors.general && (
|
||||
<div className="mb-4 p-3 text-sm text-red-600 bg-red-50 rounded-lg dark:bg-red-900/20 dark:text-red-300">
|
||||
{errors.general}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoginForm ? (
|
||||
// Login Form
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={loginData.email}
|
||||
onChange={handleLoginChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password*
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
value={loginData.password}
|
||||
onChange={handleLoginChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
minLength="8"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{showPassword ? "Hide" : "Show"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rememberMe"
|
||||
checked={loginData.rememberMe}
|
||||
onChange={handleLoginChange}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
||||
/>
|
||||
<span>Remember me</span>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowResetForm(true);
|
||||
setIsLoginForm(false);
|
||||
}}
|
||||
className="text-sm text-blue-600 hover:underline dark:text-blue-400"
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Signing in..." : "Sign in"}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
// Sign Up Form
|
||||
<form onSubmit={handleSignup} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
First Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="fname"
|
||||
value={signupData.fname}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Last Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lname"
|
||||
value={signupData.lname}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={signupData.email}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password* (min 8 characters)
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
value={signupData.password}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
minLength="8"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{showPassword ? "Hide" : "Show"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-start space-x-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="agreeTerms"
|
||||
checked={signupData.agreeTerms}
|
||||
onChange={handleSignupChange}
|
||||
className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
||||
required
|
||||
/>
|
||||
<span>
|
||||
I agree to the <Link href="/terms" className="text-blue-600 hover:underline dark:text-blue-400">Terms</Link> and <Link href="/privacy" className="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</Link>
|
||||
</span>
|
||||
</label>
|
||||
{errors.agreeTerms && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{errors.agreeTerms}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Creating account..." : "Sign up"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{isLoginForm ? "Don't have an account?" : "Already have an account?"}
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsLoginForm(!isLoginForm);
|
||||
setErrors({ agreeTerms: "", general: "" });
|
||||
}}
|
||||
className="ml-1 text-blue-600 hover:underline dark:text-blue-400 font-medium"
|
||||
>
|
||||
{isLoginForm ? "Sign up" : "Sign in"}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dark mode toggle */}
|
||||
<button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className="fixed bottom-6 right-6 p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{darkMode ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
26
src/app/components/ProtectedRoute.js
Normal file
26
src/app/components/ProtectedRoute.js
Normal file
@ -0,0 +1,26 @@
|
||||
// components/ProtectedRoute.js
|
||||
"use client";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function ProtectedRoute({ children }) {
|
||||
const { user, loading } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
router.push("/auth");
|
||||
}
|
||||
}, [user, loading, router]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return user ? children : null;
|
||||
}
|
@ -1,37 +1,70 @@
|
||||
// context/AuthContext.js
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState } from "react";
|
||||
import { account } from "../lib/appwrite";
|
||||
import { createContext, useContext, useState, useEffect } from "react";
|
||||
import { account,ID } from "../lib/appwrite";
|
||||
|
||||
const AuthContext = createContext();
|
||||
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [authLoading, setAuthLoading] = useState(true);
|
||||
const [user, setUser] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const checkUserSession = async () => {
|
||||
useEffect(() => {
|
||||
checkSession();
|
||||
}, []);
|
||||
|
||||
const checkSession = async () => {
|
||||
try {
|
||||
const user = await account.get();
|
||||
if (user) {
|
||||
setIsAuthenticated(true);
|
||||
}
|
||||
const currentUser = await account.get();
|
||||
setUser(currentUser);
|
||||
} catch (error) {
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
} finally {
|
||||
setAuthLoading(false);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
checkUserSession();
|
||||
}, []);
|
||||
const login = async (email, password) => {
|
||||
try {
|
||||
await account.createEmailPasswordSession(email, password);
|
||||
const currentUser = await account.get();
|
||||
setUser(currentUser);
|
||||
return currentUser;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const register = async (email, password, name) => {
|
||||
try {
|
||||
await account.create(ID.unique(), email, password, name);
|
||||
await account.createEmailPasswordSession(email, password);
|
||||
const currentUser = await account.get();
|
||||
setUser(currentUser);
|
||||
return currentUser;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
await account.deleteSession("current");
|
||||
setUser(null);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
isAuthenticated,
|
||||
setIsAuthenticated,
|
||||
loading: authLoading,
|
||||
user,
|
||||
loading,
|
||||
isAuthenticated: !!user,
|
||||
login,
|
||||
register,
|
||||
logout,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
@ -39,4 +72,10 @@ export const AuthProvider = ({ children }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
@ -1,16 +1,22 @@
|
||||
// app/layout.js or app/page.js if that's where RootLayout is
|
||||
"use client";
|
||||
|
||||
import "./globals.css";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Sidebar from "./components/Sidebar";
|
||||
import { AuthProvider } from "./context/AuthContext"; // adjust path if needed
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="flex h-screen overflow-hidden">
|
||||
<AuthProvider>
|
||||
<Sidebar />
|
||||
<div className="flex flex-col flex-1 overflow-hidden">
|
||||
<Navbar />
|
||||
<main className="flex-1 overflow-y-auto p-4">{children}</main>
|
||||
</div>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Client, Account } from "appwrite";
|
||||
import { Client, Account,ID } from "appwrite";
|
||||
|
||||
const client = new Client();
|
||||
client
|
||||
@ -14,4 +14,4 @@ if (!process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || !process.env.NEXT_PUBLIC_APPWR
|
||||
}
|
||||
|
||||
|
||||
export { account,client };
|
||||
export { account,client,ID };
|
||||
|
@ -1,16 +1,16 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
// import { NextResponse } from 'next/server';
|
||||
|
||||
export function middleware(request) {
|
||||
const isLoggedIn = request.cookies.get('appwrite-session'); // Set manually if needed
|
||||
const url = request.nextUrl;
|
||||
// export function middleware(request) {
|
||||
// const isLoggedIn = request.cookies.get('appwrite-session'); // Set manually if needed
|
||||
// const url = request.nextUrl;
|
||||
|
||||
if (!isLoggedIn && url.pathname.startsWith('/pages')) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
// if (!isLoggedIn && url.pathname.startsWith('/pages')) {
|
||||
// return NextResponse.redirect(new URL('/login', request.url));
|
||||
// }
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
// return NextResponse.next();
|
||||
// }
|
||||
|
||||
export const config = {
|
||||
matcher: ['/pages/:path*'],
|
||||
};
|
||||
// export const config = {
|
||||
// matcher: ['/pages/:path*'],
|
||||
// };
|
||||
|
66
src/app/not-found.js
Normal file
66
src/app/not-found.js
Normal file
@ -0,0 +1,66 @@
|
||||
// app/not-found.js (not in a 'page.js' file)
|
||||
"use client"; // Add this since you're using client-side features
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function NotFound() {
|
||||
useEffect(() => {
|
||||
// Client-side dark mode initialization
|
||||
const darkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.add('bg-gray-900');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
|
||||
{/* Metadata - App Router style */}
|
||||
<title>404 Error Page | TailAdmin</title>
|
||||
<meta name="description" content="Page not found" />
|
||||
|
||||
{/* Centered Content */}
|
||||
<div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
|
||||
<h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
|
||||
ERROR
|
||||
</h1>
|
||||
|
||||
{/* Optimized Images */}
|
||||
<Image
|
||||
src="/images/error/404.svg"
|
||||
alt="404"
|
||||
width={400}
|
||||
height={300}
|
||||
className="dark:hidden mx-auto"
|
||||
priority
|
||||
/>
|
||||
<Image
|
||||
src="/images/error/404-dark.svg"
|
||||
alt="404"
|
||||
width={400}
|
||||
height={300}
|
||||
className="hidden dark:block mx-auto"
|
||||
priority
|
||||
/>
|
||||
|
||||
<p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
|
||||
We can't seem to find the page you are looking for!
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
|
||||
>
|
||||
Back to Home Page
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
© {new Date().getFullYear()} - TailAdmin
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,9 +1,33 @@
|
||||
// pages/dashboard.js
|
||||
'use client';
|
||||
import { useEffect, useState } from "react";
|
||||
import { account } from "../../lib/appwrite";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Dashboard() {
|
||||
const [user, setUser] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const currentUser = await account.get();
|
||||
setUser(currentUser);
|
||||
} catch (err) {
|
||||
router.push("/");
|
||||
}
|
||||
};
|
||||
checkAuth();
|
||||
}, [router]);
|
||||
|
||||
if (!user) {
|
||||
return <div className="p-4">Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
Hello World
|
||||
<div className="p-4">
|
||||
<h1>Welcome, {user.name}</h1>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user