@codaijs/keel 0.1.0

package/sails/gdpr/files/frontend/components/gdpr/AccountDeletionRequest.tsx

@@ -0,0 +1,192 @@
+import { useState, useEffect } from "react";
+import { apiGet, apiPost, apiDelete } from "@/lib/api";
+
+interface DeletionStatus {
+  pending: boolean;
+  scheduledAt?: string;
+}
+
+export default function AccountDeletionRequest() {
+  const [deletionStatus, setDeletionStatus] = useState<DeletionStatus>({
+    pending: false,
+  });
+  const [reason, setReason] = useState("");
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    async function checkStatus() {
+      try {
+        const status = await apiGet<DeletionStatus>(
+          "/api/gdpr/deletion-status",
+        );
+        setDeletionStatus(status);
+      } catch {
+        // No pending deletion
+      }
+    }
+    checkStatus();
+  }, []);
+
+  const handleRequestDeletion = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const status = await apiPost<DeletionStatus>("/api/gdpr/delete-account", {
+        reason: reason || undefined,
+      });
+      setDeletionStatus(status);
+      setShowConfirm(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to request deletion.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancelDeletion = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      await apiDelete("/api/gdpr/delete-account");
+      setDeletionStatus({ pending: false });
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to cancel deletion request.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (deletionStatus.pending) {
+    const scheduledDate = deletionStatus.scheduledAt
+      ? new Date(deletionStatus.scheduledAt).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })
+      : "30 days from now";
+
+    return (
+      <div>
+        <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
+          <div className="flex items-start gap-3">
+            <svg
+              className="mt-0.5 h-5 w-5 shrink-0 text-amber-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <div>
+              <p className="text-sm font-medium text-amber-400">
+                Account deletion scheduled
+              </p>
+              <p className="mt-1 text-xs text-amber-400/80">
+                Your account is scheduled for deletion on{" "}
+                <span className="font-medium">{scheduledDate}</span>. You can
+                cancel this request before that date.
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleCancelDeletion}
+            disabled={isLoading}
+            className="mt-3 rounded-lg border border-amber-500/30 px-4 py-2 text-sm font-medium text-amber-400 transition-colors hover:bg-amber-500/10 disabled:opacity-50"
+          >
+            {isLoading ? "Cancelling..." : "Cancel deletion"}
+          </button>
+        </div>
+        {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {!showConfirm ? (
+        <button
+          onClick={() => setShowConfirm(true)}
+          className="inline-flex items-center rounded-lg text-sm font-medium text-red-400 transition-colors hover:bg-red-500/10 px-4 py-2"
+        >
+          <svg
+            className="mr-2 h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+          Delete my account
+        </button>
+      ) : (
+        <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4">
+          <h4 className="text-sm font-medium text-red-400">
+            Are you sure you want to delete your account?
+          </h4>
+          <p className="mt-1 text-xs text-red-400/80">
+            This action will schedule your account for permanent deletion. You
+            will have a 30-day grace period to cancel the request. After that,
+            all your data will be permanently removed.
+          </p>
+
+          <div className="mt-3">
+            <label
+              htmlFor="deletionReason"
+              className="mb-1.5 block text-xs font-medium text-red-400"
+            >
+              Reason for leaving (optional)
+            </label>
+            <textarea
+              id="deletionReason"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              rows={2}
+              placeholder="We'd appreciate knowing why you're leaving..."
+              className="w-full rounded-lg border border-keel-gray-800 bg-keel-gray-900 px-3 py-2 text-sm text-white placeholder-keel-gray-400 focus:border-red-400 focus:outline-none focus:ring-2 focus:ring-red-400/20"
+            />
+          </div>
+
+          <div className="mt-3 flex gap-3">
+            <button
+              onClick={handleRequestDeletion}
+              disabled={isLoading}
+              className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50"
+            >
+              {isLoading ? "Processing..." : "Yes, delete my account"}
+            </button>
+            <button
+              onClick={() => {
+                setShowConfirm(false);
+                setReason("");
+              }}
+              className="rounded-lg border border-keel-gray-800 px-4 py-2 text-sm font-medium text-keel-gray-100 transition-colors hover:border-keel-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+      {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+    </div>
+  );
+}

package/sails/gdpr/files/frontend/components/gdpr/DataExportButton.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+
+export default function DataExportButton() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleExport = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const response = await fetch("/api/gdpr/export", {
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to export data.");
+      }
+
+      const data = await response.json();
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `keel-data-export-${new Date().toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to export data.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button
+        onClick={handleExport}
+        disabled={isLoading}
+        className="inline-flex items-center rounded-lg border border-keel-gray-800 px-4 py-2 text-sm font-medium text-keel-gray-100 transition-colors hover:border-keel-gray-400 disabled:opacity-50"
+      >
+        {isLoading ? (
+          <>
+            <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-keel-gray-800 border-t-keel-blue" />
+            Exporting...
+          </>
+        ) : (
+          <>
+            <svg
+              className="mr-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            Export my data
+          </>
+        )}
+      </button>
+      {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+    </div>
+  );
+}

package/sails/gdpr/files/frontend/pages/PrivacyPolicy.tsx

@@ -0,0 +1,186 @@
+export default function PrivacyPolicy() {
+  return (
+    <div className="mx-auto w-full max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <article className="max-w-none">
+        <h1 className="text-3xl font-bold text-white">Privacy Policy</h1>
+        <p className="text-sm text-keel-gray-400">Last updated: March 18, 2026</p>
+
+        <section className="mt-8 space-y-6">
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              1. What Data We Collect
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              We collect the following personal data when you use our service:
+            </p>
+            <ul className="mt-2 list-disc space-y-1 pl-6 text-sm text-keel-gray-400">
+              <li>
+                <strong className="text-keel-gray-100">Account information:</strong> your name, email address,
+                and encrypted password when you create an account.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Profile data:</strong> profile picture and any
+                additional information you choose to provide.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Usage data:</strong> information about how you interact
+                with our service, including pages visited, features used, and
+                session duration (only with your explicit consent).
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Technical data:</strong> IP address, browser type,
+                device information, and operating system for security and
+                service operation purposes.
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              2. Why We Collect It
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              We process your personal data for the following purposes:
+            </p>
+            <ul className="mt-2 list-disc space-y-1 pl-6 text-sm text-keel-gray-400">
+              <li>
+                <strong className="text-keel-gray-100">Service provision:</strong> to create and manage your
+                account, authenticate your identity, and provide the core
+                functionality of the service.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Communication:</strong> to send you important service
+                notifications, such as email verification and password resets.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Marketing:</strong> to send you product updates and
+                promotional content (only with your explicit consent).
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Analytics:</strong> to understand how the service is
+                used and improve it (only with your explicit consent).
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Security:</strong> to protect your account and detect
+                unauthorized access or abuse.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Legal compliance:</strong> to comply with applicable
+                laws and regulations.
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              3. How Long We Keep It
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              We retain your personal data for as long as your account is
+              active. If you request account deletion, your data will be
+              permanently removed within 30 days of the scheduled deletion date.
+              Some data may be retained for a longer period if required by law
+              (e.g., financial records for tax compliance).
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              4. Your Rights
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              Under the General Data Protection Regulation (GDPR), you have the
+              following rights:
+            </p>
+            <ul className="mt-2 list-disc space-y-1 pl-6 text-sm text-keel-gray-400">
+              <li>
+                <strong className="text-keel-gray-100">Right of access:</strong> you can request a copy of your
+                personal data at any time.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Right to data portability:</strong> you can export your
+                data in a machine-readable format (JSON).
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Right to erasure:</strong> you can request the deletion
+                of your account and all associated data.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Right to withdraw consent:</strong> you can withdraw any
+                optional consent (marketing, analytics) at any time through your
+                account settings.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Right to rectification:</strong> you can update or
+                correct your personal data through your profile settings.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Right to object:</strong> you can object to the
+                processing of your personal data for specific purposes.
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              5. How to Exercise Your Rights
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              You can exercise most of your rights directly through the
+              application:
+            </p>
+            <ul className="mt-2 list-disc space-y-1 pl-6 text-sm text-keel-gray-400">
+              <li>
+                <strong className="text-keel-gray-100">Data export:</strong> go to Settings &gt; Data &amp;
+                Privacy &gt; Export my data.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Account deletion:</strong> go to Settings &gt; Data
+                &amp; Privacy &gt; Delete my account.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Consent management:</strong> go to Settings &gt; Consent
+                Preferences to manage your marketing and analytics opt-ins.
+              </li>
+              <li>
+                <strong className="text-keel-gray-100">Profile updates:</strong> go to Profile to update your
+                personal information.
+              </li>
+            </ul>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              For any other requests, please contact us using the information
+              below.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              6. Data Security
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              We implement appropriate technical and organizational measures to
+              protect your personal data against unauthorized access, alteration,
+              disclosure, or destruction. This includes encryption of passwords,
+              secure HTTPS connections, and regular security audits.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-white">
+              7. Contact Information
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-keel-gray-400">
+              If you have any questions about this Privacy Policy or wish to
+              exercise your rights, please contact us at:
+            </p>
+            <p className="mt-2 text-sm text-keel-gray-400">
+              <strong className="text-keel-gray-100">Email:</strong> privacy@yourdomain.com
+              <br />
+              <strong className="text-keel-gray-100">Data Protection Officer:</strong> dpo@yourdomain.com
+            </p>
+          </div>
+        </section>
+      </article>
+    </div>
+  );
+}