Add separate CP admin panel at cp.hotelsync.ru
- CpLoginPage: dark themed login page with email/password auth, only for cp subdomain - CpLayout: separate dark sidebar layout with Shield icon, nav for Обзор/Отели/Пользователи/Тарифы/Мониторинг/Настройки - App.tsx: detect hostname — cp.hotelsync.ru renders CP app, app.hotelsync.ru renders PMS (no /admin route) - CpGuard: protects CP routes, redirects to /login if not authenticated - Admin panel completely removed from app.hotelsync.ru Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
144
src/pages/CpLoginPage.tsx
Normal file
144
src/pages/CpLoginPage.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { useState, FormEvent } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Eye, EyeOff, Shield, AlertCircle } from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
const ADMIN_EMAIL = 'admin@hotelsync.io'
|
||||
const ADMIN_PASSWORD = 'demo'
|
||||
|
||||
export function CpLoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPass, setShowPass] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
await new Promise(r => setTimeout(r, 600))
|
||||
|
||||
if (email.trim() === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
|
||||
localStorage.setItem('cpAuth', JSON.stringify({ email, ts: Date.now() }))
|
||||
navigate('/', { replace: true })
|
||||
} else {
|
||||
setError('Неверный email или пароль')
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
|
||||
{/* Subtle grid background */}
|
||||
<div
|
||||
className="fixed inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative w-full max-w-sm">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-brand-600 mb-4">
|
||||
<Shield size={26} className="text-white" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-white tracking-tight">HotelSync</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Control Panel · Только для команды</p>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wide">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
className={cn(
|
||||
'w-full px-4 py-2.5 rounded-xl text-sm bg-slate-800 border text-slate-100 placeholder-slate-600',
|
||||
'focus:outline-none focus:ring-2 focus:ring-brand-500 transition-colors',
|
||||
error ? 'border-red-500/60' : 'border-slate-700',
|
||||
)}
|
||||
placeholder="admin@hotelsync.io"
|
||||
value={email}
|
||||
onChange={e => { setEmail(e.target.value); setError('') }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wide">
|
||||
Пароль
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'}
|
||||
autoComplete="current-password"
|
||||
className={cn(
|
||||
'w-full px-4 py-2.5 pr-10 rounded-xl text-sm bg-slate-800 border text-slate-100 placeholder-slate-600',
|
||||
'focus:outline-none focus:ring-2 focus:ring-brand-500 transition-colors',
|
||||
error ? 'border-red-500/60' : 'border-slate-700',
|
||||
)}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={e => { setPassword(e.target.value); setError('') }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"
|
||||
>
|
||||
{showPass ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/20">
|
||||
<AlertCircle size={14} className="text-red-400 shrink-0" />
|
||||
<p className="text-xs text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !email || !password}
|
||||
className={cn(
|
||||
'w-full py-2.5 rounded-xl text-sm font-semibold transition-all mt-2',
|
||||
loading || !email || !password
|
||||
? 'bg-slate-700 text-slate-500 cursor-not-allowed'
|
||||
: 'bg-brand-600 hover:bg-brand-500 text-white shadow-lg shadow-brand-900/40',
|
||||
)}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
|
||||
</svg>
|
||||
Вход...
|
||||
</span>
|
||||
) : 'Войти'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-slate-700 mt-6">
|
||||
Доступ только для сотрудников HotelSync Inc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user