80 lines
3.4 KiB
Plaintext
80 lines
3.4 KiB
Plaintext
// (c) Copyright Ascensio System SIA 2009-2024
|
|
//
|
|
// This program is a free software product.
|
|
// You can redistribute it and/or modify it under the terms
|
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
|
// any third-party rights.
|
|
//
|
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
//
|
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
|
//
|
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
|
//
|
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
|
// trademark law for use of our trademarks.
|
|
//
|
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
|
|
import { Meta, Story, ArgsTable, Canvas, Controls } from "@storybook/blocks";
|
|
|
|
import {PasswordInput} from "./";
|
|
import * as stories from "./PasswordInput.stories.tsx";
|
|
import {InputBlock} from "../input-block";
|
|
|
|
<Meta title="Components/PasswordInput" component={PasswordInput} />
|
|
|
|
# PasswordInput
|
|
|
|
Password entry field with advanced capabilities for displaying, validation of correspondence and generation based on settings
|
|
|
|
<Canvas>
|
|
<Story of={stories.Default} />
|
|
</Canvas>
|
|
|
|
### Properties
|
|
|
|
You can apply all the parameters of the InputBlock component to the component.
|
|
|
|
<Controls />
|
|
|
|
## 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 |
|