Kinghost-2fa-web-components NPM

Este repositório

Este repositório contêm o código dos web componentes utilizados para construção da tela de autenticação de duas etapas da KingHost.

Eventos

Os componetes vão disparar eventos customizados quando ações do fluxo forem executadas.

Os eventos são:

available_methods_event
- O Evento é disparado quando o componente de configuração ou login é carregado
user_active_methods_event
- O Evento é disparado quando o componente de configuração ou login é carregado
user_phone_event:
- O Evento é disparado quando o usuário clicar no botão "Continuar" na tela de adicionar o telefone. Esse evento passa um parámetro dentro de detail, esta string será o telefone
authentication_event
- O Evento é disparado quando o usuário clicar no botão "Continuar" na tela de autenticação. Esse evento passa 2 parâmetros: password e isDeactivate que informa se o fluxo é de ativação ou desativação do método.
validate_confirmation_code_event
- O Evento é disparado quando o usuário clicar no botão "Continuar" na tela de validar o código de autenticação. Esse evento passa 2 parâmetros: code e method que informa qual o metodo que está sendo configurado ou utilizado.
generate_qrcode_event
- O Evento é disparado quando o usuário for redirecionado para a tela de QR Code.
app_qrcode_event
- O Evento é disparado quando o usuário clicar no botão "Continuar" na tela de QR Code.
send_email_event
- O Evento é disparado quando o usuário for redirecionado para a tela de Email enviado.
email_sent_event
- O Evento é disparado quando o usuário clicar no botão "Continuar" na tela de email enviado.
config_finished_event
- O Evento é disparado quando o usuário clicar no botão "Fechar" na tela de Verificação em duas etapaas configurada com sucesso.
deactivate_method_event
- O Evento é disparado quando o usuário clicar no botão "Desativar" na tela de Desativar autenticação em duas etapas.
alternative_codes_event
- O Evento é disparado quando o usuário clicar no botão "Ver códigos" na tela de Configuração.
start_config_event
- O Evento é disparado quando o usuário clicar no em um dos checkbox (Sms, App ou Email) na tela de de configuração. Este evento envia dois parâmetros: SMS e isDeactivate

Integração

Criamos uma camada extra para os componentes além de átomo, molécula e organismo. Esta camada será a camada de página.

Temos dois componentes nesta camada, um para o uso da autenticação de duas etapas no login do painel, outra para a configuração dos métodos de autenticação, que será usada na página de configurações da conta no painel de controle.

Estes componentes serão responsáveis pela criação e administração do estado da aplicação na camada de web componentes.

Esta camada terá uma api exposta para a manipulação do estado, esta api consistirá de uma serie de métodos autoritativos para mudança do estado, como por exemplo:

component.changeStepToAuthentication()

Que realiza a alteração descrita internamente sem necessidade de receber informações externas.

Nos casos em que essa informação precisa ser recebida poderá ser passada diretamente ao componente via propriedade.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm install my-component --save
Put a script tag similar to this <script src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc