next-ucap-messenger/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html

<div class="login-form">
  <div class="mat-title">LOGIN TO YOUR ACCOUNT</div>

  <form name="loginForm" [formGroup]="loginForm" novalidate>
    <mat-form-field >
      <mat-label>Company</mat-label>
      <mat-select formControlName="companyCode" required>
        <mat-option
          *ngFor="let company of companyList"
          [value]="company.companyCode"
          >{{ company.companyName }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
        Company is required
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Login ID</mat-label>
      <input matInput formControlName="loginId" />
      <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
        Login ID is required
      </mat-error>
      <mat-error *ngIf="!loginForm.get('loginId').hasError('required')">
        Please enter a valid login id
      </mat-error>
    </mat-form-field>

    <mat-form-field >
      <mat-label>Password</mat-label>
      <input matInput type="password" formControlName="loginPw" #loginPw />
      <mat-error>
        Password is required
      </mat-error>
    </mat-form-field>

    <div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
      <mat-checkbox class="remember-me" formControlName="remember" aria-label="Remember Me">
        Remember Me
      </mat-checkbox>

      <a class="forgot-password">
        Forgot Password?
      </a>
    </div>

    <button
      mat-raised-button
      class="submit-button bg-accent-dark"
      aria-label="LOG IN"
      [disabled]="loginForm.invalid"
      (click)="onClickLogin()"
    >
      LOGIN
    </button>
  </form>

  <div class="register" fxLayout="column" fxLayoutAlign="center center">
    <span class="text">Don't have an account?</span>
    <a class="link">Create an account</a>
  </div>
  <div class="policy"><a class="link">개인정보 처리방침</a></div>
</div>