src/app/auth/sign-up/sign-up.component.ts
selector | crm-sign-up |
templateUrl | ./sign-up.component.html |
Properties |
Methods |
|
constructor(formBuilder: FormBuilder, route: ActivatedRoute, authService: AuthService, ns: NotificationsService, router: Router)
|
||||||||||||||||||||||||
Defined in src/app/auth/sign-up/sign-up.component.ts:24
|
||||||||||||||||||||||||
Parameters :
|
Private formInit |
formInit()
|
Defined in src/app/auth/sign-up/sign-up.component.ts:67
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/auth/sign-up/sign-up.component.ts:59
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/auth/sign-up/sign-up.component.ts:40
|
Returns :
void
|
onSubmit |
onSubmit()
|
Defined in src/app/auth/sign-up/sign-up.component.ts:33
|
Returns :
void
|
changeValueSubscription |
changeValueSubscription:
|
Type : Subscription
|
Defined in src/app/auth/sign-up/sign-up.component.ts:17
|
email:
|
Type : string
|
Defined in src/app/auth/sign-up/sign-up.component.ts:23
|
hash |
hash:
|
Type : string
|
Defined in src/app/auth/sign-up/sign-up.component.ts:24
|
passIsEqual |
passIsEqual:
|
Type : boolean
|
Default value : false
|
Defined in src/app/auth/sign-up/sign-up.component.ts:20
|
showNotEqual |
showNotEqual:
|
Type : boolean
|
Default value : false
|
Defined in src/app/auth/sign-up/sign-up.component.ts:21
|
signUpForm |
signUpForm:
|
Type : FormGroup
|
Defined in src/app/auth/sign-up/sign-up.component.ts:15
|
signUpSubscription |
signUpSubscription:
|
Type : Subscription
|
Defined in src/app/auth/sign-up/sign-up.component.ts:18
|
subscription |
subscription:
|
Type : Subscription
|
Defined in src/app/auth/sign-up/sign-up.component.ts:16
|
import {Component, OnDestroy, OnInit} from "@angular/core";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {AuthService} from "../../core/auth/auth.service";
import {NotificationsService} from "../../core/notifications/notifications.service";
@Component({
selector: 'crm-sign-up',
templateUrl: './sign-up.component.html',
styles: []
})
export class SignUpComponent implements OnInit, OnDestroy {
signUpForm: FormGroup;
subscription: Subscription;
changeValueSubscription: Subscription;
signUpSubscription: Subscription;
passIsEqual: boolean = false;
showNotEqual: boolean = false;
email: string;
hash: string;
constructor(private formBuilder: FormBuilder,
private route: ActivatedRoute,
private authService: AuthService,
private ns: NotificationsService,
private router: Router) {
}
onSubmit() {
this.signUpSubscription = this.authService.signUp(this.signUpForm.value.pass, this.hash).subscribe(
ok => this.router.navigate(['/profile']),
error => this.ns.error(error.json().message)
);
}
ngOnInit() {
this.formInit();
this.subscription = this.route.queryParams.subscribe(params => {
this.email = params['email'];
if (params.hasOwnProperty('hash')) {
this.hash = params['hash'];
} else {
//todo maybe redirect to some error page
this.ns.error('Invited hash not found. Please go to link in email again');
}
});
//todo rewrite using validator
this.changeValueSubscription = this.signUpForm.valueChanges.subscribe(value => {
this.passIsEqual = value.pass === value.repeat && value.pass.length > 0;
this.showNotEqual = !this.passIsEqual && value.repeat.length > 0;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
this.changeValueSubscription.unsubscribe();
if (this.signUpSubscription) {
this.signUpSubscription.unsubscribe();
}
}
private formInit() {
this.signUpForm = this.formBuilder.group({
pass: ['', [Validators.required, Validators.minLength(6)]],
repeat: ['', Validators.required]
});
}
}
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mx-2">
<div class="card-block p-2">
<h1>Register</h1>
<p class="text-muted">Create your account for email: {{email}}</p>
<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
<small *ngIf="signUpForm.controls.pass.dirty && signUpForm.controls.pass.errors" class="form-text text-danger">
Password must be at least 6 characters</small>
<div class="input-group mb-1">
<span class="input-group-addon"><i class="icon-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" formControlName="pass">
</div>
<small class="form-text text-danger" *ngIf="showNotEqual">Passwords do not match!</small>
<div class="input-group mb-2">
<span class="input-group-addon"><i class="icon-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Repeat password" formControlName="repeat">
</div>
<button type="submit" class="btn btn-block btn-success" [disabled]="!signUpForm.valid || !passIsEqual">
Create Account
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>