This commit is contained in:
crusader 2018-05-28 20:16:00 +09:00
parent 6d25e3ab56
commit 2802c1ae17
13 changed files with 80 additions and 367 deletions

View File

@ -7,7 +7,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
}) })
export class MemberModifyPasswordComponent implements OnInit { export class MemberModifyPasswordComponent implements OnInit {
@Input() token: string; @Input() token: string;
@Output() resetPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>(); @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
@Output() signin = new EventEmitter(); @Output() signin = new EventEmitter();
modifyPasswordForm: FormGroup; modifyPasswordForm: FormGroup;
@ -46,6 +46,6 @@ export class MemberModifyPasswordComponent implements OnInit {
modifyPasswordFormSubmit() { modifyPasswordFormSubmit() {
const formValue = Object.assign({}, this.modifyPasswordForm.value); const formValue = Object.assign({}, this.modifyPasswordForm.value);
this.resetPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw}); this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});
} }
} }

View File

@ -1,4 +1,4 @@
<form [formGroup]="form" *ngIf="member" (ngSubmit)="onSubmit()"> <form [formGroup]="profileForm" *ngIf="domainMember" (ngSubmit)="profileFormSubmit()">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-4 ui-img-profile"> <div class="ui-g-12 ui-md-4 ui-img-profile">
<div class="ui-img-profile-box"> <div class="ui-img-profile-box">
@ -13,25 +13,25 @@
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText formControlName="email" readonly value="{{email}}"> <input type="text" pInputText formControlName="email" readonly value="{{member.email}}">
<label>Email</label> <label>Email</label>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText formControlName="name" value="{{name}}" > <input type="text" pInputText formControlName="name" value="{{member.name}}" >
<label>Name</label> <label>Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText formControlName="companyName" value="{{companyName}}" > <input type="text" pInputText formControlName="companyName" value="{{member.companyName}}" >
<label>Company Name</label> <label>Company Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText formControlName="phone" value="{{phone}}" > <input type="text" pInputText formControlName="phone" value="{{member.phone}}" >
<label>Phone</label> <label>Phone</label>
</span> </span>
</div> </div>

View File

@ -1,13 +1,14 @@
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Member } from '@overflow/commons-typescript/model/member'; import { Member } from '@overflow/commons-typescript/model/member';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
@Component({ @Component({
selector: 'of-member-profile', selector: 'of-member-profile',
templateUrl: './member-profile.component.html', templateUrl: './member-profile.component.html',
}) })
export class MemberProfileComponent implements OnInit, OnDestroy { export class MemberProfileComponent implements OnInit, OnDestroy {
@Input() member: Member; @Input() domainMember: DomainMember;
@Output() modify = new EventEmitter<Member>(); @Output() modify = new EventEmitter<Member>();
form: FormGroup; form: FormGroup;
@ -27,21 +28,21 @@ export class MemberProfileComponent implements OnInit, OnDestroy {
initForm() { initForm() {
this.form = this.formBuilder.group({ this.form = this.formBuilder.group({
'email': [this.member.email, 'email': ['',
[ [
Validators.required, Validators.required,
Validators.email Validators.email
]], ]],
'name': [this.member.name, []], 'name': ['', []],
'companyName': [this.member.companyName, []], 'companyName': ['', []],
'phone': [this.member.phone, []], 'phone': ['', []],
}); });
} }
onSubmit() { profileFormSubmit() {
const formValue = Object.assign({}, this.form.value); const formValue = Object.assign({}, this.form.value);
const member: Member = { const member: Member = {
email: this.member.email, email: this.domainMember.member.email,
name: formValue.name, name: formValue.name,
phone: formValue.phone, phone: formValue.phone,
companyName: formValue.companyName, companyName: formValue.companyName,

View File

@ -11,10 +11,9 @@ export class MemberSigninComponent implements OnInit {
@Input() signinError: string; @Input() signinError: string;
@Output() resetPassword = new EventEmitter(); @Output() resetPassword = new EventEmitter();
@Output() signup = new EventEmitter(); @Output() signup = new EventEmitter();
@Output() signin = new EventEmitter<{email: string, password: string, returnURL: string}>(); @Output() signin = new EventEmitter<{email: string, password: string}>();
errorMessage: string | null; errorMessage: string | null;
returnURL: string;
signinForm: FormGroup; signinForm: FormGroup;
formErrors = { formErrors = {
@ -53,7 +52,6 @@ export class MemberSigninComponent implements OnInit {
signinFormSubmit() { signinFormSubmit() {
const formValue = Object.assign({}, this.signinForm.value); const formValue = Object.assign({}, this.signinForm.value);
formValue.returnURL = this.returnURL;
this.signin.emit(formValue); this.signin.emit(formValue);
} }

View File

@ -1,72 +1,6 @@
<div class="ui-g"> <of-member-modify-password
<div class="ui-g-12 ui-md-9 ui-lg-7"> [token]="token"
<form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()"> (modifyPassword)="modifyPassword($event)"
<table class="login-table"> (signin)="signin"
<tr> >
<td> </of-member-modify-password>
<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">
<span class="md-inputfield">
<input type="password"
id="pw"
autocomplete="off" placeholder="password"
formControlName="pw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.pw" class="help is-danger">
{{ formErrors.pw }}
</div>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password"
id="confirmPw"
autocomplete="off" placeholder="confirm password"
formControlName="confirmPw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.confirmPw" class="help is-danger">
{{ formErrors.confirmPw }}
</div>
</div>
<div class="ui-g-12">
<button 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-person"></span>
<span class="ui-button-text ui-c">Confirm</span>
</button>
<a href="javascript:void(0)" (click)="signinBtn()">Signin</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<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/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

View File

@ -1,63 +1,28 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as ModifyPasswordStore from '../../store/reset-password'; import { select, Store } from '@ngrx/store';
import {select, Store} from '@ngrx/store'; import { Observable } from 'rxjs';
import { ResetPasswordSelector } from '../../store';
import * as MemberEntityStore from '../store/entity/member';
@Component({ @Component({
selector: 'of-member-modify-password-container', selector: 'of-member-modify-password-container',
templateUrl: './modify-password-container.component.html', templateUrl: './member-modify-password-container.component.html',
}) })
export class MemberModifyPasswordContainerComponent implements OnInit { export class MemberModifyPasswordContainerComponent implements OnInit {
@Input() token: string;
modifyPwForm: FormGroup; @Output() signin = new EventEmitter();
tokenURL: string;
formErrors = {
'pw': '',
'confirmPw': ''
};
constructor( constructor(
private router: Router, private store: Store<any>,
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder,
private modifyPasswordStore: Store<ModifyPasswordStore.State>,
) { } ) { }
ngOnInit() { ngOnInit() {
this.tokenURL = this.activatedRoute.snapshot.queryParams['token'];
console.log(this.tokenURL);
this.initForm();
} }
initForm() { modifyPassword(info: {token: string, password: string, confirmPassword: string}) {
this.modifyPwForm = this.formBuilder.group({ this.store.dispatch(new MemberEntityStore.ModifyPassword(info));
'pw': [
'',
[
// Validators.required,
]
],
'confirmPw': [
'',
[
// Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
// Validators.minLength(6),
// Validators.maxLength(25)
]
],
});
} }
modifyPw() {
const modifyPwValue = Object.assign({}, this.modifyPwForm.value);
const m = {token: this.tokenURL, pw: modifyPwValue.pw, confirmPw: modifyPwValue.confirmPw};
this.modifyPasswordStore.dispatch(new ModifyPasswordStore.ModifyPassword(m));
}
signinBtn() {
this.router.navigateByUrl('/auth/signin');
}
} }

View File

@ -1,47 +1,5 @@
<form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()"> <of-member-profile
<div class="ui-g"> (modify)="modify($event)"
<div class="ui-g-12 ui-md-4 ui-img-profile"> >
<div class="ui-img-profile-box">
<div class="ui-g">
<img class="profile-image " src="assets/layout/images/avatar.png" />
</div>
<button type="button" class="ui-button-photo-add" pButton icon="ui-icon-account-box" (click)="onAddSensorWithTarget(item.target)"></button>
</div>
</div>
<div class="ui-g-12 ui-md-8"> </of-member-profile>
<div class="ui-g form-group">
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText formControlName="email" readonly value="{{member.email}}">
<label>Email</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText formControlName="name" value="{{member.name}}" >
<label>Name</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText formControlName="companyName" value="{{member.companyName}}" >
<label>Company Name</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText formControlName="phone" value="{{member.phone}}" >
<label>Phone</label>
</span>
</div>
</div>
</div>
<div class="ui-g-12" dir="rtl">
<button type="submit" [disabled]="selected" class="ui-button ui-button-text-icon-left ui-button-width-fit">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
<span class="ui-button-text ui-c">Save</span>
</button>
</div>
</div>
</form>

View File

@ -1,92 +1,38 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
// import { PagesComponent } from 'app/pages/pages.component';
import * as AuthStore from '../../store/auth';
import * as ModifyStore from '../../store/modify';
import { Member } from '@overflow/commons-typescript/model/member';
import { AuthSelector } from '../../store';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Observable } from 'rxjs';
import { ModifySelector } from '../../store';
import { RPCClientError } from '@loafer/ng-rpc';
import { RPCClientError } from '@loafer/ng-rpc';
import { Member } from '@overflow/commons-typescript/model/member';
import { AuthContainerSelector } from '@overflow/shared/auth/store';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
import * as MemberEntityStore from '../store/entity/member';
@Component({ @Component({
selector: 'of-member-profile-container', selector: 'of-member-profile-container',
templateUrl: './member-profile-container.component.html', templateUrl: './member-profile-container.component.html',
}) })
export class MemberProfileContainerComponent implements OnInit, OnDestroy { export class MemberProfileContainerComponent implements OnInit, OnDestroy {
domainMember$: Observable<DomainMember>;
member: Member;
modifyForm: FormGroup;
modifiedMember$ = this.modifyStore.pipe(select(ModifySelector.select('member')));
constructor( constructor(
// public app: PagesComponent, private store: Store<any>,
private activatedRoute: ActivatedRoute,
private router: Router,
private store: Store<AuthStore.State>,
private formBuilder: FormBuilder,
private modifyStore: Store<ModifyStore.State>
) { ) {
} }
ngOnInit() { ngOnInit() {
this.store.select(AuthSelector.select('member')).subscribe( this.domainMember$ = this.store.pipe(select(AuthContainerSelector.selectDomainMember));
(member: Member) => {
this.member = member;
},
(error) => {
console.log(error);
}
);
this.initForm();
} }
ngOnDestroy() { ngOnDestroy() {
} }
initForm() { modify(member: Member) {
this.modifyForm = this.formBuilder.group({ this.store.dispatch(new MemberEntityStore.Modify(member));
'email': [this.member.email,
[
Validators.required,
Validators.email
]],
'name': [this.member.name, []],
'companyName': [this.member.companyName, []],
'phone': [this.member.phone, []],
});
}
modifyProfile() {
const modifyValue = Object.assign({}, this.modifyForm.value);
const member: Member = {
email: this.member.email,
name: modifyValue.name,
phone: modifyValue.phone,
companyName: modifyValue.companyName,
};
this.modifyStore.dispatch(new ModifyStore.Modify(member));
const modifiedMemberSubscription$ = this.modifiedMember$.subscribe(
(m: Member) => {
if (m) {
console.log(m);
}
if (modifiedMemberSubscription$) {
modifiedMemberSubscription$.unsubscribe();
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
} }
} }

View File

@ -1 +1,4 @@
<of-member-reset-password></of-member-reset-password> <of-member-reset-password
(resetPassword)="resetPassword($event)"
>
</of-member-reset-password>

View File

@ -1,58 +1,24 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as ResetPasswordStore from '../../store/reset-password';
import {select, Store} from '@ngrx/store'; import {select, Store} from '@ngrx/store';
import { ResetPasswordSelector } from '../../store';
import {RPCClientError} from '@loafer/ng-rpc'; import {RPCClientError} from '@loafer/ng-rpc';
import {Member} from '@overflow/commons-typescript/model/member/index';
import * as MemberEntityStore from '../store/entity/member';
@Component({ @Component({
selector: 'of-member-reset-password-container', selector: 'of-member-reset-password-container',
templateUrl: './reset-password-container.component.html', templateUrl: './member-reset-password-container.component.html',
}) })
export class MemberResetPasswordContainerComponent implements OnInit { export class MemberResetPasswordContainerComponent implements OnInit {
resetPassword$ = this.resetPasswordStore.pipe(select(ResetPasswordSelector.select('member')));
resetPassword: FormGroup;
formErrors = {
'email': ''
};
constructor( constructor(
private resetPasswordStore: Store<ResetPasswordStore.State>, private store: Store<any>,
private router: Router, ) { }
private formBuilder: FormBuilder) { }
ngOnInit() { ngOnInit() {
this.resetPassword = this.formBuilder.group({
'email': ['', [
Validators.required,
Validators.email
]
]
});
} }
sendResetPassword() { resetPassword(email: string) {
const emailValue = Object.assign({}, this.resetPassword.value); this.store.dispatch(new MemberEntityStore.ResetPassword(email));
console.log(emailValue.email);
this.resetPasswordStore.dispatch(new ResetPasswordStore.ResetPassword(emailValue.email));
const resetPasswordSubscription$ = this.resetPassword$.subscribe(
(m: Member) => {
if (m) {
console.log(m);
}
if (resetPasswordSubscription$) {
resetPasswordSubscription$.unsubscribe();
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
} }
} }

View File

@ -1,92 +1,33 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as AuthStore from '../store/auth'; import { MemberSigninContainerSelector } from '../store';
import { AuthSelector } from '../store';
import * as MemberEntityStore from '../store/entity/member';
@Component({ @Component({
selector: 'of-member-signin-container', selector: 'of-member-signin-container',
templateUrl: './member-signin-container.component.html', templateUrl: './member-signin-container.component.html',
}) })
export class MemberSigninContainerComponent implements OnInit { export class MemberSigninContainerComponent implements OnInit {
pending$ = this.store.pipe(select(AuthSelector.select('pending'))); @Input() returnURL: string;
error$ = this.store.pipe(select(AuthSelector.select('error'))); pending$: Observable<boolean>;
error$: Observable<any>;
errorMessage: string | null;
returnURL: string;
signinForm: FormGroup;
formErrors = {
'email': '',
'password': ''
};
constructor( constructor(
private activatedRoute: ActivatedRoute, private store: Store<any>,
private router: Router,
private store: Store<AuthStore.State>,
private formBuilder: FormBuilder,
) { ) {
} }
ngOnInit() { ngOnInit() {
this.initForm(); this.pending$ = this.store.pipe(select(MemberSigninContainerSelector.selectPending));
this.error$ = this.store.pipe(select(MemberSigninContainerSelector.selectError));
this.returnURL = this.activatedRoute.snapshot.queryParams['returnURL'] || '/';
this.pending$.subscribe((pending: boolean) => {
if (pending) {
this.signinForm.disable();
} else {
this.signinForm.enable();
}
});
this.error$.subscribe((error) => {
if (error) {
this.errorMessage = error.exception;
} else {
this.errorMessage = null;
}
});
} }
initForm() { onSignin(info: {email: string, password: string}) {
this.signinForm = this.formBuilder.group({ this.store.dispatch(new MemberEntityStore.Signin({...info, returnURL: this.returnURL}));
'email': [
'',
[
Validators.required,
Validators.email
]
],
'password': [
'',
[
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
Validators.minLength(6),
Validators.maxLength(25)
]
],
});
} }
resetPasswordBtnClick() {
this.router.navigateByUrl('/auth/reset-password');
}
signupBtnClick() {
this.router.navigateByUrl('/auth/signup');
}
signin() {
const signinValue = Object.assign({}, this.signinForm.value);
signinValue.returnURL = this.returnURL;
this.store.dispatch(new AuthStore.Signin(signinValue));
console.log('signin component signin fnc');
}
} }

View File

@ -4,9 +4,10 @@ import {
OnInit, OnInit,
} from '@angular/core'; } from '@angular/core';
import { Member } from '@overflow/commons-typescript/model/member'; import { Member } from '@overflow/commons-typescript/model/member';
import * as AuthStore from '../store/signup';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import * as MemberEntityStore from '../store/entity/member';
@Component({ @Component({
selector: 'of-member-signup-container', selector: 'of-member-signup-container',
templateUrl: './member-signup-container.component.html', templateUrl: './member-signup-container.component.html',
@ -14,7 +15,7 @@ import { Store } from '@ngrx/store';
export class MemberSignupContainerComponent implements OnInit, OnDestroy { export class MemberSignupContainerComponent implements OnInit, OnDestroy {
constructor( constructor(
private store: Store<AuthStore.State>, private store: Store<any>,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -24,6 +25,6 @@ export class MemberSignupContainerComponent implements OnInit, OnDestroy {
} }
onSignup(info: {member: Member, password: string}) { onSignup(info: {member: Member, password: string}) {
this.store.dispatch(new AuthStore.Signup(info)); this.store.dispatch(new MemberEntityStore.Signup(info));
} }
} }

View File

@ -14,7 +14,7 @@ import {
export class NoAuthProbeSubscriber { export class NoAuthProbeSubscriber {
public constructor( public constructor(
private store: Store<NoAuthProbeStore.State>, private store: Store<any>,
private loggerService: LoggerService, private loggerService: LoggerService,
) { ) {
} }