Skip to content

Commit

Permalink
refactor(auth): make components CD=OnPush, use nbInput, nbButton
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
possible breaking change since we don't use bootstrap inputs and buttons anymore
and use Nebular components instead
  • Loading branch information
@nnixaa
nnixaa committed Jul 31, 2018
2 parents 2948348 + 4360a18 commit 6bf4270
Show file tree
Hide file tree
Showing 27 changed files with 904 additions and 172 deletions.
1 change: 1 addition & 0 deletions karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ module.exports = function (config) {
},
reporters: ['spec', 'kjhtml'],
port: 9876,
browserNoActivityTimeout : 60000,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
Expand Down
35 changes: 17 additions & 18 deletions src/framework/auth/components/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,24 +149,23 @@ export class NbLoginComponent {
this.errors = this.messages = [];
this.submitted = true;

this.service.authenticate(this.strategy, this.user)
.subscribe((result: NbAuthResult) => {
this.submitted = false;

if (result.isSuccess()) {
this.messages = result.getMessages();
} else {
this.errors = result.getErrors();
}

const redirect = result.getRedirect();
if (redirect) {
setTimeout(() => {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
this.submitted = false;

if (result.isSuccess()) {
this.messages = result.getMessages();
} else {
this.errors = result.getErrors();
}

const redirect = result.getRedirect();
if (redirect) {
setTimeout(() => {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
}

getConfigValue(key: string): any {
Expand Down
5 changes: 4 additions & 1 deletion src/framework/auth/components/register/register.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, Inject } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { NB_AUTH_OPTIONS, NbAuthSocialLink } from '../../auth.options';
import { getDeepFromObject } from '../../helpers';
Expand Down Expand Up @@ -170,6 +170,7 @@ import { NbAuthResult } from '../../services/auth-result';
</div>
</nb-auth-block>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NbRegisterComponent {

Expand All @@ -185,6 +186,7 @@ export class NbRegisterComponent {

constructor(protected service: NbAuthService,
@Inject(NB_AUTH_OPTIONS) protected options = {},
protected cd: ChangeDetectorRef,
protected router: Router) {

this.redirectDelay = this.getConfigValue('forms.register.redirectDelay');
Expand All @@ -211,6 +213,7 @@ export class NbRegisterComponent {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
}

Expand Down
39 changes: 25 additions & 14 deletions src/framework/auth/components/request-password/request-password.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, Inject } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { NB_AUTH_OPTIONS } from '../../auth.options';
import { getDeepFromObject } from '../../helpers';
Expand All @@ -17,27 +17,32 @@ import { NbAuthResult } from '../../services/auth-result';
template: `
<nb-auth-block>
<h2 class="title">Forgot Password</h2>
<small class="form-text sub-title">Enter your email adress and we’ll send a link to reset your password</small>
<small class="form-text sub-title">Enter your email address and we’ll send a link to reset your password</small>
<form (ngSubmit)="requestPass()" #requestPassForm="ngForm">
<div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted"
class="alert alert-danger" role="alert">
<nb-alert *ngIf="showMessages.error && errors && errors.length > 0 && !submitted" outline="danger">
<div><strong>Oh snap!</strong></div>
<div *ngFor="let error of errors">{{ error }}</div>
</div>
<div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted"
class="alert alert-success" role="alert">
</nb-alert>
<nb-alert *ngIf="showMessages.success && messages && messages.length > 0 && !submitted" outline="success">
<div><strong>Hooray!</strong></div>
<div *ngFor="let message of messages">{{ message }}</div>
</div>
</nb-alert>
<div class="form-group">
<label for="input-email" class="sr-only">Enter your email address</label>
<input name="email" [(ngModel)]="user.email" id="input-email" #email="ngModel"
class="form-control" placeholder="Email address" pattern=".+@.+\..+"
[class.form-control-danger]="email.invalid && email.touched"
[required]="getConfigValue('forms.validation.email.required')"
autofocus>
<input nbInput
#email="ngModel"
[(ngModel)]="user.email"
id="input-email"
name="email"
placeholder="Email address"
autofocus
fullWidth
pattern=".+@.+\..+"
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.email.required')">
<small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
Email is required!
</small>
Expand All @@ -47,7 +52,10 @@ import { NbAuthResult } from '../../services/auth-result';
</small>
</div>
<button [disabled]="submitted || !requestPassForm.form.valid" class="btn btn-hero-success btn-block"
<button nbButton
status="success"
fullWidth
[disabled]="submitted || !requestPassForm.valid"
[class.btn-pulse]="submitted">
Request password
</button>
Expand All @@ -63,6 +71,7 @@ import { NbAuthResult } from '../../services/auth-result';
</div>
</nb-auth-block>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NbRequestPasswordComponent {

Expand All @@ -77,6 +86,7 @@ export class NbRequestPasswordComponent {

constructor(protected service: NbAuthService,
@Inject(NB_AUTH_OPTIONS) protected options = {},
protected cd: ChangeDetectorRef,
protected router: Router) {

this.redirectDelay = this.getConfigValue('forms.requestPassword.redirectDelay');
Expand All @@ -102,6 +112,7 @@ export class NbRequestPasswordComponent {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
}

Expand Down
54 changes: 38 additions & 16 deletions src/framework/auth/components/reset-password/reset-password.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, Inject } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { NB_AUTH_OPTIONS } from '../../auth.options';
import { getDeepFromObject } from '../../helpers';
Expand All @@ -20,24 +20,32 @@ import { NbAuthResult } from '../../services/auth-result';
<small class="form-text sub-title">Please enter a new password</small>
<form (ngSubmit)="resetPass()" #resetPassForm="ngForm">
<div *ngIf="errors && errors.length > 0 && !submitted" class="alert alert-danger" role="alert">
<nb-alert *ngIf="showMessages.error && errors && errors.length > 0 && !submitted" outline="danger">
<div><strong>Oh snap!</strong></div>
<div *ngFor="let error of errors">{{ error }}</div>
</div>
<div *ngIf="messages && messages.length > 0 && !submitted" class="alert alert-success" role="alert">
</nb-alert>
<nb-alert *ngIf="showMessages.success && messages && messages.length > 0 && !submitted" outline="success">
<div><strong>Hooray!</strong></div>
<div *ngFor="let message of messages">{{ message }}</div>
</div>
</nb-alert>
<div class="form-group">
<label for="input-password" class="sr-only">New Password</label>
<input name="password" [(ngModel)]="user.password" type="password" id="input-password"
class="form-control form-control-lg first" placeholder="New Password" #password="ngModel"
[class.form-control-danger]="password.invalid && password.touched"
<input nbInput
[(ngModel)]="user.password"
#password="ngModel"
type="password"
id="input-password"
name="password"
class="first"
placeholder="New Password"
autofocus
fullWidth
[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.password.required')"
[minlength]="getConfigValue('forms.validation.password.minLength')"
[maxlength]="getConfigValue('forms.validation.password.maxLength')"
autofocus>
[maxlength]="getConfigValue('forms.validation.password.maxLength')">
<small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
Password is required!
</small>
Expand All @@ -53,11 +61,19 @@ import { NbAuthResult } from '../../services/auth-result';
<div class="form-group">
<label for="input-re-password" class="sr-only">Confirm Password</label>
<input
name="rePass" [(ngModel)]="user.confirmPassword" type="password" id="input-re-password"
class="form-control form-control-lg last" placeholder="Confirm Password" #rePass="ngModel"
[class.form-control-danger]="(rePass.invalid || password.value != rePass.value) && rePass.touched"
[required]="getConfigValue('forms.validation.password.required')">
<input nbInput
[(ngModel)]="user.confirmPassword"
#rePass="ngModel"
id="input-re-password"
name="rePass"
type="password"
class="last"
placeholder="Confirm Password"
fullWidth
[status]="rePass.touched
? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
: ''"
[required]="getConfigValue('forms.validation.password.required')">
<small class="form-text error"
*ngIf="rePass.invalid && rePass.touched && rePass.errors?.required">
Password confirmation is required!
Expand All @@ -69,7 +85,10 @@ import { NbAuthResult } from '../../services/auth-result';
</small>
</div>
<button [disabled]="submitted || !resetPassForm.form.valid" class="btn btn-hero-success btn-block"
<button nbButton
status="success"
fullWidth
[disabled]="submitted || !resetPassForm.valid"
[class.btn-pulse]="submitted">
Change password
</button>
Expand All @@ -85,6 +104,7 @@ import { NbAuthResult } from '../../services/auth-result';
</div>
</nb-auth-block>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NbResetPasswordComponent {

Expand All @@ -99,6 +119,7 @@ export class NbResetPasswordComponent {

constructor(protected service: NbAuthService,
@Inject(NB_AUTH_OPTIONS) protected options = {},
protected cd: ChangeDetectorRef,
protected router: Router) {

this.redirectDelay = this.getConfigValue('forms.resetPassword.redirectDelay');
Expand All @@ -124,6 +145,7 @@ export class NbResetPasswordComponent {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
}

Expand Down
Loading

0 comments on commit 6bf4270

Please sign in to comment.