<div class="container">
  <div class="row">
    <div class="content-block">
      <form #newPageForm="ngForm">
        <h2 class="title">變更密碼</h2>
        <div class="form-group">
          <label for="oldPassWord">舊密碼</label>
          <span *ngIf="oldPWD.invalid && (oldPWD.dirty || oldPWD.touched)">
            <span class="invalidMessage" *ngIf="oldPWD?.errors.required">*此欄必填</span>
          </span>
          <input type="password" class="form-control" id="oldPassWord" name="oldPassWord" #oldPWD="ngModel" required [(ngModel)]="userData.PassWord"
            placeholder="舊密碼">
        </div>
        <div class="form-group">
          <label for="newPassWord">新密碼</label>
          <span *ngIf="newPassWord.invalid && (newPassWord.dirty || newPassWord.touched)">
            <span class="invalidMessage" *ngIf="newPassWord?.errors.required">*此欄必填</span>
            <span class="invalidMessage" *ngIf="newPassWord?.errors.minlength">*最少12碼</span>
            <span class="invalidMessage" *ngIf="newPassWord?.errors.pattern">*密碼應包含英文大寫、小寫、特殊符號、數字</span>
          </span>
          <input type="password" class="form-control" id="newPassWord" name="newPassWord" #newPassWord="ngModel" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{12,30}$" minlength="8" reverse="true"
            required [(ngModel)]="userData.newPassWord" placeholder="密碼12~30碼且應包含英文大寫、小寫、特殊符號、數字">
        </div>
        <div class="form-group">
          <label for="checkNewPassWord">確認新密碼</label>
          <span *ngIf="checkNewPassword.invalid && (checkNewPassword.dirty || checkNewPassword.touched)">
            <span class="invalidMessage" *ngIf="checkNewPassword?.errors.required">*此欄必填</span>
            <span class="invalidMessage" *ngIf="checkNewPassword?.errors?.fieldMatches">*與新密碼不相符</span>
          </span>
          <input type="password" class="form-control" id="checkNewPassword" name="checkNewPassword" #checkNewPassword="ngModel" required
            [(ngModel)]="userData.checkNewPassword" [fieldMatches]="newPassWord" placeholder="確認新密碼">
        </div>
        <div class="btn-footer">
          <button type="submit" class="btn btn-block btn-success " [disabled]="!newPageForm.form.valid" (click)="putUserPassword(userData.Id)">送出
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
