signin is modified

src/app/core/nats/services/nats.service.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable, Type } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 import * as jspb from 'google-protobuf';
 import * as nats from 'nats.ws';
@@ -8,6 +9,7 @@ import { Client } from 'app/modules/protobuf/models/core/network_pb';
 
 import { ModuleConfig } from '../config/module-config';
 import { _MODULE_CONFIG } from '../config/token';
+import { Router } from '@angular/router';
 
 type DeserializeConstructor<T> = {
   new (): T;
@@ -26,7 +28,10 @@ export class NatsService {
   /**
    * Constructor
    */
-  constructor(@Inject(_MODULE_CONFIG) private __config: ModuleConfig) {}
+  constructor(
+    @Inject(_MODULE_CONFIG) private __config: ModuleConfig,
+    @Inject(DOCUMENT) private __document: Document
+  ) {}
 
   // -----------------------------------------------------------------------------------------------------
   // @ Accessors
@@ -67,7 +72,7 @@ export class NatsService {
       let c = new Client();
       c.setClientIp(this.__conn?.info?.client_ip + '');
       c.setSessionId('');
-      c.setSiteUrl('');
+      c.setSiteUrl(this.__document.location.hostname);
 
       let _opts: nats.RequestOptions = !!opts ? opts : { timeout: 3000 };
       if (!_opts.headers) {

src/app/modules/auth/sign-in/components/index.ts

@@ -0,0 +1,3 @@
+import { AuthSignInComponent } from './sign-in.component';
+
+export const COMPONENTS = [AuthSignInComponent];

src/app/modules/auth/sign-in/components/sign-in.component.html

@@ -83,13 +83,17 @@
 
         <div style="width: 320px; height: 88px">
           <img
-            [src]="imagePath"
+            [src]="captchaImagePath"
-            [style.display]="!!imagePath ? 'block' : 'none'"
+            [style.display]="!!captchaImagePath ? 'block' : 'none'"
           />
         </div>
         <mat-form-field class="w-full">
           <mat-label>보안코드*</mat-label>
-          <input id="email" matInput formControlName="captcha" />
+          <input
+            id="captchaSecurityCode"
+            matInput
+            formControlName="captchaSecurityCode"
+          />
 
           <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
             보안코드를 입력하세요.

src/app/modules/auth/sign-in/components/sign-in.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
 import { IdentityService } from 'app/modules/polyglot/member/services/identity.service';
+import { CaptchaResponse } from 'app/modules/protobuf/c2se/common/identity_pb';
 
 @Component({
   selector: 'auth-sign-in',
@@ -22,8 +23,9 @@ export class AuthSignInComponent implements OnInit {
   };
   signInForm!: FormGroup;
   showAlert: boolean = false;
-  captchaToken?: string;
+
-  imagePath?: any;
+  captcha?: CaptchaResponse.Result;
+  captchaImagePath?: SafeResourceUrl;
 
   /**
    * Constructor
@@ -52,18 +54,14 @@ export class AuthSignInComponent implements OnInit {
         [Validators.required, Validators.email],
       ],
       password: ['admin', Validators.required],
-      captcha: ['', Validators.required],
+      captchaSecurityCode: ['', Validators.required],
     });
-    this._identityService.captcha().then((result) => {
-      console.log(
-        'success',
-        result,
-        result.getSecurityCodeHash(),
-        result.getImage()
-      );
 
-      this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl(
+    this._activatedRoute.data.subscribe((data) => {
-        'data:image/jpg;base64,' + result.getImage()
+      let captcha: CaptchaResponse.Result = data['captcha'];
+      this.captcha = captcha;
+      this.captchaImagePath = this._sanitizer.bypassSecurityTrustResourceUrl(
+        'data:image/jpg;base64,' + captcha.getImage()
       );
     });
   }
@@ -88,21 +86,22 @@ export class AuthSignInComponent implements OnInit {
     // Hide the alert
     this.showAlert = false;
 
-    // Sign in
+    this._identityService
-    this._authService.signIn(this.signInForm?.value).subscribe(
+      .signin(
-      () => {
+        this.captcha?.getSecurityCodeHash() as any,
-        // Set the redirect url.
+        this.signInForm?.controls['captchaSecurityCode'].value,
-        // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
+        this.signInForm?.controls['email'].value,
-        // to the correct page after a successful sign in. This way, that url can be set via
+        this.signInForm?.controls['password'].value
-        // routing file and we don't have to touch here.
+      )
+      .then((res) => {
         const redirectURL =
           this._activatedRoute.snapshot.queryParamMap.get('redirectURL') ||
           '/signed-in-redirect';
 
         // Navigate to the redirect url
         this._router.navigateByUrl(redirectURL);
-      },
+      })
-      (response) => {
+      .catch((e) => {
         // Re-enable the form
         this.signInForm?.enable();
 
@@ -117,7 +116,38 @@ export class AuthSignInComponent implements OnInit {
 
         // Show the alert
         this.showAlert = true;
-      }
+      });
-    );
+
+    // Sign in
+    // this._authService.signIn(this.signInForm?.value).subscribe(
+    //   () => {
+    //     // Set the redirect url.
+    //     // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
+    //     // to the correct page after a successful sign in. This way, that url can be set via
+    //     // routing file and we don't have to touch here.
+    //     const redirectURL =
+    //       this._activatedRoute.snapshot.queryParamMap.get('redirectURL') ||
+    //       '/signed-in-redirect';
+
+    //     // Navigate to the redirect url
+    //     this._router.navigateByUrl(redirectURL);
+    //   },
+    //   (response) => {
+    //     // Re-enable the form
+    //     this.signInForm?.enable();
+
+    //     // Reset the form
+    //     this.signInNgForm?.resetForm();
+
+    //     // Set the alert
+    //     this.alert = {
+    //       type: 'error',
+    //       message: 'Wrong email or password',
+    //     };
+
+    //     // Show the alert
+    //     this.showAlert = true;
+    //   }
+    // );
   }
 }

src/app/modules/auth/sign-in/resolvers/sign-in.resolver.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { IdentityService } from 'app/modules/polyglot/member/services/identity.service';
+import { CaptchaResponse } from 'app/modules/protobuf/c2se/common/identity_pb';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CaptchaResolver implements Resolve<CaptchaResponse.Result> {
+  /**
+   * Constructor
+   */
+  constructor(
+    private _identityService: IdentityService,
+    private _router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | Observable<CaptchaResponse.Result>
+    | Promise<CaptchaResponse.Result>
+    | CaptchaResponse.Result {
+    return this._identityService.captcha();
+  }
+}

src/app/modules/auth/sign-in/sign-in.module.ts

@@ -9,11 +9,12 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FuseCardModule } from '@fuse/components/card';
 import { FuseAlertModule } from '@fuse/components/alert';
 import { SharedModule } from 'app/shared/shared.module';
-import { AuthSignInComponent } from 'app/modules/auth/sign-in/sign-in.component';
 import { authSignInRoutes } from 'app/modules/auth/sign-in/sign-in.routing';
 
+import { COMPONENTS } from './components';
+
 @NgModule({
-  declarations: [AuthSignInComponent],
+  declarations: [...COMPONENTS],
   imports: [
     RouterModule.forChild(authSignInRoutes),
     MatButtonModule,

src/app/modules/auth/sign-in/sign-in.routing.ts

@@ -1,9 +1,14 @@
 import { Route } from '@angular/router';
-import { AuthSignInComponent } from 'app/modules/auth/sign-in/sign-in.component';
+import { AuthSignInComponent } from 'app/modules/auth/sign-in/components/sign-in.component';
+
+import { CaptchaResolver } from './resolvers/sign-in.resolver';
 
 export const authSignInRoutes: Route[] = [
   {
     path: '',
     component: AuthSignInComponent,
+    resolve: {
+      captcha: CaptchaResolver,
+    },
   },
 ];

src/app/modules/polyglot/member/services/identity.service.ts

@@ -13,6 +13,9 @@ import {
 import {
   SUBJECT_CHECK_USERNAME_FOR_DUPLICATION,
   SUBJECT_CAPTCHA,
+  SUBJECT_SIGNIN,
+  SigninRequest,
+  SigninResponse,
 } from 'app/modules/protobuf/c2se/backend/identity_pb';
 
 @Injectable({
@@ -48,6 +51,7 @@ export class IdentityService {
         })
         .catch((e: Error) => {
           console.log('failed', e.getCode(), e.getMessage(), e.getData());
+          reject(e);
         });
     });
   }
@@ -67,6 +71,36 @@ export class IdentityService {
         })
         .catch((e: Error) => {
           console.log('failed', e.getCode(), e.getMessage(), e.getData());
+          reject(e);
+        });
+    });
+  }
+
+  signin(
+    securityCodeHash: string,
+    securityCode: string,
+    username: string,
+    password: string
+  ): Promise<SigninResponse.Result> {
+    return new Promise<SigninResponse.Result>((resolve, reject) => {
+      let req = new SigninRequest();
+      req.setSecurityCodeHash(securityCodeHash);
+      req.setSecurityCode(securityCode);
+      req.setUsername(username);
+      req.setPassword(password);
+
+      this.__natsService
+        .request<SigninResponse.Result>(
+          SUBJECT_SIGNIN,
+          req.serializeBinary(),
+          SigninResponse.deserializeBinary
+        )
+        .then((result) => {
+          resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e.getCode(), e.getMessage(), e.getData());
+          reject(e);
         });
     });
   }