1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
|
7 | import { Router } from '@angular/router';
|
8 | import { NB_AUTH_OPTIONS } from '../../auth.options';
|
9 | import { getDeepFromObject } from '../../helpers';
|
10 | import { NbAuthService } from '../../services/auth.service';
|
11 | export class NbRegisterComponent {
|
12 | constructor(service, options = {}, cd, router) {
|
13 | this.service = service;
|
14 | this.options = options;
|
15 | this.cd = cd;
|
16 | this.router = router;
|
17 | this.redirectDelay = 0;
|
18 | this.showMessages = {};
|
19 | this.strategy = '';
|
20 | this.submitted = false;
|
21 | this.errors = [];
|
22 | this.messages = [];
|
23 | this.user = {};
|
24 | this.socialLinks = [];
|
25 | this.redirectDelay = this.getConfigValue('forms.register.redirectDelay');
|
26 | this.showMessages = this.getConfigValue('forms.register.showMessages');
|
27 | this.strategy = this.getConfigValue('forms.register.strategy');
|
28 | this.socialLinks = this.getConfigValue('forms.login.socialLinks');
|
29 | }
|
30 | register() {
|
31 | this.errors = this.messages = [];
|
32 | this.submitted = true;
|
33 | this.service.register(this.strategy, this.user).subscribe((result) => {
|
34 | this.submitted = false;
|
35 | if (result.isSuccess()) {
|
36 | this.messages = result.getMessages();
|
37 | }
|
38 | else {
|
39 | this.errors = result.getErrors();
|
40 | }
|
41 | const redirect = result.getRedirect();
|
42 | if (redirect) {
|
43 | setTimeout(() => {
|
44 | return this.router.navigateByUrl(redirect);
|
45 | }, this.redirectDelay);
|
46 | }
|
47 | this.cd.detectChanges();
|
48 | });
|
49 | }
|
50 | getConfigValue(key) {
|
51 | return getDeepFromObject(this.options, key, null);
|
52 | }
|
53 | }
|
54 | NbRegisterComponent.decorators = [
|
55 | { type: Component, args: [{
|
56 | selector: 'nb-register',
|
57 | template: "<h1 id=\"title\" class=\"title\">Register</h1>\n\n<nb-alert *ngIf=\"showMessages.error && errors?.length && !submitted\" outline=\"danger\" role=\"alert\">\n <p class=\"alert-title\"><b>Oh snap!</b></p>\n <ul class=\"alert-message-list\">\n <li *ngFor=\"let error of errors\" class=\"alert-message\">{{ error }}</li>\n </ul>\n</nb-alert>\n\n<nb-alert *ngIf=\"showMessages.success && messages?.length && !submitted\" outline=\"success\" role=\"alert\">\n <p class=\"alert-title\"><b>Hooray!</b></p>\n <ul class=\"alert-message-list\">\n <li *ngFor=\"let message of messages\" class=\"alert-message\">{{ message }}</li>\n </ul>\n</nb-alert>\n\n<form (ngSubmit)=\"register()\" #form=\"ngForm\" aria-labelledby=\"title\">\n\n <div class=\"form-control-group\">\n <label class=\"label\" for=\"input-name\">Full name:</label>\n <input nbInput\n [(ngModel)]=\"user.fullName\"\n #fullName=\"ngModel\"\n id=\"input-name\"\n name=\"fullName\"\n placeholder=\"Full name\"\n autofocus\n fullWidth\n fieldSize=\"large\"\n [status]=\"fullName.dirty ? (fullName.invalid ? 'danger' : 'success') : 'basic'\"\n [required]=\"getConfigValue('forms.validation.fullName.required')\"\n [minlength]=\"getConfigValue('forms.validation.fullName.minLength')\"\n [maxlength]=\"getConfigValue('forms.validation.fullName.maxLength')\"\n [attr.aria-invalid]=\"fullName.invalid && fullName.touched ? true : null\">\n <ng-container *ngIf=\"fullName.invalid && fullName.touched\">\n <p class=\"caption status-danger\" *ngIf=\"fullName.errors?.required\">\n Full name is required!\n </p>\n <p class=\"caption status-danger\" *ngIf=\"fullName.errors?.minlength || fullName.errors?.maxlength\">\n Full name should contains\n from {{getConfigValue('forms.validation.fullName.minLength')}}\n to {{getConfigValue('forms.validation.fullName.maxLength')}}\n characters\n </p>\n </ng-container>\n </div>\n\n <div class=\"form-control-group\">\n <label class=\"label\" for=\"input-email\">Email address:</label>\n <input nbInput\n [(ngModel)]=\"user.email\"\n #email=\"ngModel\"\n id=\"input-email\"\n name=\"email\"\n pattern=\".+@.+..+\"\n placeholder=\"Email address\"\n fullWidth\n fieldSize=\"large\"\n [status]=\"email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'\"\n [required]=\"getConfigValue('forms.validation.email.required')\"\n [attr.aria-invalid]=\"email.invalid && email.touched ? true : null\">\n <ng-container *ngIf=\"email.invalid && email.touched\">\n <p class=\"caption status-danger\" *ngIf=\"email.errors?.required\">\n Email is required!\n </p>\n <p class=\"caption status-danger\" *ngIf=\"email.errors?.pattern\">\n Email should be the real one!\n </p>\n </ng-container>\n </div>\n\n <div class=\"form-control-group\">\n <label class=\"label\" for=\"input-password\">Password:</label>\n <input nbInput\n [(ngModel)]=\"user.password\"\n #password=\"ngModel\"\n type=\"password\"\n id=\"input-password\"\n name=\"password\"\n placeholder=\"Password\"\n fullWidth\n fieldSize=\"large\"\n [status]=\"password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'\"\n [required]=\"getConfigValue('forms.validation.password.required')\"\n [minlength]=\"getConfigValue('forms.validation.password.minLength')\"\n [maxlength]=\"getConfigValue('forms.validation.password.maxLength')\"\n [attr.aria-invalid]=\"password.invalid && password.touched ? true : null\">\n <ng-container *ngIf=\"password.invalid && password.touched\">\n <p class=\"caption status-danger\" *ngIf=\"password.errors?.required\">\n Password is required!\n </p>\n <p class=\"caption status-danger\" *ngIf=\"password.errors?.minlength || password.errors?.maxlength\">\n Password should contain\n from {{ getConfigValue('forms.validation.password.minLength') }}\n to {{ getConfigValue('forms.validation.password.maxLength') }}\n characters\n </p>\n </ng-container>\n </div>\n\n <div class=\"form-control-group\">\n <label class=\"label\" for=\"input-re-password\">Repeat password:</label>\n <input nbInput\n [(ngModel)]=\"user.confirmPassword\"\n #rePass=\"ngModel\"\n type=\"password\"\n id=\"input-re-password\"\n name=\"rePass\"\n placeholder=\"Confirm Password\"\n fullWidth\n fieldSize=\"large\"\n [status]=\"rePass.dirty ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success') : 'basic'\"\n [required]=\"getConfigValue('forms.validation.password.required')\"\n [attr.aria-invalid]=\"rePass.invalid && rePass.touched ? true : null\">\n <ng-container *ngIf=\"rePass.invalid && rePass.touched\">\n <p class=\"caption status-danger\" *ngIf=\"rePass.errors?.required\">\n Password confirmation is required!\n </p>\n <p class=\"caption status-danger\" *ngIf=\"password.value != rePass.value && !rePass.errors?.required\">\n Password does not match the confirm password.\n </p>\n </ng-container>\n </div>\n\n <div class=\"form-control-group accept-group\" *ngIf=\"getConfigValue('forms.register.terms')\">\n <nb-checkbox name=\"terms\" [(ngModel)]=\"user.terms\" [required]=\"getConfigValue('forms.register.terms')\">\n Agree to <a href=\"#\" target=\"_blank\"><strong>Terms & Conditions</strong></a>\n </nb-checkbox>\n </div>\n\n <button nbButton\n fullWidth\n status=\"primary\"\n size=\"large\"\n [disabled]=\"submitted || !form.valid\"\n [class.btn-pulse]=\"submitted\">\n Register\n </button>\n</form>\n\n<section *ngIf=\"socialLinks && socialLinks.length > 0\" class=\"links\" aria-label=\"Social sign in\">\n or enter with:\n <div class=\"socials\">\n <ng-container *ngFor=\"let socialLink of socialLinks\">\n <a *ngIf=\"socialLink.link\"\n [routerLink]=\"socialLink.link\"\n [attr.target]=\"socialLink.target\"\n [attr.class]=\"socialLink.icon\"\n [class.with-icon]=\"socialLink.icon\">\n <nb-icon *ngIf=\"socialLink.icon; else title\" [icon]=\"socialLink.icon\"></nb-icon>\n <ng-template #title>{{ socialLink.title }}</ng-template>\n </a>\n <a *ngIf=\"socialLink.url\"\n [attr.href]=\"socialLink.url\"\n [attr.target]=\"socialLink.target\"\n [attr.class]=\"socialLink.icon\"\n [class.with-icon]=\"socialLink.icon\">\n <nb-icon *ngIf=\"socialLink.icon; else title\" [icon]=\"socialLink.icon\"></nb-icon>\n <ng-template #title>{{ socialLink.title }}</ng-template>\n </a>\n </ng-container>\n </div>\n</section>\n\n<section class=\"another-action\" aria-label=\"Sign in\">\n Already have an account? <a class=\"text-link\" routerLink=\"../login\">Log in</a>\n</section>\n",
|
58 | changeDetection: ChangeDetectionStrategy.OnPush,
|
59 | styles: [":host .title{margin-bottom:2rem}\n"]
|
60 | },] }
|
61 | ];
|
62 | NbRegisterComponent.ctorParameters = () => [
|
63 | { type: NbAuthService },
|
64 | { type: undefined, decorators: [{ type: Inject, args: [NB_AUTH_OPTIONS,] }] },
|
65 | { type: ChangeDetectorRef },
|
66 | { type: Router }
|
67 | ];
|
68 |
|
\ | No newline at end of file |