beteran-backend-app-browser/src/app/modules/auth/sign-in/sign-in.component.html

<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
  <div
    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
  >
    <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
      <!-- Logo -->
      <div class="w-12">
        <img src="assets/images/logo/logo.svg" />
      </div>

      <!-- Title -->
      <div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">
        Login Page
      </div>
      <!-- <div class="flex items-baseline mt-0.5 font-medium">
        <div>Don't have an account?</div>
        <a
          class="ml-1 text-primary-500 hover:underline"
          [routerLink]="['/sign-up']"
          >Sign up
        </a>
      </div> -->

      <!-- Alert -->
      <fuse-alert
        class="mt-8 -mb-4"
        *ngIf="showAlert"
        [appearance]="'outline'"
        [showIcon]="false"
        [type]="alert.type"
        [@shake]="alert.type === 'error'"
      >
        {{ alert.message }}
      </fuse-alert>

      <!-- Sign in form -->
      <form class="mt-8" [formGroup]="signInForm" #signInNgForm="ngForm">
        <!-- Email field -->
        <mat-form-field class="w-full">
          <mat-label>로그인 아이디</mat-label>
          <input id="email" matInput [formControlName]="'email'" />
          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
            아이디를 입력하세요.
          </mat-error>
          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
            Please enter a valid email address
          </mat-error>
        </mat-form-field>

        <!-- Password field -->
        <mat-form-field class="w-full">
          <mat-label>비밀번호</mat-label>
          <input
            id="password"
            matInput
            type="password"
            [formControlName]="'password'"
            #passwordField
          />
          <button
            mat-icon-button
            type="button"
            (click)="
              passwordField.type === 'password'
                ? (passwordField.type = 'text')
                : (passwordField.type = 'password')
            "
            matSuffix
          >
            <mat-icon
              class="icon-size-5"
              *ngIf="passwordField.type === 'password'"
              [svgIcon]="'heroicons_solid:eye'"
            ></mat-icon>
            <mat-icon
              class="icon-size-5"
              *ngIf="passwordField.type === 'text'"
              [svgIcon]="'heroicons_solid:eye-off'"
            ></mat-icon>
          </button>
          <mat-error> 비밀번호를 입력하세요 </mat-error>
        </mat-form-field>

        <mat-form-field class="w-full">
          <mat-label>보안코드*</mat-label>
          <input id="email" matInput [formControlName]="'recaptcha'" />
          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
            보안코드를 입력하세요.
          </mat-error>
          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
            유효한 보안코드가 아닙니다.
          </mat-error>
        </mat-form-field>

        <!-- Actions -->
        <!-- <div class="inline-flex items-end justify-between w-full mt-1.5">
          <mat-checkbox [color]="'primary'" [formControlName]="'rememberMe'">
            Remember me
          </mat-checkbox>
          <a
            class="text-md font-medium text-primary-500 hover:underline"
            [routerLink]="['/forgot-password']"
            >Forgot password?
          </a>
        </div> -->

        <!-- Submit button -->
        <button
          class="fuse-mat-button-large w-full mt-6"
          mat-flat-button
          [color]="'primary'"
          [disabled]="signInForm.disabled"
          (click)="signIn()"
        >
          <span *ngIf="!signInForm.disabled"> 로그인</span>
          <mat-progress-spinner
            *ngIf="signInForm.disabled"
            [diameter]="24"
            [mode]="'indeterminate'"
          ></mat-progress-spinner>
        </button>

        <!-- Separator -->
        <!-- <div class="flex items-center mt-8">
          <div class="flex-auto mt-px border-t"></div>
          <div class="mx-2 text-secondary">Or continue with</div>
          <div class="flex-auto mt-px border-t"></div>
        </div> -->

        <!-- Single sign-on buttons -->
        <!-- <div class="flex items-center mt-8 space-x-4">
          <button class="flex-auto" type="button" mat-stroked-button>
            <mat-icon
              class="icon-size-5"
              [svgIcon]="'feather:facebook'"
            ></mat-icon>
          </button>
          <button class="flex-auto" type="button" mat-stroked-button>
            <mat-icon
              class="icon-size-5"
              [svgIcon]="'feather:twitter'"
            ></mat-icon>
          </button>
          <button class="flex-auto" type="button" mat-stroked-button>
            <mat-icon
              class="icon-size-5"
              [svgIcon]="'feather:github'"
            ></mat-icon>
          </button>
        </div> -->
      </form>
    </div>
  </div>
</div>