Skip to content

Commit 0fb5611

Browse files
jaimeneevesjaimeneeves
authored
Merge pull request #52 from jaimeneeves/develop
Develop Versão 3
2 parents b72fac2 + 346d00a commit 0fb5611

40 files changed

+9773
-7403
lines changed

‎.DS_Store‎

10 KB
Binary file not shown.

‎.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎README.md‎

Lines changed: 91 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,130 @@
11
# checkforce.js
2-
[![BCH compliance](https://bettercodehub.com/edge/badge/dejaneves/checkforce.js)](https://bettercodehub.com)
3-
[![Build Status](https://travis-ci.org/dejaneves/checkforce.js.svg?branch=master)](https://travis-ci.org/dejaneves/checkforce.js)
4-
> A library that helps to perform tasks to test strength of passwords.
52

6-
## Installation
73

8-
### Bower
4+
<p align="center">
5+
<img width="400" height="300" src="https://user-images.githubusercontent.com/6599252/154813112-d055ce6e-d896-44b2-b45b-b91e12ca36b7.svg">
6+
</p>
97

10-
```
11-
bower install checkforce --save
12-
```
13-
### NPM
8+
<!-- [![BCH compliance](https://bettercodehub.com/edge/badge/dejaneves/checkforce.js)](https://bettercodehub.com)
9+
[![Build Status](https://travis-ci.org/dejaneves/checkforce.js.svg?branch=master)](https://travis-ci.org/dejaneves/checkforce.js) -->
1410

15-
```
16-
npm install checkforce.js --save
17-
```
18-
## Setup
11+
> Uma biblioteca para verificar a força da senha
1912
20-
### Using the browser
13+
A versão 3 do *checkforce.js*, vem com novidades. Ele depende de 2 bibliotecas externas, são elas: o [Popper](https://popper.js.org/) para renderizar a caixa do conteúdo, e o [Zxcvbn](https://github.com/dropbox/zxcvbn) para analisar a força da senha.
2114

22-
First, include the script located on the `dist` folder.
15+
<p align="center">
16+
<img src="https://user-images.githubusercontent.com/6599252/154813307-c0f323a4-3f69-468c-9d8f-1537ab66870a.png">
17+
</p>
18+
19+
## Bundle
20+
21+
Você tem a opção de usar o **checkforce** com todas as library incluídas, usando o arquivo `checkforce.bundle.js` ou `checkforce.bundle.min.js`. Ou você pode usar a versão standalone que está no arquivo `checkforce.js` ou `checkforce.min.js` e adicionar as dependências manualmente no seu arquivo HTML.
22+
23+
### Usando arquivo único
24+
25+
Incluindo um único arquivo com todas as dependências.
2326

2427
```html
25-
<script src="dist/checkforce.min.js"></script>
28+
<script src="dist/checkforce.bundle.js" ></script>
2629
```
2730

28-
### Basic example
31+
versão minificada.
2932

3033
```html
31-
<body>
32-
<input type="text" id="password">
33-
<div class="viewport"></div>
34-
</body>
34+
<script src="dist/checkforce.bundle.min.js" ></script>
3535
```
3636

37-
```js
38-
var render = document.querySelector('.viewport');
39-
CheckForce('#password').checkPassword(function(response){
40-
render.innerHTML = response.content;
41-
});
42-
```
37+
Tanto o `checkforce.bundle.js` quanto o `checkforce.bundle.min.js` incluem o Popper e o Zxcvbn.
4338

44-
### Example with Bootstrap
39+
### Usando arquivo separado
4540

46-
> See [example](examples/bootstrap/bootstrap-en.html)
41+
Usando a solução com scripts separados.
4742

4843
```html
49-
<body>
50-
<input type="text" id="password">
51-
<div class="viewport"></div>
52-
</body>
53-
```
44+
<script src="path/to/popper.min.js" ></script>
45+
46+
<script src="path/to/zxcvbn.min.js" ></script>
5447

55-
```js
56-
var render = document.querySelector('.viewport');
57-
CheckForce('#password',{BootstrapTheme:true}).checkPassword(function(response){
58-
render.innerHTML = response.content;
59-
});
48+
<script src="dist/checkforce.min.js" ></script>
6049
```
6150

62-
### Example with Materialize
51+
## Arquivos JS
6352

64-
> See [example](examples/materialize/example-with-materialize.html)
53+
| Arquivo JS | Popper | Zxcvbn
54+
| ----------- | ----------- | ----------- |
55+
| <span style="color: #d63384;">checkforce.bundle.js <br/> checkforce.bundle.min.js</span> | Incluído | Incluído
56+
| <span style="color: #d63384;">checkforce.js <br/> checkforce.min.js</span> | -- | --
57+
58+
59+
## Instalação
60+
61+
```sh
62+
npm install checkforce.js --save
63+
```
64+
65+
## Usando
6566

6667
```html
6768
<body>
68-
<input type="text" id="password">
69-
<div class="viewport"></div>
69+
<form>
70+
...
71+
72+
<label for="input-password">Senha</label>
73+
<input type="password" id="input-password" placeholder="Senha">
74+
75+
...
76+
77+
<button type="submit">Criar</button>
78+
</form>
79+
80+
<!-- Incluindo a biblioteca -->
81+
<script src="../../dist/checkforce.bundle.js"></script>
82+
<script>
83+
const checkForce = new CheckForce('#input-password');
84+
</script>
85+
7086
</body>
7187
```
7288

73-
```js
74-
var render = document.querySelector('.viewport');
75-
CheckForce('#password',{MaterializeTheme:true}).checkPassword(function(response){
76-
render.innerHTML = response.content;
77-
});
78-
```
89+
Por padrão a caixa de conteúdo que mostra o *nível/força* da senha aparece na parte superior do campo input.
90+
91+
![checkforce-top](https://user-images.githubusercontent.com/6599252/154812763-e5d73981-1bc2-44fd-bfcb-a0865379c3a8.png)
92+
93+
Você pode modificar a posição da caixa de conteúdo, da seguinte forma:
7994

80-
## Language Changing
95+
Para deixar a caixa na posição inferior: `bottom`.
8196

82-
For language changing you need insert `locale` attribute. The **CheckForce.js** supports only two languages.
97+
```html
98+
...
99+
100+
<script>
101+
const checkForce = new CheckForce('#input-password', {
102+
placement: 'bottom'
103+
});
104+
</script>
105+
```
83106

84-
Choices: `'en'`, `'pt-br'`
85-
Default: `'en'`
107+
![checkforce-bottom](https://user-images.githubusercontent.com/6599252/154812953-99c3b90b-bd4d-466a-9098-2927495fd45d.png)
86108

87-
#### Example
109+
Para deixar a caixa na posição lateral esquerdo: `left`.
110+
111+
```html
112+
...
88113

89-
```js
90-
var render = document.querySelector('.viewport');
91-
CheckForce('#password',{
92-
locale:'pt-br',
93-
BootstrapTheme:true
94-
}).checkPassword(function(response){
95-
render.innerHTML = response.content;
96-
});
114+
<script>
115+
const checkForce = new CheckForce('#input-password', {
116+
placement: 'left'
117+
});
118+
</script>
97119
```
98120

99-
> See [example](examples/bootstrap/bootstrap-pt-br.html)
121+
![checkforce-left](https://user-images.githubusercontent.com/6599252/154813023-3d23b354-e7c9-45cd-9282-5051207c520f.png)
122+
123+
Para deixar a caixa na posição lateral direito: `right`.
124+
125+
![checkforce-right](https://user-images.githubusercontent.com/6599252/154813071-3190fcec-a31d-4283-a98e-528cf6155476.png)
126+
127+
100128

101129
## Versioning
102130
For transparency into our release cycle and in striving to maintain backward compatibility, CheckForce.js is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.

0 commit comments

Comments
 (0)