Implement hashed password transfer, change password, redesign the settings UI

frontend/src/core/api/authApi.ts

@@ -3,6 +3,7 @@ import { generateX25519KeyPair } from "@/utils/crypto/asymmetric";
 import { encodeBlob, encryptBackupWithPassword, decryptBackupWithPassword, decodeBlob } from "@/utils/crypto/backup";
 import { b64, ub64 } from "@/utils/utils";
 import { API_BASE_URL } from "@/core/config";
+import { importPassword, hkdfExtractAndExpand } from "@/utils/crypto/kdf";
 
 /**
  * Generates authentication headers for API requests
@@ -143,4 +144,17 @@ export function restoreKeys() {
 
 export function getAuthToken(): string | null {
 	return localStorage.getItem("authToken");
+}
+
+/**
+ * Derive a client-side authentication secret so the raw password never leaves the client.
+ * Uses PBKDF2 (via WebCrypto) + HKDF to produce a stable 32-byte key, then base64.
+ */
+export async function deriveAuthSecret(username: string, password: string): Promise<string> {
+    const key = await importPassword(password);
+    // Use per-user salt derived from username; in future we can fetch a server-provided salt
+    const salt = new TextEncoder().encode(`fromchat.user:${username}`);
+    // Derive 32 bytes using HKDF; PBKDF2 already used within importPassword
+    const derived = await hkdfExtractAndExpand(new TextEncoder().encode(password), salt, new TextEncoder().encode("auth-secret"), 32);
+    return b64(derived);
 }

frontend/src/core/api/devicesApi.ts

@@ -0,0 +1,36 @@
+import { API_BASE_URL } from "@/core/config";
+import { getAuthHeaders } from "@/core/api/authApi";
+
+export interface DeviceInfo {
+    session_id: string;
+    device_type?: string;
+    os_name?: string;
+    os_version?: string;
+    browser_name?: string;
+    browser_version?: string;
+    brand?: string;
+    model?: string;
+    created_at?: string;
+    last_seen?: string;
+    revoked?: boolean;
+    current?: boolean;
+}
+
+export async function listDevices(token: string): Promise<DeviceInfo[]> {
+    const res = await fetch(`${API_BASE_URL}/devices`, { headers: getAuthHeaders(token) });
+    if (!res.ok) throw new Error("Failed to fetch devices");
+    const data = await res.json();
+    return data.devices as DeviceInfo[];
+}
+
+export async function revokeDevice(token: string, sessionId: string): Promise<void> {
+    const res = await fetch(`${API_BASE_URL}/devices/${sessionId}`, { method: "DELETE", headers: getAuthHeaders(token) });
+    if (!res.ok) throw new Error("Failed to revoke device");
+}
+
+export async function logoutAllOtherDevices(token: string): Promise<void> {
+    const res = await fetch(`${API_BASE_URL}/devices/logout-all`, { method: "POST", headers: getAuthHeaders(token) });
+    if (!res.ok) throw new Error("Failed to logout all devices");
+}
+
+

frontend/src/core/api/securityApi.ts

@@ -0,0 +1,25 @@
+import { API_BASE_URL } from "@/core/config";
+import { getAuthHeaders, deriveAuthSecret } from "@/core/api/authApi";
+
+export async function changePassword(
+    token: string,
+    username: string,
+    currentPassword: string,
+    newPassword: string,
+    logoutAllExceptCurrent: boolean
+): Promise<void> {
+    const currentDerived = await deriveAuthSecret(username, currentPassword);
+    const newDerived = await deriveAuthSecret(username, newPassword);
+    const res = await fetch(`${API_BASE_URL}/change-password`, {
+        method: "POST",
+        headers: getAuthHeaders(token),
+        body: JSON.stringify({
+            currentPasswordDerived: currentDerived,
+            newPasswordDerived: newDerived,
+            logoutAllExceptCurrent
+        })
+    });
+    if (!res.ok) throw new Error("Failed to change password");
+}
+
+