LoginCard

import { LoginCard } from '@enmovil/ui-design-system';

A complete sign-in screen covering login, OTP entry, forgotten and reset passwords, and setting a new password, selected with authStep. It can also show a captcha and a single sign-on button, and its layout and branding are configurable.

Properties

Property	Type	Required	Default	Allowed values	Description
`logo`	`string`	No	—	—	Image source of the logo at the top of the card, shown on the `login` step only. Falls back to the bundled Enmovil logo; a logo set in `layout.branding` takes precedence.
`logoHeight`	`number`	No	—	—	Height of the logo in pixels. Without it the logo keeps its default height; a height set in `layout.branding` takes precedence.
`title`	`string`	No	—	—	Heading of the card, used for every step. Without it each step shows its own heading (for example "Welcome back" on `login`); an empty string hides it.
`subtitle`	`string`	No	—	—	Text under the heading, used for every step. Without it each step shows its own subtitle (for example "Sign in to continue" on `login`); an empty string hides it.
`loginIdentifier`	`{ label?: string; placeholder?: string; } \| undefined`	No	—	—	Label and placeholder of the identifier field on the `login` and `enter-email` steps. Without it the field is labelled "Email" with the placeholder "Enter email"; the label is also used in the step's subtitle and error message.
`backgroundImage`	`string`	No	—	—	Image source shown as a full-page background, scaled to cover. Only applies when `layout` is set and defines no background layers; the default layout always has its own background, so the image is not shown without `layout`.
`helperLogo`	`string`	No	—	—	Image source of the secondary logo, shown in the top-right corner of the page in the default layout. Falls back to a bundled image; a logo set in `layout.branding` takes precedence.
`helperLogoHeight`	`number`	No	—	—	Height of the secondary logo in pixels. Only applies when `layout` is set and gives the helper logo no height; the default layout fixes it at 34px.
`layout`	`LoginLayoutConfig`	No	—	—	Configuration of the page around the card, such as background layers, card placement, branding, decorations and per-breakpoint overrides. Without it the page uses the standard Enmovil layout. Invalid values fall back to defaults.
`className`	`string`	No	—	—	Extra CSS class added to the page's root element.
`forgotPathname`	`string`	No	`'#'`	—	Declared, but not used by the component.
`isCaptcha`	`boolean`	No	`false`	—	Shows a captcha under the password field on the `login` step. The captcha must be solved before `onSubmit` is called.
`authStep`	`string`	No	`'login'`	`'new-password'`, `'login'`, `'otp'`, `'enter-email'`, `'enter-login-id'`, `'reset-password'`	Which form the card shows: `login`, `otp`, `enter-email` (forgotten password), `enter-login-id`, `new-password` or `reset-password`. Defaults to `login`.
`otpLength`	`number`	No	`6`	—	Number of OTP digits on the `otp` step, kept between 4 and 8. Defaults to 6.
`enableResendOtp`	`boolean`	No	`true`	—	Shows a Resend OTP link on the `otp` step, after a countdown of `resendOtpInterval` seconds. Defaults to `true`.
`resendOtpInterval`	`number`	No	`30`	—	Seconds to wait before Resend OTP can be clicked, counted from when the `otp` step opens and after each resend. Defaults to 30. Requires `enableResendOtp`.
`showSSOLogin`	`boolean`	No	`false`	—	Shows a single sign-on button below the login form on the `login` step.
`ssoLoginLabel`	`string`	No	`'Sign in with Microsoft'`	—	Text of the single sign-on button, also the alt text of its icon. Defaults to "Sign in with Microsoft". Requires `showSSOLogin`.
`ssoLoginIcon`	`string`	No	—	—	Image source of the icon on the single sign-on button. Falls back to a bundled Microsoft icon. Requires `showSSOLogin`.

Events

Name	Signature	When it fires
`onForgotPasswordClick`	`(() => void)`	Fires when the Forgot Password? link on the `login` step is clicked. Set `authStep` from it to move to the next step.
`onSubmit`	`((email: string, password: string) => void)`	Fires with the identifier and password when the login form is submitted (button or Enter), once both are filled in and any captcha is solved.
`onOtpSubmit`	`((otp: string) => void)`	Fires with the entered OTP when Verify is clicked and all `otpLength` digits are filled in.
`onResendOtp`	`(() => void)`	Fires when Resend OTP is clicked. The entered OTP is cleared and the countdown restarts.
`onEmailSubmit`	`((email: string) => void)`	Fires with the entered identifier when the `enter-email` form is submitted (button or Enter) and the field is not empty.
`onLoginIdSubmit`	`((loginId: string) => void)`	Fires with the entered login ID when the `enter-login-id` form is submitted (button or Enter) and the field is not empty.
`onNewPasswordSubmit`	`((password: string) => void)`	Fires with the new password when the `new-password` form is submitted and both fields are filled in and match.
`onResetPasswordSubmit`	`((oldPassword: string, newPassword: string) => void)`	Fires with the current and the new password when the `reset-password` form is submitted and both fields are filled in.
`onSSOLoginClick`	`(() => void)`	Fires when the single sign-on button is clicked. Requires `showSSOLogin`.

Children

LoginCard does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open LoginCard in Storybook to try every story with the full set of controls.

Properties​

Events​

Children​

Variants​

Playground​

Storybook​