Login

Multi-step auth UI: login, forgot password, recovery code, set password — branding via brand/logo/layout props.

HTML tag: c-e89fd3468ced54eff88568fbbc7010e20

When to use

branded login and password recovery flow
multi-step auth screens
not generic single text fields

Props

Prop	Type	Default
`brand`	String
`logo`	String
`view`	String	`login`
`user`	String
`password`	String
`forgot_password_href`	String	`#`
`remember_me`	Boolean
`short_message`	String
`logo_height`	String	`var(--ab-size-login-logo-height, 72px)`
`layout_mode`	String	`inline`
`align_x`	String	`center`
`align_y`	String	`center`
`max_width`	String	`420px`
`container_padding`	String	`var(--ab-space-10)`
`container_class`	String
`container_style`	String

Rules

Control flow with .view (login | forgot | code | set-password etc.).
Bind user/password/remember_me; field edits emit user-modified, password-modified, remember_me-modified.
Wire auth:* events to backend handlers (recover-request, code-submit, set-password).
Parent app performs actual authentication — this component is UI only.

Events

Event	Detail
`auth:forgot-clicked`
`auth:recover-request`	username: String
`auth:back-to-login`
`auth:code-submit`	username: String, code: String
`auth:set-password`	username: String, new_password: String
`user-modified`	String
`password-modified`	String
`remember_me-modified`	Boolean

What to avoid

Do not use ab-input alone for full login pages when this exists. Do not expect built-in API login without listening to auth events.

Example

<c-e89fd3468ced54eff88568fbbc7010e20 .view=${'login'} .user=${user} .password=${pass} @auth:recover-request=${onRecover} @user-modified=${e => user = e.detail}></c-e89fd3468ced54eff88568fbbc7010e20>