Login now based on email

webextension/options.html

@@ -28,8 +28,8 @@
       </label>
 
       <label>
-        <span data-i18n="usernameLabel">Username</span>
-        <input id="username" type="text" data-i18n-placeholder="usernamePlaceholder" placeholder="alice" />
+        <span data-i18n="emailLabel">Email</span>
+        <input id="email" type="email" data-i18n-placeholder="emailPlaceholder" placeholder="alice@example.com" />
       </label>
 
       <label>

webextension/options.js

@@ -4,7 +4,7 @@
 const statusEl = document.getElementById('status');
 const form = document.getElementById('settings-form');
 const backendUrlInput = document.getElementById('backend-url');
-const usernameInput = document.getElementById('username');
+const emailInput = document.getElementById('email');
 const passwordInput = document.getElementById('password');
 const otpInput = document.getElementById('otp');
 const session = document.getElementById('logged-in');
@@ -21,9 +21,9 @@ function setStatus(message, isError = false) {
 }
 
 async function loadSettings() {
-  const settings = await browser.storage.local.get(['backendUrl', 'username', 'accessToken']);
+  const settings = await browser.storage.local.get(['backendUrl', 'email', 'username', 'accessToken']);
   backendUrlInput.value = settings.backendUrl || '';
-  usernameInput.value = settings.username || '';
+  emailInput.value = settings.email || '';
 
   if (settings.accessToken && settings.backendUrl) {
     try {
@@ -32,7 +32,7 @@ async function loadSettings() {
       );
       if (response.ok) {
         const user = await response.json();
-        showLoggedIn(user.username || settings.username, settings.backendUrl);
+        showLoggedIn(user.username || settings.email, settings.backendUrl);
         return;
       }
     } catch (error) {
@@ -61,11 +61,11 @@ async function clearSession() {
 async function saveSettingsAndLogin(event) {
   event.preventDefault();
   const backendUrl = backendUrlInput.value.trim();
-  const username = usernameInput.value.trim();
+  const email = emailInput.value.trim();
   const password = passwordInput.value;
   const otp = otpInput.value.trim();
 
-  if (!backendUrl || !username || !password) {
+  if (!backendUrl || !email || !password) {
     setStatus(t('fillAllFields'), true);
     return;
   }
@@ -74,7 +74,7 @@ async function saveSettingsAndLogin(event) {
     const response = await fetch(`${backendUrl}/api/auth/login`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ username, password, otp: otp || null })
+      body: JSON.stringify({ email, password, otp: otp || null })
     });
 
     if (!response.ok) {
@@ -84,14 +84,15 @@ async function saveSettingsAndLogin(event) {
     const data = await response.json();
     await browser.storage.local.set({
       backendUrl,
-      username,
+      email,
+      username: data.user?.username || email,
       accessToken: data.access_token,
       tokenType: data.token_type,
       tokenExpiresAt: data.expires_at,
       refreshToken: data.refresh_token,
     });
 
-    showLoggedIn(data.user?.username || username, backendUrl);
+    showLoggedIn(data.user?.username || email, backendUrl);
     passwordInput.value = '';
     otpInput.value = '';
     setStatus(t('loggedInSuccessfully'));