127 lines
3.3 KiB
TypeScript
127 lines
3.3 KiB
TypeScript
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
|
import {
|
|
AbstractControl,
|
|
FormBuilder,
|
|
FormGroup,
|
|
ValidationErrors,
|
|
ValidatorFn,
|
|
Validators
|
|
} from '@angular/forms';
|
|
import { Subject } from 'rxjs';
|
|
import { takeUntil } from 'rxjs/internal/operators';
|
|
import { take } from 'rxjs/operators';
|
|
import { fuseAnimations } from 'src/@fuse/animations';
|
|
import { User } from 'src/modules/user/model/user.model';
|
|
import { SignupRequest } from 'src/modules/auth/model/auth-signup-request.model';
|
|
import { AuthService } from 'src/modules/auth/service/auth.service';
|
|
@Component({
|
|
selector: 'app-user-regist',
|
|
templateUrl: './user-regist.component.html',
|
|
styleUrls: ['./user-regist.component.scss'],
|
|
encapsulation: ViewEncapsulation.Emulated,
|
|
animations: fuseAnimations
|
|
})
|
|
export class UserRegistComponent implements OnInit, OnDestroy {
|
|
registerForm: FormGroup;
|
|
// Horizontal Stepper
|
|
horizontalStepperStep1: FormGroup;
|
|
horizontalStepperStep2: FormGroup;
|
|
horizontalStepperStep3: FormGroup;
|
|
|
|
// Private
|
|
private _unsubscribeAll: Subject<any>;
|
|
|
|
/*
|
|
*
|
|
* Constructor
|
|
*
|
|
* @param {FormBuilder} _formBuilder
|
|
*/
|
|
constructor(
|
|
private _formBuilder: FormBuilder,
|
|
private _authService: AuthService
|
|
) {
|
|
// Set the private defaults
|
|
this._unsubscribeAll = new Subject();
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Lifecycle hooks
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
/**
|
|
* On init
|
|
*/
|
|
ngOnInit() {
|
|
// Reactive Form
|
|
this.registerForm = this._formBuilder.group({
|
|
username: ['', Validators.required],
|
|
phone: ['', Validators.required],
|
|
password: ['', Validators.required],
|
|
passwordConfirm: ['', [Validators.required, confirmPasswordValidator]],
|
|
nickname: ['', Validators.required],
|
|
email: [''],
|
|
descriptions: ['']
|
|
});
|
|
|
|
// Update the validity of the 'passwordConfirm' field
|
|
// when the 'password' field changes
|
|
this.registerForm
|
|
.get('password')
|
|
.valueChanges.pipe(takeUntil(this._unsubscribeAll))
|
|
.subscribe(() => {
|
|
this.registerForm.get('passwordConfirm').updateValueAndValidity();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* On destroy
|
|
*/
|
|
ngOnDestroy(): void {
|
|
// Unsubscribe from all subscriptions
|
|
this._unsubscribeAll.next();
|
|
this._unsubscribeAll.complete();
|
|
}
|
|
|
|
registUser(): void {
|
|
let user: SignupRequest = <SignupRequest>this.registerForm.value;
|
|
console.log(user);
|
|
this._authService
|
|
.signup(user)
|
|
.pipe(take(1))
|
|
.subscribe(
|
|
res => {
|
|
console.log(res);
|
|
},
|
|
err => {
|
|
console.log(err);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
export const confirmPasswordValidator: ValidatorFn = (
|
|
control: AbstractControl
|
|
): ValidationErrors | null => {
|
|
if (!control.parent || !control) {
|
|
return null;
|
|
}
|
|
|
|
const password = control.parent.get('password');
|
|
const passwordConfirm = control.parent.get('passwordConfirm');
|
|
|
|
if (!password || !passwordConfirm) {
|
|
return null;
|
|
}
|
|
|
|
if (passwordConfirm.value === '') {
|
|
return null;
|
|
}
|
|
|
|
if (password.value === passwordConfirm.value) {
|
|
return null;
|
|
}
|
|
|
|
return { passwordsNotMatching: true };
|
|
};
|