pocketcommunityweb/src/app/account/resetpwd/resetpwd.component.html

<!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center">
  <form [formGroup]="resetForm" class="col-6">
    <!--    管理员名-->
    <div class="input-group mb-3 mx-auto col-7" [class.d-none]="step===3">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
      </div>
      <input type="text" class="form-control text-center disabled" [class.is-invalid]="getValue('managerName').invalid"
             [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
             formControlName="managerName"/>
      <div class="invalid-feedback font-weight-bold text-center">
        {{'tip.notnull' | translate:{value: 'login.manager_name'|translate} }}
      </div>
    </div>

    <!--    邮箱 -->
    <div class="input-group mb-3 mx-auto col-8" [class.col-8]="step===1" [class.col-9]="step===2" *ngIf="step!==3">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ 'register.email' | translate }}</span>
      </div>
      <input type="text" class="form-control text-center"
             [placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email"
             [class.is-invalid]="getValue('email').invalid"/>
      <select class="custom-select" formControlName="emailType">
        <option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option>
        <option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option>

      </select>

      <div class="input-group-append" *ngIf="step===2">
        <button class="btn btn-outline-secondary" type="button"
                [class.is-invalid]="getValue('email').invalid"

                (click)="sendCode()">{{ 'button.send_code' | translate }}</button>
      </div>

      <div class="invalid-feedback font-weight-bold text-center">
        {{'tip.notnull' | translate:{value: 'register.email'|translate} }}
      </div>
    </div>

    <!--    新密码-->
    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===3">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ 'reset_pwd.new_pwd' | translate }}</span>
      </div>
      <input type="password" class="form-control text-center disabled" [class.is-invalid]="getValue('password').invalid"
             [placeholder]="'tip.input' | translate:{value:'reset_pwd.new_pwd'|translate}"
             formControlName="password"/>
      <div class="invalid-feedback font-weight-bold text-center">
        {{'tip.notnull' | translate:{value: 'reset_pwd.new_pwd'|translate} }}
      </div>
    </div>

    <!--    确认新密码-->
    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===3">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ 'reset_pwd.confirm_pwd' | translate }}</span>
      </div>
      <input type="password" class="form-control text-center disabled"
             [class.is-invalid]="getValue('confirmPassword').invalid"
             [placeholder]="'tip.input' | translate:{value:'reset_pwd.confirm_pwd'|translate}"
             formControlName="confirmPassword"/>

      <div class="invalid-feedback font-weight-bold text-center" *ngIf="getValue('confirmPassword').errors">
        <div *ngIf="getValue('confirmPassword')?.errors?.required">
          {{'tip.notnull' | translate:{value: 'reset_pwd.confirm_pwd'|translate} }}
        </div>
        <div *ngIf="getValue('confirmPassword')?.errors?.pwd">
          {{'tip.password_diff'|translate}}
        </div>
      </div>
    </div>

    <!--    验证码-->
    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===2">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ 'reset_pwd.code' | translate }}</span>
      </div>
      <input type="text" class="form-control text-center"
             [placeholder]="'tip.input' | translate:{value:'reset_pwd.code'|translate}"
             [class.is-invalid]="getValue('verificationCode').invalid"
             formControlName="verificationCode">

      <div class="invalid-feedback font-weight-bold text-center">
        {{'tip.notnull' | translate:{value: 'reset_pwd.code'|translate} }}
      </div>
    </div>

    <!--    操作按钮-->
    <div class="col-8 mx-auto text-center mb-3">

      <ng-container [ngSwitch]="step">
        <ng-container *ngSwitchCase="1">
          <!--          检查邮箱-->
          <button type="button" class="btn btn-warning btn-lg mr-3"
                  [disabled]="allowCheckEmail()"
                  (click)="checkEmail()">{{'button.next'|translate}}</button>
        </ng-container>

        <ng-container *ngSwitchCase="2">
          <!--          上一步-->
          <button type="button" class="btn btn-warning btn-lg mr-3"
                  (click)="backFirst()">{{'button.prev'|translate}}</button>
          <!--          检查验证码-->
          <button type="button" class="btn btn-primary btn-lg mr-3" [disabled]="getValue('verificationCode').invalid"
                  (click)="checkCode()"
          >{{'button.check_code'|translate}}</button>
        </ng-container>


        <ng-container *ngSwitchCase="3">
          <!--   重置密码按钮 -->
          <button type="button" (click)="resetPwd()" [disabled]="form().invalid"
                  class="btn btn-primary btn-lg mr-3">{{ 'button.reset_pwd' | translate }}</button>
        </ng-container>


        <!--    返回登陆按钮-->
        <button type="button" [routerLink]="['/login']"
                class="btn btn-info btn-lg">{{ 'button.backLogin' | translate }}</button>
      </ng-container>
    </div>

    <app-message></app-message>
  </form>
</div>