-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
login.component.html
105 lines (96 loc) · 4.03 KB
/
login.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<h1 id="title" class="title">Sign In</h1>
<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
<p class="alert-title"><b>Oh snap!</b></p>
<ul class="alert-message-list">
<li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
</ul>
</nb-alert>
<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
<p class="alert-title"><b>Hooray!</b></p>
<ul class="alert-message-list">
<li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
</ul>
</nb-alert>
<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
<div class="form-control-group">
<label class="label" for="input-email">Email address:</label>
<input nbInput
fullWidth
[(ngModel)]="user.email"
#email="ngModel"
name="email"
id="input-email"
pattern=".+@.+\..+"
placeholder="Email address"
autofocus
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
[required]="getConfigValue('forms.validation.email.required')"
[attr.aria-invalid]="email.invalid && email.touched ? true : null">
<ng-container *ngIf="email.invalid && email.touched">
<p class="caption status-danger" *ngIf="email.errors?.required">
Email is required!
</p>
<p class="caption status-danger" *ngIf="email.errors?.pattern">
Email should be the real one!
</p>
</ng-container>
</div>
<div class="form-control-group">
<label class="label" for="input-password">Password:</label>
<input nbInput
fullWidth
[(ngModel)]="user.password"
#password="ngModel"
name="password"
type="password"
id="input-password"
placeholder="Password"
[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
[required]="getConfigValue('forms.validation.password.required')"
[minlength]="getConfigValue('forms.validation.password.minLength')"
[maxlength]="getConfigValue('forms.validation.password.maxLength')"
[attr.aria-invalid]="password.invalid && password.touched ? true : null">
<ng-container *ngIf="password.invalid && password.touched ">
<p class="caption status-danger" *ngIf="password.errors?.required">
Password is required!
</p>
<p class="caption status-danger" *ngIf="(password.errors?.minlength || password.errors?.maxlength)">
Password should contains
from {{ getConfigValue('forms.validation.password.minLength') }}
to {{ getConfigValue('forms.validation.password.maxLength') }}
characters
</p>
</ng-container>
</div>
<div class="form-control-group accept-group">
<nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
<a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
</div>
<button nbButton
fullWidth
status="success"
[disabled]="submitted || !form.valid"
[class.btn-pulse]="submitted">
Sign In
</button>
</form>
<section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
Or connect with:
<div class="socials">
<ng-container *ngFor="let socialLink of socialLinks">
<a *ngIf="socialLink.link"
[routerLink]="socialLink.link"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
<a *ngIf="socialLink.url"
[attr.href]="socialLink.url"
[attr.target]="socialLink.target"
[attr.class]="socialLink.icon"
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
</ng-container>
</div>
</section>
<section class="another-action" aria-label="Register">
Don't have an account? <a class="text-link" routerLink="../register">Sign Up</a>
</section>