Auth & Error layout

Standalone layouts for login / register / recover / lock-screen and error pages (400, 403, 404, 500, 503) with translated texts.

AuthLayout

AuthLayout

Vue

<div class="auth-frame"><ThlAuthLayout title="Sign in"><ThlField label="Email"><ThlInput type="email" /></ThlField><ThlField label="Password"><ThlInput type="password" /></ThlField><ThlButton variant="danger" block>Log in</ThlButton></ThlAuthLayout></div>

React

<AuthLayout title={t('pages.login.title')}>
  <Form …>…</Form>
</AuthLayout>

Angular

<thl-auth-layout [title]="'pages.login.title' | thlT">
  <form …>…</form>
</thl-auth-layout>

ErrorLayout

ErrorLayout

Vue

<div class="auth-frame"><ThlErrorLayout :code="404" home-href="#" /></div>

React

<ErrorLayout code={404} homeHref="/" />

Angular

<thl-error-layout [code]="404" homeHref="/" />

API

AuthLayout

<ThlAuthLayout> · import { ThlAuthLayout } from '@thl-ui/vue'

Prop	Type	Default
title	string	—
avatar	string	—

Slots: logodefaultfooter

ErrorLayout

<ThlErrorLayout> · import { ThlErrorLayout } from '@thl-ui/vue'

Prop	Type	Default
code*	number	—
title	string	—
text	string	—
homeHref	string	"/"

Slots: action