securepool 1.0.0

package/apps/demo-frontend/src/index.css

@@ -0,0 +1,272 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  min-height: 100vh;
+}
+
+a {
+  color: #60a5fa;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Auth Layout */
+.auth-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.auth-card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.auth-card h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+  color: #f1f5f9;
+}
+
+.auth-card p.subtitle {
+  color: #94a3b8;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 10px 14px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  color: #e2e8f0;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  border-color: #3b82f6;
+}
+
+.form-group input:disabled {
+  opacity: 0.5;
+}
+
+/* Buttons */
+.btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 8px;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-outline {
+  background: transparent;
+  color: #60a5fa;
+  border: 1px solid #334155;
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: #1e293b;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Messages */
+.error-msg {
+  background: #451a1a;
+  border: 1px solid #7f1d1d;
+  color: #fca5a5;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.success-msg {
+  background: #14532d;
+  border: 1px solid #166534;
+  color: #86efac;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+/* Divider */
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  color: #475569;
+  font-size: 13px;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #334155;
+}
+
+.divider span {
+  padding: 0 12px;
+}
+
+/* Links */
+.auth-links {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #94a3b8;
+}
+
+/* Dashboard */
+.dashboard {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #334155;
+}
+
+.dashboard-header h1 {
+  font-size: 24px;
+}
+
+.user-info {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.user-info h2 {
+  font-size: 18px;
+  margin-bottom: 12px;
+  color: #f1f5f9;
+}
+
+.user-info p {
+  color: #94a3b8;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+/* Sessions */
+.sessions-card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.sessions-card h2 {
+  font-size: 18px;
+  margin-bottom: 16px;
+  color: #f1f5f9;
+}
+
+.session-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #334155;
+}
+
+.session-item:last-child {
+  border-bottom: none;
+}
+
+.session-device {
+  font-weight: 500;
+  color: #e2e8f0;
+}
+
+.session-meta {
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+  width: auto;
+  margin-top: 0;
+}
+
+/* OTP input */
+.otp-input {
+  letter-spacing: 8px;
+  text-align: center;
+  font-size: 24px !important;
+  font-weight: 600;
+}

package/apps/demo-frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/apps/demo-frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useMemo } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate } from "react-router-dom";
+import AccountSwitcher from "../components/AccountSwitcher";
+
+export default function DashboardPage() {
+  const {
+    user,
+    isAuthenticated,
+    isInitialized,
+    logout,
+    sessions,
+    fetchSessions,
+    revokeSession,
+    revokeAllSessions,
+    isLoading,
+  } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isInitialized) return;
+    if (!isAuthenticated) {
+      navigate("/login");
+      return;
+    }
+    fetchSessions();
+  }, [isAuthenticated, isInitialized, navigate, fetchSessions]);
+
+  const currentSessionId = useMemo(() => {
+    if (sessions.length === 0) return null;
+    const sorted = [...sessions].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+    return sorted[0].id;
+  }, [sessions]);
+
+  const handleRevokeSession = async (sessionId: string) => {
+    await revokeSession(sessionId);
+    if (sessionId === currentSessionId) {
+      logout();
+      navigate("/login");
+    }
+  };
+
+  const handleRevokeAll = async () => {
+    await revokeAllSessions();
+    logout();
+    navigate("/login");
+  };
+
+  if (!isAuthenticated) return null;
+
+  return (
+    <div className="dashboard">
+      <div className="dashboard-header">
+        <h1>SecurePool Dashboard</h1>
+        <AccountSwitcher />
+      </div>
+
+      <div className="user-info">
+        <h2>User Profile</h2>
+        <p><strong>ID:</strong> {user?.id}</p>
+        <p><strong>Email:</strong> {user?.email || "N/A"}</p>
+        <p><strong>Verified:</strong> {user?.isVerified ? "Yes" : "No"}</p>
+      </div>
+
+      <div className="sessions-card">
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
+          <h2>Active Sessions</h2>
+          <button
+            className="btn btn-outline btn-sm"
+            onClick={() => fetchSessions()}
+            disabled={isLoading}
+          >
+            Refresh
+          </button>
+        </div>
+
+        {sessions.length === 0 && (
+          <p style={{ color: "#64748b", fontSize: 14 }}>No active sessions found</p>
+        )}
+
+        {sessions.map((session) => {
+          const isCurrent = session.id === currentSessionId;
+          return (
+            <div
+              key={session.id}
+              className="session-item"
+              style={{
+                borderLeft: isCurrent ? "3px solid #22c55e" : "3px solid transparent",
+                paddingLeft: 12,
+                background: isCurrent ? "rgba(34, 197, 94, 0.08)" : "transparent",
+                borderRadius: isCurrent ? 8 : 0,
+              }}
+            >
+              <div>
+                <div className="session-device" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  {session.device}
+                  {isCurrent && (
+                    <span style={{
+                      fontSize: 11,
+                      fontWeight: 600,
+                      color: "#22c55e",
+                      background: "rgba(34, 197, 94, 0.15)",
+                      padding: "2px 8px",
+                      borderRadius: 4,
+                    }}>
+                      Current
+                    </span>
+                  )}
+                </div>
+                <div className="session-meta">
+                  IP: {session.ip} &middot; {new Date(session.createdAt).toLocaleString()}
+                </div>
+              </div>
+              <button
+                className={isCurrent ? "btn btn-outline btn-sm" : "btn btn-danger btn-sm"}
+                onClick={() => handleRevokeSession(session.id)}
+                disabled={isLoading}
+                style={isCurrent ? { borderColor: "#ef4444", color: "#ef4444" } : {}}
+              >
+                {isCurrent ? "Logout this device" : "Revoke"}
+              </button>
+            </div>
+          );
+        })}
+
+        {sessions.length > 1 && (
+          <button
+            className="btn btn-danger"
+            style={{ marginTop: 16 }}
+            onClick={handleRevokeAll}
+            disabled={isLoading}
+          >
+            Revoke All Sessions
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/demo-frontend/src/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate, Link } from "react-router-dom";
+
+type Step = "email" | "otp" | "newPassword";
+
+export default function ForgotPasswordPage() {
+  const { forgotPassword, resetPassword, isLoading, error, clearError } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => { clearError(); }, [clearError]);
+
+  const [step, setStep] = useState<Step>("email");
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSendOtp = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await forgotPassword(email);
+      setStep("otp");
+    } catch {
+      // error in context
+    }
+  };
+
+  const handleVerifyAndReset = async (e: FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (step === "otp") {
+      setStep("newPassword");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setLocalError("Passwords do not match");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setLocalError("Password must be at least 8 characters");
+      return;
+    }
+
+    try {
+      await resetPassword(email, code, newPassword);
+      setSuccess(true);
+      setTimeout(() => navigate("/login"), 2000);
+    } catch {
+      // error in context
+    }
+  };
+
+  const displayError = localError || error;
+
+  // Step 1: Enter email
+  if (step === "email") {
+    return (
+      <div className="auth-layout">
+        <div className="auth-card">
+          <h1>Forgot Password</h1>
+          <p className="subtitle">Enter your email and we'll send you a reset code</p>
+
+          {displayError && <div className="error-msg">{displayError}</div>}
+
+          <form onSubmit={handleSendOtp}>
+            <div className="form-group">
+              <label htmlFor="email">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                required
+                disabled={isLoading}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={isLoading}>
+              {isLoading ? "Sending..." : "Send Reset Code"}
+            </button>
+          </form>
+
+          <div className="auth-links">
+            <Link to="/login">Back to login</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 2: Enter OTP
+  if (step === "otp") {
+    return (
+      <div className="auth-layout">
+        <div className="auth-card">
+          <h1>Enter Reset Code</h1>
+          <p className="subtitle">
+            Code sent to <strong>{email}</strong>
+          </p>
+
+          {displayError && <div className="error-msg">{displayError}</div>}
+
+          <form onSubmit={handleVerifyAndReset}>
+            <div className="form-group">
+              <label htmlFor="otp">6-digit Code</label>
+              <input
+                id="otp"
+                type="text"
+                className="otp-input"
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                placeholder="000000"
+                maxLength={6}
+                required
+                disabled={isLoading}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={isLoading || code.length !== 6}>
+              Next
+            </button>
+          </form>
+
+          <button
+            type="button"
+            className="btn btn-outline"
+            style={{ marginTop: 12 }}
+            onClick={() => setStep("email")}
+          >
+            Use different email
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 3: Set new password
+  return (
+    <div className="auth-layout">
+      <div className="auth-card">
+        <h1>Set New Password</h1>
+        <p className="subtitle">Create a new password for your account</p>
+
+        {success && <div className="success-msg">Password reset! Redirecting to login...</div>}
+        {displayError && <div className="error-msg">{displayError}</div>}
+
+        <form onSubmit={handleVerifyAndReset}>
+          <div className="form-group">
+            <label htmlFor="newPass">New Password</label>
+            <input
+              id="newPass"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              placeholder="Min 8 characters"
+              required
+              disabled={isLoading || success}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="confirmPass">Confirm Password</label>
+            <input
+              id="confirmPass"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Re-enter password"
+              required
+              disabled={isLoading || success}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={isLoading || success}>
+            {isLoading ? "Resetting..." : "Reset Password"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}