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"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "15.5.6",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"next": "15.5.6"
|
||||
"react-dom": "19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4",
|
||||
"eslint": "^9",
|
||||
"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";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* Background */
|
||||
--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 {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: var(--font-poppins);
|
||||
--font-mono: var(--font-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--background: hsl(192, 44%, 12%);
|
||||
--foreground-base: 28, 42%, 85%;
|
||||
|
||||
/* Override teal for better contrast in dark mode */
|
||||
--teal-base: 192, 44%, 75%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-poppins), sans-serif;
|
||||
background: var(--background);
|
||||
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 { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Poppins, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/components/ThemeProvider";
|
||||
import ThemeToggle from "@/components/ThemeProvider/ThemeToggle";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const poppins = Poppins({
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
subsets: ["latin"],
|
||||
variable: "--font-poppins",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Craft & Harvest",
|
||||
description: "Local candle making supplies in Colorado",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
<html
|
||||
lang="en"
|
||||
suppressHydrationWarning
|
||||
className={`${poppins.variable} ${jetbrainsMono.variable}`}
|
||||
>
|
||||
<body className={poppins.className}>
|
||||
<ThemeProvider>
|
||||
<ThemeToggle />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</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() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
redirect("/login");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": ["./src/*"],
|
||||
"@components/*": ["./src/components/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
|
|
|
|||
Reference in New Issue