Toju/toju-app/src/app/domains/authentication/feature/login/login.component.html

<div class="h-full grid place-items-center bg-background">
  <div class="w-[360px] bg-card border border-border rounded-xl p-6 shadow-sm">
    <div class="flex items-center gap-2 mb-4">
      <ng-icon
        name="lucideLogIn"
        class="w-5 h-5 text-primary"
      />
      <h1 class="text-lg font-semibold text-foreground">
        @if (isAuthorizeMode()) {
          {{ 'auth.authorize.title' | translate: { serverName: authorizeServerName() } }}
        } @else {
          {{ 'auth.login.title' | translate }}
        }
      </h1>
    </div>

    @if (isAuthorizeMode()) {
      <p class="text-xs text-muted-foreground mb-4">{{ 'auth.authorize.description' | translate }}</p>
    }

    <form
      class="space-y-3"
      (ngSubmit)="submit()"
    >
      <div>
        <label
          for="login-username"
          class="block text-xs text-muted-foreground mb-1"
          >{{ 'auth.login.username' | translate }}</label
        >
        <input
          [(ngModel)]="username"
          type="text"
          id="login-username"
          name="username"
          appAutoFocus
          appSelectOnFocus
          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
        />
      </div>
      <div>
        <label
          for="login-password"
          class="block text-xs text-muted-foreground mb-1"
          >{{ 'auth.login.password' | translate }}</label
        >
        <input
          [(ngModel)]="password"
          type="password"
          id="login-password"
          name="password"
          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
        />
      </div>
      <div>
        <label
          for="login-server"
          class="block text-xs text-muted-foreground mb-1"
          >{{ 'auth.login.serverApp' | translate }}</label
        >
        <select
          [(ngModel)]="serverId"
          id="login-server"
          name="serverId"
          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
        >
          @for (s of servers(); track s.id) {
            <option [value]="s.id">{{ s.name }}</option>
          }
        </select>
      </div>
      @if (error()) {
        <p class="text-xs text-destructive">{{ error() }}</p>
      }
      <button
        type="submit"
        class="w-full px-3 py-2 rounded bg-primary text-primary-foreground hover:bg-primary/90"
      >
        {{ 'auth.login.submit' | translate }}
      </button>
    </form>
    <div class="text-xs text-muted-foreground text-center mt-2">
      {{ 'auth.login.noAccount' | translate }}
      <button
        type="button"
        (click)="goRegister()"
        class="text-primary hover:underline"
      >
        {{ 'auth.login.registerLink' | translate }}
      </button>
    </div>
  </div>
</div>