micro-frontend/accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html

<div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-linear-to-br from-red-50 via-white to-red-100 relative overflow-hidden">
  <div class="login-modal d-flex align-items-center justify-content-center bg-white rounded-2xl">
    <div class="card modal-card" role="dialog" aria-labelledby="signin-title" aria-modal="true">

      <div class="brand">
        <img src="/logo.png" alt="Company logo" class="logo"/>
        <h1 id="signin-title" class="kanit-bold">เข้าสู่ระบบ</h1>
        <p class="subtitle">บัญชีโปรแกรมจัดการบัญชีของท่าน</p>
      </div>

      <form [formGroup]="loginForm" (ngSubmit)="signIn()" class="form">

        <label class="field">
          <span class="label-text">อีเมล์</span>
          <input type="email" formControlName="username" autocomplete="username" placeholder="nuttakit@gmail.com" required class="input-field" />
        </label>

        <label class="field mt-3">
          <span class="label-text">รหัสผ่าน</span>
          <input type="password" formControlName="password" autocomplete="current-password" required class="input-field" />
        </label>

        <div class="actions d-flex justify-content-between align-items-center mt-4">
          <label class="stay-signed">
            <input type="checkbox" formControlName="remember" />
            <span>จดจำรหัสผ่าน</span>
          </label>
          <button type="submit" class="primary login-button"
                  [disabled]="!(loginForm.get('username')?.valid && loginForm.get('password')?.value)">
            เข้าสู่ระบบ
          </button>
        </div>

        <div class="alt-options mt-4 text-center">
          <button type="button" class="biometric btn-icon" (click)="useBiometric()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="icon-svg">
              <path d="M12 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" fill="currentColor" opacity=".9"/>
              <path d="M6.2 10.9A6 6 0 0 1 12 6a6 6 0 0 1 5.8 4.9M12 22v-2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4 12a8 8 0 0 1 16 0v1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>เข้าสู่ระบบด้วย Windows Hello / Touch ID</span>
          </button>
          <a class="help-link mt-2" href="#" (click)="$event.preventDefault(); forgotPassword()">ลืมรหัส ใช่ หรือ ไม่?</a>
        </div>

        <div class="footer mt-5 text-center">
          <a href="#" (click)="$event.preventDefault(); createAccount()">สร้างบัญชี</a>
          <span class="divider mx-2">•</span>
          <a href="#" (click)="$event.preventDefault(); privacy()">Privacy & terms</a>
        </div>
      </form>

    </div>
  </div>
</div>