# reusable-easy-auth

> Переиспользуемый компонент для логинизации.

Latest version **0.1.3** (published 2021-01-11) · 0 weekly downloads

## Install

```sh
npm install reusable-easy-auth
pnpm add reusable-easy-auth
yarn add reusable-easy-auth
bun add reusable-easy-auth
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-01-11 |
| First published | 2020-12-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | akotovskov |

## Links

- npm: https://www.npmjs.com/package/reusable-easy-auth
- npm.io page: https://npm.io/package/reusable-easy-auth

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^17.0.1
- [redux](https://npm.io/package/redux.md) ^4.0.5
- [regexp](https://npm.io/package/regexp.md) ^1.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^0.2.4
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.2
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.5.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.6
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.6.0

## Recent versions

- 0.1.3 (latest) — 2021-01-11
- 0.1.2 — 2021-01-11
- 0.1.1 — 2020-12-30
- 0.1.0 — 2020-12-30

## README

# Login component

Переиспользуемый компонент для логинизации.

### Get started

-npm install reusable-easy-auth

##### Сделайте нужные импорты

```
import { Login, store, theme } from "reusable-easy-auth";
```

Если Вам понадобятся стилизованные классы, то их также можно проимпортировать

```
import {
Btn,
Buttons,
Form,
GlobalFont,
GlobalStyle,
Input,
InputWrapper,
Label,
LoginFooter,
Required,
theme,
Title,
Wrapper,
} from "reusable-easy-auth";
```

### Example

После нужных импортов нужно настроить props для компонента Login

```ReactDOM.render(
<Provider store={store}> /* передайте store, проинсталировав перед этим react-redux */
<Login
theme={theme.defaultTheme} /* передайте тему, которая будет установлена на компоненте(darkTheme, defaultTheme) */
inputsLogin={inputsLoginArr} /* передайте массив инпутов */
onSubmitCallback={onSubmitCallback} /* передайте callback, который будет выполняться в конце submit */
title={"Login"} /* передайте любое, нужное Вам имя формы */
/>
</Provider>,
document.getElementById("root")
);
```

### Input array

##### Объект в массиве инпутов имеет следующие поля:

```
{
type: "",
name: "",
placeholder: "",
title: "",
value: "",
error: "",
},
```

##### Пример использования:

```
const inputsLoginArr = [
  {
    type: "email",
    name: "email",
    placeholder: "its email",
    title: "Email",
    value: "",
    error: "",
  },
  {
    type: "password",
    name: "password",
    placeholder: "its password",
    title: "Password",
    value: "",
    error: "",
  },
];
```

---
_Source: https://npm.io/package/reusable-easy-auth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._