<ng-template #complete>
<div class="ui-g" *ngIf="!member">
    <div class="ui-g-12">
        <form [formGroup]="modifyPasswordForm" (ngSubmit)="modifyPasswordFormSubmit()">
            <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/overFlow_CI_blue_185.png">
                      </div>
                      <div class="ui-g-12 ui-nopad font-s">
                          * 비밀번호는 8자 이상 이어야 하며,<br>
                          특수문자, 영문 대·소문자, 숫자를 포함해야 합니다.
                      </div>
                      <div class="ui-g-12">
                        <span class="md-inputfield">
                            <input type="password"
                                   id="pw"
                                   autocomplete="off" placeholder="password"
                                   formControlName="password"
                                   required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
                            <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
                              Invalid password
                            </div>
                        </span>
                      </div>
                      <div class="ui-g-12">
                        <span class="md-inputfield">
                            <input type="password"
                                   id="pwConfirm"
                                   autocomplete="off" placeholder="confirm password"
                                   formControlName="pwConfirm"
                                   required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
                            <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
                              Not matched password
                            </div>
                        </span>
                      </div>
                      <div class="ui-g-12">
                        <button
                          [disabled]="!modifyPasswordForm.valid"
                          type="submit"
                          class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                          <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                          <span class="ui-button-text ui-c">Confirm</span>
                        </button>
                        <a style="cursor: pointer" (click)="onSignin()">Signin</a>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </form>
    </div>
</div>
</ng-template>
<div class="ui-g" *ngIf="member$ | async as member; else complete">
  <div class="ui-g-12">
    <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/overFlow_CI_blue_185.png">
              </div>
              <div class="ui-g-12 ui-g-padding-15">
                <strong>패스워드 변경이 완료 되었습니다.</strong>
              </div>
              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
                <p>입력하신 패스워드로 변경 되었으며,</p>
                <p>로그인 페이지로 이동 후 변경된 패스워드로 로그인을 하시면 됩니다.</p>
                <p>버튼 클릭 시 로그인 페이지로 이동 합니다.</p>
              </div>
              <div class="ui-g-12 ui-g-padding-15">
                <button
                  type="button"
                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
                  (click)="onSignin()">
                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
                  <span class="ui-button-text ui-c">Go to Sign In</span>
                </button>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>