scrabble-game/ui/src/screens/Login.svelte

<script lang="ts">
  import { loginEmail, loginGuest, requestEmailCode } from '../lib/app.svelte';
  import { t } from '../lib/i18n/index.svelte';
  import InstallApp from '../components/InstallApp.svelte';

  let email = $state('');
  let code = $state('');
  let stage = $state<'choose' | 'code'>('choose');
  let busy = $state(false);

  async function sendCode() {
    if (!email.trim()) return;
    busy = true;
    const ok = await requestEmailCode(email.trim());
    busy = false;
    if (ok) stage = 'code';
  }

  async function signIn() {
    if (busy || code.trim().length === 0) return;
    busy = true;
    await loginEmail(email.trim(), code.trim());
    busy = false;
  }

  // Track the code and auto-submit once the 6-digit code is complete (Enter submits too).
  function onCode(v: string): void {
    code = v;
    if (code.trim().length === 6) void signIn();
  }
</script>

<main class="login">
  <div class="card">
    <h1>{t('app.title')}</h1>

    <button class="primary" disabled={busy} onclick={() => loginGuest()}>
      {t('login.guest')}
    </button>

    <div class="divider"><span>{t('login.email')}</span></div>

    {#if stage === 'choose'}
      <input
        type="email"
        autocomplete="email"
        placeholder={t('login.emailPlaceholder')}
        bind:value={email}
      />
      <button class="secondary" disabled={busy || !email.trim()} onclick={sendCode}>
        {t('login.sendCode')}
      </button>
    {:else}
      <p class="muted">{t('login.codeSent', { email })}</p>
      <input
        class="codein"
        inputmode="numeric"
        autocomplete="one-time-code"
        maxlength="6"
        placeholder={t('login.codePlaceholder')}
        value={code}
        oninput={(e) => onCode(e.currentTarget.value)}
        onkeydown={(e) => {
          if (e.key === 'Enter') void signIn();
        }}
      />
      <button class="secondary" disabled={busy || !code.trim()} onclick={signIn}>
        {t('login.signIn')}
      </button>
    {/if}
  </div>
  <!-- Web-only install call-to-action, under the login card. Renders nothing unless the app is
       installable here (see components/InstallApp.svelte / lib/pwa). -->
  <div class="promo"><InstallApp /></div>
</main>

<style>
  .login {
    height: 100%;
    display: grid;
    place-items: center;
    /* Centre the card + install promo as a group, with a gap between them. */
    align-content: center;
    gap: 16px;
    padding: 16px;
  }
  /* Match the card width so the install CTA lines up under it. */
  .promo {
    width: min(94vw, 360px);
  }
  .card {
    width: min(94vw, 360px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  h1 {
    margin: 0 0 8px;
    text-align: center;
  }
  input {
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
  }
  /* The email code: the same spread-digit look as the friend-code input elsewhere. */
  .codein {
    letter-spacing: 0.3em;
    font-size: 1.1rem;
  }
  button {
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-weight: 600;
  }
  .primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
  }
  .secondary {
    background: var(--surface);
    color: var(--text);
  }
  button:disabled {
    opacity: 0.5;
  }
  .divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
  }
  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .muted {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
  }
</style>