overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
geek
2018-05-31 19:20:14 +09:00
parent dd21157d5c
commit 9b7a852d1c
30 changed files with 619 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
@overflow/member/component/member-confirm-reset-password.component.html
View File

@@ -1,3 +1,32 @@
<div>
Your email has been verified. When you click the link button below, it goes to the password change screen.
<div class="ui-g" *ngIf="emailAuth$ | async">
<div class="ui-g-12">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12 ui-g-padding-15">
<strong>이메일 인증이 완료 되었습니다.</strong>
</div>
<div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
<p>패스워드 변경 화면으로 이동 후 패스워드 변경을 완료해주세요.</p>
</div>
<div class="ui-g-12 ui-g-padding-15">
<button
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
(click)="onModifyPassword()">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
<span class="ui-button-text ui-c">Go to Reset Password</span>
</button>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

42
@overflow/member/component/member-confirm-reset-password.component.ts
View File

@@ -1,11 +1,49 @@
import {Component, OnInit} from '@angular/core';
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import {FormBuilder} from '@angular/forms';
import {EmailAuthService} from '../service/email-auth.service';
import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';
@Component({
selector: 'of-member-confirm-reset-password',
templateUrl: './member-confirm-reset-password.component.html',
})
export class MemberConfirmResetPasswordComponent implements OnInit {
constructor() { }
emailAuth$: Observable<EmailAuth>;
pending$: Observable<boolean>;
error$: Observable<any>;
@Input() token: string;
@Output() signin = new EventEmitter();
@Output() modifyPassword = new EventEmitter();
constructor(
private store: Store<any>,
private formBuilder: FormBuilder,
private emailAuthService: EmailAuthService,
) { }
ngOnInit(): void {
this.emailAuthService.readByPwAuthKey(this.token)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((emailAuth: EmailAuth) => {
this.emailAuth$ = of(emailAuth);
}),
catchError( err => {
this.error$ = of(err);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
onModifyPassword() {
this.modifyPassword.emit();
}
}

34
@overflow/member/component/member-confirm-signup.component.html
View File

@@ -1,3 +1,33 @@
<div>
Your email has been verified. Go to signin when you click the link button below.
<div class="ui-g" *ngIf="emailAuth$ | async">
<div class="ui-g-12">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12 ui-g-padding-15">
<strong>회원 가입이 완료 되었습니다.</strong>
</div>
<div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
<p>회원가입을 감사 드립니다.</p>
<p>아래 로그인 버튼 클릭 후 로그인을 이용하여 서비스를 이용해주세요.</p>
</div>
<div class="ui-g-12 ui-g-padding-15">
<button
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
(click)="onSignin()">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
<span class="ui-button-text ui-c">Go to Sign In</span>
</button>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

41
@overflow/member/component/member-confirm-signup.component.ts
View File

@@ -1,11 +1,48 @@
import {Component, OnInit} from '@angular/core';
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import {FormBuilder} from '@angular/forms';
import {EmailAuthService} from '../service/email-auth.service';
import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';
@Component({
selector: 'of-member-confirm-signup',
templateUrl: './member-confirm-signup.component.html',
})
export class MemberConfirmSignupComponent implements OnInit {
constructor() { }
@Input() token: string;
@Output() signin = new EventEmitter();
emailAuth$: Observable<EmailAuth>;
pending$: Observable<boolean>;
error$: Observable<any>;
constructor(
private store: Store<any>,
private formBuilder: FormBuilder,
private emailAuthService: EmailAuthService,
) { }
ngOnInit(): void {
this.emailAuthService.readBySignupAuthKey(this.token)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((emailAuth: EmailAuth) => {
this.emailAuth$ = of(emailAuth);
}),
catchError( err => {
this.error$ = of(err);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
onSignin() {
this.signin.emit();
}
}

38
@overflow/member/component/member-modify-password.component.html
View File

@@ -1,3 +1,4 @@
<ng-template #complete>
<div class="ui-g" *ngIf="!member">
<div class="ui-g-12">
<form [formGroup]="modifyPasswordForm" (ngSubmit)="modifyPasswordFormSubmit()">
@@ -51,7 +52,38 @@
</form>
</div>
</div>
<div class="ui-g" *ngIf="!member">
Password Modify Complete
</ng-template>
<div class="ui-g" *ngIf="member$ | async as member; else complete">
<div class="ui-g-12">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12 ui-g-padding-15">
<strong>패스워드 변경이 완료 되었습니다.</strong>
</div>
<div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
<p>입력하신 패스워드로 변경 되었으며,</p>
<p>로그인 페이지로 이동 후 변경된 패스워드로 로그인을 하시면 됩니다.</p>
<p>버튼 클릭 시 로그인 페이지로 이동 합니다.</p>
</div>
<div class="ui-g-12 ui-g-padding-15">
<button
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
(click)="onSignin()">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
<span class="ui-button-text ui-c">Go to Sign In</span>
</button>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

38
@overflow/member/component/member-modify-password.component.ts
View File

@@ -1,16 +1,26 @@
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import {FormGroup, FormBuilder, Validators, FormControl, ValidationErrors, AbstractControl} from '@angular/forms';
import {Member} from '@overflow/commons-typescript/model/member';
import { Member } from '@overflow/commons-typescript/model/member';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import { MemberService } from '../service/member.service';
@Component({
selector: 'of-member-modify-password',
templateUrl: './member-modify-password.component.html',
})
export class MemberModifyPasswordComponent implements OnInit {
@Input() token: string;
@Input() member: Member;
member$: Observable<Member>;
pending$: Observable<boolean>;
error$: Observable<any>;
@Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
@Input() token: string;
// @Input() member: Member;
// @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
@Output() signin = new EventEmitter();
modifyPasswordForm: FormGroup;
@@ -18,7 +28,9 @@ export class MemberModifyPasswordComponent implements OnInit {
pwConfirm: AbstractControl;
constructor(
private store: Store<any>,
private formBuilder: FormBuilder,
private memberService: MemberService,
) { }
ngOnInit() {
@@ -63,7 +75,23 @@ export class MemberModifyPasswordComponent implements OnInit {
modifyPasswordFormSubmit() {
const formValue = Object.assign({}, this.modifyPasswordForm.value);
this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});
// this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});
this.memberService.resetPassword(this.token, formValue.password, formValue.pwConfirm)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((rmember: Member) => {
this.member$ = of(rmember);
}),
catchError( err => {
this.error$ = of(err);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
onSignin() {

123
@overflow/member/component/member-reset-password.component.html
View File

@@ -1,45 +1,86 @@
<div class="ui-g" *ngIf="!member">
<div class="ui-g-12">
<form [formGroup]="resetPasswordForm" (ngSubmit)="resetPasswordSubmit()">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<!--img src="assets/layout/images/logo-ultima.svg" -->
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid email
</div>
</div>
<ng-template #complete>
<div class="ui-g">
<div class="ui-g-12">
<form [formGroup]="resetPasswordForm" (ngSubmit)="resetPasswordSubmit()">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<!--img src="assets/layout/images/logo-ultima.svg" -->
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input
type="email"
id="email"
autocomplete="off"
placeholder="Please enter your email"
formControlName="email"
required
class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid email
</div>
</div>
<div class="ui-g-12">
<button
[disabled]="!resetPasswordForm.valid"
type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-cached"></span>
<span class="ui-button-text ui-c">Reset Password</span>
</button>
<div class="ui-g-12">
<button
type="submit"
[disabled]="!resetPasswordForm.valid"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-cached"></span>
<span class="ui-button-text ui-c">Reset Password</span>
</button>
<a style="cursor: pointer" (click)="onSignin()">Sign In</a>
|
<a style="cursor: pointer" (click)="onSignup()">Sign Up</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<a style="cursor: pointer" (click)="onSignin()">Sign In</a>
|
<a style="cursor: pointer" (click)="onSignup()">Sign Up</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="ui-g" *ngIf="member">
I sent an authentication mail to the mail address you registered. Please check and change your password.
</div>
</ng-template>
<div class="ui-g" *ngIf="member$ | async as member; else complete">
<div class="ui-g-12">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12 ui-g-padding-15">
<strong>패스워드 변경이 신청 되었습니다.</strong>
</div>
<div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
<p>입력하신 이메일로 인증 메일이 발송 되었습니다.</p>
<p>받으신 <strong>메일을 확인</strong> 하시고, <strong>인증을 완료</strong> 하시면 패스워드 변경페이지로 이동 후 변경이 가능합니다.</p>
<p>신청하신 이메일 주소는 <strong>{{member.email}}</strong> 입니다.</p>
</div>
<!--<div class="ui-g-12 ui-g-padding-15">-->
<!--<button-->
<!--type="button"-->
<!--class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"-->
<!--(click)="onModifyPassword()">-->
<!--<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>-->
<!--<span class="ui-button-text ui-c">Go to Sign In</span>-->
<!--</button>-->
<!--</div>-->
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

35
@overflow/member/component/member-reset-password.component.ts
View File

@@ -10,24 +10,34 @@ import {
Validators,
AbstractControl
} from '@angular/forms';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import {Member} from '@overflow/commons-typescript/model/member';
import {MemberService} from '../service/member.service';
@Component({
selector: 'of-member-reset-password',
templateUrl: './member-reset-password.component.html',
})
export class MemberResetPasswordComponent implements OnInit {
@Output() resetPassword = new EventEmitter<string>();
// @Output() resetPassword = new EventEmitter<string>();
@Output() signin = new EventEmitter();
@Output() signup = new EventEmitter();
@Input() member: Member;
// @Input() member: Member;
member$: Observable<Member>;
pending$: Observable<boolean>;
error$: Observable<any>;
resetPasswordForm: FormGroup;
email: AbstractControl;
constructor(
private formBuilder: FormBuilder
private store: Store<any>,
private formBuilder: FormBuilder,
private memberService: MemberService,
) {
}
@@ -45,7 +55,23 @@ export class MemberResetPasswordComponent implements OnInit {
resetPasswordSubmit() {
const formValue = Object.assign({}, this.resetPasswordForm.value);
this.resetPassword.emit(formValue.email);
// this.resetPassword.emit(formValue.email);
this.memberService.sendEmailResetPassword(formValue.email)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((rmember: Member) => {
this.member$ = of(rmember);
}),
catchError( err => {
this.error$ = of(err);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
onSignin() {
@@ -55,4 +81,5 @@ export class MemberResetPasswordComponent implements OnInit {
onSignup() {
this.signup.emit();
}
}

14
@overflow/member/component/member-signup.component.html
View File

@@ -17,7 +17,8 @@
<of-member-policy (close)="policyDisplay = false"></of-member-policy>
</p-dialog>
<div class="ui-g" *ngIf="!member">
<ng-template #complete>
<div class="ui-g">
<div class="ui-g-12">
<form [formGroup]="signupForm" (ngSubmit)="signupFormSubmit()">
<table class="login-table">
@@ -165,9 +166,9 @@
</form>
</div>
</div>
</ng-template>
<div class="ui-g" *ngIf="member">
<div class="ui-g" *ngIf="member$ | async as member; else complete">
<div class="ui-g-12">
<table class="login-table">
<tr>
@@ -186,7 +187,10 @@
<p>신청하신 이메일 주소는 <strong>{{member.email}}</strong> 입니다.</p>
</div>
<div class="ui-g-12 ui-g-padding-15">
<button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<button
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
(click)="onSignin()">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
<span class="ui-button-text ui-c">Go to Sign In</span>
</button>
@@ -197,4 +201,4 @@
</tr>
</table>
</div>
</div>
</div>

34
@overflow/member/component/member-signup.component.ts
View File

@@ -7,15 +7,22 @@ import {
} from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl, ValidationErrors } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import {MemberService} from '../service/member.service';
@Component({
selector: 'of-member-signup',
templateUrl: './member-signup.component.html',
})
export class MemberSignupComponent implements OnInit, OnDestroy {
@Output() signup = new EventEmitter<{member: Member, password: string}>();
// @Output() signup = new EventEmitter<{member: Member, password: string}>();
@Output() signin = new EventEmitter();
@Input() member;
member$: Observable<Member>;
pending$: Observable<boolean>;
error$: Observable<any>;
signupForm: FormGroup;
email: AbstractControl;
@@ -30,7 +37,9 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
policyDisplay = false;
constructor(
private store: Store<any>,
private formBuilder: FormBuilder,
private memberService: MemberService,
) { }
@@ -122,7 +131,22 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
phone: signupValue.phone,
companyName: signupValue.company,
};
this.signup.emit({member: member, password: password});
this.memberService.signup(member, password)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((rmember: Member) => {
this.member$ = of(rmember);
}),
catchError( err => {
this.error$ = of(err);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
termsDisplayOpen() {
@@ -140,4 +164,8 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
onScriptError() {
console.log('Something went long when loading the Google reCAPTCHA');
}
onSignin() {
this.signin.emit();
}
}