Giriş düzeni

06 · Düzen

Giriş, kayıt, şifre sıfırlama ve iki adımlı doğrulama sayfalarının düzeni. İki türü vardır: solda illüstrasyon ve sağda form (cover) ya da ortada tek kart (basic).

acun:layout.auth

→ Giriş düzenini tam sayfa aç 01 Basic türünü tam sayfa aç

Kapak türü

Varsayılan tür cover: geniş ekranda sol üçte ikide illüstrasyon, sağda form sütunu; lg altında yalnızca form kalır. logo slot'u verilirse sol üst köşede home-url bağlantısıyla gösterilir.

BLADE

<acun:layout.auth title="Giriş">
    <acun:slot:head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </acun:slot:head>

    <acun:slot:logo><img src="/logo.svg" alt="Acun Panel" class="h-8 w-auto"></acun:slot:logo>

    <acun:auth-header title="Hoş geldiniz" description="Devam etmek için hesabınıza giriş yapın." />
    <acun:auth-session-status class="mt-4" :status="session('status')" />

    <form wire:submit="login" class="mt-6 space-y-4">
        <acun:input wire:model="email" type="email" variant="floating" label="E-posta" />
        <acun:input wire:model="password" type="password" variant="floating" label="Şifre" viewable />
        <acun:checkbox wire:model="remember" label="Beni hatırla" />
        <acun:button type="submit" class="w-full">Giriş Yap</acun:button>
    </form>
</acun:layout.auth>

Prop	Değerler
`variant`	cover \| basic
`home-url`	Logonun bağlantısı; verilmezse url('/')

Ortalanmış kart

variant="basic" formu noktalı bir arka plan üzerinde ortalanmış tek bir kartta gösterir. Bu türde logo verilmezse kartın üstünde uygulamanın adı yazılır. Kısa formlar (şifremi unuttum, doğrulama kodu) için uygundur.

BLADE

<acun:layout.auth variant="basic" title="Şifremi unuttum">
    <acun:auth-header title="Şifremi unuttum" description="Kayıtlı e-posta adresinizi yazın; şifre sıfırlama bağlantısı gönderilecek." />

    <form wire:submit="baglantiGonder" class="mt-6 space-y-4">
        <acun:input wire:model="email" type="email" label="E-posta" />
        <acun:button type="submit" class="w-full">Bağlantı gönder</acun:button>
    </form>
</acun:layout.auth>

Prop	Değerler
`variant`	cover \| basic

Başlık ve durum mesajı

Form sütununun başına acun:auth-header ile başlık ve kısa açıklama koyun. acun:auth-session-status bir işlemin sonucunu (ör. "bağlantı gönderildi") yeşil metinle gösterir; status boşsa hiçbir şey çizmez, bu yüzden session('status') doğrudan verilebilir.

CANLI ÖRNEK

<acun:auth-header title="Şifremi unuttum" description="Kayıtlı e-posta adresinizi yazın; şifre sıfırlama bağlantısı gönderilecek." />
<acun:auth-session-status class="mt-4" status="Sıfırlama bağlantısı e-posta adresinize gönderildi." />

Prop	Değerler
`auth-header: title, description`	Başlık ve altındaki açıklama (ikisi de zorunlu)
`auth-session-status: status`	Gösterilecek mesaj; boşsa çizilmez

İllüstrasyon ve renkler

Kapak türünde soldaki çizimi illustration slot'uyla değiştirin; bu alan ekran okuyuculardan gizlidir, görsele boş alt verin. Giriş sayfasında kullanıcı henüz bilinmediği için theme ve brand-color genellikle sabit verilir ya da boş bırakılıp tarayıcıdaki tercihe bırakılır.

BLADE

<acun:layout.auth brand-color="green" theme="light">
    <acun:slot:illustration>
        <img src="{{ asset('images/giris.svg') }}" alt="" class="w-full max-w-xl">
    </acun:slot:illustration>

    …
</acun:layout.auth>

Prop	Değerler
`theme`	light \| dark \| system
`brand-color`	default \| green \| red \| yellow \| blue \| gray \| dark \| #rrggbb

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`variant`	`cover`	cover (illüstrasyon + form) · basic (ortada kart)
`title`	`null`	Sekme başlığı; verilmezse uygulama adı
`home-url`	`url('/')`	Logonun bağlantısı
`theme`	`null`	light · dark · system; null ise tarayıcıdaki tercih
`brand-color`	`null`	default · green · red · yellow · blue · gray · dark · #rrggbb
`auth-header: title, description`	—	Form başlığı ve açıklaması (zorunlu)
`auth-session-status: status`	—	Durum mesajı; boşsa çizilmez

Slot'lar: head, logo, illustration (yalnızca cover), varsayılan (form içeriği)