# @stone-payments/emd-basic-login

> emd-basic-login

Latest version **1.1.3** (published 2020-09-09) · 0 weekly downloads

## Install

```sh
npm install @stone-payments/emd-basic-login
pnpm add @stone-payments/emd-basic-login
yarn add @stone-payments/emd-basic-login
bun add @stone-payments/emd-basic-login
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-09-09 |
| First published | 2019-05-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 103.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Stone Co. |
| Maintainers | sling-web |

## Links

- npm: https://www.npmjs.com/package/@stone-payments/emd-basic-login
- npm.io page: https://npm.io/package/@stone-payments/emd-basic-login

## Dependencies (8)

- [@stone-payments/emd-hocs](https://npm.io/package/@stone-payments/emd-hocs.md) ^1.1.0
- [@stone-payments/emd-helpers](https://npm.io/package/@stone-payments/emd-helpers.md) ^1.1.2
- [@stone-payments/lit-element](https://npm.io/package/@stone-payments/lit-element.md) ^2.2.1
- [@stone-payments/emd-basic-form](https://npm.io/package/@stone-payments/emd-basic-form.md) ^1.0.0
- [@stone-payments/emd-basic-icon](https://npm.io/package/@stone-payments/emd-basic-icon.md) ^1.0.0
- [@stone-payments/emd-basic-field](https://npm.io/package/@stone-payments/emd-basic-field.md) ^1.0.0
- [@stone-payments/emd-basic-button](https://npm.io/package/@stone-payments/emd-basic-button.md) ^1.0.0
- [@stone-payments/emd-basic-field-wrapper](https://npm.io/package/@stone-payments/emd-basic-field-wrapper.md) ^1.0.0

## Recent versions

- 1.1.3 (latest) — 2020-09-09
- 1.1.2 — 2020-05-21
- 1.1.1 — 2020-03-23
- 1.1.0 — 2020-01-10
- 1.0.2 — 2019-09-05
- 1.0.1 — 2019-07-04
- 1.0.0 — 2019-07-04
- 0.1.4 — 2019-06-18
- 0.1.3 — 2019-06-11
- 0.1.2 — 2019-06-07
- 0.1.1 — 2019-06-04
- 0.1.0 — 2019-05-31

## README

# Login

Login component with two steps: e-mail entry and password entry.

## Usage

```
npm install @stone-payments/emd-basic-login
```

```js
import '@stone-payments/emd-basic-login';
```

```html
<emd-login></emd-login>

<emd-login email="some.email@stone.com.br" step="2"></emd-login>
```

## Attributes and Properties

#### `email`

Controls the user e-mail.

- Type: String
- Attribute and property

#### `step`

Controls navigation steps: `1` for e-mail and `2` for password.

- Type: Number
- Attribute and property

## Events

#### `forgotemail`

Dispatched when the `Esqueci meu e-mail` button is clicked.

- Detail: `null`

#### `forgotpassword`

Dispatched when the `Esqueci minha senha` button is clicked.

- Detail: `null`

#### `emailsubmitsuccess`

Dispatched when the user successfully enters their e-mail on the first step and then clicks the `Próximo` button.

- Detail:

```javascript
{
  email: 'some.email@stone.com.br'
}
```

#### `passwordsubmitsuccess`

Dispatched when the user successfully enters their e-mail and password on the first and second steps and then clicks the `Entrar` button.

- Detail:

```javascript
{
  email: 'some.email@stone.com.br',
  password: 'some.password'
}
```

## Methods

#### `nextStep()`

The `nextStep()` method should be called after `emailsubmitsuccess` and `passwordsubmitsuccess` to continue the user flow.

```javascript
const login = document.querySelector('emd-login');

login.addEventListener('emailsubmitsuccess', async evt => {
  const { email } = evt.detail;
  await doSomethingWith(email);
  evt.target.nextStep();
});
```

#### `quit()`

If something goes wrong after `emailsubmitsuccess` or `passwordsubmitsuccess`, the `quit()` method should be called to finish the loading process.

```javascript
const login = document.querySelector('emd-login');

login.addEventListener('emailsubmitsuccess', async evt => {
  const { email } = evt.detail;

  try {
    await doSomethingWith(email);
    evt.target.nextStep();
  } catch (err) {
    evt.target.quit();
  }
});
```

## Slots

#### Default

Allows the developer to change the `Acesse Sua Conta` message.

---
_Source: https://npm.io/package/@stone-payments/emd-basic-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._