64 lines
2.2 KiB
Plaintext
64 lines
2.2 KiB
Plaintext
import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
|
|
|
|
import PasswordInput from "./";
|
|
import * as stories from "./password-input.stories.js";
|
|
import InputBlock from "../input-block";
|
|
|
|
<Meta
|
|
title="Components/PasswordInput"
|
|
component={PasswordInput}
|
|
subcomponents={{ InputBlock }}
|
|
argTypes={{
|
|
onChange: { action: "onChange" },
|
|
onValidateInput: { action: "onValidateInput" },
|
|
onCopyToClipboard: { action: "onCopyToClipboard" },
|
|
onKeyDown: { onKeyDown: "onKeyDown" },
|
|
}}
|
|
/>
|
|
|
|
# PasswordInput
|
|
|
|
Password entry field with advanced capabilities for displaying, validation of correspondence and generation based on settings
|
|
|
|
<Canvas>
|
|
<Story story={stories.basic} name="Default" />
|
|
</Canvas>
|
|
|
|
### Properties
|
|
|
|
You can apply all the parameters of the InputBlock component to the component.
|
|
|
|
<ArgsTable story="Default" />
|
|
|
|
## Description
|
|
|
|
#### Object with settings:
|
|
|
|
```js
|
|
{
|
|
minLength: 6,
|
|
upperCase: false,
|
|
digits: false,
|
|
specSymbols: false
|
|
}
|
|
```
|
|
|
|
Check for compliance with settings is carried out on fly. As you type in required number of characters, progress bar will fill up and when all conditions are met, the color will change from red to green.
|
|
|
|
Depending on screen width of device, input will change location of elements.
|
|
|
|
When setting focus to input, tooltip will be shown with progress in fulfilling conditions specified in settings. When unfocused, tooltip disappears.
|
|
|
|
When button is pressed, copy data will be copied to clipboard and copy action will be blocked for 2 seconds. In future, the button is unlocked.
|
|
|
|
If emailInputName parameter value is empty, copy action will be disabled.
|
|
|
|
#### passwordSettings properties
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
| ------------- | :------: | :------: | :----: | :-----: | ------------------------------- |
|
|
| `digits` | `bool` | ✅ | - | - | Must contain digits |
|
|
| `minLength` | `number` | ✅ | - | - | Minimum password length |
|
|
| `specSymbols` | `bool` | ✅ | - | - | Must contain special characters |
|
|
| `upperCase` | `bool` | ✅ | - | - | Must contain uppercase letters |
|