<div class="change-password-form">
  <form name="changePasswordForm" [formGroup]="changePasswordForm" novalidate>
    <mat-form-field>
      <mat-label>{{ 'accounts.fieldCurrentPassword' | translate }}</mat-label>
      <input
        matInput
        type="password"
        [formControl]="currentLoginPwFormControl"
      />
    </mat-form-field>
    <mat-form-field>
      <mat-label>{{ 'accounts.fieldNewPassword' | translate }}</mat-label>
      <input matInput type="password" [formControl]="newLoginPwFormControl" />
    </mat-form-field>
    <mat-form-field>
      <mat-label>{{
        'accounts.fieldNewPasswordConfirm' | translate
      }}</mat-label>
      <input
        matInput
        type="password"
        [formControl]="newConfirmLoginPwFormControl"
      />
    </mat-form-field>

    <div class="error-container">
      <mat-error
        *ngIf="
          currentLoginPwFormControl.dirty &&
          currentLoginPwFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireCurrentPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          currentLoginPwFormControl.dirty &&
          currentLoginPwFormControl.hasError('ucapPasswordSame')
        "
      >
        {{ 'accounts.errors.notSameWithCurrentPassword' | translate }}
      </mat-error>

      <mat-error
        *ngIf="
          newLoginPwFormControl.dirty &&
          newLoginPwFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireNewPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          newLoginPwFormControl.dirty &&
          newLoginPwFormControl.hasError('ucapNotSameWith')
        "
      >
        {{ 'accounts.errors.sameWithCurrentPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          newLoginPwFormControl.dirty &&
          newLoginPwFormControl.hasError('ucapPassword')
        "
      >
        <ng-container
          [ngSwitch]="
            newLoginPwFormControl.getError('ucapPassword').result.code
          "
        >
          <ng-container *ngSwitchCase="PasswordValidationResult.IncludeSpace">
            {{ 'accounts.errors.notContainSpacesForPassword' | translate }}
          </ng-container>
          <ng-container *ngSwitchCase="PasswordValidationResult.IncludeUserId">
            {{ 'accounts.errors.notContainUseridForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludePhoneNumber"
          >
            {{ 'accounts.errors.notContainPhonenumberForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeRepeated"
          >
            {{
              'accounts.errors.notAllowedAlphaNumOver3TimesForPassword'
                | translate
            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeIncrements"
          >
            {{
              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
                | translate
            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeDecrements"
          >
            {{
              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
                | translate
            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.LackOfCombination"
          >
            {{ 'accounts.errors.notSatisfiedCombineForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.TooShortCombinationLength"
          >
            {{
              'accounts.errors.minLengthCombineForPassword'
                | translate
                  : {
                      countOfCombine: newLoginPwFormControl.getError(
                        'ucapPassword'
                      ).result.extra.combinationCount,
                      lengthOfPassword: newLoginPwFormControl.getError(
                        'ucapPassword'
                      ).result.extra.minPwLen
                    }
            }}
          </ng-container>
        </ng-container>
      </mat-error>
      <mat-error
        *ngIf="
          newConfirmLoginPwFormControl.dirty &&
          newConfirmLoginPwFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireNewPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          newConfirmLoginPwFormControl.dirty &&
          newConfirmLoginPwFormControl.hasError('ucapSameWith')
        "
      >
        {{ 'accounts.errors.notSameWithNewPassword' | translate }}
      </mat-error>
    </div>

    <button
      mat-raised-button
      class="submit-button bg-accent-dark"
      aria-label="패스워드 변경"
      [disabled]="changePasswordForm.invalid"
      (click)="onClickChangePassword()"
    >
      {{ 'accounts.changePassword' | translate }}
    </button>
  </form>
</div>
