FM / login

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

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

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

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

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

const DEMO_CREDENTIALS = [
  { role: "Super Owner", email: "super-owner@cosmic.local", password: "cosmic123" },
  { role: "Super Admin", email: "super-admin@cosmic.local", password: "super123" },
  { role: "Owner", email: "owner@cosmic.local", password: "owner123" },
  { role: "Admin", email: "admin@cosmic.local", password: "admin123" },
  { role: "Project Manager", email: "pm@cosmic.local", password: "pm123" },
  { role: "Risk Owner", email: "risk-owner@cosmic.local", password: "risk123" },
  { role: "Viewer", email: "viewer@cosmic.local", password: "view123" },
];

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [ssoEnabled, setSsoEnabled] = useState(false);
  const [showDemo, setShowDemo] = useState(false);

useEffect(() => {
    fetch("/api/auth/sso")
      .then(res => { if (res.status !== 501) setSsoEnabled(true); })
      .catch(() => {});
  }, []);

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

function fillDemo(email, password) {
    setEmail(email);
    setPassword(password);
  }

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 }}>Sign in</h2>
        <p className="muted" style={{ marginBottom: 24 }}>Enter your credentials to access the dashboard</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: 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
              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 ? "Signing in..." : "Sign in"}
          </button>
        </form>
        {ssoEnabled && (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "16px 0" }}>
              <hr style={{ flex: 1, border: "none", borderTop: "1px solid var(--line)" }} />
              <span className="muted" style={{ fontSize: 12 }}>OR</span>
              <hr style={{ flex: 1, border: "none", borderTop: "1px solid var(--line)" }} />
            </div>
            <a href="/api/auth/sso" className="button secondary" style={{ width: "100%", padding: "12px 24px", fontSize: 16, textAlign: "center" }}>
              Sign in with SSO
            </a>
          </>
        )}
        <div style={{ marginTop: 16 }}>
          <button onClick={() => setShowDemo(!showDemo)} style={{ background: "none", border: "none", color: "var(--green)", cursor: "pointer", fontSize: 14, width: "100%", textAlign: "center" }}>
            {showDemo ? "Hide demo credentials" : "Show demo credentials"}
          </button>
          {showDemo && (
            <div style={{ marginTop: 12, fontSize: 13, background: "var(--bg-soft)", borderRadius: 8, padding: 12 }}>
              <p className="muted" style={{ marginBottom: 8 }}>Click a row to auto-fill:</p>
              {DEMO_CREDENTIALS.map(d => (
                <div key={d.email} onClick={() => fillDemo(d.email, d.password)}
                  style={{ cursor: "pointer", padding: "6px 8px", borderRadius: 6, display: "flex", justifyContent: "space-between", alignItems: "center" }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--line)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                  <span style={{ fontWeight: 600 }}>{d.role}</span>
                  <span className="muted" style={{ fontSize: 12 }}>{d.email}</span>
                </div>
              ))}
            </div>
          )}
        </div>
        <p style={{ marginTop: 16, textAlign: "center", fontSize: 14 }}>
          <a href="/signup" style={{ color: "var(--green)" }}>Create an account</a>
        </p>
      </div>
    </main>
  );
}

cmd: