ing

src/app/commons/guard/auth.guard.ts

@@ -12,6 +12,7 @@ import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/map';
 
 import * as AuthStore from 'packages/member/store/auth';
+import { AuthSelector } from 'packages/member/store';
 
 @Injectable()
 export class AuthGuard implements CanActivate, CanActivateChild {
@@ -21,7 +22,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
   canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
     return this.store
-      .select(AuthStore.isSignin)
+      .select(AuthSelector.isSignin)
       .map(isSignin => {
         if (!isSignin) {
           this.store.dispatch(new AuthStore.SigninRedirect());
@@ -35,7 +36,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
   canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
     return this.store
-      .select(AuthStore.isSignin)
+      .select(AuthSelector.isSignin)
       .map(isSignin => {
         if (!isSignin) {
           this.store.dispatch(new AuthStore.SigninRedirect());

src/packages/member/component/signin/signin.component.html

@@ -19,6 +19,9 @@
               {{ formErrors.password }}
           </div>
           <!--[disabled]="!signinForm.valid"-->
+          <p *ngIf="errorMessage">
+            {{ errorMessage }}
+          </p>
           <button mat-raised-button color="accent" type="submit">Sign In</button>
       </form>
   </mat-card-content>

src/packages/member/component/signin/signin.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 
 import * as AuthStore from '../../store/auth';
+import { AuthSelector } from '../../store';
 
 @Component({
   selector: 'of-member-signin',
@@ -12,6 +13,11 @@ import * as AuthStore from '../../store/auth';
 })
 export class SigninComponent implements OnInit {
 
+  pending$ = this.store.pipe(select(AuthSelector.isPending));
+  error$ = this.store.pipe(select(AuthSelector.getError));
+
+  errorMessage: string | null;
+
   signinForm: FormGroup;
   formErrors = {
     'email': '',
@@ -27,16 +33,36 @@ export class SigninComponent implements OnInit {
 
   ngOnInit() {
     this.initForm();
+
+    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() {
     this.signinForm = this.formBuilder.group({
-      'email': ['', [
+      'email': [
+        '',
+        [
           Validators.required,
           Validators.email
         ]
       ],
-      'password': ['', [
+      'password': [
+        '',
+        [
           Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
           Validators.minLength(6),
           Validators.maxLength(25)

src/packages/member/member.module.ts

@@ -5,8 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MaterialModule } from 'app/commons/ui/material/material.module';
 
-// import { AuthGuard } from './guard/auth.guard';
-
 import { MemberStoreModule } from './member-store.module';
 
 import { COMPONENTS } from './component';

src/packages/member/model/Member.ts

@@ -1,3 +1,5 @@
+import { MetaMemberStatus } from 'packages/meta/model';
+
 export interface Member {
   id?: number;
   email?: string;
@@ -6,5 +8,5 @@ export interface Member {
   phone?: string;
   companyName?: string;
   createDate?: Date;
-  status?: string;
+  status?: MetaMemberStatus;
 }

src/packages/member/model/MemberStatus.ts

@@ -0,0 +1,6 @@
+export enum MemberStatus {
+  NOAUTH = 1,
+  NORMAL = 2,
+  DORMANCY = 3,
+  WITHDRAWAL = 4,
+}

src/packages/member/store/auth/auth.effect.ts

@@ -47,18 +47,6 @@ export class Effects {
       return of(new SigninFailure(error));
     });
 
-    // .map((action: Signin) => action.payload)
-    // .exhaustMap(payload =>
-    //   this.memberService
-    //     .signin(payload.email, payload.password)
-    //     .map(member => {
-    //       return new SigninSuccess(member);
-    //     })
-    //     .catch((error) => {
-    //       return of(new SigninFailure(error.message));
-    //     })
-    // );
-
   @Effect({ dispatch: false })
   signinSuccess$ = this.actions$
     .ofType(ActionType.SigninSuccess)

src/packages/member/store/auth/auth.state.ts

@@ -1,5 +1,10 @@
-import { ErrorResponse } from 'packages/commons/service/error-response';
+import {
+  createSelector,
+  MemoizedSelector,
+} from '@ngrx/store';
 
+import { ErrorResponse } from 'packages/commons/service/error-response';
+import { Domain } from 'packages/domain/model';
 import { Member } from '../../model';
 
 export interface State {
@@ -7,6 +12,7 @@ export interface State {
   error: ErrorResponse | null;
   isPending: boolean;
   member: Member | null;
+  domain: Domain | null;
 }
 
 export const initialState: State = {
@@ -14,9 +20,16 @@ export const initialState: State = {
   error: null,
   isPending: false,
   member: null,
+  domain: null,
 };
 
-export const isSignin = (state: State) => state.isSignin;
-export const getMember = (state: State) => state.member;
-export const getError = (state: State) => state.error;
-export const isPending = (state: State) => state.isPending;
+export class StateSelector {
+  public constructor(private _selector: MemoizedSelector<any, any>) {
+  }
+
+  public isSignin = createSelector(this._selector, (state: State) => state.isSignin);
+  public getMember = createSelector(this._selector, (state: State) => state.member);
+  public getDomain = createSelector(this._selector, (state: State) => state.domain);
+  public getError = createSelector(this._selector, (state: State) => state.error);
+  public isPending = createSelector(this._selector, (state: State) => state.isPending);
+}

src/packages/member/store/index.ts

@@ -1,3 +1,11 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { MODULE } from '../member.constant';
+
 import * as AuthStore from './auth';
 import * as SignupStore from './signup';
 
@@ -15,3 +23,18 @@ export const EFFECTS = [
   AuthStore.Effects,
   SignupStore.Effects,
 ];
+
+export const selectMemberState = createFeatureSelector<State>(MODULE.name);
+
+export const selectMemberAuthState = createSelector(
+  selectMemberState,
+  (state: State) => state.auth
+);
+
+export const AuthSelector = new AuthStore.StateSelector(selectMemberAuthState);
+
+
+export const selectMemberSignupState = createSelector(
+  selectMemberState,
+  (state: State) => state.signup
+);

src/packages/noauth/component/list/list.component.ts

@@ -1,26 +1,32 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Store } from '@ngrx/store';
+import { Component, OnInit, AfterContentInit } from '@angular/core';
 
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
 import * as NoAuthProbeStore from '../../store/noauth-probe';
 
+import { Domain } from 'packages/domain/model';
 
 @Component({
   selector: 'of-noauth-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss']
 })
-export class ListComponent implements OnInit {
+export class ListComponent implements OnInit, AfterContentInit {
 
   constructor(
     private router: Router,
     private store: Store<NoAuthProbeStore.State>,
-    private formBuilder: FormBuilder,
 
   ) { }
 
   ngOnInit() {
   }
 
+  ngAfterContentInit() {
+    const domain: Domain = {
+      id: 1,
+    };
+    this.store.dispatch(new NoAuthProbeStore.ReadAllByDomain(domain));
+  }
+
 }