new: usr: Add opportunity to use profile picture. #4

assets/js/components/AvatarUpload.jsx

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+
+export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
+  const [thumbUrl, setThumbUrl] = useState(initialThumbUrl || null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current?.click();
+  }
+
+  function handleChange(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const fd = new FormData();
+    fd.append('avatar', file);
+
+    setLoading(true);
+    setError(null);
+
+    fetch(uploadUrl, { method: 'POST', body: fd })
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) {
+          setError(data.error);
+          return;
+        }
+        setThumbUrl(data.thumbUrl);
+
+        const navImg = document.querySelector('.hero-auth-avatar:not(.hero-auth-avatar--initials)');
+        const navInitials = document.querySelector('.hero-auth-avatar.hero-auth-avatar--initials');
+        if (navImg) {
+          navImg.src = data.thumbUrl;
+        } else if (navInitials) {
+          const img = document.createElement('img');
+          img.src = data.thumbUrl;
+          img.alt = navInitials.textContent.trim();
+          img.className = 'hero-auth-avatar';
+          navInitials.replaceWith(img);
+        }
+      })
+      .catch(() => setError('Upload failed. Please try again.'))
+      .finally(() => setLoading(false));
+  }
+
+  return (
+    <div
+      className={`profile-avatar${loading ? ' profile-avatar--loading' : ''}`}
+      title="Click to change profile picture"
+      onClick={handleClick}
+    >
+      {thumbUrl
+        ? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
+        : <span className="profile-avatar__initials">{initials}</span>
+      }
+      <div className="profile-avatar__overlay">
+        <i className="fa fa-camera" />
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/gif,image/webp"
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
+      {error && <div className="profile-avatar__error">{error}</div>}
+    </div>
+  );
+}