This commit is contained in:
geek 2018-05-29 18:32:22 +09:00
parent 3298774cdb
commit d42fd4b25e
13 changed files with 132 additions and 99 deletions

View File

@ -47,26 +47,4 @@
</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

@ -36,26 +36,5 @@
</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

@ -5,7 +5,7 @@
[(visible)]="termsDisplay"
[showHeader]="true"
[closeOnEscape]="false">
<of-member-terms (close)="onTermsDisplayClose()"></of-member-terms>
<of-member-terms (close)="termsDisplay = false"></of-member-terms>
</p-dialog>
<p-dialog
header="Privacy Policy Info"
@ -14,7 +14,18 @@
[(visible)]="policyDisplay"
[showHeader]="true"
[closeOnEscape]="false">
<of-member-policy (close)="onPolicyDisplayClose()"></of-member-policy>
<of-member-policy (close)="policyDisplay = false"></of-member-policy>
</p-dialog>
<p-dialog
header="Membership is welcome."
[modal]="true"
[width]="800"
[(visible)]="signupComplete"
[showHeader]="true"
[closeOnEscape]="false"
(onHide)="closeSignup()">
<div>Membership is welcome. </div>
</p-dialog>
@ -39,7 +50,7 @@
placeholder="Email"
formControlName="email"
required
value="geekhot@hotmail.co.kr" />
/>
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid email
</div>
@ -125,8 +136,16 @@
<div class="ui-g-12 ui-g-padding-15">
<p class="font-s">
<p-checkbox name="groupname" value="val1" label="이용약관과 개인정보 정책에 동의 합니다." [(ngModel)]="selectedValues"></p-checkbox>
<p-checkbox
name="groupname"
label="이용약관과 개인정보 정책에 동의 합니다."
[formControl]="signupForm.controls['selectPolicy']"
binary="true"></p-checkbox>
<!--{{signupForm.get('selectPolicy').value}}-->
</p>
<div *ngIf="selectPolicy.touched && !selectPolicy.valid" class="ui-message ui-messages-error ui-corner-all">
please check
</div>
<a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
|
<a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
@ -136,7 +155,7 @@
<div class="content-section implementation">
<recaptcha
[formControl]="myRecaptcha"
[formControl]="signupForm.controls['captcha']"
(scriptLoad)="onScriptLoad()"
(scriptError)="onScriptError()"
></recaptcha>
@ -158,26 +177,4 @@
</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

@ -3,7 +3,7 @@ import {
OnDestroy,
OnInit,
Output,
EventEmitter,
EventEmitter, Input,
} from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl, ValidationErrors } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';
@ -14,8 +14,9 @@ import { Member } from '@overflow/commons-typescript/model/member';
})
export class MemberSignupComponent implements OnInit, OnDestroy {
@Output() signup = new EventEmitter<{member: Member, password: string}>();
@Output() doneSignup = new EventEmitter();
myRecaptcha = new FormControl(false);
@Input() signupComplete;
signupForm: FormGroup;
email: AbstractControl;
@ -24,6 +25,8 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
name: AbstractControl;
phone: AbstractControl;
company: AbstractControl;
selectPolicy: AbstractControl;
captcha: AbstractControl;
termsDisplay = false;
policyDisplay = false;
@ -83,6 +86,12 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
Validators.required
]
],
'selectPolicy': [
false, [ Validators.requiredTrue ],
],
'captcha': [
false, [ Validators.requiredTrue ],
]
});
this.email = this.signupForm.controls['email'];
this.password = this.signupForm.controls['password'];
@ -90,6 +99,8 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
this.name = this.signupForm.controls['name'];
this.phone = this.signupForm.controls['phone'];
this.company = this.signupForm.controls['company'];
this.selectPolicy = this.signupForm.controls['selectPolicy'];
this.captcha = this.signupForm.controls['captcha'];
}
pwMatchValidator(control: FormControl): ValidationErrors {
@ -104,10 +115,6 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
}
signupFormSubmit() {
if (!this.myRecaptcha.valid) {
console.log('dddddddd');
return;
}
const signupValue = Object.assign({}, this.signupForm.value);
const password = signupValue.password;
const member: Member = {
@ -122,16 +129,13 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
termsDisplayOpen() {
this.termsDisplay = true;
}
onTermsDisplayClose() {
this.termsDisplay = false;
}
policyDisplayOpen() {
this.policyDisplay = true;
}
onPolicyDisplayClose() {
this.policyDisplay = false;
closeSignup() {
this.doneSignup.emit();
}
onScriptLoad() {

View File

@ -1 +1 @@
<of-member-signup (signup)="onSignup($event)"></of-member-signup>
<of-member-signup [signupComplete]="signupComplete$ | async" (signup)="onSignup($event)" (doneSignup)="onDoneSignup()" ></of-member-signup>

View File

@ -1,12 +1,14 @@
import {
Component,
Component, EventEmitter,
OnDestroy,
OnInit,
OnInit, Output,
} from '@angular/core';
import { Member } from '@overflow/commons-typescript/model/member';
import { Store } from '@ngrx/store';
import {select, Store} from '@ngrx/store';
import * as MemberEntityStore from '../store/entity/member';
import { MemberSignupContainerSelector } from '../store';
import {Observable} from 'rxjs';
@Component({
selector: 'of-member-signup-container',
@ -14,11 +16,16 @@ import * as MemberEntityStore from '../store/entity/member';
})
export class MemberSignupContainerComponent implements OnInit, OnDestroy {
@Output() doneSignup = new EventEmitter();
signupComplete$: Observable<boolean>;
constructor(
private store: Store<any>,
) { }
ngOnInit() {
this.signupComplete$ = this.store.pipe(select(MemberSignupContainerSelector.selectSignupComplete));
}
ngOnDestroy() {
@ -27,4 +34,8 @@ export class MemberSignupContainerComponent implements OnInit, OnDestroy {
onSignup(info: {member: Member, password: string}) {
this.store.dispatch(new MemberEntityStore.Signup(info));
}
onDoneSignup() {
this.doneSignup.emit();
}
}

View File

@ -12,6 +12,7 @@ export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.Signup: {
return {
signupComplete: false,
pending: true,
error: null,
};
@ -19,6 +20,7 @@ export function reducer(state = initialState, action: Actions): State {
case ActionType.SignupSuccess: {
return {
signupComplete: true,
pending: false,
error: null,
};
@ -26,6 +28,7 @@ export function reducer(state = initialState, action: Actions): State {
case ActionType.SignupFailure: {
return {
signupComplete: false,
pending: false,
error: action.payload,
};

View File

@ -3,17 +3,20 @@ import { Selector, createSelector } from '@ngrx/store';
import { RESTClientError } from '@loafer/ng-rest';
export interface State {
signupComplete: boolean;
pending: boolean;
error: RESTClientError;
}
export const initialState: State = {
signupComplete: false,
pending: false,
error: null,
};
export function getSelectors(selector: Selector<any, State>) {
return {
selectSignupComplete: createSelector(selector, (state: State) => state.signupComplete),
selectPending: createSelector(selector, (state: State) => state.pending),
selectError: createSelector(selector, (state: State) => state.error),
};

View File

@ -37,6 +37,59 @@ export function reducer(state = initialState, action: Actions): State {
};
}
case ActionType.Regist: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: null,
};
}
case ActionType.RegistSuccess: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: null,
};
}
case ActionType.RegistFailure: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: action.payload,
};
}
case ActionType.CheckCodeForMember: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: null,
};
}
case ActionType.CheckCodeForMemberSuccess: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: null,
};
}
case ActionType.CheckCodeForMemberFailure: {
return {
secretKey: null,
sourceURI: null,
pending: true,
error: action.payload,
};
}
default: {
return state;
}

View File

@ -1,11 +1,11 @@
import { Selector, createSelector } from '@ngrx/store';
import { RESTClientError } from '@loafer/ng-rest';
import { RPCClientError } from '@loafer/ng-rpc';
export interface State {
secretKey: string;
sourceURI: string;
pending: boolean;
error: RESTClientError;
error: RPCClientError;
}
export const initialState: State = {

View File

@ -1,6 +1,6 @@
import { Action } from '@ngrx/store';
import { RESTClientError } from '@loafer/ng-rest';
import { RPCClientError } from '@loafer/ng-rpc';
import { Member } from '@overflow/commons-typescript/model/member';
@ -33,7 +33,7 @@ export class CreateTotpSuccess implements Action {
export class CreateTotpFailure implements Action {
readonly type = ActionType.CreateTotpFailure;
constructor(public payload: RESTClientError) {}
constructor(public payload: RPCClientError) {}
}
// ----------------------------------------------------------------------------------------
@ -51,7 +51,7 @@ export class RegistSuccess implements Action {
export class RegistFailure implements Action {
readonly type = ActionType.RegistFailure;
constructor(public payload: RESTClientError) {}
constructor(public payload: RPCClientError) {}
}
// ----------------------------------------------------------------------------------------
@ -71,7 +71,7 @@ export class CheckCodeForMemberSuccess implements Action {
export class CheckCodeForMemberFailure implements Action {
readonly type = ActionType.CheckCodeForMemberFailure;
constructor(public payload: RESTClientError) {}
constructor(public payload: RPCClientError) {}
}
export type Actions =

View File

@ -1,6 +1,6 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<of-member-signup-container></of-member-signup-container>
<of-member-signup-container (doneSignup)="signupComplete()"></of-member-signup-container>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<table class="login-table">

View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {ActivatedRoute, Router} from '@angular/router';
@Component({
selector: 'of-pages-auth-signup',
@ -10,6 +10,7 @@ export class SignupPageComponent implements OnInit {
returnURL: string;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) { }
@ -19,4 +20,8 @@ export class SignupPageComponent implements OnInit {
initForm() {
}
signupComplete() {
this.router.navigate(['/auth/signin']);
}
}