Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/auth button input #595

Merged
merged 3 commits into from
Aug 1, 2018
Merged

Feat/auth button input #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2948348
refactor(auth): use nbButton and nbInput instead of bootstrap
nnixaa Jul 30, 2018
a333eb7
refactor(auth): make components CD=OnPush, use `nbInput`, `nbButton`
nnixaa Jul 30, 2018
401742c
Merge branch 'master' into feat/auth-button-input
nnixaa Aug 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/framework/auth/auth.module.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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