amer2004/SweetHome
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixd larg lines in HomePage , add cookies rather than localStorage,make canvas background Login page

Browse Source
This commit is contained in:
hamzaobed7
2026-08-04 12:51:47 +03:00
parent 4ebb75ddd9
commit 7973c15e3f
51 changed files with 1460 additions and 2563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
app/login/page.js
View File

@ -6,33 +6,10 @@ import { motion, AnimatePresence } from "framer-motion";
import toast, { Toaster } from "react-hot-toast";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
Mail,
Lock,
Eye,
EyeOff,
ArrowLeft,
LogIn,
CheckCircle,
Loader2,
Home,
Shield,
Phone,
KeyRound,
} from "lucide-react";
import {
loginWithEmail,
loginWithPhone,
sendEmailOTP,
sendPhoneOTP,
verifyEmail,
verifyPhone,
isEmail,
isPhoneNumber,
getOwnerByUserId,
getCustomerByUserId,
} from "../utils/api";
import { Mail, Lock, Eye, EyeOff, ArrowLeft, LogIn, CheckCircle, Loader2, Home, Shield, Phone, KeyRound } from "lucide-react";
import { loginWithEmail, loginWithPhone, sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone, getOwnerByUserId, getCustomerByUserId } from "../utils/api";
import AuthService from "../services/AuthService";
import Background from "../components/Background";
export default function LoginPage() {
const router = useRouter();
@ -57,12 +34,8 @@ export default function LoginPage() {
const validateForm = () => {
const newErrors = {};
if (!formData.credential) {
newErrors.credential =
loginMethod === "email"
? t("emailRequired")
: t("phoneRequired");
newErrors.credential = loginMethod === "email" ? t("emailRequired") : t("phoneRequired");
// } else if (loginMethod === 'email' && !isEmail(formData.credential)) {
// newErrors.credential = 'البريد الإلكتروني غير صالح';
// } else if (loginMethod === 'phone' && !isPhoneNumber(formData.credential)) {
@ -90,10 +63,7 @@ export default function LoginPage() {
const result = await loginFn(formData.credential, formData.password);
if (result.status === 200) {
const token =
typeof result.data === "string"
? result.data
: result.data?.token || result.data?.accessToken;
const token = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
AuthService.addToken(token);
// Fetch user profile to get full name
@ -105,10 +75,7 @@ export default function LoginPage() {
const profile = await fetchFn(authUser.id);
if (profile) {
AuthService.cacheUser({
name:
profile.fullName ||
profile.name ||
`${profile.firstName || ""} ${profile.lastName || ""}`.trim(),
name: profile.fullName || profile.name || `${profile.firstName || ""} ${profile.lastName || ""}`.trim(),
email: profile.email || authUser.email,
phone: profile.phone || profile.phoneNumber || authUser.phone,
});
@ -129,10 +96,7 @@ export default function LoginPage() {
router.push("/");
}, 1500);
} else if (result.status === 206) {
const tempToken =
typeof result.data === "string"
? result.data
: result.data?.token || result.data?.accessToken;
const tempToken = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
if (tempToken) {
AuthService.addToken(tempToken);
}
@ -169,12 +133,9 @@ export default function LoginPage() {
});
} else {
console.error("[Login] Unexpected status:", result.status, result.data);
toast.error(
result.data?.message || result.data || t("invalidCredentials"),
{
style: { background: "#fee2e2", color: "#991b1b" },
},
);
toast.error(result.data?.message || result.data || t("invalidCredentials"), {
style: { background: "#fee2e2", color: "#991b1b" },
});
}
} catch (err) {
console.error("[Login] Error:", err);
@ -202,10 +163,7 @@ export default function LoginPage() {
const result = await verifyFn(otpCode);
if (result.ok) {
const finalToken =
typeof result.data === "string"
? result.data
: result.data?.token || result.data?.accessToken;
const finalToken = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
if (finalToken && typeof finalToken === "string") {
AuthService.addToken(finalToken);
}
@ -286,9 +244,9 @@ export default function LoginPage() {
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
<div className="min-h-screen bg-gradient-to-br flex items-center justify-center p-4 relative overflow-hidden">
<Toaster position="top-center" reverseOrder={false} />
<Background />
{/* Particles */}
<div className="absolute inset-0 overflow-hidden">
{particles.map((p) => (
@ -328,82 +286,40 @@ export default function LoginPage() {
transition={{ duration: 15, repeat: Infinity }}
/>
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="relative w-full max-w-md z-10"
>
<motion.div variants={containerVariants} initial="hidden" animate="visible" className="relative w-full max-w-md z-10">
{/* Back link */}
<motion.div variants={itemVariants} className="absolute -top-16 left-0">
<Link
href="/"
className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
>
<motion.div
whileHover={{ x: -5 }}
transition={{ type: "spring", stiffness: 400 }}
>
<Link href="/" className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
<motion.div whileHover={{ x: -5 }} transition={{ type: "spring", stiffness: 400 }}>
<ArrowLeft className="w-4 h-4" />
</motion.div>
<span>{t("backToHome")}</span>
</Link>
</motion.div>
<motion.div
variants={itemVariants}
className="bg-white/10 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden"
>
<motion.div variants={itemVariants} className="bg-white/10 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
{/* Header */}
<div className="bg-gradient-to-r from-amber-500 to-amber-600 p-8 text-center relative overflow-hidden">
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 0.2, type: "spring" }}
className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full"
/>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 0.3, type: "spring" }}
className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full"
/>
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring" }} className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full" />
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2 }}
className="relative z-10"
>
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="relative z-10">
<motion.div
animate={{ rotate: [0, 10, -10, 0] }}
transition={{ duration: 2, repeat: Infinity }}
className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
>
{step === "otp" ? (
<KeyRound className="w-10 h-10 text-white" />
) : (
<Home className="w-10 h-10 text-white" />
)}
{step === "otp" ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
</motion.div>
<h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
<p className="text-amber-100">
{step === "otp" ? t("enterOTP") : t("welcomeBack")}
</p>
<p className="text-amber-100">{step === "otp" ? t("enterOTP") : t("welcomeBack")}</p>
</motion.div>
</div>
<div className="p-8">
<AnimatePresence mode="wait">
{step === "login" ? (
<motion.form
key="login"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
onSubmit={handleLogin}
className="space-y-6"
>
<motion.form key="login" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} onSubmit={handleLogin} className="space-y-6">
{/* Login method tabs */}
<div className="flex gap-2 bg-white/5 p-1 rounded-xl">
<button
@ -413,9 +329,7 @@ export default function LoginPage() {
setFormData({ ...formData, credential: "" });
}}
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
loginMethod === "email"
? "bg-amber-500 text-white shadow-lg"
: "text-gray-400 hover:text-white"
loginMethod === "email" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
}`}
>
<Mail className="w-4 h-4" />
@ -428,9 +342,7 @@ export default function LoginPage() {
setFormData({ ...formData, credential: "" });
}}
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
loginMethod === "phone"
? "bg-amber-500 text-white shadow-lg"
: "text-gray-400 hover:text-white"
loginMethod === "phone" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
}`}
>
<Phone className="w-4 h-4" />
@ -440,21 +352,13 @@ export default function LoginPage() {
{/* Credential input */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
{loginMethod === "email"
? t("emailLabel")
: t("phoneLabel")}
</label>
<label className="block text-sm font-medium text-gray-300 mb-2">{loginMethod === "email" ? t("emailLabel") : t("phoneLabel")}</label>
<div className="relative group">
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
{loginMethod === "email" ? (
<Mail
className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`}
/>
<Mail className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
) : (
<Phone
className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`}
/>
<Phone className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
)}
</div>
<input
@ -462,25 +366,15 @@ export default function LoginPage() {
// type={loginMethod === 'email' ? 'email' : 'tel'}
value={formData.credential}
onChange={(e) => handleCredentialChange(e.target.value)}
className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
errors.credential
? "border-red-500"
: "border-gray-700"
className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
errors.credential ? "border-red-500" : "border-gray-700"
}`}
placeholder={
loginMethod === "email"
? t("emailPlaceholder")
: t("phonePlaceholder")
}
placeholder={loginMethod === "email" ? t("emailPlaceholder") : t("phonePlaceholder")}
dir="ltr"
/>
</div>
{errors.credential && (
<motion.p
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="text-red-500 text-sm mt-1"
>
<motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
{errors.credential}
</motion.p>
)}
@ -488,14 +382,10 @@ export default function LoginPage() {
{/* Password */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
{t("password")}
</label>
<label className="block text-sm font-medium text-gray-300 mb-2">{t("password")}</label>
<div className="relative group">
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<Lock
className={`w-5 h-5 transition-colors ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`}
/>
<Lock className={`w-5 h-5 transition-colors ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
</div>
<input
type={showPassword ? "text" : "password"}
@ -505,19 +395,14 @@ export default function LoginPage() {
...formData,
password: e.target.value,
});
if (errors.password)
setErrors({ ...errors, password: null });
if (errors.password) setErrors({ ...errors, password: null });
}}
className={`w-full pr-12 pl-12 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
className={`w-full pr-12 pl-12 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
errors.password ? "border-red-500" : "border-gray-700"
}`}
placeholder={t("passwordPlaceholder")}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 left-0 pl-3 flex items-center"
>
<button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
{showPassword ? (
<EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />
) : (
@ -526,11 +411,7 @@ export default function LoginPage() {
</button>
</div>
{errors.password && (
<motion.p
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="text-red-500 text-sm mt-1"
>
<motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
{errors.password}
</motion.p>
)}
@ -550,14 +431,9 @@ export default function LoginPage() {
}
className="w-4 h-4 rounded border-gray-600 bg-white/5 text-amber-500 focus:ring-amber-500 focus:ring-offset-0"
/>
<span className="text-sm text-gray-400 group-hover:text-white transition-colors">
{t("rememberMe")}
</span>
<span className="text-sm text-gray-400 group-hover:text-white transition-colors">{t("rememberMe")}</span>
</label>
<Link
href="/forgot-password"
className="text-sm text-amber-400 hover:text-amber-300 transition-colors"
>
<Link href="/forgot-password" className="text-sm text-amber-400 hover:text-amber-300 transition-colors">
{t("forgotPassword")}
</Link>
</div>
@ -592,14 +468,7 @@ export default function LoginPage() {
</motion.form>
) : (
/* OTP Verification Step */
<motion.form
key="otp"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
onSubmit={handleVerifyOTP}
className="space-y-6"
>
<motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
<div className="text-center mb-4">
<Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
<p className="text-gray-300 text-sm">
@ -611,9 +480,7 @@ export default function LoginPage() {
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
{t("otpLabel")}
</label>
<label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
<input
type="text"
value={otpCode}
@ -629,11 +496,7 @@ export default function LoginPage() {
dir="ltr"
/>
{otpError && (
<motion.p
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="text-red-500 text-sm mt-1 text-center"
>
<motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
{otpError}
</motion.p>
)}
@ -678,11 +541,7 @@ export default function LoginPage() {
>
← {t("back")}
</button>
<button
type="button"
onClick={resendOTP}
className="text-amber-400 hover:text-amber-300 transition-colors"
>
<button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
{t("resendCode")}
</button>
</div>
@ -690,41 +549,26 @@ export default function LoginPage() {
)}
</AnimatePresence>
<motion.p
variants={itemVariants}
className="text-center text-gray-400 mt-6"
>
<motion.p variants={itemVariants} className="text-center text-gray-400 mt-6">
{t("noAccount")}{" "}
<Link
href="/auth/choose-role"
className="text-amber-400 hover:text-amber-300 font-medium transition-colors"
>
<Link href="/auth/choose-role" className="text-amber-400 hover:text-amber-300 font-medium transition-colors">
{t("createNewAccount")}
</Link>
</motion.p>
</div>
</motion.div>
<motion.p
variants={itemVariants}
className="text-center text-gray-500 text-xs mt-4"
>
<motion.p variants={itemVariants} className="text-center text-gray-500 text-xs mt-4">
{t("agreeTerms")}{" "}
<Link
href="/terms"
className="text-amber-400 hover:text-amber-300 transition-colors"
>
<Link href="/terms" className="text-amber-400 hover:text-amber-300 transition-colors">
{t("termsOfUse")}
</Link>{" "}
{t("and")}{" "}
<Link
href="/privacy"
className="text-amber-400 hover:text-amber-300 transition-colors"
>
<Link href="/privacy" className="text-amber-400 hover:text-amber-300 transition-colors">
{t("privacyPolicy")}
</Link>
</motion.p>
</motion.div>
</div>
);
}
}