feat(user-avatar): users can now edit there image (image is taken from OIDC picture)

static/profile.html

@@ -40,13 +40,54 @@
   <div id="main-content" class="hidden">
     <div class="profile-card">
       <div class="avatar-section">
-        <div class="avatar-large" id="p-avatar">—</div>
+        <div class="avatar-large-wrap">
+          <div class="avatar-large" id="p-avatar">—</div>
+          <button class="avatar-edit-btn hidden" id="p-avatar-edit-btn" data-i18n-title="profile.edit_photo" title="Edit photo">
+            <i class="fas fa-pencil-alt"></i>
+          </button>
+        </div>
         <div class="avatar-info">
           <h1 id="p-username">—</h1>
           <div class="email" id="p-email">—</div>
           <span class="role-badge" id="p-role-badge">—</span>
+          <p class="avatar-oidc-note hidden" id="p-avatar-oidc-note" data-i18n="profile.photo_managed_by_oidc">Photo managed by your identity provider.</p>
         </div>
       </div>
+
+      <!-- Photo edit panel (local accounts only) -->
+      <div class="avatar-edit-panel hidden" id="p-avatar-edit-panel">
+        <div class="avatar-edit-tabs">
+          <button class="avatar-tab active" id="p-tab-url" data-i18n="profile.photo_tab_url">URL</button>
+          <button class="avatar-tab" id="p-tab-upload" data-i18n="profile.photo_tab_upload">Upload</button>
+        </div>
+
+        <!-- URL input mode -->
+        <div class="avatar-tab-pane" id="p-pane-url">
+          <input type="url" id="p-image-url" class="avatar-url-input"
+                 data-i18n-placeholder="profile.photo_url_placeholder"
+                 placeholder="https://example.com/photo.jpg">
+          <small class="avatar-hint" data-i18n="profile.photo_url_hint">https://, http://, or data:image/…;base64,… accepted</small>
+        </div>
+
+        <!-- Upload mode -->
+        <div class="avatar-tab-pane hidden" id="p-pane-upload">
+          <label class="avatar-file-label" for="p-image-file">
+            <i class="fas fa-cloud-upload-alt"></i>
+            <span data-i18n="profile.photo_choose_file">Choose a photo (PNG, JPEG, WebP)</span>
+          </label>
+          <input type="file" id="p-image-file" class="avatar-file-input"
+                 accept="image/png,image/jpeg,image/webp">
+          <img class="avatar-preview hidden" id="p-image-preview" alt="Preview" src="">
+          <small class="avatar-hint" data-i18n="profile.photo_resize_note">Images larger than 512 × 512 px are automatically resized.</small>
+        </div>
+
+        <div class="avatar-edit-actions">
+          <button class="btn btn-primary" id="p-avatar-save" data-i18n="profile.photo_save">Save</button>
+          <button class="btn btn-danger-sm" id="p-avatar-remove" data-i18n="profile.photo_remove">Remove photo</button>
+          <button class="btn btn-secondary" id="p-avatar-cancel" data-i18n="profile.photo_cancel">Cancel</button>
+        </div>
+        <div id="p-avatar-status"></div>
+      </div>
     </div>
 
     <div class="profile-card">