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 
…595)

BREAKING CHANGE:
possibly a breaking change since we don't use bootstrap inputs and buttons anymore
and use Nebular components instead
also OnPush added to the components
  • Loading branch information
@nnixaa
nnixaa committed Aug 1, 2018
1 parent ff0985e commit e1863ec
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 73 deletions.
12 changes: 11 additions & 1 deletion src/framework/auth/auth.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { NbCardModule, NbCheckboxModule, NbLayoutModule } from '@nebular/theme';
import {
NbAlertModule,
NbButtonModule,
NbCardModule,
NbCheckboxModule,
NbInputModule,
NbLayoutModule,
} from '@nebular/theme';

import {
NB_AUTH_FALLBACK_TOKEN,
Expand Down Expand Up @@ -78,6 +85,9 @@ export function nbOptionsFactory(options) {
NbLayoutModule,
NbCardModule,
NbCheckboxModule,
NbAlertModule,
NbInputModule,
NbButtonModule,
RouterModule.forChild(routes),
FormsModule,
HttpClientModule,
Expand Down
45 changes: 31 additions & 14 deletions src/framework/auth/components/login/login.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 All @@ -20,23 +20,28 @@ import { NbAuthResult } from '../../services/auth-result';
<form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">
<div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted"
class="alert alert-danger" role="alert">
<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
<div><strong>Oh snap!</strong></div>
<div *ngFor="let error of errors">{{ error }}</div>
</div>
</nb-alert>
<div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted"
class="alert alert-success" role="alert">
<nb-alert *ngIf="showMessages.success && messages?.length && !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">Email address</label>
<input name="email" [(ngModel)]="user.email" id="input-email" pattern=".+@.+\..+"
class="form-control" placeholder="Email address" #email="ngModel"
[class.form-control-danger]="email.invalid && email.touched" autofocus
<input nbInput
[(ngModel)]="user.email"
#email="ngModel"
name="email"
id="input-email"
pattern=".+@.+\..+"
placeholder="Email address"
autofocus
fullWidth
[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!
Expand All @@ -49,9 +54,15 @@ import { NbAuthResult } from '../../services/auth-result';
<div class="form-group">
<label for="input-password" class="sr-only">Password</label>
<input name="password" [(ngModel)]="user.password" type="password" id="input-password"
class="form-control" placeholder="Password" #password="ngModel"
[class.form-control-danger]="password.invalid && password.touched"
<input nbInput
[(ngModel)]="user.password"
#password="ngModel"
name="password"
type="password"
id="input-password"
placeholder="Password"
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')">
Expand All @@ -73,7 +84,10 @@ import { NbAuthResult } from '../../services/auth-result';
<a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
</div>
<button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success"
<button nbButton
status="success"
fullWidth
[disabled]="submitted || !form.valid"
[class.btn-pulse]="submitted">
Sign In
</button>
Expand Down Expand Up @@ -106,6 +120,7 @@ import { NbAuthResult } from '../../services/auth-result';
</div>
</nb-auth-block>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NbLoginComponent {

Expand All @@ -121,6 +136,7 @@ export class NbLoginComponent {

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

this.redirectDelay = this.getConfigValue('forms.login.redirectDelay');
Expand Down Expand Up @@ -148,6 +164,7 @@ export class NbLoginComponent {
return this.router.navigateByUrl(redirect);
}, this.redirectDelay);
}
this.cd.detectChanges();
});
}

Expand Down
75 changes: 51 additions & 24 deletions 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 All @@ -20,26 +20,30 @@ import { NbAuthResult } from '../../services/auth-result';
<h2 class="title">Sign Up</h2>
<form (ngSubmit)="register()" #form="ngForm">
<div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted"
class="alert alert-danger" role="alert">
<nb-alert *ngIf="showMessages.error && errors?.length && !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?.length && !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-name" class="sr-only">Full name</label>
<input name="fullName" [(ngModel)]="user.fullName" id="input-name" #fullName="ngModel"
class="form-control" placeholder="Full name"
[class.form-control-danger]="fullName.invalid && fullName.touched"
<input nbInput
[(ngModel)]="user.fullName"
#fullName="ngModel"
id="input-name"
name="fullName"
placeholder="Full name"
autofocus
fullWidth
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.fullName.required')"
[minlength]="getConfigValue('forms.validation.fullName.minLength')"
[maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
autofocus>
[maxlength]="getConfigValue('forms.validation.fullName.maxLength')">
<small class="form-text error" *ngIf="fullName.invalid && fullName.touched && fullName.errors?.required">
Full name is required!
</small>
Expand All @@ -55,9 +59,15 @@ import { NbAuthResult } from '../../services/auth-result';
<div class="form-group">
<label for="input-email" class="sr-only">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"
<input nbInput
[(ngModel)]="user.email"
#email="ngModel"
id="input-email"
name="email"
pattern=".+@.+..+"
placeholder="Email address"
fullWidth
[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!
Expand All @@ -70,9 +80,15 @@ import { NbAuthResult } from '../../services/auth-result';
<div class="form-group">
<label for="input-password" class="sr-only">Password</label>
<input name="password" [(ngModel)]="user.password" type="password" id="input-password"
class="form-control" placeholder="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"
placeholder="Password"
fullWidth
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.password.required')"
[minlength]="getConfigValue('forms.validation.password.minLength')"
[maxlength]="getConfigValue('forms.validation.password.maxLength')">
Expand All @@ -91,11 +107,16 @@ import { NbAuthResult } from '../../services/auth-result';
<div class="form-group">
<label for="input-re-password" class="sr-only">Repeat password</label>
<input
name="rePass" [(ngModel)]="user.confirmPassword" type="password" id="input-re-password"
class="form-control" 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"
type="password"
id="input-re-password"
name="rePass"
placeholder="Confirm Password"
fullWidth
[status]="email.dirty ? (email.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 @@ -113,7 +134,10 @@ import { NbAuthResult } from '../../services/auth-result';
</nb-checkbox>
</div>
<button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success"
<button nbButton
status="success"
fullWidth
[disabled]="submitted || !form.valid"
[class.btn-pulse]="submitted">
Register
</button>
Expand Down Expand Up @@ -146,6 +170,7 @@ import { NbAuthResult } from '../../services/auth-result';
</div>
</nb-auth-block>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NbRegisterComponent {

Expand All @@ -161,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 @@ -187,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?.length && !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.length && !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
Loading

0 comments on commit e1863ec

Please sign in to comment.