Вступление
В большинстве приложений при регистрации имеется поле для ввода действительного пароля, которое должно содержать как минимум число и один специальный символ. В этой статье мы узнаем, как создать панель надежности пароля, в которой будет подробно описана надежность пароля.
необходимое условие
- Базовые знания по Angular.
- Код Visual Studio должен быть установлен.
- Угловой CLI должен быть установлен.
- Узел должен быть установлен.
Шаг 1
Давайте создадим новый проект Angular, используя следующую команду npm.
Оболочка
xxxxxxxxxx
1
ng new passwordStrengthBar
Шаг 2
Теперь давайте создадим новый компонент с помощью следующей команды.
Оболочка
xxxxxxxxxx
1
ng g c password-strength-bar
Шаг 3
Теперь откройте файл password-strong-bar.component.html и добавьте следующий код в этот файл.
HTML
xxxxxxxxxx
1
<div style="margin: 11px;" id="strength" #strength>
2
<small>{{barLabel}}</small>
3
<ul id="strengthBar">
4
<li class="point" [style.background-color]="bar0"></li><li class="point" [style.background-color]="bar1"></li><li class="point" [style.background-color]="bar2"></li><li class="point" [style.background-color]="bar3"></li><li class="point" [style.background-color]="bar4"></li>
5
</ul>
6
</div>
Шаг 4
Теперь откройте файл password -rength-bar.component.ts и добавьте следующий код в этот файл.
Машинопись
xxxxxxxxxx
1
import {Component, OnChanges, Input, SimpleChange} from '@angular/core';
2
3
@Component({
4
selector: 'app-passoword-strength-bar',
5
templateUrl: './passoword-strength-bar.component.html',
6
styleUrls: ['./passoword-strength-bar.component.css']
7
})
8
export class PassowordStrengthBarComponent implements OnChanges {
9
10
@Input() passwordToCheck: string;
11
@Input() barLabel: string;
12
bar0: string;
13
bar1: string;
14
bar2: string;
15
bar3: string;
16
bar4: string;
17
18
private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
19
20
private static measureStrength(pass: string) {
21
let score = 0;
22
// award every unique letter until 5 repetitions
23
let letters = {};
24
for (let i = 0; i< pass.length; i++) {
25
letters[pass[i]] = (letters[pass[i]] || 0) + 1;
26
score += 5.0 / letters[pass[i]];
27
}
28
// bonus points for mixing it up
29
let variations = {
30
digits: /\d/.test(pass),
31
lower: /[a-z]/.test(pass),
32
upper: /[A-Z]/.test(pass),
33
nonWords: /\W/.test(pass),
34
};
35
36
let variationCount = 0;
37
for (let check in variations) {
38
variationCount += (variations[check]) ? 1 : 0;
39
}
40
score += (variationCount - 1) * 10;
41
return Math.trunc(score);
42
}
43
44
private getColor(score: number) {
45
let idx = 0;
46
if (score > 90) {
47
idx = 4;
48
} else if (score > 70) {
49
idx = 3;
50
} else if (score >= 40) {
51
idx = 2;
52
} else if (score >= 20) {
53
idx = 1;
54
}
55
return {
56
idx: idx + 1,
57
col: this.colors[idx]
58
};
59
}
60
61
ngOnChanges(changes: {[propName: string]: SimpleChange}): void {
62
var password = changes['passwordToCheck'].currentValue;
63
this.setBarColors(5, '#DDD');
64
if (password) {
65
let c = this.getColor(PassowordStrengthBarComponent.measureStrength(password));
66
this.setBarColors(c.idx, c.col);
67
}
68
}
69
private setBarColors(count, col) {
70
for (let _n = 0; _n < count; _n++) {
71
this['bar' + _n] = col;
72
}
73
}
74
75
}
Шаг 5
Теперь откройте файл password -rength-bar.component.css и добавьте следующий код в этот файл.
CSS
xxxxxxxxxx
1
ul#strengthBar {
2
display:inline;
3
list-style:none;
4
margin:0;
5
margin-left:15px;
6
padding:0;
7
vertical-align:2px;
8
}
9
.point:last {
10
margin:0 !important;
11
}
12
.point {
13
background:#DDD;
14
border-radius:2px;
15
display:inline-block;
16
height:5px;
17
margin-right:1px;
18
width:20px;
19
}
Шаг 6
Теперь откройте файл app.component.html и добавьте следующий код.
HTML
xxxxxxxxxx
1
<h3>Password Strength Bar</h3>
2
<div class="container">
3
<div class="row">
4
<div class="col-md-8 col-md-offset-2">
5
6
<div class="panel panel-default">
7
<div class="panel-body">
8
<form class="form-horizontal" method="" action="">
9
10
<div class="form-group">
11
<label class="col-md-4 control-label">Email</label>
12
<div class="col-md-6">
13
<input type="email" class="form-control" name="email" value="">
14
</div>
15
</div>
16
<div class="form-group">
17
<label class="col-md-4 control-label">Password</label>
18
<div class="col-md-6">
19
<input type="password" class="form-control"
20
id="password" name="password" placeholder="Enter password"
21
[(ngModel)]="account.password" #password="ngModel" minlength="5" maxlength="50"
22
required>
23
24
<app-passoword-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel">
25
</app-passoword-strength-bar>
26
</div>
27
</div>
28
</form>
29
</div>
30
</div>
31
</div>
32
</div>
33
</div>
Шаг 7
Теперь откройте файл app.component.ts и добавьте следующий код в этот файл.
Машинопись
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
3
@Component({
4
selector: 'app-root',
5
templateUrl: './app.component.html',
6
styleUrls: ['./app.component.css']
7
})
8
export class AppComponent implements OnInit {
9
public account = {
10
password: null
11
};
12
public barLabel: string = "Password strength:";
13
14
constructor() { }
15
16
ngOnInit() {
17
18
}
19
}
Шаг 8
Теперь откройте файл app.module.ts и добавьте следующий код в этот файл.
Машинопись
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
import { FormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5
import { PassowordStrengthBarComponent } from './passoword-strength-bar/passoword-strength-bar.component';
6
7
@NgModule({
8
declarations: [
9
AppComponent,
10
PassowordStrengthBarComponent
11
],
12
imports: [
13
BrowserModule,
14
FormsModule,
15
],
16
providers: [],
17
bootstrap: [AppComponent]
18
})
19
export class AppModule { }
Шаг 9
Теперь давайте запустим проект с помощью команды npm startили ng serveи проверим вывод:
Резюме
Из этой статьи мы узнали, как создать панель надежности пароля в приложениях Angular 8.
Пожалуйста, дайте ваши ценные отзывы / комментарии / вопросы по этой статье. Пожалуйста, дайте мне знать, если вам понравилась и поняла эту статью, и как я могу улучшить ее.