-
-
- 
-
+
- CommDesk
-
+ {/* Left panel */}
+
-
-
-
-
- {Steps.map((step) => (
-
setCurrentStep(step.id)}
- >
-
- {step.id}
-
- {currentStep === step.id && (
-
-
- {step.title}
+ + +
+ {/* Logo */}
+
+
+
+ CommDesk
+
+
+ {/* Pitch */}
+
+ CommDesk
+
+
+
+
+
+ Join the future of community management
+
+
+ Build something
+
+
+ Build something
+
+ extraordinary
+
+
+ + CommDesk gives communities a powerful workspace to manage members, events, and communications in one place. +
+ + {/* Stats */} +
+ {[
+ { value: "10k+", label: "Communities" },
+ { value: "500k+", label: "Members" },
+ { value: "99.9%", label: "Uptime" },
+ { value: "4.9★", label: "Rating" },
+ ].map(({ value, label }) => (
+
- ))}
+
+
- )}
- {Steps.length !== step.id && }
+ ))}
{value}
+{label}
© {CURRENT_YEAR} CommDesk. All rights reserved.
- {Steps[currentStep - 1].Element}
-
-
- {
+ const res = await fetch("/api/v1/auth/signup-community", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data), // Using spread/data directly as schema matches backend requirements
+ });
+
+ const json = await res.json();
+
+ if (!res.ok) {
+ throw { status: res.status, data: json };
+ }
+
+ return json as SignupResponse;
+}
+
+/**
+ * Handles logo upload. Currently simulated with FileReader.
+ * In production: Replace with real FormData upload to S3/Cloudinary.
+ */
+export async function uploadCommunityLogo(file: File): Promise {
+ // SIMULATION: If you need to switch to a real API, change this implementation
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(reader.result as string);
+ reader.readAsDataURL(file);
+ });
+}
diff --git a/src/features/Auth/v1/components/signup/CommunityStep.tsx b/src/features/Auth/v1/components/signup/CommunityStep.tsx
new file mode 100644
index 0000000..785b926
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/CommunityStep.tsx
@@ -0,0 +1,184 @@
+import { useRef, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Upload, X, AlertCircle } from "lucide-react";
+import { SignupFormData } from "../../hooks/useSignupForm";
+import { uploadCommunityLogo } from "../../api/signup";
+
+export default function CommunityStep() {
+ const {
+ register,
+ setValue,
+ watch,
+ formState: { errors },
+ } = useFormContext();
+
+ const [uploading, setUploading] = useState(false);
+ const [uploadError, setUploadError] = useState(null);
+ const fileRef = useRef(null);
+ const logoUrl = watch("communityLogo");
+
+ const handleFile = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ setUploadError(null);
+
+ if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
+ setUploadError("Only JPG, PNG, and WEBP files are accepted.");
+ if (fileRef.current) fileRef.current.value = "";
+ return;
+ }
+ if (file.size > 2 * 1024 * 1024) {
+ setUploadError("File must be under 2MB.");
+ if (fileRef.current) fileRef.current.value = "";
+ return;
+ }
+
+ setUploading(true);
+ const url = await uploadCommunityLogo(file);
+ setValue("communityLogo", url, { shouldValidate: true });
+ setUploading(false);
+ };
+
+ const handleRemoveLogo = () => {
+ setValue("communityLogo", "");
+ setUploadError(null);
+ if (fileRef.current) fileRef.current.value = "";
+ };
+
+ return (
+ ();
+
+ return (
+ ();
+
+ const [showPw, setShowPw] = useState(false);
+ const pw = watch("password") ?? "";
+
+ const rules = [
+ { met: pw.length >= 8, label: "At least 8 characters" },
+ { met: /[0-9]/.test(pw), label: "At least one number" },
+ { met: /[^a-zA-Z0-9]/.test(pw), label: "At least one special character" },
+ ];
+
+ return (
+ ();
+ const data = watch();
+
+ const hasSocials = Object.values(data.socialLinks ?? {}).some(Boolean);
+
+ return (
+ ();
+
+ return (
+ ;
+
+export const STEP_FIELDS: Record = {
+ 1: ["communityName", "communityBio", "communityWebsite"],
+ 2: ["country", "city", "officialEmail", "contactPhone"],
+ 3: ["socialLinks"],
+ 4: ["fullName", "email", "password"],
+ 5: [],
+};
+
+export function useSignupForm() {
+ return useForm({
+ resolver: zodResolver(signupSchema),
+ mode: "onTouched",
+ defaultValues: {
+ communityName: "",
+ communityBio: "",
+ communityLogo: "",
+ communityWebsite: "",
+ country: "",
+ city: "",
+ officialEmail: "",
+ contactPhone: "",
+ socialLinks: {
+ twitter: "",
+ linkedin: "",
+ instagram: "",
+ github: "",
+ facebook: "",
+ },
+ fullName: "",
+ email: "",
+ password: "",
+ },
+ });
+}
Cancel registration
+ {/* Right panel */} +
+ {/* Mobile logo */}
+
);
-};
-
-export default SignUpPage;
+}
diff --git a/src/features/Auth/v1/api/signup.ts b/src/features/Auth/v1/api/signup.ts
new file mode 100644
index 0000000..a6e5a09
--- /dev/null
+++ b/src/features/Auth/v1/api/signup.ts
@@ -0,0 +1,38 @@
+import { SignupFormData } from "../hooks/useSignupForm";
+
+export type SignupResponse = {
+ message: string;
+ communityId?: string;
+};
+
+/**
+ * Submits the final community signup form.
+ */
+export async function submitCommunitySignup(data: SignupFormData): Promise
+
+ CommDesk
-
+ CommDesk
-
- Already have an account?{" "} - - Login Here! - -
+
+
+
+ {post !== "idle" ? (
+
+ {/* Step progress */}
+
+
+
+
+ {/* Footer */}
+
+ )}
+ + Already have an account?{" "} + + Sign in + +
+
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/ContactStep.tsx b/src/features/Auth/v1/components/signup/ContactStep.tsx
new file mode 100644
index 0000000..8423dfd
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/ContactStep.tsx
@@ -0,0 +1,131 @@
+import { useFormContext } from "react-hook-form";
+import { SignupFormData } from "../../hooks/useSignupForm";
+
+const COUNTRIES = [
+ "Afghanistan", "Albania", "Algeria", "Australia", "Austria", "Bangladesh",
+ "Belgium", "Brazil", "Canada", "China", "Denmark", "Egypt", "Ethiopia",
+ "Finland", "France", "Germany", "Ghana", "Greece", "India", "Indonesia",
+ "Iraq", "Ireland", "Israel", "Italy", "Japan", "Jordan", "Kenya",
+ "Malaysia", "Mexico", "Morocco", "Netherlands", "New Zealand", "Nigeria",
+ "Norway", "Pakistan", "Philippines", "Portugal", "Romania", "Russia",
+ "Saudi Arabia", "Singapore", "South Africa", "South Korea", "Spain",
+ "Sweden", "Switzerland", "Tanzania", "Thailand", "Turkey", "Uganda",
+ "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
+ "Vietnam", "Zimbabwe",
+];
+
+export default function ContactStep() {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext
+
+
+ {/* Logo Upload */}
+ Community Information
+Tell us about your community to get started.
+
+
+
+ {/* Community Name */}
+
+
+ {uploadError && (
+ fileRef.current?.click()}
+ >
+ {uploading ? (
+
+ ) : logoUrl ? (
+ 
+ ) : (
+
+
+
+
+
+ JPG, PNG, WEBP · Max 2MB · 400×400px recommended
+ {logoUrl && ( + + )} +
+
+ )}
+
+
+
+ {errors.communityName && (
+ {errors.communityName.message}
+ )}
+
+
+ {/* Community Bio */}
+
+
+
+ {errors.communityBio && (
+ {errors.communityBio.message}
+ )}
+
+
+ {/* Website */}
+
+
+
+
+
+ https://
+
+ {
+ const val = e.target.value.trim();
+ if (val && !val.startsWith("http://") && !val.startsWith("https://")) {
+ setValue("communityWebsite", `https://${val}`, { shouldValidate: true });
+ }
+ }}
+ />
+
+ {errors.communityWebsite && (
+ {errors.communityWebsite.message}
+ )}
+
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/OwnerStep.tsx b/src/features/Auth/v1/components/signup/OwnerStep.tsx
new file mode 100644
index 0000000..8ea9e8e
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/OwnerStep.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Eye, EyeOff, CheckCircle2, XCircle } from "lucide-react";
+import { SignupFormData } from "../../hooks/useSignupForm";
+
+function PasswordRule({ met, label }: { met: boolean; label: string }) {
+ return (
+
+
+
+ {/* Country */}
+ Contact Information
++ How can people reach your community? +
+
+
+
+ {errors.country && (
+ {errors.country.message}
+ )}
+
+
+ {/* City */}
+
+
+
+ {errors.city && (
+ {errors.city.message}
+ )}
+
+
+ {/* Official Email */}
+
+
+
+ {errors.officialEmail && (
+ {errors.officialEmail.message}
+ )}
+
+
+ {/* Phone */}
+
+
+
+ {errors.contactPhone && (
+ {errors.contactPhone.message}
+ )}
+
+
+ {met ?
+ );
+}
+
+export default function OwnerStep() {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/ReviewStep.tsx b/src/features/Auth/v1/components/signup/ReviewStep.tsx
new file mode 100644
index 0000000..163b521
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/ReviewStep.tsx
@@ -0,0 +1,99 @@
+import { useFormContext } from "react-hook-form";
+import {
+ Globe, MapPin, Mail, Phone, Twitter, Linkedin,
+ Instagram, Github, Facebook, User, Lock, Image,
+} from "lucide-react";
+import { SignupFormData } from "../../hooks/useSignupForm";
+
+function ReviewRow({ label, value, icon: Icon }: { label: string; value?: string; icon: React.ElementType }) {
+ if (!value) return null;
+ return (
+
+
+
+ {/* Full Name */}
+ Organizer Account
++ This will be the primary admin account for your community. +
+
+
+
+ {errors.fullName && (
+ {errors.fullName.message}
+ )}
+
+
+ {/* Email */}
+
+
+
+ {errors.email && (
+ {errors.email.message}
+ )}
+
+
+ {/* Password */}
+
+
+
+
+
+
+
+ {errors.password && (
+ {errors.password.message}
+ )}
+
+ {rules.map((r) => (
+
+
+
+ );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+ return (
+
+
+
+ {label}
+ {value}
+
+
+
+ );
+}
+
+export default function ReviewStep() {
+ const { watch } = useFormContext
+
+ {title}
+{children}
+
+
+
+
+
+
+
+ {hasSocials && (
+
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/SocialStep.tsx b/src/features/Auth/v1/components/signup/SocialStep.tsx
new file mode 100644
index 0000000..50f00d8
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/SocialStep.tsx
@@ -0,0 +1,58 @@
+import { useFormContext } from "react-hook-form";
+import { Twitter, Linkedin, Instagram, Github, Facebook } from "lucide-react";
+import { SignupFormData } from "../../hooks/useSignupForm";
+
+const SOCIAL_FIELDS = [
+ { key: "twitter", label: "Twitter / X", icon: Twitter, placeholder: "https://twitter.com/yourcommunity" },
+ { key: "linkedin", label: "LinkedIn", icon: Linkedin, placeholder: "https://linkedin.com/company/..." },
+ { key: "instagram", label: "Instagram", icon: Instagram, placeholder: "https://instagram.com/..." },
+ { key: "github", label: "GitHub", icon: Github, placeholder: "https://github.com/..." },
+ { key: "facebook", label: "Facebook", icon: Facebook, placeholder: "https://facebook.com/..." },
+] as const;
+
+export default function SocialStep() {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext
+
+
+ {/* Logo Preview */}
+ {data.communityLogo && (
+ Review & Submit
++ Confirm your details before submitting. You can go back to edit any step. +
+
+ 
+
+ )}
+
+
+
+ {data.communityName}
+{data.city}, {data.country}
++ By submitting, you agree to our Terms of Service and Privacy Policy. +
+
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/StepProgress.tsx b/src/features/Auth/v1/components/signup/StepProgress.tsx
new file mode 100644
index 0000000..e2a7bd0
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/StepProgress.tsx
@@ -0,0 +1,54 @@
+import { CheckCircle2 } from "lucide-react";
+
+const STEPS = [
+ { id: 1, label: "Community" },
+ { id: 2, label: "Contact" },
+ { id: 3, label: "Socials" },
+ { id: 4, label: "Organizer" },
+ { id: 5, label: "Review" },
+];
+
+interface StepProgressProps {
+ current: number;
+ total: number;
+}
+
+export default function StepProgress({ current, total }: StepProgressProps) {
+ return (
+
+
+
+ Social Links
++ Help people find your community online. All fields are optional. +
+
+ {SOCIAL_FIELDS.map(({ key, label, icon: Icon, placeholder }) => (
+
+
+
+
+ {errors.socialLinks?.[key] && (
+
+ {errors.socialLinks[key]?.message}
+
+ )}
+
+ ))}
+
+ {/* Connector line */}
+
+
+
+ {STEPS.slice(0, total).map((step) => {
+ const done = step.id < current;
+ const active = step.id === current;
+ return (
+
+ );
+}
diff --git a/src/features/Auth/v1/components/signup/SuccessScreens.tsx b/src/features/Auth/v1/components/signup/SuccessScreens.tsx
new file mode 100644
index 0000000..b65a3d2
--- /dev/null
+++ b/src/features/Auth/v1/components/signup/SuccessScreens.tsx
@@ -0,0 +1,65 @@
+import { Mail, Clock, ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+
+type Stage = "email" | "pending";
+
+export default function SuccessScreens({ stage }: { stage: Stage }) {
+ if (stage === "email") {
+ return (
+
+
+ );
+ })}
+
+ {done ?
+
+ {step.label}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ Check your email
++ We've sent a verification link to your email address. Please verify to continue. +
+
+ Didn't receive it? Check your spam folder or wait a few minutes.
+
+
+
+ );
+}
diff --git a/src/features/Auth/v1/hooks/useSignupForm.ts b/src/features/Auth/v1/hooks/useSignupForm.ts
new file mode 100644
index 0000000..ba2e3ba
--- /dev/null
+++ b/src/features/Auth/v1/hooks/useSignupForm.ts
@@ -0,0 +1,68 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+export const signupSchema = z.object({
+ communityName: z.string().min(2, "Community name must be at least 2 characters"),
+ communityBio: z.string().min(10, "Bio must be at least 10 characters"),
+ communityLogo: z.string().optional(),
+ communityWebsite: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+
+ country: z.string().min(1, "Country is required"),
+ city: z.string().min(1, "City is required"),
+ officialEmail: z.string().email("Must be a valid email"),
+ contactPhone: z.string().min(7, "Phone number is too short"),
+
+ socialLinks: z.object({
+ twitter: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ linkedin: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ instagram: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ github: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ facebook: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ }),
+
+ fullName: z.string().min(2, "Full name must be at least 2 characters"),
+ email: z.string().email("Must be a valid email"),
+ password: z
+ .string()
+ .min(8, "Password must be at least 8 characters")
+ .regex(/[0-9]/, "Must contain at least one number")
+ .regex(/[^a-zA-Z0-9]/, "Must contain at least one special character"),
+});
+
+export type SignupFormData = z.infer
+
+
+
+ Pending Approval
++ Your community registration is under review. We typically respond within 24–48 hours. +
+
+ {["Application submitted", "Email verified", "Admin review", "Community approved"].map(
+ (step, i) => (
+
+
+ Go to Login
+
+ )
+ )}
+
+ {i + 1}
+
+
+ {step}
+
+