From 5e7efb0a1ed7f6ce40da94b0b62e7639538081f9 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 28 Nov 2019 10:48:00 +0900
Subject: [PATCH 1/5] exclude is modified

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b898e299..318cb703 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
   "files.trimTrailingWhitespace": true,
   "files.trimFinalNewlines": true,
   "files.watcherExclude": {
-    "**/dist/electron/win-unpacked/**": true
+    "**/dist": true
   },
   "go.testFlags": ["-v"],
   "go.testTimeout": "100s",

From 643fe7a7c1615ba57579ed4752219bdc2b080c88 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 28 Nov 2019 13:19:19 +0900
Subject: [PATCH 2/5] bug of logout is fixed

---
 .../src/app/resolvers/messenger.resolver.ts   |  3 +--
 .../store/account/authentication/effects.ts   | 21 +++++++++++--------
 .../src/app/store/messenger/sync/effects.ts   |  4 ++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
index 2eee9a12..20066cce 100644
--- a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
+++ b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
@@ -144,8 +144,6 @@ export class AppMessengerResolver implements Resolve<void> {
                 companyGroupCode: 'LG'
               })
             );
-
-            // this.store.dispatch(AuthenticationStore.postLogin({ loginRes }));
           }),
           withLatestFrom(
             this.store.pipe(
@@ -189,6 +187,7 @@ export class AppMessengerResolver implements Resolve<void> {
                 loginRes
               })
             );
+            this.store.dispatch(AuthenticationStore.postLogin({ loginRes }));
             resolve();
           },
           err => {
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index c1b40ef0..7eb28f8e 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -58,6 +58,7 @@ import {
   LoginResponse
 } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { ProtocolService } from '@ucap-webmessenger/protocol';
 
 @Injectable()
 export class Effects {
@@ -128,13 +129,13 @@ export class Effects {
       this.actions$.pipe(
         ofType(loginRedirect),
         tap(authed => {
-          this.ngZone.run(() => {
-            // location.href = this.router.parseUrl('/account/login').toString();
-            this.router.navigate(['/account/login']).then(() => {
-              this.appAuthenticationService.logout();
-              this.store.dispatch(logoutInitialize());
-            });
-          });
+          // this.ngZone.run(() => {
+          // location.href = this.router.parseUrl('/account/login').toString();
+          this.appAuthenticationService.logout();
+          this.store.dispatch(logoutInitialize());
+
+          this.router.navigate(['/account/login']);
+          // });
         })
       ),
     { dispatch: false }
@@ -147,6 +148,7 @@ export class Effects {
         switchMap(action => {
           return this.authenticationProtocolService.logout({}).pipe(
             map(res => {
+              this.protocolService.disconnect();
               this.store.dispatch(loginRedirect());
             }),
             catchError(error => of(error))
@@ -218,8 +220,8 @@ export class Effects {
               height: '500px',
               disableClose: true,
               data: {
-                title: '개인정보 동의'
-                // html: `<iframe id="ifm_privacy" src="${privacyTotalUrl}" style="width: 100%;height: 300px;" />`
+                title: '개인정보 동의',
+                html: `<iframe id="ifm_privacy" src="${privacyTotalUrl}" style="width: 100%;height: 300px;" />`
               }
             });
 
@@ -319,6 +321,7 @@ export class Effects {
     private sessionStorageService: SessionStorageService,
     private piService: PiService,
     private appAuthenticationService: AppAuthenticationService,
+    private protocolService: ProtocolService,
     private authenticationProtocolService: AuthenticationProtocolService,
     private serviceProtocolService: ServiceProtocolService,
     private dialogService: DialogService,
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
index 2edcc0df..16b5cae4 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@@ -155,7 +155,7 @@ export class Effects {
         tap(() => {
           groupList = [];
         }),
-        switchMap(req => {
+        exhaustMap(req => {
           return this.syncProtocolService.group2(req).pipe(
             map(res => {
               switch (res.SSVC_TYPE) {
@@ -167,7 +167,7 @@ export class Effects {
                 case SSVC_TYPE_SYNC_GROUP_RES2:
                   this.store.dispatch(
                     group2Success({
-                      groupList,
+                      groupList: [...groupList],
                       syncDate: (res as GroupResponse).syncDate
                     })
                   );

From 0a9e3bc84cffd0a1aaf9f3c73814bfd8feed6406 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 28 Nov 2019 13:44:41 +0900
Subject: [PATCH 3/5] consts are added

---
 .../ucap-webmessenger-app/src/app/app-store.module.ts    | 2 +-
 .../src/app/resolvers/messenger.resolver.ts              | 8 +++++---
 .../src/environments/environment.dev.ts                  | 9 +++++++++
 .../src/environments/environment.prod.ts                 | 9 +++++++++
 .../src/environments/environment.type.ts                 | 9 +++++++++
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/app-store.module.ts b/projects/ucap-webmessenger-app/src/app/app-store.module.ts
index 5c69901c..d516baca 100644
--- a/projects/ucap-webmessenger-app/src/app/app-store.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-store.module.ts
@@ -44,7 +44,7 @@ import { ROOT_REDUCERS, metaReducers, effects } from './store';
      * See: https://github.com/zalmoxisus/redux-devtools-extension
      */
     StoreDevtoolsModule.instrument({
-      name: 'NgRx Book Store App'
+      name: 'UCAP Store App'
 
       // In a production build you would want to disable the Store Devtools
       // logOnly: environment.production,
diff --git a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
index 20066cce..932580bf 100644
--- a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
+++ b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
@@ -50,6 +50,8 @@ import * as SyncStore from '@app/store/messenger/sync';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 
+import { environment } from '../../environments/environment';
+
 @Injectable()
 export class AppMessengerResolver implements Resolve<void> {
   constructor(
@@ -115,8 +117,8 @@ export class AppMessengerResolver implements Resolve<void> {
               hostName: '',
               ssoMode: SSOMode.AUTH,
               userSpecificInformation: 'PRO_000482',
-              productId: 'PRO_000482',
-              productName: 'EZMessenger'
+              productId: environment.productConfig.productId,
+              productName: environment.productConfig.productName
             });
           }),
           switchMap(res => {
@@ -141,7 +143,7 @@ export class AppMessengerResolver implements Resolve<void> {
 
             this.store.dispatch(
               CompanyStore.companyList({
-                companyGroupCode: 'LG'
+                companyGroupCode: environment.companyConfig.companyGroupCode
               })
             );
           }),
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
index 1eee7899..88aedc74 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@@ -13,6 +13,15 @@ export const environment: Environment = {
   production: false,
   title: `[개발] UCapMessenger`,
 
+  companyConfig: {
+    companyGroupCode: 'LG'
+  },
+
+  productConfig: {
+    productId: 'PRO_000482',
+    productName: 'EZMessenger'
+  },
+
   commonApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
index 61cb4408..17741bab 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -13,6 +13,15 @@ export const environment: Environment = {
   production: true,
   title: `[개발] UCapMessenger`,
 
+  companyConfig: {
+    companyGroupCode: 'LG'
+  },
+
+  productConfig: {
+    productId: 'PRO_000482',
+    productName: 'EZMessenger'
+  },
+
   commonApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.type.ts b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
index 5cc06f38..3b9f053f 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.type.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
@@ -31,6 +31,15 @@ export interface Environment {
   runtime?: UCapRuntime;
   title: string;
 
+  companyConfig: {
+    companyGroupCode: string;
+  };
+
+  productConfig: {
+    productId: string;
+    productName: string;
+  };
+
   commonApiModuleConfig: CommonApiModuleConfig;
   publicApiModuleConfig: PublicApiModuleConfig;
   externalApiModuleConfig: ExternalApiModuleConfig;

From 3fd92b2df57823dc42a254f4a379196b60e49b08 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 28 Nov 2019 14:02:07 +0900
Subject: [PATCH 4/5] usePrivateInformationAgree is added

---
 .../src/app/store/account/authentication/effects.ts       | 8 +++++++-
 .../src/environments/environment.dev.ts                   | 5 ++++-
 .../src/environments/environment.prod.ts                  | 5 ++++-
 .../src/environments/environment.type.ts                  | 3 +++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index 7eb28f8e..7bf496f7 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -60,6 +60,8 @@ import {
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { ProtocolService } from '@ucap-webmessenger/protocol';
 
+import { environment } from '../../../../environments/environment';
+
 @Injectable()
 export class Effects {
   webLogin$ = createEffect(() =>
@@ -201,7 +203,11 @@ export class Effects {
             EnvironmentsInfo
           >(KEY_ENVIRONMENTS_INFO);
 
-          if (!loginRes.privateInformationAgree) {
+          if (
+            environment.productConfig.authentication
+              .usePrivateInformationAgree &&
+            !loginRes.privateInformationAgree
+          ) {
             const privacyTotalUrl = this.piService.privacyTotalUrl({
               companyCode: loginInfo.companyCode,
               userSeq: loginRes.userSeq,
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
index 88aedc74..c671fdde 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@@ -19,7 +19,10 @@ export const environment: Environment = {
 
   productConfig: {
     productId: 'PRO_000482',
-    productName: 'EZMessenger'
+    productName: 'EZMessenger',
+    authentication: {
+      usePrivateInformationAgree: false
+    }
   },
 
   commonApiModuleConfig: {
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
index 17741bab..9bd014bf 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -19,7 +19,10 @@ export const environment: Environment = {
 
   productConfig: {
     productId: 'PRO_000482',
-    productName: 'EZMessenger'
+    productName: 'EZMessenger',
+    authentication: {
+      usePrivateInformationAgree: false
+    }
   },
 
   commonApiModuleConfig: {
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.type.ts b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
index 3b9f053f..2f1fc285 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.type.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
@@ -38,6 +38,9 @@ export interface Environment {
   productConfig: {
     productId: string;
     productName: string;
+    authentication: {
+      usePrivateInformationAgree: boolean;
+    };
   };
 
   commonApiModuleConfig: CommonApiModuleConfig;

From c5d61417f39eb01e8247e38db86078ae82fb915a Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 28 Nov 2019 15:48:36 +0900
Subject: [PATCH 5/5] password process of login  is modified

---
 .../change-password.dialog.component.html     |  1 +
 .../change-password.dialog.component.scss     |  0
 .../change-password.dialog.component.spec.ts  | 27 ++++++++
 .../change-password.dialog.component.ts       | 56 ++++++++++++++++
 .../messenger/dialogs/account/index.ts        |  3 +
 .../app/layouts/messenger/dialogs/index.ts    |  2 +
 .../messenger/messenger.layout.module.ts      |  2 +
 .../app/services/authentication.service.ts    |  1 +
 .../store/account/authentication/effects.ts   | 38 +++++++++--
 .../src/app/types/login-info.type.ts          |  1 +
 .../src/lib/apis/password-init-step1.ts       | 17 +++++
 .../src/lib/services/pi.service.ts            | 24 +++++--
 .../ucap-webmessenger-pi/src/public-api.ts    |  1 +
 .../components/change-password.component.html | 52 ++++++++++++++
 .../components/change-password.component.scss | 63 +++++++++++++++++
 .../change-password.component.spec.ts         | 24 +++++++
 .../components/change-password.component.ts   | 67 +++++++++++++++++++
 .../src/lib/ucap-ui-account.module.ts         |  3 +-
 .../src/public-api.ts                         |  1 +
 19 files changed, 372 insertions(+), 11 deletions(-)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/index.ts
 create mode 100644 projects/ucap-webmessenger-pi/src/lib/apis/password-init-step1.ts
 create mode 100644 projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
 create mode 100644 projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.scss
 create mode 100644 projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.ts

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.html
new file mode 100644
index 00000000..ab2a14fe
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.html
@@ -0,0 +1 @@
+<ucap-account-change-password></ucap-account-change-password>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.spec.ts
new file mode 100644
index 00000000..518a4e50
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ChangePasswordDialogComponent } from './change-password.dialog.component';
+
+describe('ChangePasswordDialogComponent', () => {
+  let component: ChangePasswordDialogComponent;
+  let fixture: ComponentFixture<ChangePasswordDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChangePasswordDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangePasswordDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.ts
new file mode 100644
index 00000000..7cf9d439
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/change-password.dialog.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+
+import { Store } from '@ngrx/store';
+
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+import { DialogService } from '@ucap-webmessenger/ui';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+
+export interface ChangePasswordDialogData {}
+
+export interface ChangePasswordDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-change-password.dialog',
+  templateUrl: './change-password.dialog.component.html',
+  styleUrls: ['./change-password.dialog.component.scss']
+})
+export class ChangePasswordDialogComponent implements OnInit, OnDestroy {
+  loginRes: LoginResponse;
+  sessionVerinfo: VersionInfo2Response;
+  isMe: boolean;
+
+  constructor(
+    public dialogRef: MatDialogRef<
+      ChangePasswordDialogData,
+      ChangePasswordDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: ChangePasswordDialogData,
+    private dialogService: DialogService,
+    private sessionStorageService: SessionStorageService,
+    private store: Store<any>
+  ) {
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+  }
+
+  ngOnInit() {}
+
+  ngOnDestroy(): void {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/index.ts
new file mode 100644
index 00000000..c56cad1c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/index.ts
@@ -0,0 +1,3 @@
+import { ChangePasswordDialogComponent } from './change-password.dialog.component';
+
+export const DIALOGS = [ChangePasswordDialogComponent];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
index 084b8128..f4ae8d86 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@@ -1,3 +1,4 @@
+import { DIALOGS as ACCOUNT_DIALOGS } from './account';
 import { DIALOGS as CHAT_DIALOGS } from './chat';
 import { DIALOGS as GROUP_DIALOGS } from './group';
 import { DIALOGS as MESSAGE_DIALOGS } from './message';
@@ -5,6 +6,7 @@ import { DIALOGS as PROFILE_DIALOGS } from './profile';
 import { DIALOGS as SETTINGS_DIALOGS } from './settings';
 
 export const DIALOGS = [
+  ...ACCOUNT_DIALOGS,
   ...CHAT_DIALOGS,
   ...GROUP_DIALOGS,
   ...MESSAGE_DIALOGS,
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index 2c5422fc..42b55016 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -39,6 +39,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
+import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
 import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
 import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
@@ -87,6 +88,7 @@ import { DIALOGS } from './dialogs';
     PerfectScrollbarModule,
 
     UCapUiModule,
+    UCapUiAccountModule,
     UCapUiChatModule,
     UCapUiRoomModule,
     UCapUiProfileModule,
diff --git a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
index 53304f6e..346ef739 100644
--- a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
@@ -32,6 +32,7 @@ export class AppAuthenticationService {
 
     this.sessionStorageService.set<LoginInfo>(KEY_LOGIN_INFO, {
       ...loginInfo,
+      initPw: loginInfo.loginId === loginInfo.loginPw,
       loginPw: CryptoJS.enc.Hex.stringify(CryptoJS.SHA256(loginInfo.loginPw))
     });
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index 7bf496f7..5636e48f 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -61,6 +61,11 @@ import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { ProtocolService } from '@ucap-webmessenger/protocol';
 
 import { environment } from '../../../../environments/environment';
+import {
+  ChangePasswordDialogComponent,
+  ChangePasswordDialogData,
+  ChangePasswordDialogResult
+} from '@app/layouts/messenger/dialogs/account/change-password.dialog.component';
 
 @Injectable()
 export class Effects {
@@ -133,10 +138,9 @@ export class Effects {
         tap(authed => {
           // this.ngZone.run(() => {
           // location.href = this.router.parseUrl('/account/login').toString();
+          this.router.navigate(['/account/login']);
           this.appAuthenticationService.logout();
           this.store.dispatch(logoutInitialize());
-
-          this.router.navigate(['/account/login']);
           // });
         })
       ),
@@ -239,7 +243,13 @@ export class Effects {
             }
           }
 
-          if (!!loginRes.passwordExpired) {
+          if (loginInfo.initPw) {
+            this.store.dispatch(logout());
+
+            const passwordInitStep1Url = this.piService.passwordInitStep1Url({
+              localeCode: loginInfo.localeCode
+            });
+
             const result = await this.dialogService.open<
               ConfirmDialogComponent,
               ConfirmDialogData,
@@ -249,8 +259,8 @@ export class Effects {
               height: '500px',
               disableClose: true,
               data: {
-                title: '패스워드 만료',
-                message: ''
+                title: '패스워드 초기화',
+                html: `<iframe id="ifm_privacy" src="${passwordInitStep1Url}" style="width: 100%;height: 300px;" />`
               }
             });
 
@@ -259,6 +269,24 @@ export class Effects {
               return;
             }
           }
+
+          if (!!loginRes.passwordExpired) {
+            const result = await this.dialogService.open<
+              ChangePasswordDialogComponent,
+              ChangePasswordDialogData,
+              ChangePasswordDialogResult
+            >(ChangePasswordDialogComponent, {
+              width: '500px',
+              height: '500px',
+              disableClose: false,
+              data: {}
+            });
+
+            if (!!result && result.choice) {
+            } else {
+              return;
+            }
+          }
         })
       ),
     { dispatch: false }
diff --git a/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts b/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts
index 8c3e10d9..7b67c6f9 100644
--- a/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts
@@ -5,6 +5,7 @@ export const KEY_LOGIN_INFO = 'ucap::LOGIN_INFO';
 export interface LoginInfo {
   loginId?: string;
   loginPw?: string;
+  initPw?: boolean;
   companyCode?: string;
   companyGroupType?: string;
   localeCode?: LocaleCode;
diff --git a/projects/ucap-webmessenger-pi/src/lib/apis/password-init-step1.ts b/projects/ucap-webmessenger-pi/src/lib/apis/password-init-step1.ts
new file mode 100644
index 00000000..d0e04eb9
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/apis/password-init-step1.ts
@@ -0,0 +1,17 @@
+import { PIRequest } from './pi';
+import { LocaleCode } from '@ucap-webmessenger/core';
+import { APIEncoder, ParameterUtil } from '@ucap-webmessenger/api';
+
+export interface PasswordInitStep1Request extends PIRequest {
+  localeCode: LocaleCode;
+}
+
+const passwordInitStep1EncodeMap = {
+  localeCode: 'locale'
+};
+
+export const encodePasswordInitStep1: APIEncoder<PasswordInitStep1Request> = (
+  req: PasswordInitStep1Request
+) => {
+  return ParameterUtil.encode(passwordInitStep1EncodeMap, req);
+};
diff --git a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
index 58d10886..a7b1e274 100644
--- a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
@@ -8,7 +8,7 @@ import {
   Login2Request,
   Login2Response,
   encodeLogin2,
-  decodeLogin2,
+  decodeLogin2
 } from '../apis/login2';
 import { PrivacyTotalRequest, encodePrivacyTotal } from '../apis/privacy-total';
 import { UrlUtil, Parameter } from '@ucap-webmessenger/api';
@@ -16,8 +16,12 @@ import {
   UserTermsActionRequest,
   UserTermsActionResponse,
   encodeUserTermsAction,
-  decodeUserTermsAction,
+  decodeUserTermsAction
 } from '../apis/user-terms-action';
+import {
+  PasswordInitStep1Request,
+  encodePasswordInitStep1
+} from '../apis/password-init-step1';
 
 import { _MODULE_CONFIG } from '../config/token';
 import { ModuleConfig } from '../config/module-config';
@@ -25,7 +29,7 @@ import { Urls } from '../config/urls';
 import { UrlConfig } from '@ucap-webmessenger/core';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class PiService {
   readonly urls: Urls;
@@ -46,7 +50,7 @@ export class PiService {
         this.urls.login2,
         {},
         {
-          params: encodeLogin2(req),
+          params: encodeLogin2(req)
         }
       )
       .pipe(map(res => decodeLogin2(res)));
@@ -60,7 +64,7 @@ export class PiService {
         this.urls.userTermsAction,
         {},
         {
-          params: encodeUserTermsAction(req),
+          params: encodeUserTermsAction(req)
         }
       )
       .pipe(map(res => decodeUserTermsAction(res)));
@@ -75,4 +79,14 @@ export class PiService {
       encodePrivacyTotal(req) as Parameter
     );
   }
+
+  /**
+   * passwordInitStep1Url
+   */
+  public passwordInitStep1Url(req: PasswordInitStep1Request): string {
+    return UrlUtil.format(
+      this.urls.passwordInitStep1,
+      encodePasswordInitStep1(req) as Parameter
+    );
+  }
 }
diff --git a/projects/ucap-webmessenger-pi/src/public-api.ts b/projects/ucap-webmessenger-pi/src/public-api.ts
index fbe99147..4fee4a46 100644
--- a/projects/ucap-webmessenger-pi/src/public-api.ts
+++ b/projects/ucap-webmessenger-pi/src/public-api.ts
@@ -6,6 +6,7 @@ export * from './lib/apis/pi';
 export * from './lib/apis/login2';
 export * from './lib/apis/privacy-total';
 export * from './lib/apis/user-terms-action';
+export * from './lib/apis/password-init-step1';
 
 export * from './lib/types/response-status.type';
 
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
new file mode 100644
index 00000000..d1be60c8
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
@@ -0,0 +1,52 @@
+<div class="change-password-form">
+  <div class="mat-title">비밀번호 변경</div>
+
+  <form name="changePasswordForm" [formGroup]="changePasswordForm" novalidate>
+    <mat-form-field>
+      <mat-label>현재 패스워드</mat-label>
+      <input
+        matInput
+        type="password"
+        formControlName="currentLoginPw"
+        #currentLoginPw
+      />
+      <mat-error>
+        현재 패스워드를 입력해 주세요
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>신규 패스워드</mat-label>
+      <input
+        matInput
+        type="password"
+        formControlName="newLoginPw"
+        #newLoginPw
+      />
+      <mat-error>
+        신규 패스워드를 입력해 주세요
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>신규 패스워드 확인</mat-label>
+      <input
+        matInput
+        type="password"
+        formControlName="newConfirmLoginPw"
+        #newConfirmLoginPw
+      />
+      <mat-error>
+        신규 패스워드 확인을 입력해 주세요
+      </mat-error>
+    </mat-form-field>
+
+    <button
+      mat-raised-button
+      class="submit-button bg-accent-dark"
+      aria-label="패스워드 변경"
+      [disabled]="changePasswordForm.invalid || !changePasswordBtnEnable"
+      (click)="onClickLogin()"
+    >
+      패스워드 변경
+    </button>
+  </form>
+</div>
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.scss
new file mode 100644
index 00000000..5b6661e2
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.scss
@@ -0,0 +1,63 @@
+.change-password-form {
+  position: relative;
+  width: 384px;
+  max-width: 384px;
+  padding: 50px;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0px;
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
+
+  .mat-title {
+    margin: 16px 0 32px 0;
+  }
+
+  form {
+    width: 100%;
+    text-align: left;
+
+    mat-form-field {
+      width: 100%;
+    }
+
+    .submit-button {
+      width: 100%;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  .separator {
+    font-size: 15px;
+    font-weight: 600;
+    margin: 24px auto;
+    position: relative;
+    overflow: hidden;
+    width: 100px;
+
+    .text {
+      display: inline-flex;
+      position: relative;
+      padding: 0 8px;
+      z-index: 9999;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        width: 30px;
+        position: absolute;
+        top: 10px;
+        border-top: 1px solid;
+      }
+
+      &:before {
+        right: 100%;
+      }
+
+      &:after {
+        left: 100%;
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.spec.ts b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.spec.ts
new file mode 100644
index 00000000..8fcfab0d
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePasswordComponent } from './change-password.component';
+
+describe('Account::ChangePasswordComponent', () => {
+  let component: ChangePasswordComponent;
+  let fixture: ComponentFixture<ChangePasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChangePasswordComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangePasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.ts b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.ts
new file mode 100644
index 00000000..babf3638
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.ts
@@ -0,0 +1,67 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  ElementRef,
+  ChangeDetectorRef
+} from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Company } from '@ucap-webmessenger/api-external';
+import { LocalStorageService } from '@ucap-webmessenger/web-storage';
+import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+
+@Component({
+  selector: 'ucap-account-change-password',
+  templateUrl: './change-password.component.html',
+  styleUrls: ['./change-password.component.scss']
+})
+export class ChangePasswordComponent implements OnInit {
+  @Input()
+  changePasswordBtnEnable: boolean;
+
+  @Output()
+  changePassword = new EventEmitter<{
+    currentLoginPw: string;
+    newLoginPw: string;
+    newConfirmLoginPw: string;
+    notValid: () => void;
+  }>();
+
+  @ViewChild('currentLoginPw', { static: true })
+  currentLoginPwElementRef: ElementRef;
+  @ViewChild('newLoginPw', { static: true })
+  newLoginPwElementRef: ElementRef;
+
+  changePasswordForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef,
+    private localStorageService: LocalStorageService
+  ) {}
+
+  ngOnInit() {
+    const loginInfo: LoginInfo = this.localStorageService.get<LoginInfo>(
+      KEY_LOGIN_INFO
+    );
+    this.changePasswordForm = this.formBuilder.group({
+      currentLoginPw: ['', Validators.required],
+      newLoginPw: ['', Validators.required],
+      newConfirmLoginPw: ['', Validators.required]
+    });
+  }
+
+  onClickLogin() {
+    this.changePassword.emit({
+      currentLoginPw: this.changePasswordForm.get('currentLoginPw').value,
+      newLoginPw: this.changePasswordForm.get('newLoginPw').value,
+      newConfirmLoginPw: this.changePasswordForm.get('newConfirmLoginPw').value,
+      notValid: () => {
+        this.currentLoginPwElementRef.nativeElement.focus();
+      }
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
index a314ddc7..40d29598 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
+++ b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
@@ -11,11 +11,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 
+import { ChangePasswordComponent } from './components/change-password.component';
 import { LoginComponent } from './components/login.component';
 
 import { AccountService } from './services/account.service';
 
-const COMPONENTS = [LoginComponent];
+const COMPONENTS = [ChangePasswordComponent, LoginComponent];
 const SERVICES = [AccountService];
 
 @NgModule({
diff --git a/projects/ucap-webmessenger-ui-account/src/public-api.ts b/projects/ucap-webmessenger-ui-account/src/public-api.ts
index a5492d12..36908d96 100644
--- a/projects/ucap-webmessenger-ui-account/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui-account/src/public-api.ts
@@ -3,5 +3,6 @@
  */
 
 export * from './lib/services/account.service';
+export * from './lib/components/change-password.component';
 export * from './lib/components/login.component';
 export * from './lib/ucap-ui-account.module';