Initial Commit

2024-07-23 13:49:48 +02:00
commit 91a8840c3c
191 changed files with 36022 additions and 0 deletions
@@ -0,0 +1,143 @@
+import type { Project } from "@prisma/client";
+import React, { useState } from "react";
+import { Card, FullscreenLoader, Modal, SettingTabs } from "../../components";
+import { Dashboard } from "../../layouts";
+import { useActiveProject, useProjects } from "../../lib/hooks/projects";
+import { network } from "../../lib/network";
+
+import { RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+/**
+ *
+ */
+export default function Index() {
+	const [showRegenerateModal, setShowRegenerateModal] = useState(false);
+	const [project, setProject] = useState<Project>();
+
+	const activeProject = useActiveProject();
+	const { data: projects, mutate: projectMutate } = useProjects();
+
+	if (activeProject && !project) {
+		setProject(activeProject);
+	}
+
+	if (!project || !projects) {
+		return <FullscreenLoader />;
+	}
+
+	if (!activeProject) {
+		return <FullscreenLoader />;
+	}
+
+	const regenerate = () => {
+		setShowRegenerateModal(!showRegenerateModal);
+
+		toast.promise(
+			network
+				.fetch<{
+					success: true;
+					project: Project;
+				}>("POST", `/projects/id/${project.id}/regenerate`)
+				.then(async (res) => {
+					await projectMutate(
+						[
+							...projects.filter((project) => {
+								return project.id !== res.project.id;
+							}),
+							res.project,
+						],
+						false,
+					);
+				}),
+			{
+				loading: "Regenerating API keys...",
+				success: "Successfully regenerated API keys!",
+				error: "Failed to create new API keys",
+			},
+		);
+	};
+
+	return (
+		<>
+			<Modal
+				isOpen={showRegenerateModal}
+				onToggle={() => setShowRegenerateModal(!showRegenerateModal)}
+				onAction={regenerate}
+				type={"danger"}
+				title={"Are you sure?"}
+				description={
+					"Any applications that use your previously generated keys will stop working!"
+				}
+			/>
+			<Dashboard>
+				<SettingTabs />
+				<Card
+					title={"API access"}
+					description={`Manage your API keys for ${activeProject.name}`}
+					actions={
+						<>
+							<button
+								onClick={() => setShowRegenerateModal(!showRegenerateModal)}
+								className={
+									"flex items-center gap-x-1 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
+								}
+							>
+								<RefreshCw strokeWidth={1.5} size={18} />
+								Regenerate
+							</button>
+						</>
+					}
+				>
+					<div
+						onClick={() => {
+							void navigator.clipboard.writeText(activeProject.public);
+							toast.success("Copied your public API key");
+						}}
+					>
+						<label className="block text-sm font-medium text-neutral-700">
+							Public API Key
+						</label>
+						<p
+							className={
+								"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"
+							}
+						>
+							{activeProject.public}
+						</p>
+
+						<p className={"text-sm text-neutral-500"}>
+							Use this key for any front-end services. This key can only be used
+							to publish events.
+						</p>
+					</div>
+
+					<div className={"mt-4"}>
+						<div
+							onClick={() => {
+								void navigator.clipboard.writeText(activeProject.secret);
+								toast.success("Copied your secret API key");
+							}}
+						>
+							<label className="block text-sm font-medium text-neutral-700">
+								Secret API Key
+							</label>
+							<p
+								className={
+									"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"
+								}
+							>
+								{activeProject.secret}
+							</p>
+
+							<p className={"text-sm text-neutral-500"}>
+								Use this key for any secure back-end services. This key gives
+								complete access to your Plunk setup.
+							</p>
+						</div>
+					</div>
+				</Card>
+			</Dashboard>
+		</>
+	);
+}