66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
|
|
import { Router } from '@angular/router';
|
|
import { first } from 'rxjs/operators';
|
|
|
|
import { AccountService } from '../account.service';
|
|
import { PasswordErrorStateMatcher } from './password-error-state-matcher';
|
|
|
|
@Component({
|
|
selector: 'app-register',
|
|
templateUrl: './register.component.html',
|
|
styleUrls: ['./register.component.css']
|
|
})
|
|
export class RegisterComponent implements OnInit {
|
|
form = this.formBuilder.group({
|
|
username: ['', Validators.required],
|
|
email: ['', [Validators.required, Validators.email]],
|
|
password: this.formBuilder.group({
|
|
first: ['', [Validators.required, Validators.minLength(15)]],
|
|
second: ['', [Validators.required, Validators.minLength(15)]],
|
|
},
|
|
{ validators: this.passwordsEqual }),
|
|
});
|
|
loading = false;
|
|
passwordErrorStateMatcher = new PasswordErrorStateMatcher();
|
|
|
|
constructor(private accountService: AccountService,
|
|
private formBuilder: FormBuilder,
|
|
private router: Router,
|
|
) { }
|
|
|
|
passwordsEqual(passwords: FormGroup): ValidationErrors | null {
|
|
const password1 = passwords.get('first');
|
|
const password2 = passwords.get('second');
|
|
|
|
return password1 && password2 && password1.value === password2.value ? null : { mismatch: true };
|
|
}
|
|
|
|
readForm() {
|
|
return {
|
|
username: this.form.get('username').value,
|
|
email: this.form.get('email').value,
|
|
password: this.form.get('password').get('first').value,
|
|
}
|
|
}
|
|
|
|
onRegister() {
|
|
if (this.form.invalid) {
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
this.accountService.register(this.readForm())
|
|
.pipe(first())
|
|
.subscribe(data => {
|
|
this.router.navigate(['/login']);
|
|
},
|
|
error => {
|
|
// TODO error handling
|
|
console.log(error);
|
|
this.loading = false;
|
|
});
|
|
}
|
|
|
|
ngOnInit(): void { }
|
|
}
|