index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://www.geogebra.org/apps/deployggb.js"></script>
+
     <script
       defer
       src="https://alt.omukk.dev/script.js"

src/pages/auth/Register.tsx

@@ -1,18 +1,22 @@
-import { useState } from "react";
-import type { FormEvent } from "react";
+import { useState, useRef, useCallback } from "react";
+import type { FormEvent, DragEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "../../stores/authStore";
 import {
   Loader2,
   Mail,
   Lock,
-  ImageIcon,
   BookOpen,
   Star,
   Zap,
   Trophy,
+  Upload,
+  X,
+  Camera,
 } from "lucide-react";
 
+import { api } from "../../utils/api";
+
 const STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
@@ -40,7 +44,6 @@ const STYLES = `
     flex-shrink: 0;
   }
 
-  /* Blobs inside left panel */
   .rg-panel-blob {
     position: absolute; pointer-events: none; border-radius: 50%;
     opacity: 0.18;
@@ -73,7 +76,6 @@ const STYLES = `
     50%      { transform: translate(-20px, -28px) scale(1.06); }
   }
 
-  /* Floating decorative shapes */
   .rg-shape {
     position: absolute; pointer-events: none;
     animation: floatShape 8s ease-in-out infinite;
@@ -83,7 +85,6 @@ const STYLES = `
     50%      { transform: translateY(-16px) rotate(12deg); }
   }
 
-  /* Stars scattered */
   .rg-star {
     position: absolute; pointer-events: none;
     color: #fde68a; opacity: 0.55;
@@ -94,7 +95,6 @@ const STYLES = `
     50%      { opacity: 0.9; transform: scale(1.3); }
   }
 
-  /* Left panel content */
   .rg-panel-content {
     position: relative; z-index: 1;
     display: flex; flex-direction: column;
@@ -133,7 +133,6 @@ const STYLES = `
     font-size: 1rem; font-weight: 600; color: #c4b5fd; line-height: 1.6;
   }
 
-  /* Feature pills */
   .rg-features { display: flex; flex-direction: column; gap: 0.85rem; }
   .rg-feature {
     display: flex; align-items: center; gap: 0.85rem;
@@ -163,7 +162,6 @@ const STYLES = `
     font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
   }
 
-  /* Social proof */
   .rg-social-proof {
     display: flex; align-items: center; gap: 0.75rem;
     padding: 0.1rem 0;
@@ -183,7 +181,7 @@ const STYLES = `
   }
   .rg-social-proof p strong { color: #fde68a; }
 
-  /* ─── RIGHT PANEL (form) ─── */
+  /* ─── RIGHT PANEL ─── */
   .rg-right {
     flex: 1;
     display: flex; align-items: center; justify-content: center;
@@ -191,7 +189,6 @@ const STYLES = `
     position: relative; overflow: hidden;
   }
 
-  /* Subtle bg dots on right */
   .rg-bg-dot {
     position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.10;
     animation: bgDotFloat 9s ease-in-out infinite;
@@ -212,7 +209,6 @@ const STYLES = `
     to   { opacity: 1; transform: translateY(0) scale(1); }
   }
 
-  /* Form header */
   .rg-form-header { display: flex; flex-direction: column; gap: 0.4rem; }
   .rg-form-header h1 {
     font-size: 2rem; font-weight: 900; color: #1e1b4b;
@@ -223,41 +219,152 @@ const STYLES = `
     font-size: 0.88rem; font-weight: 600; color: #9ca3af;
   }
 
-  /* Avatar row */
-  .rg-avatar-row {
-    display: flex; align-items: center; gap: 1.1rem;
-    background: #f9fafb; border: 2.5px solid #f3f4f6;
-    border-radius: 18px; padding: 0.9rem 1.1rem;
-    transition: border-color 0.2s;
-  }
-  .rg-avatar-row:focus-within { border-color: #c4b5fd; background: white; }
-  .rg-avatar-ring {
-    width: 52px; height: 52px; border-radius: 50%;
-    border: 2.5px dashed #e5e7eb;
-    display: flex; align-items: center; justify-content: center;
-    overflow: hidden; background: white; flex-shrink: 0;
-    transition: border-color 0.25s, border-style 0.25s;
-  }
-  .rg-avatar-ring.filled { border-style: solid; border-color: #a855f7; }
-  .rg-avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
-  .rg-avatar-input-col { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
-  .rg-avatar-label {
-    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
-    text-transform: uppercase; color: #6b7280;
-  }
-  .rg-avatar-input {
-    background: transparent; border: none; outline: none;
-    font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.85rem; font-weight: 600; color: #1e1b4b;
-    width: 100%;
-  }
-  .rg-avatar-input::placeholder { color: #d1d5db; }
-  .rg-avatar-hint {
-    font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.7rem; font-weight: 600; color: #c4b5fd;
+  /* ─── AVATAR UPLOAD ─── */
+  .av-upload-wrap {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
   }
 
-  /* Fields grid */
+  /* The circular avatar preview */
+  .av-circle {
+    position: relative;
+    width: 72px; height: 72px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .av-circle-inner {
+    width: 100%; height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    background: linear-gradient(135deg, #ede9fe, #faf5ff);
+    border: 2.5px solid #e5e7eb;
+    display: flex; align-items: center; justify-content: center;
+    transition: border-color 0.25s, box-shadow 0.25s;
+    position: relative;
+  }
+  .av-circle:hover .av-circle-inner {
+    border-color: #a855f7;
+    box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
+  }
+  .av-circle-inner img {
+    width: 100%; height: 100%; object-fit: cover;
+  }
+  .av-circle-inner.has-image {
+    border-color: #a855f7;
+    border-style: solid;
+    box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
+  }
+  /* Camera overlay on hover */
+  .av-circle-overlay {
+    position: absolute; inset: 0; border-radius: 50%;
+    background: rgba(109,40,217,0.55);
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity 0.2s;
+    pointer-events: none;
+  }
+  .av-circle:hover .av-circle-overlay { opacity: 1; }
+  /* Remove button */
+  .av-remove-btn {
+    position: absolute;
+    top: -3px; right: -3px;
+    width: 20px; height: 20px;
+    border-radius: 50%;
+    background: #ef4444;
+    border: 2px solid white;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    transition: transform 0.15s, background 0.15s;
+    z-index: 2;
+  }
+  .av-remove-btn:hover { background: #dc2626; transform: scale(1.15); }
+
+  /* Drop zone (right side) */
+  .av-dropzone {
+    flex: 1;
+    border: 2px dashed #e5e7eb;
+    border-radius: 16px;
+    padding: 0.9rem 1.1rem;
+    display: flex; flex-direction: column;
+    align-items: flex-start; gap: 0.35rem;
+    background: #fafafa;
+    cursor: pointer;
+    transition: border-color 0.2s, background 0.2s, transform 0.15s;
+    position: relative;
+    overflow: hidden;
+  }
+  .av-dropzone:hover, .av-dropzone.dragover {
+    border-color: #a855f7;
+    background: #fdf4ff;
+    transform: scale(1.01);
+  }
+  .av-dropzone.dragover {
+    border-style: solid;
+    box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
+  }
+  .av-dropzone-title {
+    font-size: 0.82rem; font-weight: 800; color: #1e1b4b;
+    display: flex; align-items: center; gap: 0.4rem;
+  }
+  .av-dropzone-sub {
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 0.7rem; font-weight: 600; color: #9ca3af;
+  }
+  .av-dropzone-types {
+    display: flex; gap: 0.3rem; margin-top: 0.1rem;
+  }
+  .av-type-badge {
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 0.62rem; font-weight: 700;
+    padding: 0.15rem 0.45rem;
+    border-radius: 6px;
+    background: #ede9fe; color: #7c3aed;
+    letter-spacing: 0.04em; text-transform: uppercase;
+  }
+  /* Shimmer drag-over effect */
+  .av-dropzone.dragover::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(120deg, transparent 30%, rgba(168,85,247,0.07) 50%, transparent 70%);
+    animation: shimmer 1s linear infinite;
+  }
+  @keyframes shimmer {
+    from { transform: translateX(-100%); }
+    to   { transform: translateX(100%); }
+  }
+
+  /* Upload progress bar */
+  .av-progress-wrap {
+    width: 100%;
+    height: 4px; border-radius: 999px;
+    background: #f3f4f6; overflow: hidden;
+    margin-top: 0.4rem;
+  }
+  .av-progress-bar {
+    height: 100%; border-radius: 999px;
+    background: linear-gradient(90deg, #a855f7, #6d28d9);
+    transition: width 0.2s ease;
+  }
+  .av-uploading-label {
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 0.7rem; font-weight: 700; color: #a855f7;
+    display: flex; align-items: center; gap: 0.3rem;
+    margin-top: 0.2rem;
+  }
+  .av-upload-spinner {
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Upload error */
+  .av-upload-error {
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 0.7rem; font-weight: 700; color: #e11d48;
+    margin-top: 0.2rem;
+  }
+
+  /* Fields */
   .rg-fields { display: flex; flex-direction: column; gap: 1rem; }
   .rg-row { display: flex; gap: 1rem; }
   .rg-row .rg-field { flex: 1; }
@@ -307,7 +414,6 @@ const STYLES = `
   .rg-strength-hint.medium { color: #eab308; }
   .rg-strength-hint.strong { color: #22c55e; }
 
-  /* Error */
   .rg-error {
     background: #fff1f2; border: 2px solid #fecdd3;
     border-radius: 14px; padding: 0.8rem 1rem;
@@ -316,7 +422,6 @@ const STYLES = `
     display: flex; align-items: center; gap: 0.5rem;
   }
 
-  /* Submit */
   .rg-btn {
     width: 100%; padding: 1rem;
     background: #a855f7; color: white; border: none;
@@ -336,7 +441,6 @@ const STYLES = `
   .rg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
 
   .rg-spinner { animation: spin 0.8s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
 
   .rg-form-footer {
     text-align: center;
@@ -348,7 +452,6 @@ const STYLES = `
   }
   .rg-link:hover { color: #7c3aed; }
 
-  /* Responsive */
   @media (max-width: 860px) {
     .rg-left { display: none; }
     .rg-right { padding: 2rem 1.5rem; }
@@ -450,13 +553,195 @@ const BG_DOTS = [
 ];
 
 const INITIALS = ["JD", "AS", "MK", "RP", "LL"];
+const ACCEPTED = ["image/jpeg", "image/png", "image/webp", "image/gif"];
 
+// ─── Avatar Upload Component ───────────────────────────────────────────────
+interface AvatarUploadProps {
+  avatarUrl: string;
+  onAvatarChange: (url: string) => void;
+  disabled?: boolean;
+}
+
+function AvatarUpload({
+  avatarUrl,
+  onAvatarChange,
+  disabled,
+}: AvatarUploadProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadError, setUploadError] = useState("");
+  const [previewUrl, setPreviewUrl] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const processFile = useCallback(
+    async (file: File) => {
+      if (!ACCEPTED.includes(file.type)) {
+        setUploadError("Please upload a JPG, PNG, WebP, or GIF image.");
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        setUploadError("Image must be under 5 MB.");
+        return;
+      }
+
+      setUploadError("");
+      // Show local preview immediately
+      const local = URL.createObjectURL(file);
+      setPreviewUrl(local);
+      setIsUploading(true);
+      setUploadProgress(0);
+
+      // Fake progress ticks while uploading
+      const ticker = setInterval(() => {
+        setUploadProgress((p) => Math.min(p + 12, 85));
+      }, 120);
+
+      try {
+        const uploadedUrl = await api.uploadAvatar(file);
+        clearInterval(ticker);
+        setUploadProgress(100);
+        onAvatarChange(uploadedUrl);
+        setTimeout(() => {
+          setIsUploading(false);
+          setUploadProgress(0);
+        }, 600);
+      } catch {
+        clearInterval(ticker);
+        setIsUploading(false);
+        setUploadProgress(0);
+        setPreviewUrl("");
+        setUploadError("Upload failed. Please try again.");
+      }
+    },
+    [onAvatarChange],
+  );
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const file = e.dataTransfer.files[0];
+    if (file) processFile(file);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) processFile(file);
+    e.target.value = "";
+  };
+
+  const handleRemove = (ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    setPreviewUrl("");
+    onAvatarChange("");
+    setUploadError("");
+  };
+
+  const displayUrl = previewUrl || avatarUrl;
+
+  return (
+    <div className="av-upload-wrap">
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPTED.join(",")}
+        style={{ display: "none" }}
+        onChange={handleFileChange}
+        disabled={disabled || isUploading}
+      />
+
+      {/* Avatar circle */}
+      <div
+        className="av-circle"
+        onClick={() =>
+          !disabled && !isUploading && fileInputRef.current?.click()
+        }
+        title="Click to change photo"
+      >
+        <div className={`av-circle-inner ${displayUrl ? "has-image" : ""}`}>
+          {displayUrl ? (
+            <img src={displayUrl} alt="Avatar preview" />
+          ) : (
+            <Camera size={24} color="#c4b5fd" />
+          )}
+          <div className="av-circle-overlay">
+            <Camera size={18} color="white" />
+          </div>
+        </div>
+        {displayUrl && !isUploading && (
+          <div
+            className="av-remove-btn"
+            onClick={handleRemove}
+            title="Remove photo"
+          >
+            <X size={10} color="white" strokeWidth={3} />
+          </div>
+        )}
+      </div>
+
+      {/* Drop zone */}
+      <div
+        className={`av-dropzone ${isDragOver ? "dragover" : ""}`}
+        onClick={() =>
+          !disabled && !isUploading && fileInputRef.current?.click()
+        }
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        }}
+        onDragLeave={() => setIsDragOver(false)}
+        onDrop={handleDrop}
+      >
+        {isUploading ? (
+          <>
+            <div className="av-uploading-label">
+              <Loader2 size={12} className="av-upload-spinner" />
+              Uploading photo…
+            </div>
+            <div className="av-progress-wrap">
+              <div
+                className="av-progress-bar"
+                style={{ width: `${uploadProgress}%` }}
+              />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="av-dropzone-title">
+              <Upload size={13} color="#a855f7" />
+              {displayUrl ? "Change photo" : "Upload a photo"}
+            </div>
+            <div className="av-dropzone-sub">
+              {isDragOver ? "Drop it here!" : "Click or drag & drop"}
+            </div>
+            <div className="av-dropzone-types">
+              {["PNG", "JPG", "WebP"].map((t) => (
+                <span key={t} className="av-type-badge">
+                  {t}
+                </span>
+              ))}
+              <span
+                className="av-type-badge"
+                style={{ background: "#fef3c7", color: "#b45309" }}
+              >
+                Max 5 MB
+              </span>
+            </div>
+          </>
+        )}
+        {uploadError && <div className="av-upload-error">⚠️ {uploadError}</div>}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Register Page ───────────────────────────────────────────────────
 export const Register = () => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [avatarUrl, setAvatarUrl] = useState("");
   const [password, setPassword] = useState("");
-  const [avatarError, setAvatarError] = useState(false);
 
   const navigate = useNavigate();
   const { register, isLoading, error, clearError } = useAuthStore();
@@ -486,7 +771,6 @@ export const Register = () => {
         <div className="rg-panel-blob rg-panel-blob-2" />
         <div className="rg-panel-blob rg-panel-blob-3" />
 
-        {/* Decorative floating dots */}
         {PANEL_DOTS.map((d, i) => (
           <div
             key={i}
@@ -507,7 +791,6 @@ export const Register = () => {
           />
         ))}
 
-        {/* Stars */}
         {[
           { top: "14%", left: "20%", size: 14, delay: "0s" },
           { top: "28%", left: "78%", size: 10, delay: "0.7s" },
@@ -530,7 +813,6 @@ export const Register = () => {
           />
         ))}
 
-        {/* Decorative ring shapes */}
         {[
           { size: 90, top: "72%", left: "5%", delay: "0.2s", dur: "10s" },
           { size: 60, top: "8%", left: "55%", delay: "1.1s", dur: "13s" },
@@ -554,13 +836,10 @@ export const Register = () => {
         ))}
 
         <div className="rg-panel-content">
-          {/* Logo */}
           <div className="rg-panel-logo">
             <div className="rg-panel-logo-badge">📚</div>
             <span className="rg-panel-logo-text">EdBridge</span>
           </div>
-
-          {/* Headline */}
           <div className="rg-panel-headline">
             <h2>
               Ace the SAT.
@@ -573,8 +852,6 @@ export const Register = () => {
               SAT scores with personalized practice.
             </p>
           </div>
-
-          {/* Feature pills */}
           <div className="rg-features">
             {FEATURES.map((f, i) => (
               <div className="rg-feature" key={i}>
@@ -588,8 +865,6 @@ export const Register = () => {
               </div>
             ))}
           </div>
-
-          {/* Social proof */}
           <div className="rg-social-proof">
             <div className="rg-avatars">
               {INITIALS.map((s, i) => (
@@ -628,62 +903,20 @@ export const Register = () => {
         ))}
 
         <div className="rg-form-wrap">
-          {/* Header */}
           <div className="rg-form-header">
             <h1>Create your account ✨</h1>
             <p>Fill in the details below to get started</p>
           </div>
 
-          {/* Avatar URL row */}
-          <div className="rg-avatar-row">
-            <div
-              className={`rg-avatar-ring ${avatarUrl && !avatarError ? "filled" : ""}`}
-            >
-              {avatarUrl && !avatarError ? (
-                <img
-                  src={avatarUrl}
-                  alt="Avatar"
-                  onError={() => setAvatarError(true)}
-                />
-              ) : (
-                <ImageIcon size={20} color="#d1d5db" />
-              )}
-            </div>
-            <div className="rg-avatar-input-col">
-              <span className="rg-avatar-label">
-                Avatar URL{" "}
-                <span
-                  style={{
-                    fontWeight: 600,
-                    textTransform: "none",
-                    letterSpacing: 0,
-                    color: "#c4b5fd",
-                    fontSize: "0.68rem",
-                  }}
-                >
-                  (optional)
-                </span>
-              </span>
-              <input
-                className="rg-avatar-input"
-                type="url"
-                placeholder="https://example.com/photo.jpg"
-                value={avatarUrl}
-                onChange={(e) => {
-                  setAvatarUrl(e.target.value);
-                  setAvatarError(false);
-                }}
-                disabled={isLoading}
-              />
-              <span className="rg-avatar-hint">
-                Paste any image URL to set your profile photo
-              </span>
-            </div>
-          </div>
+          {/* ── Avatar Upload ── */}
+          <AvatarUpload
+            avatarUrl={avatarUrl}
+            onAvatarChange={setAvatarUrl}
+            disabled={isLoading}
+          />
 
           {/* Fields */}
           <div className="rg-fields">
-            {/* Name + Email row */}
             <div className="rg-row">
               <div className="rg-field">
                 <label className="rg-label" htmlFor="name">
@@ -704,7 +937,6 @@ export const Register = () => {
               </div>
             </div>
 
-            {/* Email */}
             <div className="rg-field">
               <label className="rg-label" htmlFor="email">
                 Email
@@ -723,7 +955,6 @@ export const Register = () => {
               </div>
             </div>
 
-            {/* Password */}
             <div className="rg-field">
               <label className="rg-label" htmlFor="password">
                 Password
@@ -757,14 +988,12 @@ export const Register = () => {
               )}
             </div>
 
-            {/* Error */}
             {error && (
               <div className="rg-error">
                 <span>⚠️</span> {error}
               </div>
             )}
 
-            {/* Submit */}
             <button
               className="rg-btn"
               onClick={handleSubmit}
@@ -772,8 +1001,7 @@ export const Register = () => {
             >
               {isLoading ? (
                 <>
-                  <Loader2 size={18} className="rg-spinner" /> Creating
-                  account...
+                  <Loader2 size={18} className="rg-spinner" /> Creating account…
                 </>
               ) : (
                 "Create Account →"

src/utils/api.ts

@@ -284,5 +284,38 @@ class ApiClient {
       body: JSON.stringify(titleData),
     });
   }
+
+  /*------------UPLOADS-------------- */
+  // token is optional — the /uploads/ endpoint appears to be public
+  // (no Authorization header in the curl example). Pass a token if needed.
+  async uploadAvatar(file: File, token?: string): Promise<string> {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const headers: HeadersInit = { accept: "application/json" };
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+    // Note: Do NOT set Content-Type manually — fetch sets it automatically
+    // with the correct multipart/form-data boundary when the body is FormData.
+
+    const url = `${this.baseURL}/uploads/`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers,
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error: ApiError = await response.json().catch(() => ({
+        message: "Upload failed",
+      }));
+      throw new Error(error.detail || error.message || "Upload failed");
+    }
+
+    const data = await response.json();
+    // Adjust the field name below to match your API's response shape,
+    // e.g. data.url, data.file_url, data.avatar_url, etc.
+    return data.url as string;
+  }
 }
+
 export const api = new ApiClient(API_URL);

vite.config.ts

@@ -11,4 +11,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  esbuild: {
+    keepNames: true,
+  },
 });