FM / signup

/home/techb158/cosmic-risk.abdallabala.com/src/app/signup/

/home/techb158/cosmic-risk.abdallabala.com/src/app/signup

Name	Size	Mode	Actions
page.jsx	3424	0644	edit dl rm

Edit: /home/techb158/cosmic-risk.abdallabala.com/src/app/signup/page.jsx (3424B)

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function SignupPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [displayName, setDisplayName] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

async function handleSubmit(event) {
    event.preventDefault();
    setError("");
    setLoading(true);
    try {
      const res = await fetch("/api/auth/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, displayName, password })
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Signup failed");
      }
      router.push("/dashboard");
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  }

return (
    <main className="shell" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
      <div className="panel" style={{ maxWidth: 420, width: "100%", padding: 32 }}>
        <div className="brand" style={{ fontSize: 24, marginBottom: 24, textAlign: "center" }}>COSMIC AI-Risk SaaS</div>
        <h2 style={{ marginBottom: 8 }}>Create account</h2>
        <p className="muted" style={{ marginBottom: 24 }}>Sign up for a new workspace</p>
        {error && <div style={{ background: "var(--blocked-soft)", color: "var(--blocked)", padding: "8px 12px", borderRadius: 8, marginBottom: 16, fontSize: 14 }}>{error}</div>}
        <form onSubmit={handleSubmit}>
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: "block", marginBottom: 4, fontSize: 14, fontWeight: 600 }}>Email</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} required
              style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--line)", fontSize: 16, boxSizing: "border-box" }} />
          </div>
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: "block", marginBottom: 4, fontSize: 14, fontWeight: 600 }}>Display name</label>
            <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)}
              style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--line)", fontSize: 16, boxSizing: "border-box" }} />
          </div>
          <div style={{ marginBottom: 24 }}>
            <label style={{ display: "block", marginBottom: 4, fontSize: 14, fontWeight: 600 }}>Password</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} required minLength={8}
              style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--line)", fontSize: 16, boxSizing: "border-box" }} />
          </div>
          <button type="submit" className="button primary" style={{ width: "100%", padding: "12px 24px", fontSize: 16 }} disabled={loading}>
            {loading ? "Creating account..." : "Create account"}
          </button>
        </form>
        <p style={{ marginTop: 16, textAlign: "center", fontSize: 14 }}>
          <a href="/login" style={{ color: "var(--green)" }}>Already have an account?</a>
        </p>
      </div>
    </main>
  );
}

cmd: