Authentication views done. First commit.
This commit is contained in:
parent
21a3061d94
commit
7e812733fb
13
package.json
13
package.json
|
|
@ -9,19 +9,20 @@
|
||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"next": "15.5.6",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0"
|
||||||
"next": "15.5.6"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
"@eslint/eslintrc": "^3",
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
"@tailwindcss/postcss": "^4",
|
|
||||||
"tailwindcss": "^4",
|
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "15.5.6",
|
"eslint-config-next": "15.5.6",
|
||||||
"@eslint/eslintrc": "^3"
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
import { POST, GET } from "./config";
|
||||||
|
import { AUTH_ENDPOINTS, getAuthHeaders } from "./config";
|
||||||
|
|
||||||
|
// Simulated delay for realistic API behavior
|
||||||
|
const simulateDelay = (ms = 800) =>
|
||||||
|
new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
|
|
||||||
|
// Mock user data
|
||||||
|
const MOCK_USER = {
|
||||||
|
id: 1,
|
||||||
|
username: "demo@craftandharvest.com",
|
||||||
|
email: "demo@craftandharvest.com",
|
||||||
|
name: "Taylor",
|
||||||
|
role: "admin",
|
||||||
|
};
|
||||||
|
|
||||||
|
const MOCK_CREDENTIALS = {
|
||||||
|
username: "demo@craftandharvest.com",
|
||||||
|
password: "demo123",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Login
|
||||||
|
const login = async ({ username, password }) => {
|
||||||
|
await simulateDelay();
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
if (
|
||||||
|
username === MOCK_CREDENTIALS.username &&
|
||||||
|
password === MOCK_CREDENTIALS.password
|
||||||
|
) {
|
||||||
|
const token = "mock_jwt_token_" + Date.now();
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
user: MOCK_USER,
|
||||||
|
token,
|
||||||
|
refreshToken: "mock_refresh_token_" + Date.now(),
|
||||||
|
},
|
||||||
|
status: 200,
|
||||||
|
ok: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: { message: "Invalid credentials" },
|
||||||
|
status: 401,
|
||||||
|
ok: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Real API call (commented out for now)
|
||||||
|
// return POST(AUTH_ENDPOINTS.LOGIN, { username, password });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Logout
|
||||||
|
const logout = async (token) => {
|
||||||
|
await simulateDelay(300);
|
||||||
|
|
||||||
|
// Simulate successful logout
|
||||||
|
return {
|
||||||
|
data: { message: "Logged out successfully" },
|
||||||
|
status: 200,
|
||||||
|
ok: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Real API call (commented out for now)
|
||||||
|
// return POST(AUTH_ENDPOINTS.LOGOUT, {}, { headers: getAuthHeaders(token) });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Register
|
||||||
|
const register = async ({ email, password }) => {
|
||||||
|
await simulateDelay();
|
||||||
|
|
||||||
|
// Simulate registration
|
||||||
|
const token = "mock_jwt_token_" + Date.now();
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
user: { id: Date.now(), email, role: "user" },
|
||||||
|
token,
|
||||||
|
refreshToken: "mock_refresh_token_" + Date.now(),
|
||||||
|
},
|
||||||
|
status: 201,
|
||||||
|
ok: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Real API call (commented out for now)
|
||||||
|
// return POST(AUTH_ENDPOINTS.REGISTER, { email, password });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get current user
|
||||||
|
const me = async (token) => {
|
||||||
|
await simulateDelay(300);
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
return {
|
||||||
|
data: { user: MOCK_USER },
|
||||||
|
status: 200,
|
||||||
|
ok: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: { message: "Unauthorized" },
|
||||||
|
status: 401,
|
||||||
|
ok: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Real API call (commented out for now)
|
||||||
|
// return GET(AUTH_ENDPOINTS.ME, { headers: getAuthHeaders(token) });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Refresh token
|
||||||
|
const refresh = async (refreshToken) => {
|
||||||
|
await simulateDelay(300);
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
token: "mock_jwt_token_" + Date.now(),
|
||||||
|
refreshToken: "mock_refresh_token_" + Date.now(),
|
||||||
|
},
|
||||||
|
status: 200,
|
||||||
|
ok: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Real API call (commented out for now)
|
||||||
|
// return POST(AUTH_ENDPOINTS.REFRESH, { refreshToken });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AUTH = {
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
register,
|
||||||
|
me,
|
||||||
|
refresh,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { API_BASE_URL, GET, POST } from "../config";
|
||||||
|
|
||||||
|
// Auth-specific endpoints
|
||||||
|
export const AUTH_ENDPOINTS = {
|
||||||
|
LOGIN: "/auth/login",
|
||||||
|
LOGOUT: "/auth/logout",
|
||||||
|
REGISTER: "/auth/register",
|
||||||
|
REFRESH: "/auth/refresh",
|
||||||
|
ME: "/auth/me",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auth-specific headers
|
||||||
|
export const getAuthHeaders = (token = null) => {
|
||||||
|
const headers = {};
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
headers["Authorization"] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return headers;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export methods with auth context
|
||||||
|
export { API_BASE_URL, GET, POST };
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
// Base API Configuration
|
||||||
|
export const API_BASE_URL =
|
||||||
|
process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000";
|
||||||
|
|
||||||
|
// Default headers
|
||||||
|
const getHeaders = (customHeaders = {}) => ({
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...customHeaders,
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET method
|
||||||
|
export const GET = async (endpoint, options = {}) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: getHeaders(options.headers),
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json().catch(() => null);
|
||||||
|
|
||||||
|
const { status, ok } = response;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
status,
|
||||||
|
ok,
|
||||||
|
};
|
||||||
|
} catch ({ message }) {
|
||||||
|
return {
|
||||||
|
data: null,
|
||||||
|
status: 500,
|
||||||
|
ok: false,
|
||||||
|
error: message,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// POST method
|
||||||
|
export const POST = async (endpoint, body = {}, options = {}) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: getHeaders(options.headers),
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json().catch(() => null);
|
||||||
|
|
||||||
|
const { status, ok } = response;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
status,
|
||||||
|
ok,
|
||||||
|
};
|
||||||
|
} catch ({ message }) {
|
||||||
|
return {
|
||||||
|
data: null,
|
||||||
|
status: 500,
|
||||||
|
ok: false,
|
||||||
|
error: message,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback } from "react";
|
||||||
|
import { AUTH } from "@/api/auth/api";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
|
||||||
|
const handleLogin = useCallback(
|
||||||
|
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
const { data, ok } = await AUTH.login({ username, password });
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
if (ok && data) {
|
||||||
|
setSuccess(true);
|
||||||
|
localStorage.setItem("token", (data as any).token);
|
||||||
|
localStorage.setItem("user", JSON.stringify((data as any).user));
|
||||||
|
|
||||||
|
console.log("Login successful:", data);
|
||||||
|
} else {
|
||||||
|
setError((data as any)?.message || "Login failed. Please try again.");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[username, password]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="bg-[var(--tan-10)] rounded-lg shadow-lg p-8 border border-[var(--tan-30)]">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-semibold text-center mb-2"
|
||||||
|
style={{ color: "var(--teal)" }}
|
||||||
|
>
|
||||||
|
Welcome Back
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-center mb-8"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Sign in to Craft & Harvest
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mb-6 p-3 rounded bg-[var(--teal-10)] border border-[var(--teal-20)]">
|
||||||
|
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||||
|
<strong>Demo:</strong> demo@craftandharvest.com / demo123
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleLogin} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Email / Username
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
type="text"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border border-[var(--tan-40)] focus:outline-none focus:ring-2 focus:ring-[var(--brown)] transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
}}
|
||||||
|
placeholder="Enter your email"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border border-[var(--tan-40)] focus:outline-none focus:ring-2 focus:ring-[var(--brown)] transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
}}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{success && (
|
||||||
|
<div className="p-3 rounded bg-green-50 border border-green-200 text-green-700 text-sm">
|
||||||
|
Login successful! Redirecting...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full py-3 rounded font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? "Signing in..." : "Sign In"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center space-y-3">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-sm hover:underline block"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Forgot password?
|
||||||
|
</a>
|
||||||
|
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||||
|
Don't have an account?{" "}
|
||||||
|
<Link
|
||||||
|
href="/sign-up"
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
style={{ color: "var(--brown)" }}
|
||||||
|
>
|
||||||
|
Sign up
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
import { AUTH } from "@/api/auth/api";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function RequestPasswordResetPage() {
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [emailError, setEmailError] = useState("");
|
||||||
|
|
||||||
|
// Validate email format
|
||||||
|
useEffect(() => {
|
||||||
|
if (email.length > 0) {
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
setEmailError("Please enter a valid email address");
|
||||||
|
} else {
|
||||||
|
setEmailError("");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setEmailError("");
|
||||||
|
}
|
||||||
|
}, [email]);
|
||||||
|
|
||||||
|
const handleSubmit = useCallback(
|
||||||
|
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (emailError) {
|
||||||
|
setError("Please fix the errors before submitting");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
const { data, ok } = await AUTH.requestPasswordReset({ email });
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
if (ok && data) {
|
||||||
|
setSuccess(true);
|
||||||
|
} else {
|
||||||
|
setError(
|
||||||
|
(data as any)?.message ||
|
||||||
|
"Failed to send reset email. Please try again."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[email, emailError]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="bg-[var(--tan-10)] rounded-lg shadow-lg p-8 border border-[var(--tan-30)]">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-semibold text-center mb-2"
|
||||||
|
style={{ color: "var(--teal)" }}
|
||||||
|
>
|
||||||
|
Reset Password
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-center mb-8"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Enter your email to receive a password reset link
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{!success ? (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Email Address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
borderColor: emailError ? "#ef4444" : "var(--tan-40)",
|
||||||
|
}}
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{emailError && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">{emailError}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || !!emailError}
|
||||||
|
className="w-full py-3 rounded font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? "Sending..." : "Send Reset Link"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="p-4 rounded bg-green-50 border border-green-200 text-green-700">
|
||||||
|
<p className="font-medium mb-1">Email sent!</p>
|
||||||
|
<p className="text-sm">
|
||||||
|
We've sent a password reset link to <strong>{email}</strong>.
|
||||||
|
Please check your inbox and follow the instructions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-sm text-center"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Didn't receive the email? Check your spam folder or{" "}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSuccess(false);
|
||||||
|
setEmail("");
|
||||||
|
}}
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
style={{ color: "var(--brown)" }}
|
||||||
|
>
|
||||||
|
try again
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-sm hover:underline"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
← Back to login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,230 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
import { AUTH } from "@/api/auth/api";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
|
export default function ResetPasswordPage() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const token = searchParams.get("token");
|
||||||
|
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [passwordError, setPasswordError] = useState("");
|
||||||
|
|
||||||
|
// Validate password match
|
||||||
|
useEffect(() => {
|
||||||
|
if (confirmPassword.length > 0) {
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
setPasswordError("Passwords do not match");
|
||||||
|
} else {
|
||||||
|
setPasswordError("");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setPasswordError("");
|
||||||
|
}
|
||||||
|
}, [password, confirmPassword]);
|
||||||
|
|
||||||
|
const handleSubmit = useCallback(
|
||||||
|
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
setError("Invalid reset link. Please request a new password reset.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (passwordError) {
|
||||||
|
setError("Please fix the errors before submitting");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 6) {
|
||||||
|
setError("Password must be at least 6 characters long");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
const { data, ok } = await AUTH.resetPassword({ token, password });
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
if (ok && data) {
|
||||||
|
setSuccess(true);
|
||||||
|
} else {
|
||||||
|
setError(
|
||||||
|
(data as any)?.message ||
|
||||||
|
"Failed to reset password. Please try again."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[token, password, passwordError]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="bg-[var(--tan-10)] rounded-lg shadow-lg p-8 border border-[var(--tan-30)]">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-semibold text-center mb-2"
|
||||||
|
style={{ color: "var(--teal)" }}
|
||||||
|
>
|
||||||
|
Invalid Link
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-center mb-6"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
This password reset link is invalid or has expired.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/request-password-reset"
|
||||||
|
className="block w-full py-3 rounded font-medium text-center transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Request New Link
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="bg-[var(--tan-10)] rounded-lg shadow-lg p-8 border border-[var(--tan-30)]">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-semibold text-center mb-2"
|
||||||
|
style={{ color: "var(--teal)" }}
|
||||||
|
>
|
||||||
|
Set New Password
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-center mb-8"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Enter your new password below
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{!success ? (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
New Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border border-[var(--tan-40)] focus:outline-none focus:ring-2 focus:ring-[var(--brown)] transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
}}
|
||||||
|
placeholder="At least 6 characters"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{password.length > 0 && password.length < 6 && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">
|
||||||
|
Password must be at least 6 characters
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="confirmPassword"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Confirm New Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
borderColor: passwordError ? "#ef4444" : "var(--tan-40)",
|
||||||
|
}}
|
||||||
|
placeholder="Re-enter your password"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{passwordError && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">{passwordError}</p>
|
||||||
|
)}
|
||||||
|
{!passwordError &&
|
||||||
|
confirmPassword.length > 0 &&
|
||||||
|
password === confirmPassword && (
|
||||||
|
<p className="text-sm mt-1 text-green-600">
|
||||||
|
Passwords match ✓
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || !!passwordError}
|
||||||
|
className="w-full py-3 rounded font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? "Resetting password..." : "Reset Password"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="p-4 rounded bg-green-50 border border-green-200 text-green-700">
|
||||||
|
<p className="font-medium mb-1">Password reset successful!</p>
|
||||||
|
<p className="text-sm">
|
||||||
|
Your password has been changed. You can now log in with your
|
||||||
|
new password.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="block w-full py-3 rounded font-medium text-center transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Go to Login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,238 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
import { AUTH } from "@/api/auth/api";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function RegisterPage() {
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [passwordError, setPasswordError] = useState("");
|
||||||
|
const [emailError, setEmailError] = useState("");
|
||||||
|
|
||||||
|
// Validate email format
|
||||||
|
useEffect(() => {
|
||||||
|
if (email.length > 0) {
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
setEmailError("Please enter a valid email address");
|
||||||
|
} else {
|
||||||
|
setEmailError("");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setEmailError("");
|
||||||
|
}
|
||||||
|
}, [email]);
|
||||||
|
|
||||||
|
// Validate password match
|
||||||
|
useEffect(() => {
|
||||||
|
if (confirmPassword.length > 0) {
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
setPasswordError("Passwords do not match");
|
||||||
|
} else {
|
||||||
|
setPasswordError("");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setPasswordError("");
|
||||||
|
}
|
||||||
|
}, [password, confirmPassword]);
|
||||||
|
|
||||||
|
const handleRegister = useCallback(
|
||||||
|
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Final validation
|
||||||
|
if (emailError || passwordError) {
|
||||||
|
setError("Please fix the errors before submitting");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 6) {
|
||||||
|
setError("Password must be at least 6 characters long");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
const { data, ok } = await AUTH.register({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
});
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
if (ok && data) {
|
||||||
|
setSuccess(true);
|
||||||
|
// Store token in localStorage
|
||||||
|
localStorage.setItem("token", (data as any).token);
|
||||||
|
localStorage.setItem("user", JSON.stringify((data as any).user));
|
||||||
|
|
||||||
|
// Redirect or update app state here
|
||||||
|
console.log("Registration successful:", data);
|
||||||
|
} else {
|
||||||
|
setError(
|
||||||
|
(data as any)?.message || "Registration failed. Please try again."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[email, password, emailError, passwordError]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="bg-[var(--tan-10)] rounded-lg shadow-lg p-8 border border-[var(--tan-30)]">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-semibold text-center mb-2"
|
||||||
|
style={{ color: "var(--teal)" }}
|
||||||
|
>
|
||||||
|
Create Account
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-center mb-8"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Join Craft & Harvest today
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleRegister} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Email Address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
borderColor: emailError ? "#ef4444" : "var(--tan-40)",
|
||||||
|
}}
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{emailError && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">{emailError}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border border-[var(--tan-40)] focus:outline-none focus:ring-2 focus:ring-[var(--brown)] transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
}}
|
||||||
|
placeholder="At least 6 characters"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{password.length > 0 && password.length < 6 && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">
|
||||||
|
Password must be at least 6 characters
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="confirmPassword"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Confirm Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-2 rounded border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
color: "var(--foreground)",
|
||||||
|
borderColor: passwordError ? "#ef4444" : "var(--tan-40)",
|
||||||
|
}}
|
||||||
|
placeholder="Re-enter your password"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
{passwordError && (
|
||||||
|
<p className="text-sm mt-1 text-red-600">{passwordError}</p>
|
||||||
|
)}
|
||||||
|
{!passwordError &&
|
||||||
|
confirmPassword.length > 0 &&
|
||||||
|
password === confirmPassword && (
|
||||||
|
<p className="text-sm mt-1 text-green-600">
|
||||||
|
Passwords match ✓
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{success && (
|
||||||
|
<div className="p-3 rounded bg-green-50 border border-green-200 text-green-700 text-sm">
|
||||||
|
Registration successful! Redirecting...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || !!emailError || !!passwordError}
|
||||||
|
className="w-full py-3 rounded font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? "Creating account..." : "Create Account"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||||
|
Already have an account?{" "}
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
style={{ color: "var(--brown)" }}
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,26 +1,93 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
/* Background */
|
||||||
--foreground: #171717;
|
--background: hsl(28, 42%, 85%);
|
||||||
|
|
||||||
|
/* Foreground */
|
||||||
|
--foreground-base: 0, 0%, 0%;
|
||||||
|
--foreground: hsla(var(--foreground-base));
|
||||||
|
--foreground-95: hsla(var(--foreground-base), 0.95);
|
||||||
|
--foreground-90: hsla(var(--foreground-base), 0.9);
|
||||||
|
--foreground-80: hsla(var(--foreground-base), 0.8);
|
||||||
|
--foreground-70: hsla(var(--foreground-base), 0.7);
|
||||||
|
--foreground-60: hsla(var(--foreground-base), 0.6);
|
||||||
|
--foreground-50: hsla(var(--foreground-base), 0.5);
|
||||||
|
--foreground-40: hsla(var(--foreground-base), 0.4);
|
||||||
|
--foreground-30: hsla(var(--foreground-base), 0.3);
|
||||||
|
--foreground-20: hsla(var(--foreground-base), 0.2);
|
||||||
|
--foreground-10: hsla(var(--foreground-base), 0.1);
|
||||||
|
--foreground-05: hsla(var(--foreground-base), 0.05);
|
||||||
|
|
||||||
|
/* Warm Tan/Beige - #D0B095 */
|
||||||
|
--tan-base: 27, 39%, 70%;
|
||||||
|
--tan: hsla(var(--tan-base));
|
||||||
|
--tan-95: hsla(var(--tan-base), 0.95);
|
||||||
|
--tan-90: hsla(var(--tan-base), 0.9);
|
||||||
|
--tan-80: hsla(var(--tan-base), 0.8);
|
||||||
|
--tan-70: hsla(var(--tan-base), 0.7);
|
||||||
|
--tan-60: hsla(var(--tan-base), 0.6);
|
||||||
|
--tan-50: hsla(var(--tan-base), 0.5);
|
||||||
|
--tan-40: hsla(var(--tan-base), 0.4);
|
||||||
|
--tan-30: hsla(var(--tan-base), 0.3);
|
||||||
|
--tan-20: hsla(var(--tan-base), 0.2);
|
||||||
|
--tan-10: hsla(var(--tan-base), 0.1);
|
||||||
|
--tan-05: hsla(var(--tan-base), 0.05);
|
||||||
|
|
||||||
|
/* Medium Brown - #987A60 */
|
||||||
|
--brown-base: 28, 23%, 49%;
|
||||||
|
--brown: hsla(var(--brown-base));
|
||||||
|
--brown-95: hsla(var(--brown-base), 0.95);
|
||||||
|
--brown-90: hsla(var(--brown-base), 0.9);
|
||||||
|
--brown-80: hsla(var(--brown-base), 0.8);
|
||||||
|
--brown-70: hsla(var(--brown-base), 0.7);
|
||||||
|
--brown-60: hsla(var(--brown-base), 0.6);
|
||||||
|
--brown-50: hsla(var(--brown-base), 0.5);
|
||||||
|
--brown-40: hsla(var(--brown-base), 0.4);
|
||||||
|
--brown-30: hsla(var(--brown-base), 0.3);
|
||||||
|
--brown-20: hsla(var(--brown-base), 0.2);
|
||||||
|
--brown-10: hsla(var(--brown-base), 0.1);
|
||||||
|
--brown-05: hsla(var(--brown-base), 0.05);
|
||||||
|
|
||||||
|
/* Deep Teal/Navy */
|
||||||
|
--teal-base: 191, 45%, 19%;
|
||||||
|
--teal: hsla(var(--teal-base));
|
||||||
|
--teal-95: hsla(var(--teal-base), 0.95);
|
||||||
|
--teal-90: hsla(var(--teal-base), 0.9);
|
||||||
|
--teal-80: hsla(var(--teal-base), 0.8);
|
||||||
|
--teal-70: hsla(var(--teal-base), 0.7);
|
||||||
|
--teal-60: hsla(var(--teal-base), 0.6);
|
||||||
|
--teal-50: hsla(var(--teal-base), 0.5);
|
||||||
|
--teal-40: hsla(var(--teal-base), 0.4);
|
||||||
|
--teal-30: hsla(var(--teal-base), 0.3);
|
||||||
|
--teal-20: hsla(var(--teal-base), 0.2);
|
||||||
|
--teal-10: hsla(var(--teal-base), 0.1);
|
||||||
|
--teal-05: hsla(var(--teal-base), 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-poppins);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
[data-theme="dark"] {
|
||||||
:root {
|
--background: hsl(192, 44%, 12%);
|
||||||
--background: #0a0a0a;
|
--foreground-base: 28, 42%, 85%;
|
||||||
--foreground: #ededed;
|
|
||||||
}
|
/* Override teal for better contrast in dark mode */
|
||||||
|
--teal-base: 192, 44%, 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
font-family: var(--font-poppins), sans-serif;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
pre {
|
||||||
|
font-family: var(--font-mono), monospace;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,43 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Poppins, JetBrains_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { ThemeProvider } from "@/components/ThemeProvider";
|
||||||
|
import ThemeToggle from "@/components/ThemeProvider/ThemeToggle";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const poppins = Poppins({
|
||||||
variable: "--font-geist-sans",
|
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
variable: "--font-poppins",
|
||||||
|
display: "swap",
|
||||||
});
|
});
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
const jetbrainsMono = JetBrains_Mono({
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
variable: "--font-mono",
|
||||||
|
display: "swap",
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "Craft & Harvest",
|
||||||
description: "Generated by create next app",
|
description: "Local candle making supplies in Colorado",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html
|
||||||
<body
|
lang="en"
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
suppressHydrationWarning
|
||||||
|
className={`${poppins.variable} ${jetbrainsMono.variable}`}
|
||||||
>
|
>
|
||||||
|
<body className={poppins.className}>
|
||||||
|
<ThemeProvider>
|
||||||
|
<ThemeToggle />
|
||||||
{children}
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
102
src/app/page.tsx
102
src/app/page.tsx
|
|
@ -1,103 +1,5 @@
|
||||||
import Image from "next/image";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
redirect("/login");
|
||||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
|
||||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
|
||||||
width={180}
|
|
||||||
height={38}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
|
||||||
<li className="mb-2 tracking-[-.01em]">
|
|
||||||
Get started by editing{" "}
|
|
||||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
|
||||||
src/app/page.tsx
|
|
||||||
</code>
|
|
||||||
.
|
|
||||||
</li>
|
|
||||||
<li className="tracking-[-.01em]">
|
|
||||||
Save and see your changes instantly.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
Deploy now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
|
||||||
alt="File icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Go to nextjs.org →
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTheme } from ".";
|
||||||
|
import { useState, useRef, useEffect } from "react";
|
||||||
|
|
||||||
|
export default function ThemeToggle() {
|
||||||
|
const { theme, setTheme } = useTheme();
|
||||||
|
const [position, setPosition] = useState({ x: 20, y: 20 });
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||||
|
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
const DRAG_THRESHOLD = 5; // pixels - minimum movement to be considered a drag
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const snapToEdge = (x: number, y: number) => {
|
||||||
|
const padding = 20;
|
||||||
|
const buttonSize = 56;
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
let newX = x;
|
||||||
|
let newY = y;
|
||||||
|
|
||||||
|
// Snap to horizontal edges
|
||||||
|
if (x < windowWidth / 2) {
|
||||||
|
newX = padding;
|
||||||
|
} else {
|
||||||
|
newX = windowWidth - buttonSize - padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keep within vertical bounds
|
||||||
|
newY = Math.max(padding, Math.min(y, windowHeight - buttonSize - padding));
|
||||||
|
|
||||||
|
return { x: newX, y: newY };
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (e: React.MouseEvent) => {
|
||||||
|
if (!buttonRef.current) return;
|
||||||
|
|
||||||
|
setIsDragging(true);
|
||||||
|
setDragStart({ x: e.clientX, y: e.clientY });
|
||||||
|
const rect = buttonRef.current.getBoundingClientRect();
|
||||||
|
setDragOffset({
|
||||||
|
x: e.clientX - rect.left,
|
||||||
|
y: e.clientY - rect.top,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchStart = (e: React.TouchEvent) => {
|
||||||
|
if (!buttonRef.current) return;
|
||||||
|
|
||||||
|
const touch = e.touches[0];
|
||||||
|
setIsDragging(true);
|
||||||
|
setDragStart({ x: touch.clientX, y: touch.clientY });
|
||||||
|
const rect = buttonRef.current.getBoundingClientRect();
|
||||||
|
setDragOffset({
|
||||||
|
x: touch.clientX - rect.left,
|
||||||
|
y: touch.clientY - rect.top,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent) => {
|
||||||
|
// Check if we actually dragged by measuring distance from start
|
||||||
|
const distanceMoved = Math.sqrt(
|
||||||
|
Math.pow(e.clientX - dragStart.x, 2) +
|
||||||
|
Math.pow(e.clientY - dragStart.y, 2)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only prevent click if we moved more than threshold
|
||||||
|
if (distanceMoved > DRAG_THRESHOLD) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
} else {
|
||||||
|
// It's a click, toggle theme
|
||||||
|
const newTheme = theme === "light" ? "dark" : "light";
|
||||||
|
setTheme(newTheme);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleMove = (clientX: number, clientY: number) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
|
||||||
|
const newX = clientX - dragOffset.x;
|
||||||
|
const newY = clientY - dragOffset.y;
|
||||||
|
|
||||||
|
setPosition({ x: newX, y: newY });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
handleMove(e.clientX, e.clientY);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchMove = (e: TouchEvent) => {
|
||||||
|
if (e.touches.length > 0) {
|
||||||
|
handleMove(e.touches[0].clientX, e.touches[0].clientY);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnd = () => {
|
||||||
|
if (isDragging) {
|
||||||
|
setIsDragging(false);
|
||||||
|
setPosition((prev) => snapToEdge(prev.x, prev.y));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isDragging) {
|
||||||
|
window.addEventListener("mousemove", handleMouseMove);
|
||||||
|
window.addEventListener("touchmove", handleTouchMove);
|
||||||
|
window.addEventListener("mouseup", handleEnd);
|
||||||
|
window.addEventListener("touchend", handleEnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("mousemove", handleMouseMove);
|
||||||
|
window.removeEventListener("touchmove", handleTouchMove);
|
||||||
|
window.removeEventListener("mouseup", handleEnd);
|
||||||
|
window.removeEventListener("touchend", handleEnd);
|
||||||
|
};
|
||||||
|
}, [isDragging, dragOffset]);
|
||||||
|
|
||||||
|
// Don't render until mounted
|
||||||
|
if (!mounted) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
ref={buttonRef}
|
||||||
|
onClick={handleClick}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
onTouchStart={handleTouchStart}
|
||||||
|
className="fixed z-50 w-14 h-14 rounded-full shadow-lg flex items-center justify-center text-2xl cursor-move select-none"
|
||||||
|
style={{
|
||||||
|
left: `${position.x}px`,
|
||||||
|
top: `${position.y}px`,
|
||||||
|
backgroundColor: "var(--brown)",
|
||||||
|
transition: isDragging
|
||||||
|
? "none"
|
||||||
|
: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
||||||
|
transform: isDragging ? "scale(1.1)" : "scale(1)",
|
||||||
|
touchAction: "none",
|
||||||
|
}}
|
||||||
|
title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
|
||||||
|
>
|
||||||
|
{theme === "light" ? "🌙" : "☀️"}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
import { useTheme as useNextTheme } from "next-themes";
|
||||||
|
|
||||||
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<NextThemesProvider
|
||||||
|
attribute="data-theme"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</NextThemesProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTheme() {
|
||||||
|
return useNextTheme();
|
||||||
|
}
|
||||||
|
|
@ -19,7 +19,8 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"],
|
||||||
|
"@components/*": ["./src/components/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
|
|
||||||
Reference in New Issue