feat(api,frontend): add qr code login

frontend/src/lib/api/endpoints.ts

@@ -53,6 +53,14 @@ export function startLogin(phone: string): Promise<LoginState> {
   });
 }
 
+export function startQrLogin(): Promise<LoginState> {
+  return request<LoginState>("/accounts/login/qr", { method: "POST" });
+}
+
+export function pollQrLogin(loginId: string): Promise<LoginState> {
+  return request<LoginState>(`/accounts/login/${loginId}/qr`);
+}
+
 export function submitLoginCode(
   loginId: string,
   code: string

frontend/src/lib/api/types.ts

@@ -22,11 +22,12 @@ export interface Account {
   tg_user_id: number | null;
 }
 
-export type LoginStage = "code" | "password" | "done";
+export type LoginStage = "code" | "qr" | "password" | "done";
 
 export interface LoginState {
   account: Account | null;
   login_id: string;
+  qr_url: string | null;
   stage: LoginStage;
 }
 

frontend/src/lib/components/settings/AddAccountDialog.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
+  import { untrack } from "svelte";
   import { ApiError } from "$lib/api/client";
   import {
     cancelLogin,
+    pollQrLogin,
     startLogin,
+    startQrLogin,
     submitLoginCode,
     submitLoginPassword,
   } from "$lib/api/endpoints";
   import type { LoginState } from "$lib/api/types";
   import Button from "$lib/components/ui/Button.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
+  import QrCode from "$lib/components/ui/QrCode.svelte";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { toasts } from "$lib/stores/toasts.svelte";
 
-  type Step = "phone" | "code" | "password";
+  type Step = "qr" | "phone" | "code" | "password";
 
   let { open = $bindable(false) }: { open?: boolean } = $props();
 
-  let step = $state<Step>("phone");
+  let step = $state<Step>("qr");
   let loginId = $state("");
+  let qrUrl = $state("");
   let phone = $state("");
   let code = $state("");
   let password = $state("");
   let busy = $state(false);
+  let attempt = 0;
 
   const hints: Record<Step, string> = {
+    qr: "Telegram → Настройки → Устройства → Подключить устройство, и наведите камеру на код.",
     phone: "Номер телефона в международном формате, например +79991234567.",
     code: "Код отправлен в Telegram на этот номер.",
     password: "Аккаунт защищён двухэтапной аутентификацией.",
@@ -40,24 +47,6 @@
     return password.length > 0;
   });
 
-  function reset() {
-    step = "phone";
-    loginId = "";
-    phone = "";
-    code = "";
-    password = "";
-  }
-
-  function next(): Promise<LoginState> {
-    if (step === "phone") {
-      return startLogin(phone.trim());
-    }
-    if (step === "code") {
-      return submitLoginCode(loginId, code.trim());
-    }
-    return submitLoginPassword(loginId, password);
-  }
-
   async function apply(state: LoginState) {
     if (state.stage !== "done") {
       loginId = state.login_id;
@@ -73,6 +62,69 @@
     open = false;
   }
 
+  function fail(error: unknown, fallback: string) {
+    toasts.error(error instanceof ApiError ? error.detail : fallback);
+  }
+
+  function drop() {
+    attempt += 1;
+    if (loginId) {
+      cancelLogin(loginId).catch(() => undefined);
+      loginId = "";
+    }
+  }
+
+  async function watchQr() {
+    const mine = attempt;
+    try {
+      let state = await startQrLogin();
+      while (mine === attempt && state.stage === "qr") {
+        loginId = state.login_id;
+        qrUrl = state.qr_url ?? "";
+        state = await pollQrLogin(state.login_id);
+      }
+      if (mine === attempt) {
+        await apply(state);
+      }
+    } catch (error) {
+      if (mine === attempt) {
+        fail(error, "Не удалось получить QR-код");
+      }
+    }
+  }
+
+  function useQr() {
+    drop();
+    step = "qr";
+    qrUrl = "";
+    watchQr();
+  }
+
+  function usePhone() {
+    drop();
+    step = "phone";
+    qrUrl = "";
+  }
+
+  function begin() {
+    attempt += 1;
+    loginId = "";
+    phone = "";
+    code = "";
+    password = "";
+    useQr();
+  }
+
+  function next(): Promise<LoginState> {
+    if (step === "phone") {
+      return startLogin(phone.trim());
+    }
+    if (step === "code") {
+      return submitLoginCode(loginId, code.trim());
+    }
+    return submitLoginPassword(loginId, password);
+  }
+
   async function submit(event: SubmitEvent) {
     event.preventDefault();
     if (busy || !filled) {
@@ -82,20 +134,23 @@
     try {
       await apply(await next());
     } catch (error) {
-      toasts.error(
-        error instanceof ApiError ? error.detail : "Не удалось войти"
-      );
+      fail(error, "Не удалось войти");
     } finally {
       busy = false;
     }
   }
 
   function onOpenChange(value: boolean) {
-    if (!value && loginId) {
-      cancelLogin(loginId).catch(() => undefined);
+    if (!value) {
+      drop();
     }
-    reset();
   }
+
+  $effect(() => {
+    if (open) {
+      untrack(begin);
+    }
+  });
 </script>
 
 <Dialog.Root bind:open {onOpenChange}>
@@ -108,54 +163,78 @@
           <Icon name="close" size="1.25rem" />
         </Dialog.Close>
       </header>
-      <form onsubmit={submit}>
+      {#if step === "qr"}
         <div class="dialog-body">
-          <p class="hint">{hints[step]}</p>
-          {#if step === "phone"}
-            <div class="input-group">
-              <input
-                id="login-phone"
-                class="form-control"
-                type="tel"
-                autocomplete="tel"
-                placeholder="+7 999 123-45-67"
-                bind:value={phone}
-              >
-              <label for="login-phone">Номер телефона</label>
-            </div>
-          {:else if step === "code"}
-            <div class="input-group">
-              <input
-                id="login-code"
-                class="form-control"
-                type="text"
-                inputmode="numeric"
-                autocomplete="one-time-code"
-                placeholder="12345"
-                bind:value={code}
-              >
-              <label for="login-code">Код подтверждения</label>
-            </div>
-          {:else}
-            <div class="input-group">
-              <input
-                id="login-password"
-                class="form-control"
-                type="password"
-                autocomplete="current-password"
-                placeholder="Пароль"
-                bind:value={password}
-              >
-              <label for="login-password">Облачный пароль</label>
-            </div>
-          {/if}
+          <p class="hint">{hints.qr}</p>
+          <div class="qr-slot">
+            {#if qrUrl}
+              <QrCode value={qrUrl} label="QR-код для входа в Telegram" />
+            {/if}
+          </div>
         </div>
         <div class="dialog-actions">
-          <Button type="submit" pill loading={busy} disabled={busy || !filled}>
-            {step === "phone" ? "Отправить код" : "Продолжить"}
+          <Button variant="text" pill onclick={usePhone}>
+            Войти по номеру телефона
           </Button>
         </div>
-      </form>
+      {:else}
+        <form onsubmit={submit}>
+          <div class="dialog-body">
+            <p class="hint">{hints[step]}</p>
+            {#if step === "phone"}
+              <div class="input-group">
+                <input
+                  id="login-phone"
+                  class="form-control"
+                  type="tel"
+                  autocomplete="tel"
+                  placeholder="+7 999 123-45-67"
+                  bind:value={phone}
+                >
+                <label for="login-phone">Номер телефона</label>
+              </div>
+            {:else if step === "code"}
+              <div class="input-group">
+                <input
+                  id="login-code"
+                  class="form-control"
+                  type="text"
+                  inputmode="numeric"
+                  autocomplete="one-time-code"
+                  placeholder="12345"
+                  bind:value={code}
+                >
+                <label for="login-code">Код подтверждения</label>
+              </div>
+            {:else}
+              <div class="input-group">
+                <input
+                  id="login-password"
+                  class="form-control"
+                  type="password"
+                  autocomplete="current-password"
+                  placeholder="Пароль"
+                  bind:value={password}
+                >
+                <label for="login-password">Облачный пароль</label>
+              </div>
+            {/if}
+          </div>
+          <div class="dialog-actions">
+            {#if step === "phone"}
+              <Button variant="text" pill onclick={useQr}>QR-код</Button>
+            {/if}
+            <Button
+              type="submit"
+              pill
+              loading={busy}
+              disabled={busy || !filled}
+            >
+              {step === "phone" ? "Отправить код" : "Продолжить"}
+            </Button>
+          </div>
+        </form>
+      {/if}
     </Dialog.Content>
   </Dialog.Portal>
 </Dialog.Root>
@@ -166,4 +245,14 @@
     font-size: 0.9375rem;
     color: var(--color-text-secondary);
   }
+
+  .qr-slot {
+    display: grid;
+    place-items: center;
+    width: min(15rem, 100%);
+    aspect-ratio: 1;
+    margin: 0 auto;
+    background: var(--color-background-secondary);
+    border-radius: 0.75rem;
+  }
 </style>

frontend/src/lib/components/ui/QrCode.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { encode } from "uqr";
+
+  const QUIET_ZONE = 2;
+
+  let { value, label }: { value: string; label: string } = $props();
+
+  const code = $derived.by(() => {
+    const qr = encode(value, { ecc: "M", border: 0 });
+    const path = qr.data
+      .flatMap((row, y) =>
+        row.flatMap((filled, x) => (filled ? [`M${x} ${y}h1v1h-1z`] : []))
+      )
+      .join("");
+    return { extent: qr.size + QUIET_ZONE * 2, path };
+  });
+</script>
+
+<svg
+  class="qr"
+  viewBox="0 0 {code.extent} {code.extent}"
+  role="img"
+  aria-label={label}
+>
+  <rect width={code.extent} height={code.extent} fill="var(--qr-bg, #fff)" />
+  <path
+    d={code.path}
+    fill="var(--qr-fg, #000)"
+    transform="translate({QUIET_ZONE} {QUIET_ZONE})"
+  />
+</svg>
+
+<style lang="scss">
+  .qr {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0.75rem;
+  }
+</style>