Skip to content

[Task](ui): create SignInForm component #1439

@franzheidl

Description

@franzheidl

Create a SignInForm component that can be used to render consistent, configurable Sign In forms accordign to the visual design in Figma.

The SignInForm component should have the following props:

prop type default
title string || bool "Sign In" The title above the form. When the user passes nothing, we render the default "Sign In". When the user explicitly sets the prop to false, we don't render a title at all.
error string || bool false The error message when the user could not be authenticated. When the user passes true instead of a custom message string, we display our standard message "Authentication failed".
resetPwUrl string/url "" The url to reset the password. does not render the link when the url is an empty string(default)
children React node null The children to render (usually TextInput for username, TextIinput type=„password“ for password, optional checkbox „Remember me“, or any additional inputs a platform may require. These should be renderd in the sequence passed using a Stack component with a gap as defined per Figma

Visual Design / Figma

Figma

Tests/QA

Write tests for all props, consider edge cases.

Storybook

In Storybook, create the following stories:

Default

Not the default behaviour of the SignIn form, but a typical configuration:

  • default title
  • username/email field
  • password input
  • password forgot link

Additional Inputs

  • custom title
  • additional select to choose from a variety of options, such as regions

Acceptance Criteria

  • Component works as described
  • Tests do exist and pass
  • Stories as described have bene added to storybook

Metadata

Metadata

Labels

ui-componentsAll tasks related to juno-ui-components library

Type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions