feat(avatar): add user avatar upload at registration
This commit is contained in:
shafin-r
@ -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 →"
|
||||
|
||||
Reference in New Issue
Block a user