Initial Commit
This commit is contained in:
Dries Augustyns
@@ -0,0 +1,42 @@
|
||||
import {Dashboard} from '../../layouts';
|
||||
import {Card, FullscreenLoader} from '../../components';
|
||||
import {useUser} from '../../lib/hooks/users';
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
const {data: user} = useUser();
|
||||
|
||||
if (!user) {
|
||||
return <FullscreenLoader />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dashboard>
|
||||
<Card title={'Account details'} description={'Manage your account and contact details'}>
|
||||
<div className={'grid gap-5 sm:grid-cols-2'}>
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="email" className="text-xs font-light">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
autoComplete={'off'}
|
||||
type="email"
|
||||
className={
|
||||
'block w-full rounded border-neutral-300 transition ease-in-out focus:border-purple-500 focus:ring-purple-500 disabled:bg-neutral-100 sm:text-sm'
|
||||
}
|
||||
placeholder="Your email"
|
||||
disabled={true}
|
||||
value={user.email}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Dashboard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,356 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { IdentitySchemas, type UtilitySchemas } from "@plunk/shared";
|
||||
import { motion } from "framer-motion";
|
||||
import { Copy, Unlink } from "lucide-react";
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Card,
|
||||
FullscreenLoader,
|
||||
Input,
|
||||
SettingTabs,
|
||||
Table,
|
||||
} from "../../components";
|
||||
import { Dashboard } from "../../layouts";
|
||||
import { AWS_REGION } from "../../lib/constants";
|
||||
import {
|
||||
useActiveProject,
|
||||
useActiveProjectVerifiedIdentity,
|
||||
useProjects,
|
||||
} from "../../lib/hooks/projects";
|
||||
import { network } from "../../lib/network";
|
||||
|
||||
interface EmailValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface FromValues {
|
||||
from: string;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
const activeProject = useActiveProject();
|
||||
const { mutate: projectsMutate } = useProjects();
|
||||
const { data: identity, mutate: identityMutate } =
|
||||
useActiveProjectVerifiedIdentity();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<EmailValues>({
|
||||
resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
|
||||
});
|
||||
|
||||
const {
|
||||
register: registerUpdate,
|
||||
handleSubmit: handleSubmitUpdate,
|
||||
formState: { errors: errorsUpdate },
|
||||
reset,
|
||||
} = useForm<FromValues>({
|
||||
resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeProject) {
|
||||
return;
|
||||
}
|
||||
|
||||
reset({ from: activeProject.from ?? undefined });
|
||||
}, [reset, activeProject]);
|
||||
|
||||
if (!activeProject || !identity) {
|
||||
return <FullscreenLoader />;
|
||||
}
|
||||
|
||||
const create = async (data: EmailValues) => {
|
||||
toast.promise(
|
||||
network.fetch<
|
||||
{
|
||||
success: true;
|
||||
tokens: string[];
|
||||
},
|
||||
typeof IdentitySchemas.create
|
||||
>("POST", "/identities/create", {
|
||||
id: activeProject.id,
|
||||
...data,
|
||||
}),
|
||||
{
|
||||
loading: "Adding your domain",
|
||||
success: (res) => {
|
||||
void identityMutate({ tokens: res.tokens }, { revalidate: false });
|
||||
void projectsMutate();
|
||||
|
||||
return "Added your domain";
|
||||
},
|
||||
error: "Could not add domain",
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const update = async (data: FromValues) => {
|
||||
toast.promise(
|
||||
network.fetch<
|
||||
{
|
||||
success: true;
|
||||
},
|
||||
typeof IdentitySchemas.update
|
||||
>("PUT", "/projects/update/identity", {
|
||||
id: activeProject.id,
|
||||
...data,
|
||||
}),
|
||||
{
|
||||
loading: "Updating your sender name",
|
||||
success: "Updated your sender name",
|
||||
error: "Could not update sender name",
|
||||
},
|
||||
);
|
||||
|
||||
await identityMutate();
|
||||
await projectsMutate();
|
||||
};
|
||||
|
||||
const unlink = async () => {
|
||||
toast.promise(
|
||||
network.fetch<
|
||||
{
|
||||
success: true;
|
||||
},
|
||||
typeof UtilitySchemas.id
|
||||
>("POST", "/identities/reset", {
|
||||
id: activeProject.id,
|
||||
}),
|
||||
{
|
||||
loading: "Unlinking your domain",
|
||||
success: "Unlinked your domain",
|
||||
error: "Could not unlink domain",
|
||||
},
|
||||
);
|
||||
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dashboard>
|
||||
<SettingTabs />
|
||||
|
||||
<Card
|
||||
title={"Domain"}
|
||||
description={
|
||||
"By sending emails from your own domain you build up domain authority and trust."
|
||||
}
|
||||
actions={
|
||||
activeProject.email && (
|
||||
<>
|
||||
<button
|
||||
onClick={unlink}
|
||||
className={
|
||||
"flex items-center gap-x-2 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
|
||||
}
|
||||
>
|
||||
<Unlink strokeWidth={1.5} size={18} />
|
||||
Unlink domain
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
>
|
||||
{activeProject.email && !activeProject.verified ? (
|
||||
<>
|
||||
<Alert type={"warning"} title={"Waiting for DNS verification"}>
|
||||
Please add the following records to{" "}
|
||||
{activeProject.email.split("@")[1]} to verify{" "}
|
||||
{activeProject.email}, this may take up to 15 minutes to
|
||||
register. <br />
|
||||
In the meantime you can already start sending emails, we will
|
||||
automatically switch to your domain once it is verified.
|
||||
</Alert>
|
||||
|
||||
<div className="mt-6">
|
||||
<Table
|
||||
values={[
|
||||
{
|
||||
Type: <Badge type={"info"}>TXT</Badge>,
|
||||
Key: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText("plunk");
|
||||
toast.success("Copied key to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>plunk</p>
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
Value: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(
|
||||
"v=spf1 include:amazonses.com ~all",
|
||||
);
|
||||
toast.success("Copied value to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>
|
||||
v=spf1 include:amazonses.com ~all
|
||||
</p>{" "}
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
type: <Badge type={"info"}>MX</Badge>,
|
||||
Key: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText("plunk");
|
||||
toast.success("Copied key to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>plunk</p>
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
Value: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(
|
||||
`10 feedback-smtp.${AWS_REGION}.amazonses.com`,
|
||||
);
|
||||
toast.success("Copied value to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>
|
||||
10 feedback-smtp.{AWS_REGION}.amazonses.com
|
||||
</p>
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
...identity.tokens.map((token) => {
|
||||
return {
|
||||
Type: <Badge type={"info"}>CNAME</Badge>,
|
||||
Key: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(
|
||||
`${token}._domainkey`,
|
||||
);
|
||||
toast.success("Copied key to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>
|
||||
{token}._domainkey
|
||||
</p>
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
Value: (
|
||||
<div
|
||||
className={"flex cursor-pointer items-center gap-3"}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(
|
||||
`${token}.dkim.amazonses.com`,
|
||||
);
|
||||
toast.success("Copied value to clipboard");
|
||||
}}
|
||||
>
|
||||
<p className={"font-mono text-sm"}>
|
||||
{token}.dkim.amazonses.com
|
||||
</p>
|
||||
<Copy size={14} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : activeProject.email && activeProject.verified ? (
|
||||
<>
|
||||
<Alert type={"success"} title={"Domain verified"}>
|
||||
You have confirmed {activeProject.email} as your domain. Any
|
||||
emails sent by Plunk will now use this address.
|
||||
</Alert>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<form onSubmit={handleSubmit(create)} className="space-y-6">
|
||||
<Input
|
||||
register={register("email")}
|
||||
error={errors.email}
|
||||
placeholder={"[email protected]"}
|
||||
label={"Email"}
|
||||
/>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className={
|
||||
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
||||
}
|
||||
>
|
||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M12 5.75V18.25"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M18.25 12L5.75 12"
|
||||
/>
|
||||
</svg>
|
||||
Verify domain
|
||||
</motion.button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title={"Sender name"}
|
||||
description={
|
||||
"The name that will be used when sending emails from Plunk. Your project name will be used by default"
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
|
||||
<Input
|
||||
register={registerUpdate("from")}
|
||||
placeholder={activeProject.name}
|
||||
label={"Name"}
|
||||
error={errorsUpdate.from}
|
||||
/>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className={
|
||||
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
||||
}
|
||||
>
|
||||
Save
|
||||
</motion.button>
|
||||
</form>
|
||||
</Card>
|
||||
</Dashboard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Redirect } from "../../components";
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
return <Redirect to={"/settings/project"} />;
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { MembershipSchemas, type UtilitySchemas } from "@plunk/shared";
|
||||
import type { Project, Role } from "@prisma/client";
|
||||
import { motion } from "framer-motion";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Card,
|
||||
FullscreenLoader,
|
||||
Input,
|
||||
Modal,
|
||||
SettingTabs,
|
||||
Table,
|
||||
} from "../../components";
|
||||
import { Dashboard } from "../../layouts";
|
||||
import {
|
||||
useActiveProject,
|
||||
useActiveProjectMemberships,
|
||||
useProjects,
|
||||
} from "../../lib/hooks/projects";
|
||||
import { useUser } from "../../lib/hooks/users";
|
||||
import { network } from "../../lib/network";
|
||||
|
||||
interface EmailValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
const [showInviteModal, setShowInviteModal] = useState(false);
|
||||
const [showLeaveModal, setShowLeaveModal] = useState(false);
|
||||
|
||||
const [project, setProject] = useState<Project>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const activeProject = useActiveProject();
|
||||
const { data: user } = useUser();
|
||||
const { data: projects, mutate: projectMutate } = useProjects();
|
||||
const { data: memberships, mutate: membershipMutate } =
|
||||
useActiveProjectMemberships();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<EmailValues>({
|
||||
resolver: zodResolver(
|
||||
MembershipSchemas.invite.omit({ id: true, role: true }),
|
||||
),
|
||||
});
|
||||
|
||||
if (activeProject && !project) {
|
||||
setProject(activeProject);
|
||||
}
|
||||
|
||||
if (!project || !projects || !memberships || !user) {
|
||||
return <FullscreenLoader />;
|
||||
}
|
||||
|
||||
if (!activeProject) {
|
||||
return <FullscreenLoader />;
|
||||
}
|
||||
|
||||
const inviteAccount = (data: EmailValues) => {
|
||||
toast.promise(
|
||||
network.mock<
|
||||
{
|
||||
success: true;
|
||||
members: {
|
||||
userId: string;
|
||||
email: string;
|
||||
role: Role;
|
||||
}[];
|
||||
},
|
||||
typeof MembershipSchemas.invite
|
||||
>(project.secret, "POST", "/memberships/invite", {
|
||||
id: project.id,
|
||||
email: data.email,
|
||||
role: "ADMIN",
|
||||
}),
|
||||
{
|
||||
loading: "Adding new member",
|
||||
success: async (result) => {
|
||||
await membershipMutate(result.members);
|
||||
setShowInviteModal(false);
|
||||
|
||||
return "Added new member";
|
||||
},
|
||||
error: "Could not add new member!",
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const kickAccount = (email: string) => {
|
||||
void network
|
||||
.fetch<
|
||||
{
|
||||
success: true;
|
||||
members: {
|
||||
userId: string;
|
||||
email: string;
|
||||
role: Role;
|
||||
}[];
|
||||
},
|
||||
typeof MembershipSchemas.kick
|
||||
>("POST", "/memberships/kick", {
|
||||
id: project.id,
|
||||
email,
|
||||
})
|
||||
.then(async (res) => {
|
||||
await membershipMutate(res.members);
|
||||
});
|
||||
};
|
||||
|
||||
const leaveProject = () => {
|
||||
void network
|
||||
.fetch<
|
||||
{
|
||||
success: true;
|
||||
memberships: Project[];
|
||||
},
|
||||
typeof UtilitySchemas.id
|
||||
>("POST", "/memberships/leave", {
|
||||
id: project.id,
|
||||
})
|
||||
.then(async (res) => {
|
||||
await projectMutate(res.memberships);
|
||||
localStorage.removeItem("project");
|
||||
await router.push("/");
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={showLeaveModal}
|
||||
onToggle={() => setShowLeaveModal(!showLeaveModal)}
|
||||
onAction={leaveProject}
|
||||
type={"danger"}
|
||||
title={"Are you sure?"}
|
||||
description={
|
||||
memberships.length === 1
|
||||
? "You are the last person in this project, if you leave it we will automatically delete it!"
|
||||
: "Leaving a project is permanent, you will lose access to the data and will need to be reinvited again."
|
||||
}
|
||||
/>
|
||||
<Modal
|
||||
isOpen={showInviteModal}
|
||||
onToggle={() => setShowInviteModal(!showInviteModal)}
|
||||
onAction={handleSubmit(inviteAccount)}
|
||||
type={"info"}
|
||||
title={"Invite a new member"}
|
||||
description={
|
||||
"Enter the email of the account you want to invite to this project. The person you want to invite needs to have an account on Plunk."
|
||||
}
|
||||
>
|
||||
<Input
|
||||
register={register("email")}
|
||||
error={errors.email}
|
||||
label={"Email"}
|
||||
placeholder={"[email protected]"}
|
||||
/>
|
||||
</Modal>
|
||||
<Dashboard>
|
||||
<SettingTabs />
|
||||
<Card title={"Project members"}>
|
||||
<Table
|
||||
values={memberships.map((membership) => {
|
||||
return {
|
||||
Account: membership.email,
|
||||
Role:
|
||||
membership.role.charAt(0).toUpperCase() +
|
||||
membership.role.slice(1).toLowerCase(),
|
||||
|
||||
Manage:
|
||||
membership.userId === user.id ? (
|
||||
<button
|
||||
className={
|
||||
"mb-2 text-sm text-neutral-400 underline transition ease-in-out hover:text-neutral-700"
|
||||
}
|
||||
onClick={() => setShowLeaveModal(true)}
|
||||
>
|
||||
Leave
|
||||
</button>
|
||||
) : memberships.find(
|
||||
(membership) => membership.userId === user.id,
|
||||
)?.role === "OWNER" ? (
|
||||
<button
|
||||
className={
|
||||
"mb-2 text-sm text-neutral-400 underline transition ease-in-out hover:text-neutral-700"
|
||||
}
|
||||
onClick={() => kickAccount(membership.email)}
|
||||
>
|
||||
Kick
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
),
|
||||
};
|
||||
})}
|
||||
/>
|
||||
<div className={"mt-9 flex items-center"}>
|
||||
<div className={"w-2/3"}>
|
||||
<p className={"text-sm font-semibold text-neutral-800"}>
|
||||
Invite team
|
||||
</p>
|
||||
<p className={"text-sm text-neutral-400"}>
|
||||
By adding someone to your project you give them access to all
|
||||
data present in your project including emails and your API key.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className={
|
||||
"ml-auto mt-4 self-end rounded bg-neutral-800 px-8 py-2.5 text-sm font-medium text-white"
|
||||
}
|
||||
>
|
||||
Invite user
|
||||
</motion.button>
|
||||
</div>
|
||||
</Card>
|
||||
</Dashboard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ProjectSchemas, type UtilitySchemas } from "@plunk/shared";
|
||||
import { network } from "dashboard/src/lib/network";
|
||||
import { motion } from "framer-motion";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Card,
|
||||
FullscreenLoader,
|
||||
Input,
|
||||
Modal,
|
||||
SettingTabs,
|
||||
} from "../../components";
|
||||
import { Dashboard } from "../../layouts";
|
||||
import {
|
||||
useActiveProject,
|
||||
useActiveProjectMemberships,
|
||||
useProjects,
|
||||
} from "../../lib/hooks/projects";
|
||||
import { useUser } from "../../lib/hooks/users";
|
||||
|
||||
interface ProjectValues {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
const router = useRouter();
|
||||
const activeProject = useActiveProject();
|
||||
const { data: user } = useUser();
|
||||
const { data: memberships } = useActiveProjectMemberships();
|
||||
const { mutate: projectsMutate } = useProjects();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<ProjectValues>({
|
||||
resolver: zodResolver(ProjectSchemas.update.omit({ id: true })),
|
||||
});
|
||||
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeProject) {
|
||||
return;
|
||||
}
|
||||
|
||||
reset(activeProject);
|
||||
}, [reset, activeProject]);
|
||||
|
||||
if (!activeProject || !memberships || !user) {
|
||||
return <FullscreenLoader />;
|
||||
}
|
||||
|
||||
const update = async (data: ProjectValues) => {
|
||||
toast.promise(
|
||||
network.fetch<
|
||||
{
|
||||
success: true;
|
||||
},
|
||||
typeof ProjectSchemas.update
|
||||
>("PUT", "/projects/update/", {
|
||||
id: activeProject.id,
|
||||
...data,
|
||||
}),
|
||||
{
|
||||
loading: "Updating your project",
|
||||
success: "Updated your project",
|
||||
error: "Could not update your project",
|
||||
},
|
||||
);
|
||||
|
||||
await projectsMutate();
|
||||
};
|
||||
|
||||
const deleteProject = async () => {
|
||||
setShowDeleteModal(!showDeleteModal);
|
||||
|
||||
await fetch("/api/plunk", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
event: "project-deleted",
|
||||
email: user.email,
|
||||
data: {
|
||||
project: activeProject.name,
|
||||
},
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
toast.promise(
|
||||
network
|
||||
.fetch<
|
||||
{
|
||||
success: true;
|
||||
},
|
||||
typeof UtilitySchemas.id
|
||||
>("DELETE", "/projects/delete", {
|
||||
id: activeProject.id,
|
||||
})
|
||||
.then(async () => {
|
||||
localStorage.removeItem("project");
|
||||
await router.push("/");
|
||||
window.location.reload();
|
||||
}),
|
||||
{
|
||||
loading: "Deleting your project",
|
||||
success: "Deleted your project",
|
||||
error: "Could not delete your project",
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={showDeleteModal}
|
||||
onToggle={() => setShowDeleteModal(!showDeleteModal)}
|
||||
onAction={deleteProject}
|
||||
type={"danger"}
|
||||
title={"Are you sure?"}
|
||||
description={
|
||||
"All data associated with this project will also be permanently deleted. This action cannot be reversed!"
|
||||
}
|
||||
/>
|
||||
<Dashboard>
|
||||
<SettingTabs />
|
||||
<Card
|
||||
title={"Project details"}
|
||||
description={"Manage your project details"}
|
||||
>
|
||||
<form onSubmit={handleSubmit(update)} className="space-y-6">
|
||||
<div className={"grid gap-5 sm:grid-cols-2"}>
|
||||
<Input
|
||||
register={register("name")}
|
||||
label={"Name"}
|
||||
placeholder={"ACME Inc."}
|
||||
error={errors.name}
|
||||
/>
|
||||
<Input
|
||||
register={register("url")}
|
||||
label={"URL"}
|
||||
placeholder={"https://useplunk.com"}
|
||||
error={errors.url}
|
||||
/>
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className={
|
||||
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
||||
}
|
||||
>
|
||||
Save
|
||||
</motion.button>
|
||||
</form>
|
||||
</Card>
|
||||
{memberships.find((membership) => membership.userId === user.id)
|
||||
?.role === "OWNER" ? (
|
||||
<Card
|
||||
title={"Danger zone"}
|
||||
description={"Better watch out here"}
|
||||
className={"mt-4"}
|
||||
>
|
||||
<div className={"flex"}>
|
||||
<div className={"w-2/3"}>
|
||||
<p className={"text-sm font-bold text-neutral-500"}>
|
||||
Delete your project
|
||||
</p>
|
||||
<p className={"text-sm text-neutral-400"}>
|
||||
Deleting your project may have unwanted consequences. All data
|
||||
associated with this project will get deleted and can not be
|
||||
recovered!{" "}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className={
|
||||
"ml-auto h-1/2 self-center rounded bg-red-500 px-6 py-2 text-sm font-medium text-white transition ease-in-out hover:bg-red-600"
|
||||
}
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
>
|
||||
Delete project
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
) : null}
|
||||
</Dashboard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user