fix(ui): use email as fallback when username is not defined

static/js/app/userMenu.js

@@ -203,7 +203,9 @@ function updateUserMenuData() {
     const storageFill = document.getElementById('user-menu-storage-fill');
     const storageText = document.getElementById('user-menu-storage-text');
 
-    if (userData.username && userData.id) {
+    // Username is optional (PR 16) — gate on `id` only; the avatar
+    // mount needs the UUID, not the handle.
+    if (userData.id) {
         _mountAvatarVignettes(userData.id);
     }
 
@@ -237,8 +239,10 @@ async function fetchAppVersion() {
 function showUserProfileModal() {
     const USER_DATA_KEY = 'oxicloud_user';
     const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
-    const username = userData.username || 'User';
+    // Username is optional (PR 16); fall back to email so usernameless
+    // recipients (magic-link sign-ins) still get a recognizable label.
     const email = userData.email || '';
+    const username = userData.username || email || 'User';
     const role = userData.role || 'user';
     const initials = username.substring(0, 2).toUpperCase();
     const usedBytes = userData.storage_used_bytes || 0;

static/js/views/admin/admin.js

@@ -241,7 +241,7 @@ async function loadUsers() {
                 return (
                     '<tr>' +
                     '<td><div class="user-info"><span class="user-name">' +
-                    escapeHtml(u.username) +
+                    escapeHtml(u.username || u.email || '—') +
                     (isSelf ? ` <span class="user-self-badge">${escapeHtml(i18n.t('admin.you_badge'))}</span>` : '') +
                     '</span><span class="user-email">' +
                     escapeHtml(u.email) +
@@ -274,7 +274,7 @@ async function loadUsers() {
                     '<button class="btn btn-sm btn-secondary admin-action-btn" data-action="quota" data-uid="' +
                     _escJs(u.id) +
                     '" data-uname="' +
-                    _escJs(u.username) +
+                    _escJs(u.username || u.email) +
                     '" data-quota="' +
                     u.storage_quota_bytes +
                     '" title="' +
@@ -285,7 +285,7 @@ async function loadUsers() {
                         : '<button class="btn btn-sm btn-secondary admin-action-btn" data-action="reset-pw" data-uid="' +
                           _escJs(u.id) +
                           '" data-uname="' +
-                          _escJs(u.username) +
+                          _escJs(u.username || u.email) +
                           '" title="' +
                           escapeHtml(i18n.t('admin.reset_password_title')) +
                           '"><i class="fas fa-key"></i></button>') +
@@ -316,7 +316,7 @@ async function loadUsers() {
                     '<button class="btn btn-sm btn-danger admin-action-btn" data-action="delete" data-uid="' +
                     _escJs(u.id) +
                     '" data-uname="' +
-                    _escJs(u.username) +
+                    _escJs(u.username || u.email) +
                     '" title="' +
                     escapeHtml(i18n.t('admin.delete_title')) +
                     '"' +

static/js/views/profile/profile.js

@@ -85,7 +85,7 @@ async function _refreshUserCache() {
         // Refresh top-right avatars if userMenu module is loaded on this page
         // (profile.html is a standalone page, userMenu is only in index.html)
         // — so we update #user-avatar / #user-menu-avatar directly if present
-        const initials = (user.username || '?').substring(0, 2).toUpperCase();
+        const initials = (user.username || user.email || '?').substring(0, 2).toUpperCase();
         const topEl = /** @type {HTMLElement|null} */ (document.getElementById('user-avatar'));
         const dropEl = /** @type {HTMLElement|null} */ (document.getElementById('user-menu-avatar'));
         if (topEl || dropEl) {
@@ -187,7 +187,7 @@ async function _saveImage(image) {
             // Update large avatar immediately
             const raw = localStorage.getItem('oxicloud_user');
             const user = raw ? JSON.parse(raw) : null;
-            const initials = (user?.username || '?').substring(0, 2).toUpperCase();
+            const initials = (user?.username || user?.email || '?').substring(0, 2).toUpperCase();
             _renderAvatar(user?.image, initials);
             _closeEditPanel();
         } else {
@@ -289,9 +289,9 @@ async function init() {
         }
         const user = await resp.json();
 
-        const initials = (user.username || '?').substring(0, 2).toUpperCase();
+        const initials = (user.username || user.email || '?').substring(0, 2).toUpperCase();
         _renderAvatar(user.image, initials);
-        document.getElementById('p-username').textContent = user.username;
+        document.getElementById('p-username').textContent = user.username || user.email || '—';
         document.getElementById('p-email').textContent = user.email || '';
 
         const badge = document.getElementById('p-role-badge');
@@ -314,7 +314,7 @@ async function init() {
             oidcNote?.classList.remove('hidden');
         }
 
-        document.getElementById('p-detail-username').textContent = user.username;
+        document.getElementById('p-detail-username').textContent = user.username || user.email || '—';
         document.getElementById('p-detail-email').textContent = user.email || '—';
         document.getElementById('p-detail-role').textContent = user.role === 'admin' ? i18n.t('profile.role_admin') : i18n.t('profile.role_user');
         document.getElementById('p-detail-login').textContent = timeAgo(user.last_login_at);