diff --git a/@overflow/member/component/member-modify-password.component.html b/@overflow/member/component/member-modify-password.component.html index d2a424e..c6ca618 100644 --- a/@overflow/member/component/member-modify-password.component.html +++ b/@overflow/member/component/member-modify-password.component.html @@ -1,4 +1,4 @@ -
+
@@ -14,31 +14,34 @@ -
- {{ formErrors.pw }} +
+ Invalid password
-
- {{ formErrors.confirmPw }} +
+ Not matched password
- - Signin + Signin
@@ -48,3 +51,7 @@ + +
+ Password Modify Complete +
diff --git a/@overflow/member/component/member-modify-password.component.ts b/@overflow/member/component/member-modify-password.component.ts index f865689..144ce9c 100644 --- a/@overflow/member/component/member-modify-password.component.ts +++ b/@overflow/member/component/member-modify-password.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; -import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import {FormGroup, FormBuilder, Validators, FormControl, ValidationErrors, AbstractControl} from '@angular/forms'; +import {Member} from '@overflow/commons-typescript/model/member'; @Component({ selector: 'of-member-modify-password', @@ -7,14 +8,14 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms'; }) export class MemberModifyPasswordComponent implements OnInit { @Input() token: string; + @Input() member: Member; + @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>(); @Output() signin = new EventEmitter(); modifyPasswordForm: FormGroup; - formErrors = { - 'pw': '', - 'confirmPw': '' - }; + password: AbstractControl; + pwConfirm: AbstractControl; constructor( private formBuilder: FormBuilder, @@ -26,26 +27,46 @@ export class MemberModifyPasswordComponent implements OnInit { initForm() { this.modifyPasswordForm = this.formBuilder.group({ - 'pw': [ + 'password': [ '', [ - // Validators.required, + Validators.required, + Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'), + Validators.minLength(6), + Validators.maxLength(25), ] ], - 'confirmPw': [ + 'pwConfirm': [ '', [ - // Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'), - // Validators.minLength(6), - // Validators.maxLength(25) + Validators.compose([ + Validators.required, this.pwMatchValidator + ]) ] - ], + ] }); + this.password = this.modifyPasswordForm.controls['password']; + this.pwConfirm = this.modifyPasswordForm.controls['pwConfirm']; + } + + pwMatchValidator(control: FormControl): ValidationErrors { + let pw; + if (control.parent) { + pw = control.parent.controls['password'].value; + } + if (control.value !== pw) { + return { notMatched: true }; + } + return null; } modifyPasswordFormSubmit() { const formValue = Object.assign({}, this.modifyPasswordForm.value); this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw}); } + + onSignin() { + this.signin.emit(); + } } diff --git a/@overflow/member/component/member-reset-password.component.html b/@overflow/member/component/member-reset-password.component.html index 2a5a1bb..b5a27b0 100644 --- a/@overflow/member/component/member-reset-password.component.html +++ b/@overflow/member/component/member-reset-password.component.html @@ -1,6 +1,6 @@ -
+
-
+