ucap-angular/projects/ui-authentication/src/lib/components/login.component.html

<div class="ucap-login-container">
  <ng-content select="[ucapAuthenticationLogin='header']"></ng-content>

  <form name="loginForm" [formGroup]="loginForm" novalidate>
    <mat-form-field
      [style.display]="!!fixedCompanyCode ? 'none' : 'block'"
      class="login-company"
    >
      <mat-label>{{ 'login.fields.company' | ucapI18n }}</mat-label>
      <mat-select
        [formControl]="companyCodeFormControl"
        [value]="companyCode || fixedCompanyCode"
        placeholder="{{ 'login.labels.selectCompany' | ucapI18n }}"
      >
        <mat-option
          *ngFor="let company of companyList"
          [value]="company.companyCode"
        >
          {{ company.companyName }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div class="input-lineless">
      <!--<span class="icon-img"><i class="mid mdi-account-tie-outline"></i></span>-->
      <span class="icon-img">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 22">
          <path
            d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88Z"
            transform="translate(-1.59 -1)"
            style="fill: #fff;"
          />
          <path
            d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88ZM8.3,6.7A3.71,3.71,0,1,1,12,10.41,3.7,3.7,0,0,1,8.3,6.7ZM3.65,21a8.42,8.42,0,0,1,7.58-7.37L10,16.58l2,2,2-2-1.23-2.95A8.42,8.42,0,0,1,20.35,21Z"
            transform="translate(-1.59 -1)"
          />
        </svg>
      </span>
      <mat-form-field class="login-id">
        <mat-label>{{ 'login.fields.loginId' | ucapI18n }}</mat-label>
        <input matInput [formControl]="loginIdFormControl" />
      </mat-form-field>
    </div>

    <div class="input-lineless">
      <!--<span class="icon-img"><i class="mid mdi-lock-outline"></i></span>-->
      <span class="icon-img">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22.07">
          <title>login-lock</title>
          <path
            d="M19,10H18V7A6,6,0,0,0,6,7v3H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Z"
            transform="translate(-2 -0.93)"
            style="fill: #fff;"
          />
          <rect x="9.08" y="12.94" width="1.84" height="3.72" />
          <path
            d="M19,22.93H5a3,3,0,0,1-3-3v-7a3,3,0,0,1,3-3H19a3,3,0,0,1,3,3v7A3,3,0,0,1,19,22.93Zm-14-11a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1v-7a1,1,0,0,0-1-1Z"
            transform="translate(-2 -0.93)"
          />
          <path
            d="M17,11.93a1,1,0,0,1-1-1v-4a4,4,0,0,0-8,0v4a1,1,0,0,1-2,0v-4a6,6,0,0,1,12,0v4A1,1,0,0,1,17,11.93Z"
            transform="translate(-2 -0.93)"
          />
          <rect
            x="9.58"
            y="13.36"
            width="0.84"
            height="2.72"
            style="fill: #fff;"
          />
          <rect x="9.08" y="12.86" width="1.84" height="3.72" />
        </svg>
      </span>
      <mat-form-field class="login-pw">
        <mat-label>{{ 'login.fields.loginPw' | ucapI18n }}</mat-label>
        <input
          matInput
          type="password"
          [formControl]="loginPwFormControl"
          #loginPw
        />
      </mat-form-field>
    </div>

    <div class="error-container">
      <mat-error
        *ngIf="
          companyCodeFormControl.dirty &&
          companyCodeFormControl.invalid &&
          companyCodeFormControl.hasError('required')
        "
      >
        {{ 'login.errors.requireCompany' | ucapI18n }}
      </mat-error>
      <mat-error
        *ngIf="
          loginIdFormControl.dirty &&
          loginIdFormControl.invalid &&
          loginIdFormControl.hasError('required')
        "
      >
        {{ 'login.errors.requireLoginId' | ucapI18n }}
      </mat-error>
      <mat-error
        *ngIf="
          loginPwFormControl.dirty &&
          loginPwFormControl.invalid &&
          loginPwFormControl.hasError('required')
        "
      >
        {{ 'login.errors.requireLoginPw' | ucapI18n }}
      </mat-error>
      <mat-error *ngIf="loginFailed">
        {{ 'login.errors.failed' | ucapI18n }}
      </mat-error>
    </div>

    <button
      mat-raised-button
      class="submit-button bg-accent-dark"
      aria-label="LOG IN"
      [disabled]="
        loginForm.invalid ||
        disable ||
        (!!loginTry && !!loginTry.remainTimeForNextTry)
      "
      (click)="onClickLogin()"
    >
      <ng-container
        *ngIf="!processing && (!loginTry || !loginTry.remainTimeForNextTry)"
      >
        {{ 'login.labels.doLogin' | ucapI18n }}
      </ng-container>

      <ng-container *ngIf="!!loginTry && !!loginTry.remainTimeForNextTry">
        {{ 'login.errors.attemptsExceeded' | ucapI18n }}
        (
        {{
          moment
            .utc(
              moment
                .duration(loginTry.remainTimeForNextTry, 'seconds')
                .asMilliseconds()
            )
            .format('mm:ss')
        }}
        )
      </ng-container>

      <mat-spinner
        *ngIf="processing && (!loginTry || !loginTry.remainTimeForNextTry)"
      >
      </mat-spinner>
    </button>
  </form>

  <ng-content select="[ucapAuthenticationLogin='footer']"></ng-content>
</div>