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] 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';