{children}
diff --git a/src/app/page.js b/src/app/page.js
index eb5f3bb..917d804 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,20 +1,30 @@
'use client';
import { useState, useEffect } from 'react';
+import { Fingerprint } from 'lucide-react';
import { useRouter } from 'next/navigation';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
-export default function LoginPage() {
+export default function EntryPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
+ const [showSplash, setShowSplash] = useState(true);
+ const [isFocused, setIsFocused] = useState(false);
+
const router = useRouter();
useEffect(() => {
- const token = localStorage.getItem('token');
- if (token) {
- router.push('/dashboard');
- }
+ const checkAuth = async () => {
+ const token = localStorage.getItem('token');
+ await new Promise(resolve => setTimeout(resolve, 2500));
+ if (token) {
+ router.push('/dashboard');
+ } else {
+ setShowSplash(false);
+ }
+ };
+ checkAuth();
}, [router]);
const handleLogin = async (e) => {
@@ -28,7 +38,6 @@ export default function LoginPage() {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
-
const data = await res.json();
if (res.ok) {
@@ -46,71 +55,223 @@ export default function LoginPage() {
};
return (
-
+
+
+
+ );
+ }
+
+ // Inner pages (showBack = true)
return (
-
{/* Decorative Blur Backgrounds */}
-
-
+
+
-
-
- {error}
+
+ {showSplash ? (
+
+
+
+ 
+
+
+
+ انبارگردانی هوشمند
+
+
+
+ مدیریت حرفهای انبار و قفسهها
+
+
+
+
+
+
+
+ ) : (
+
+ {/* Top Area: Logo & Welcome (Shrinks when focused to make room for keyboard) */}
+
+
+
+ {/* Bottom Area: Bottom Sheet Form */}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
)}
-
-
-
+
);
}
diff --git a/src/app/settings/page.js b/src/app/settings/page.js
new file mode 100644
index 0000000..7e6ce66
--- /dev/null
+++ b/src/app/settings/page.js
@@ -0,0 +1,258 @@
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import Header from '@/components/Header';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Fingerprint, Lock, User, Save, Camera } from 'lucide-react';
+import { startRegistration } from '@simplewebauthn/browser';
+
+export default function SettingsPage() {
+ const [user, setUser] = useState(null);
+ const [name, setName] = useState('');
+ const [password, setPassword] = useState('');
+ const [avatarBase64, setAvatarBase64] = useState(null);
+ const [biometricEnabled, setBiometricEnabled] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [message, setMessage] = useState('');
+ const [isError, setIsError] = useState(false);
+ const fileInputRef = useRef(null);
+
+ useEffect(() => {
+ const userData = localStorage.getItem('user');
+ if (userData) {
+ const parsedUser = JSON.parse(userData);
+ setUser(parsedUser);
+ setName(parsedUser.name || '');
+ }
+ const bio = localStorage.getItem('biometric_enabled');
+ if (bio === 'true') setBiometricEnabled(true);
+ }, []);
+
+ const showToast = (msg, error = false) => {
+ setMessage(msg);
+ setIsError(error);
+ setTimeout(() => setMessage(''), 4000);
+ };
+
+ const handleBiometricToggle = async () => {
+ if (biometricEnabled) {
+ setBiometricEnabled(false);
+ localStorage.setItem('biometric_enabled', 'false');
+ showToast('ورود با اثر انگشت غیرفعال شد');
+ return;
+ }
+
+ try {
+ showToast('در حال آمادهسازی سنسور...', false);
+ const res = await fetch('/api/auth/webauthn/register/generate-options', {
+ headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+ });
+ const options = await res.json();
+
+ if (options.error) throw new Error(options.error);
+
+ // Trigger native biometric prompt
+ const attResp = await startRegistration(options);
+
+ const verificationRes = await fetch('/api/auth/webauthn/register/verify', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ },
+ body: JSON.stringify(attResp),
+ });
+
+ const verification = await verificationRes.json();
+ if (verification.verified) {
+ setBiometricEnabled(true);
+ localStorage.setItem('biometric_enabled', 'true');
+ showToast('اثر انگشت با موفقیت فعال شد');
+ } else {
+ throw new Error('Verification failed');
+ }
+ } catch (error) {
+ console.error(error);
+ showToast('خطا در فعالسازی یا لغو توسط کاربر', true);
+ }
+ };
+
+ const handleFileChange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onloadend = () => setAvatarBase64(reader.result);
+ reader.readAsDataURL(file);
+ }
+ };
+
+ const handleSave = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch('/api/user/settings', {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ },
+ body: JSON.stringify({
+ name,
+ password: password ? password : undefined,
+ avatarUrl: avatarBase64 ? avatarBase64 : undefined
+ })
+ });
+ const data = await res.json();
+ if (res.ok) {
+ localStorage.setItem('user', JSON.stringify(data.user));
+ setUser(data.user);
+ setPassword('');
+ showToast('تغییرات شما با موفقیت ذخیره شد.');
+ } else {
+ showToast(data.error || 'خطا در ذخیره تغییرات', true);
+ }
+ } catch (err) {
+ showToast('خطا در ارتباط با سرور', true);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const container = {
+ hidden: { opacity: 0 },
+ show: { opacity: 1, transition: { staggerChildren: 0.1 } }
+ };
+ const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 } };
+
+ return (
+
-
-
- {error && (
-
- P
-
- پردیس رایانه
-اپلیکیشن مدیریت انبار
-
+
+
+ H U K A
+
+ طراحی توسط هوکا
+
+
+
+
+
+ + خوش آمدید +
++ لطفاً برای ادامه وارد حساب خود شوید +
+
+
+
+ {/* iOS style bottom home indicator placeholder */}
+
+ طراحی توسط هوکا
+ |
+ DESIGNED BY HUKA
+
+
+
+
+ رمز عبور پیشفرض: 123456
-
+
+ {message && (
+
+ {message}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index 1a834e7..c6f206b 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,11 +3,10 @@ import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { motion } from 'framer-motion';
-import { LogOut, ChevronRight, Wifi, WifiOff } from 'lucide-react';
+import { LogOut, ChevronRight, Settings } from 'lucide-react';
export default function Header({ title = 'داشبورد', showBack = false }) {
const [user, setUser] = useState(null);
- const [isOnline, setIsOnline] = useState(true);
const router = useRouter();
useEffect(() => {
@@ -17,19 +16,6 @@ export default function Header({ title = 'داشبورد', showBack = false }) {
} else {
router.push('/');
}
-
- setIsOnline(navigator.onLine);
-
- const handleOnline = () => setIsOnline(true);
- const handleOffline = () => setIsOnline(false);
-
- window.addEventListener('online', handleOnline);
- window.addEventListener('offline', handleOffline);
-
- return () => {
- window.removeEventListener('online', handleOnline);
- window.removeEventListener('offline', handleOffline);
- };
}, [router]);
const handleLogout = () => {
@@ -38,41 +24,79 @@ export default function Header({ title = 'داشبورد', showBack = false }) {
router.push('/');
};
+ const getInitial = (name) => {
+ if (!name) return 'U';
+ return name.charAt(0);
+ };
+
+ if (!showBack) {
+ // Style 4: Modern Floating Island (Pill) Design
+ return (
+
+
+
+
+ 
+
+
+
+
+
+ {user?.name || 'کاربر'}
+{user?.role === 'ADMIN' ? 'مدیریت کل' : 'کاربر عادی'}
+مشخصات کاربری
+ +
+
+
+
+
+
+
+
+
+
+
+
+ setName(e.target.value)}
+ className="bg-transparent border-none text-sm font-bold text-gray-800 outline-none w-full"
+ placeholder="نام شما"
+ />
+
+
+
+
+
+
+
+
+ setPassword(e.target.value)}
+ className="bg-transparent border-none text-sm font-bold text-gray-800 outline-none w-full placeholder-gray-300"
+ placeholder="••••••••"
+ />
+
+ امنیت
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ورود با اثر انگشت
+ Face ID / Touch ID
+
+
+ {user?.avatarUrl ? (
+ 
+ ) : (
+ getInitial(user?.name)
+ )}
+
+
+ پردیس رایانه
+
+ {user?.name || 'کاربر'}
+
+
+
+
+
+ {user?.role === 'ADMIN' && (
+
+
+
- {showBack ? (
-
- ) : (
-
- )}
-
+
-
+
{title}
-
- {children} ;
+}
- {user?.name || 'کاربر'}
- {user?.role === 'ADMIN' && مدیریت قفسهها}
-
-
- {isOnline ? (
-
+
+ {/* Decorative dot for symmetry */}
+
);
diff --git a/src/components/ThemeProvider.js b/src/components/ThemeProvider.js
new file mode 100644
index 0000000..a04c2d3
--- /dev/null
+++ b/src/components/ThemeProvider.js
@@ -0,0 +1,6 @@
+'use client';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({ children }) {
+ return