From e1863ec9fae15a19d90296b99e07fafa41d04b9a Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Wed, 1 Aug 2018 12:21:57 +0300 Subject: [PATCH] refactor(auth): make components CD=OnPush, use `nbInput`, `nbButton` (#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 --- src/framework/auth/auth.module.ts | 12 ++- .../auth/components/login/login.component.ts | 45 +++++++---- .../components/register/register.component.ts | 75 +++++++++++++------ .../request-password.component.ts | 39 ++++++---- .../reset-password.component.ts | 54 +++++++++---- .../components/button/_button-sizes.scss | 4 +- .../button/_button.component.theme.scss | 2 +- .../global/bootstrap/_default-buttons.scss | 2 +- 8 files changed, 160 insertions(+), 73 deletions(-) diff --git a/src/framework/auth/auth.module.ts b/src/framework/auth/auth.module.ts index a337249ed8..a73eaa7a30 100644 --- a/src/framework/auth/auth.module.ts +++ b/src/framework/auth/auth.module.ts @@ -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, @@ -78,6 +85,9 @@ export function nbOptionsFactory(options) { NbLayoutModule, NbCardModule, NbCheckboxModule, + NbAlertModule, + NbInputModule, + NbButtonModule, RouterModule.forChild(routes), FormsModule, HttpClientModule, diff --git a/src/framework/auth/components/login/login.component.ts b/src/framework/auth/components/login/login.component.ts index ab7aecffcb..495c701296 100644 --- a/src/framework/auth/components/login/login.component.ts +++ b/src/framework/auth/components/login/login.component.ts @@ -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'; @@ -20,23 +20,28 @@ import { NbAuthResult } from '../../services/auth-result';
- + - +
- Email is required! @@ -49,9 +54,15 @@ import { NbAuthResult } from '../../services/auth-result';
- @@ -73,7 +84,10 @@ import { NbAuthResult } from '../../services/auth-result'; Forgot Password?
- @@ -106,6 +120,7 @@ import { NbAuthResult } from '../../services/auth-result';
`, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class NbLoginComponent { @@ -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'); @@ -148,6 +164,7 @@ export class NbLoginComponent { return this.router.navigateByUrl(redirect); }, this.redirectDelay); } + this.cd.detectChanges(); }); } diff --git a/src/framework/auth/components/register/register.component.ts b/src/framework/auth/components/register/register.component.ts index fe8a1b4552..5df3c12f6e 100644 --- a/src/framework/auth/components/register/register.component.ts +++ b/src/framework/auth/components/register/register.component.ts @@ -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'; @@ -20,26 +20,30 @@ import { NbAuthResult } from '../../services/auth-result';

Sign Up

- - +
- + [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"> Full name is required! @@ -55,9 +59,15 @@ import { NbAuthResult } from '../../services/auth-result';
- Email is required! @@ -70,9 +80,15 @@ import { NbAuthResult } from '../../services/auth-result';
- @@ -91,11 +107,16 @@ import { NbAuthResult } from '../../services/auth-result';
- + Password confirmation is required! @@ -113,7 +134,10 @@ import { NbAuthResult } from '../../services/auth-result';
- @@ -146,6 +170,7 @@ import { NbAuthResult } from '../../services/auth-result';
`, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class NbRegisterComponent { @@ -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'); @@ -187,6 +213,7 @@ export class NbRegisterComponent { return this.router.navigateByUrl(redirect); }, this.redirectDelay); } + this.cd.detectChanges(); }); } diff --git a/src/framework/auth/components/request-password/request-password.component.ts b/src/framework/auth/components/request-password/request-password.component.ts index a3192b0b22..c182577581 100644 --- a/src/framework/auth/components/request-password/request-password.component.ts +++ b/src/framework/auth/components/request-password/request-password.component.ts @@ -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'; @@ -17,27 +17,32 @@ import { NbAuthResult } from '../../services/auth-result'; template: `

Forgot Password

- Enter your email adress and we’ll send a link to reset your password + Enter your email address and we’ll send a link to reset your password - - +
- + Email is required! @@ -47,7 +52,10 @@ import { NbAuthResult } from '../../services/auth-result';
- @@ -63,6 +71,7 @@ import { NbAuthResult } from '../../services/auth-result';
`, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class NbRequestPasswordComponent { @@ -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'); @@ -102,6 +112,7 @@ export class NbRequestPasswordComponent { return this.router.navigateByUrl(redirect); }, this.redirectDelay); } + this.cd.detectChanges(); }); } diff --git a/src/framework/auth/components/reset-password/reset-password.component.ts b/src/framework/auth/components/reset-password/reset-password.component.ts index fbd70805e9..a5d365ebdf 100644 --- a/src/framework/auth/components/reset-password/reset-password.component.ts +++ b/src/framework/auth/components/reset-password/reset-password.component.ts @@ -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'; @@ -20,24 +20,32 @@ import { NbAuthResult } from '../../services/auth-result'; Please enter a new password - - +
- + [maxlength]="getConfigValue('forms.validation.password.maxLength')"> Password is required! @@ -53,11 +61,19 @@ import { NbAuthResult } from '../../services/auth-result';
- + Password confirmation is required! @@ -69,7 +85,10 @@ import { NbAuthResult } from '../../services/auth-result';
- @@ -85,6 +104,7 @@ import { NbAuthResult } from '../../services/auth-result';
`, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class NbResetPasswordComponent { @@ -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'); @@ -124,6 +145,7 @@ export class NbResetPasswordComponent { return this.router.navigateByUrl(redirect); }, this.redirectDelay); } + this.cd.detectChanges(); }); } diff --git a/src/framework/theme/components/button/_button-sizes.scss b/src/framework/theme/components/button/_button-sizes.scss index cbcccd1aea..e7b6ca334b 100644 --- a/src/framework/theme/components/button/_button-sizes.scss +++ b/src/framework/theme/components/button/_button-sizes.scss @@ -12,7 +12,7 @@ nb-theme(btn-border-radius)); } -@mixin btn-meduim() { +@mixin btn-medium() { @include button-size(nb-theme(btn-padding-y-md), nb-theme(btn-padding-x-md), nb-theme(btn-font-size-md), @@ -42,7 +42,7 @@ } &.btn-medium { - @include btn-meduim(); + @include btn-medium(); } &.btn-small { diff --git a/src/framework/theme/components/button/_button.component.theme.scss b/src/framework/theme/components/button/_button.component.theme.scss index 6a10f02b6f..d1f8e9cde2 100644 --- a/src/framework/theme/components/button/_button.component.theme.scss +++ b/src/framework/theme/components/button/_button.component.theme.scss @@ -23,7 +23,7 @@ color: nb-theme(btn-fg); cursor: nb-theme(btn-cursor); } - @include btn-meduim(); + @include btn-medium(); @include btn-primary(); @include btn-sizes(); diff --git a/src/framework/theme/styles/global/bootstrap/_default-buttons.scss b/src/framework/theme/styles/global/bootstrap/_default-buttons.scss index a7c9a67c0a..74f12681dd 100644 --- a/src/framework/theme/styles/global/bootstrap/_default-buttons.scss +++ b/src/framework/theme/styles/global/bootstrap/_default-buttons.scss @@ -229,7 +229,7 @@ // Disabled @mixin btn-disabled() { - &:disabled { + &:disabled, &.btn-disabled { opacity: nb-theme(btn-disabled-opacity); } }