import { Form, FormField } from '@/components/form'; import HeadingSmall from '@/components/heading-small'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import { type BreadcrumbItem } from '@/types'; import { Head, router } from '@inertiajs/react'; import { Save, Trash2 } from 'lucide-react'; import { type ReactNode, useMemo, useState } from 'react'; interface LoginSettings { tenant_login_layout?: string; login_banner?: string | null; login_title?: string; login_subtitle?: string; social_login_enabled?: boolean; terms_url?: string; privacy_url?: string; } interface Props { login: LoginSettings; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Home', href: '/' }, { title: 'Settings', href: route('settings.company.edit') }, { title: 'Login Page', href: '#' }, ]; export default function LoginPage({ login }: Props) { const [deletingBanner, setDeletingBanner] = useState(false); const defaultValues = useMemo( () => ({ tenant_login_layout: login?.tenant_login_layout || 'layout1', login_banner: login?.login_banner || '', login_title: login?.login_title || 'Welcome back', login_subtitle: login?.login_subtitle || 'Enter your email and password to sign in to your account', social_login_enabled: login?.social_login_enabled ?? false, terms_url: login?.terms_url || '', privacy_url: login?.privacy_url || '', }), [login], ); const handleSubmit = (data: any) => { const payload: any = { ...data }; if (!(payload.login_banner instanceof File)) delete payload.login_banner; router.post(route('settings.login-page.save'), payload, { forceFormData: true, preserveScroll: true, onSuccess: () => { try { localStorage.removeItem('personalizer_settings'); } catch {} fetch('/api/personalizer/resolved', { headers: { Accept: 'application/json' }, cache: 'no-cache' }) .then((res) => (res.ok ? res.json() : null)) .catch(() => {}); }, }); }; const handleDeleteBanner = () => { if (!confirm('Delete the login banner?')) return; setDeletingBanner(true); router.delete(route('settings.login-page.file.delete', { key: 'login_banner' }), { preserveScroll: true, onFinish: () => setDeletingBanner(false), }); }; return ( <>
{/* Layout */}

Layout Template

{/* Banner */}

Banner Image

Login Banner

Recommended: 800×1200px

{login?.login_banner && ( )}
{/* Content */}

Page Content

{/* Legal Links */}

Legal Links

{/* Options */}

Options
); } LoginPage.layout = (page: ReactNode) => ( {page} );