root
419 lines
18 KiB
TypeScript
419 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { logoUrl } from '@/lib/assets';
|
|
import Navbar from '@/components/Navbar';
|
|
import Footer from '@/components/Footer';
|
|
import { useLanguage } from '@/lib/language-context';
|
|
import { getTranslation } from '@/lib/translations';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { User, Lock, MapPin, LogIn, Phone, MessageCircle } from 'lucide-react';
|
|
|
|
type LoginTab = 'customer' | 'staff';
|
|
|
|
function GoogleIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
fill="#4285F4"
|
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
|
|
/>
|
|
<path
|
|
fill="#34A853"
|
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
/>
|
|
<path
|
|
fill="#FBBC05"
|
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
/>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function LoginPageContent() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const { language } = useLanguage();
|
|
const t = getTranslation(language);
|
|
|
|
const initialTab = searchParams.get('tab') === 'staff' ? 'staff' : 'customer';
|
|
const [activeTab, setActiveTab] = useState<LoginTab>(initialTab);
|
|
const [formData, setFormData] = useState({ username: '', password: '', site: '' });
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
const [loginError, setLoginError] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [customerError, setCustomerError] = useState('');
|
|
|
|
useEffect(() => {
|
|
const tab = searchParams.get('tab');
|
|
if (tab === 'staff' || tab === 'customer') {
|
|
setActiveTab(tab);
|
|
}
|
|
|
|
const error = searchParams.get('error');
|
|
if (error) {
|
|
const errorMessages: Record<string, string> = {
|
|
google_not_configured: t.auth.customer.notConfigured,
|
|
google_denied: t.auth.customer.googleDenied,
|
|
google_failed: t.auth.customer.googleFailed,
|
|
invalid_state: t.auth.customer.googleFailed,
|
|
missing_code: t.auth.customer.googleFailed,
|
|
};
|
|
setCustomerError(errorMessages[error] ?? t.auth.customer.googleFailed);
|
|
setActiveTab('customer');
|
|
}
|
|
}, [searchParams, t.auth.customer]);
|
|
|
|
useEffect(() => {
|
|
const checkCustomerSession = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/customer/session', { cache: 'no-store' });
|
|
const data = (await response.json()) as { authenticated: boolean };
|
|
if (data.authenticated) {
|
|
router.replace('/account');
|
|
}
|
|
} catch {
|
|
// Stay on login page.
|
|
}
|
|
};
|
|
|
|
void checkCustomerSession();
|
|
}, [router]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleStaffSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLoginError('');
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: formData.username,
|
|
password: formData.password,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setLoginError(t.auth.accessDenied);
|
|
return;
|
|
}
|
|
|
|
if (formData.username.trim() === 'admin') {
|
|
setLoginError(t.auth.accessDenied);
|
|
return;
|
|
}
|
|
|
|
setIsSubmitted(true);
|
|
} catch {
|
|
setLoginError('Could not sign in right now. Please try again.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const resetStaffForm = () => {
|
|
setFormData({ username: '', password: '', site: '' });
|
|
setIsSubmitted(false);
|
|
setLoginError('');
|
|
};
|
|
|
|
const handleGoogleSignIn = () => {
|
|
setCustomerError('');
|
|
const returnTo = searchParams.get('returnTo');
|
|
const authUrl =
|
|
returnTo && returnTo.startsWith('/') && !returnTo.startsWith('//')
|
|
? `/api/auth/google?returnTo=${encodeURIComponent(returnTo)}`
|
|
: '/api/auth/google';
|
|
window.location.href = authUrl;
|
|
};
|
|
|
|
const panelTitle = activeTab === 'customer' ? t.auth.customer.title : t.auth.title;
|
|
const panelSubtitle = activeTab === 'customer' ? t.auth.customer.subtitle : t.auth.subtitle;
|
|
const panelBadge = activeTab === 'customer' ? t.auth.customer.badge : 'STAFF PORTAL';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
|
|
<Navbar />
|
|
|
|
<main className="pb-20">
|
|
<div className="max-w-5xl mx-auto px-6 text-center">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-[#B38B4D]/10 px-4 py-1 text-[#B38B4D] text-[10px] tracking-[3.5px] font-medium mb-3">
|
|
{panelBadge}
|
|
</div>
|
|
<h1 className="text-2xl sm:text-[1.75rem] md:text-3xl tracking-[-0.8px] leading-[1.15] mb-2 text-[#101724] break-words">
|
|
{panelTitle}
|
|
</h1>
|
|
<p className="mx-auto max-w-md text-sm md:text-[15px] text-[#6B665F] leading-relaxed">
|
|
{panelSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-5xl px-4 sm:px-6 mt-8 sm:mt-10">
|
|
<div className="grid items-start gap-8 md:grid-cols-5">
|
|
<div className="hidden md:col-span-2 md:block">
|
|
<div className="sticky top-[116px] flex h-[520px] flex-col justify-between overflow-hidden rounded-3xl border border-[#c99a2e]/20 bg-gradient-to-br from-[#101724] via-[#1a1816] to-[#2C2A26] p-10 text-white shadow-2xl">
|
|
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e] to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e]/50 to-transparent" />
|
|
|
|
<div>
|
|
<div className="mb-8 inline-flex h-16 w-16 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-white/5 p-3 backdrop-blur">
|
|
<img src={logoUrl()} alt="Shahi Kitchen" className="h-full w-full object-contain" />
|
|
</div>
|
|
<div className="font-serif text-[42px] leading-[0.95] tracking-[-1.8px]">
|
|
Shahi<br />Kitchen
|
|
</div>
|
|
<div className="mt-1 text-sm font-medium tracking-[2.5px] text-[#c99a2e]">
|
|
{activeTab === 'customer' ? 'CUSTOMER ACCESS' : 'STAFF ACCESS'}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="my-6 h-px w-10 bg-[#c99a2e]/40" />
|
|
<p className="max-w-[220px] text-sm leading-relaxed text-white/70">
|
|
Two locations serving Shahi Indian & Pakistani hospitality in Gothenburg since 2016.
|
|
</p>
|
|
<div className="mt-5 text-[10px] uppercase tracking-[2.5px] text-[#c99a2e]/60">
|
|
ASKIM • BACKAPLAN
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-3">
|
|
<div className="rounded-3xl border border-[#EDE6D9] bg-white p-5 sm:p-8 shadow-xl md:p-10">
|
|
<div className="mb-6 flex justify-center md:hidden">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-[#F8F5F0] p-2.5">
|
|
<img src={logoUrl()} alt="Shahi Kitchen" className="h-full w-full object-contain" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 sm:mb-8 flex rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] p-1">
|
|
{(['customer', 'staff'] as const).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
type="button"
|
|
onClick={() => {
|
|
setActiveTab(tab);
|
|
setCustomerError('');
|
|
setLoginError('');
|
|
}}
|
|
className={`flex-1 rounded-xl px-3 py-3.5 text-xs sm:text-sm font-semibold transition min-h-[44px] touch-manipulation ${
|
|
activeTab === tab
|
|
? 'bg-[#101724] text-white shadow-sm'
|
|
: 'text-[#6B665F] hover:text-[#101724]'
|
|
}`}
|
|
>
|
|
{t.auth.tabs[tab]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{activeTab === 'customer' ? (
|
|
<motion.div
|
|
key="customer-login"
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="text-center"
|
|
>
|
|
{customerError && (
|
|
<p className="mb-4 text-sm text-red-600" role="alert">
|
|
{customerError}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleGoogleSignIn}
|
|
className="flex w-full items-center justify-center gap-3 rounded-2xl border border-[#EDE6D9] bg-white px-5 py-4 text-base font-semibold text-[#101724] shadow-sm transition hover:border-[#c99a2e]/40 hover:bg-[#FFFCF7] active:scale-[0.985] min-h-[52px] touch-manipulation"
|
|
>
|
|
<GoogleIcon className="h-5 w-5" />
|
|
{t.auth.customer.signInWithGoogle}
|
|
</button>
|
|
|
|
<p className="mt-8 text-center text-[11px] tracking-wide text-[#8A8478]">
|
|
{t.auth.customer.footerNote}
|
|
</p>
|
|
</motion.div>
|
|
) : !isSubmitted ? (
|
|
<motion.div
|
|
key="staff-login-form"
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<form onSubmit={handleStaffSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="username" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.usernameLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<User className="absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
type="text"
|
|
value={formData.username}
|
|
onChange={handleChange}
|
|
placeholder={t.auth.usernamePlaceholder}
|
|
required
|
|
className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.passwordLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<Lock className="absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
placeholder={t.auth.passwordPlaceholder}
|
|
required
|
|
className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="site" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.siteLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<MapPin className="pointer-events-none absolute start-4 top-4 z-10 h-5 w-5 text-[#B38B4D]" />
|
|
<select
|
|
id="site"
|
|
name="site"
|
|
value={formData.site}
|
|
onChange={handleChange}
|
|
required
|
|
className="w-full cursor-pointer appearance-none rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-10 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
>
|
|
<option value="">{t.auth.sitePlaceholder}</option>
|
|
<option value="askim">{t.auth.askim}</option>
|
|
<option value="backaplan">{t.auth.backaplan}</option>
|
|
</select>
|
|
<div className="pointer-events-none absolute end-4 top-4 text-[#B38B4D]">▾</div>
|
|
</div>
|
|
<p className="mt-1.5 text-[11px] text-[#8A8478]">Select the location you are working at today.</p>
|
|
</div>
|
|
|
|
{loginError && (
|
|
<p className="text-sm text-red-600" role="alert">{loginError}</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="btn-primary mt-2 flex w-full items-center justify-center gap-3 rounded-2xl py-4 text-base font-semibold tracking-[0.5px] active:scale-[0.985] transition disabled:opacity-60"
|
|
>
|
|
<LogIn className="h-5 w-5" />
|
|
{isSubmitting ? t.auth.submitting : t.auth.submit}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-8 text-center text-[11px] tracking-wide text-[#8A8478]">
|
|
{t.auth.footerNote}
|
|
</p>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key="construction-result"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center"
|
|
>
|
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[#B38B4D]/10">
|
|
<LogIn className="h-8 w-8 text-[#B38B4D]" />
|
|
</div>
|
|
|
|
<h2 className="mb-3 font-serif text-3xl tracking-[-1px]">
|
|
{t.auth.construction.title}
|
|
</h2>
|
|
|
|
<p className="mx-auto max-w-md text-[15px] leading-relaxed text-[#6B665F]">
|
|
{t.auth.construction.message}
|
|
</p>
|
|
|
|
<div className="mt-8 space-y-3">
|
|
<a
|
|
href="tel:031288910"
|
|
className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
|
|
>
|
|
<Phone className="h-4 w-4" />
|
|
{t.auth.construction.contact} — 031-28 89 10
|
|
</a>
|
|
|
|
<a
|
|
href="https://wa.me/46739381089"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
|
|
>
|
|
<MessageCircle className="h-4 w-4" />
|
|
WhatsApp +46 73 938 10 89
|
|
</a>
|
|
|
|
<button
|
|
onClick={resetStaffForm}
|
|
className="mt-2 w-full rounded-2xl bg-[#101724] py-3.5 text-sm font-semibold text-white active:bg-black transition"
|
|
>
|
|
{t.auth.construction.tryAgain}
|
|
</button>
|
|
</div>
|
|
|
|
<p className="mt-6 text-[10px] text-[#8A8478]">
|
|
We appreciate your patience while we build a seamless experience.
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<p className="mt-5 text-center text-[10px] text-[#8A8478] tracking-[1px]">
|
|
SHAHI KITCHEN • GOTHENBURG • EST 2016
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="min-h-screen bg-[#F8F5F0] flex items-center justify-center text-[#6B665F]">
|
|
Loading…
|
|
</div>
|
|
}
|
|
>
|
|
<LoginPageContent />
|
|
</Suspense>
|
|
);
|
|
} |