Auth Layout

Auth Layout — оболочка экранов входа, регистрации и восстановления пароля: тёмный фон на всю высоту окна, по центру логотип над островом фиксированной ширины с формой, под островом подвал для ссылок и версии. Содержимое формы — поля и кнопки канона.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

Когда использовать

Вход, регистрация, восстановление пароля, подтверждение почты.

Не использовать:

Страницы внутри продукта — там каркас приложения с Sidebar и Header.

Альтернативы:

island — сам остров формы внутри оболочки

Экран входа

Логотип, остров с полями и кнопкой, подвал со ссылкой.

Почта

Пароль

<!--
  🟢

  Экран входа в уменьшенной рамке: логотип, остров с полями и кнопкой,
  подвал со ссылкой. Оболочка занимает всю высоту окна — здесь её ограничивает
  контейнер.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import AuthLayout from "$lib/ui/AuthLayout.svelte";
import Button from "$lib/ui/Button.svelte";
import Input from "$lib/ui/Input.svelte";
import Link from "$lib/ui/Link.svelte";
import Logo from "$lib/ui/Logo.svelte";

let email = $state("");
let password = $state("");
</script>

<div style="width: 100%; max-width: 640px; height: 480px; overflow: hidden; border-radius: var(--r-m);">
	<AuthLayout style="min-height: 100%;">
		{#snippet logo()}
			<Logo inverse />
		{/snippet}
		<Input label={t("Почта")} bind:value={email} />
		<Input label={t("Пароль")} type="password" bind:value={password} />
		<Button variant="accent">{t("Войти")}</Button>
		{#snippet footer()}
			<Link href="#">{t("Забыли пароль?")}</Link>
		{/snippet}
	</AuthLayout>
</div>