1 | <h1 id="title" class="title">Register</h1>
|
2 |
|
3 | <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
|
4 | <p class="alert-title"><b>Oh snap!</b></p>
|
5 | <ul class="alert-message-list">
|
6 | <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
|
7 | </ul>
|
8 | </nb-alert>
|
9 |
|
10 | <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
|
11 | <p class="alert-title"><b>Hooray!</b></p>
|
12 | <ul class="alert-message-list">
|
13 | <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
|
14 | </ul>
|
15 | </nb-alert>
|
16 |
|
17 | <form (ngSubmit)="register()" #form="ngForm" aria-labelledby="title">
|
18 |
|
19 | <div class="form-control-group">
|
20 | <label class="label" for="input-name">Full name:</label>
|
21 | <input nbInput
|
22 | [(ngModel)]="user.fullName"
|
23 | #fullName="ngModel"
|
24 | id="input-name"
|
25 | name="fullName"
|
26 | placeholder="Full name"
|
27 | autofocus
|
28 | fullWidth
|
29 | fieldSize="large"
|
30 | [status]="fullName.dirty ? (fullName.invalid ? 'danger' : 'success') : 'basic'"
|
31 | [required]="getConfigValue('forms.validation.fullName.required')"
|
32 | [minlength]="getConfigValue('forms.validation.fullName.minLength')"
|
33 | [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
|
34 | [attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null">
|
35 | <ng-container *ngIf="fullName.invalid && fullName.touched">
|
36 | <p class="caption status-danger" *ngIf="fullName.errors?.required">
|
37 | Full name is required!
|
38 | </p>
|
39 | <p class="caption status-danger" *ngIf="fullName.errors?.minlength || fullName.errors?.maxlength">
|
40 | Full name should contains
|
41 | from {{getConfigValue('forms.validation.fullName.minLength')}}
|
42 | to {{getConfigValue('forms.validation.fullName.maxLength')}}
|
43 | characters
|
44 | </p>
|
45 | </ng-container>
|
46 | </div>
|
47 |
|
48 | <div class="form-control-group">
|
49 | <label class="label" for="input-email">Email address:</label>
|
50 | <input nbInput
|
51 | [(ngModel)]="user.email"
|
52 | #email="ngModel"
|
53 | id="input-email"
|
54 | name="email"
|
55 | pattern=".+@.+..+"
|
56 | placeholder="Email address"
|
57 | fullWidth
|
58 | fieldSize="large"
|
59 | [status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
|
60 | [required]="getConfigValue('forms.validation.email.required')"
|
61 | [attr.aria-invalid]="email.invalid && email.touched ? true : null">
|
62 | <ng-container *ngIf="email.invalid && email.touched">
|
63 | <p class="caption status-danger" *ngIf="email.errors?.required">
|
64 | Email is required!
|
65 | </p>
|
66 | <p class="caption status-danger" *ngIf="email.errors?.pattern">
|
67 | Email should be the real one!
|
68 | </p>
|
69 | </ng-container>
|
70 | </div>
|
71 |
|
72 | <div class="form-control-group">
|
73 | <label class="label" for="input-password">Password:</label>
|
74 | <input nbInput
|
75 | [(ngModel)]="user.password"
|
76 | #password="ngModel"
|
77 | type="password"
|
78 | id="input-password"
|
79 | name="password"
|
80 | placeholder="Password"
|
81 | fullWidth
|
82 | fieldSize="large"
|
83 | [status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
|
84 | [required]="getConfigValue('forms.validation.password.required')"
|
85 | [minlength]="getConfigValue('forms.validation.password.minLength')"
|
86 | [maxlength]="getConfigValue('forms.validation.password.maxLength')"
|
87 | [attr.aria-invalid]="password.invalid && password.touched ? true : null">
|
88 | <ng-container *ngIf="password.invalid && password.touched">
|
89 | <p class="caption status-danger" *ngIf="password.errors?.required">
|
90 | Password is required!
|
91 | </p>
|
92 | <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
|
93 | Password should contain
|
94 | from {{ getConfigValue('forms.validation.password.minLength') }}
|
95 | to {{ getConfigValue('forms.validation.password.maxLength') }}
|
96 | characters
|
97 | </p>
|
98 | </ng-container>
|
99 | </div>
|
100 |
|
101 | <div class="form-control-group">
|
102 | <label class="label" for="input-re-password">Repeat password:</label>
|
103 | <input nbInput
|
104 | [(ngModel)]="user.confirmPassword"
|
105 | #rePass="ngModel"
|
106 | type="password"
|
107 | id="input-re-password"
|
108 | name="rePass"
|
109 | placeholder="Confirm Password"
|
110 | fullWidth
|
111 | fieldSize="large"
|
112 | [status]="rePass.dirty ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success') : 'basic'"
|
113 | [required]="getConfigValue('forms.validation.password.required')"
|
114 | [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
|
115 | <ng-container *ngIf="rePass.invalid && rePass.touched">
|
116 | <p class="caption status-danger" *ngIf="rePass.errors?.required">
|
117 | Password confirmation is required!
|
118 | </p>
|
119 | <p class="caption status-danger" *ngIf="password.value != rePass.value && !rePass.errors?.required">
|
120 | Password does not match the confirm password.
|
121 | </p>
|
122 | </ng-container>
|
123 | </div>
|
124 |
|
125 | <div class="form-control-group accept-group" *ngIf="getConfigValue('forms.register.terms')">
|
126 | <nb-checkbox name="terms" [(ngModel)]="user.terms" [required]="getConfigValue('forms.register.terms')">
|
127 | Agree to <a href="#" target="_blank"><strong>Terms & Conditions</strong></a>
|
128 | </nb-checkbox>
|
129 | </div>
|
130 |
|
131 | <button nbButton
|
132 | fullWidth
|
133 | status="primary"
|
134 | size="large"
|
135 | [disabled]="submitted || !form.valid"
|
136 | [class.btn-pulse]="submitted">
|
137 | Register
|
138 | </button>
|
139 | </form>
|
140 |
|
141 | <section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
|
142 | or enter with:
|
143 | <div class="socials">
|
144 | <ng-container *ngFor="let socialLink of socialLinks">
|
145 | <a *ngIf="socialLink.link"
|
146 | [routerLink]="socialLink.link"
|
147 | [attr.target]="socialLink.target"
|
148 | [attr.class]="socialLink.icon"
|
149 | [class.with-icon]="socialLink.icon">
|
150 | <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
|
151 | <ng-template #title>{{ socialLink.title }}</ng-template>
|
152 | </a>
|
153 | <a *ngIf="socialLink.url"
|
154 | [attr.href]="socialLink.url"
|
155 | [attr.target]="socialLink.target"
|
156 | [attr.class]="socialLink.icon"
|
157 | [class.with-icon]="socialLink.icon">
|
158 | <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
|
159 | <ng-template #title>{{ socialLink.title }}</ng-template>
|
160 | </a>
|
161 | </ng-container>
|
162 | </div>
|
163 | </section>
|
164 |
|
165 | <section class="another-action" aria-label="Sign in">
|
166 | Already have an account? <a class="text-link" routerLink="../login">Log in</a>
|
167 | </section>
|