@studiocubics/cms 0.0.1

package/src/ui/System/Auth/SignIn/SignIn.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import {
+  Button,
+  Card,
+  CubicsUILogo,
+  PasswordInput,
+  TextInput,
+  PoweredByBanner,
+} from "@studiocubics/ui";
+import { useRouter } from "next/navigation";
+import { type ChangeEvent, useEffect } from "react";
+import styles from "./SignIn.module.css";
+import { useSignInForm } from "./useSignInForm";
+import Link from "next/link";
+
+export function SignIn() {
+  const { user } = useUser();
+  const router = useRouter();
+  const { formState, setFormState, pending, error, handleSubmit } =
+    useSignInForm();
+
+  useEffect(() => {
+    if (user?.id) {
+      router.push("/dashboard");
+    }
+  }, [user]);
+
+  function handleFormStateChange(e: ChangeEvent<HTMLInputElement>) {
+    const target = e.currentTarget as HTMLInputElement;
+    setFormState({ ...formState, [target.id]: target.value });
+  }
+
+  return (
+    <Card size="lg" className={styles.root}>
+      <div className={styles.body}>
+        <CubicsUILogo width={"120px"} />
+        <header className={styles.header}>
+          <h1>Sign in to your Account</h1>
+          <p>Welcome Back! Lets get started.</p>
+        </header>
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <div id="clerk-captcha" />
+
+          <TextInput
+            label={"Email Address"}
+            id="email"
+            value={formState.email}
+            onChange={handleFormStateChange}
+            required
+            fullWidth
+            type="email"
+          />
+          <PasswordInput
+            label={"Password"}
+            id="password"
+            value={formState.password}
+            onChange={handleFormStateChange}
+            required
+            fullWidth
+            disabled={pending}
+          />
+          <Button type="submit" variant="contained">
+            Confirm
+          </Button>
+          {error && <p className={styles.error}>{error}</p>}
+        </form>
+      </div>
+      <div className={styles.footer}>
+        <p>
+          Dont have an account?{" "}
+          <Link href={"/auth/requestAccount"}>Request</Link> one from an admin
+        </p>
+        <PoweredByBanner />
+      </div>
+    </Card>
+  );
+}

package/src/ui/System/Auth/SignIn/_index.ts

@@ -0,0 +1,2 @@
+export * from "./SignIn";
+export * from "./useSignInForm";

package/src/ui/System/Auth/SignIn/useSignInForm.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useSignIn } from "@clerk/nextjs";
+import { type SubmitEvent, useState } from "react";
+
+export function useSignInForm() {
+  const clerkSignIn = useSignIn();
+  const [formState, setFormState] = useState({
+    email: "",
+    password: "",
+  });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    const { email, password } = formState;
+    if (!clerkSignIn.isLoaded) return;
+
+    try {
+      setPending(true);
+      const signInAttempt = await clerkSignIn.signIn.create({
+        identifier: email,
+        password,
+      });
+      if (signInAttempt.status === "complete") {
+        await clerkSignIn.setActive({
+          session: signInAttempt.createdSessionId,
+        });
+      } else {
+        throw new Error("Sign In failed to complete");
+      }
+    } catch (err) {
+      console.error(err);
+      if (err instanceof Error) setError(err.message);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return { formState, setFormState, pending, error, handleSubmit };
+}

package/src/ui/System/Auth/SignUp/SignUp.module.css

@@ -0,0 +1,48 @@
+.root,
+.body,
+.header,
+.form,
+.footer {
+  display: flex;
+  flex-direction: column;
+}
+.root {
+  width: clamp(350px, 50vw, 550px);
+  align-items: center;
+  gap: var(--spacing-gap-7);
+  & p {
+    font-size: var(--fs-body2);
+    text-align: center;
+  }
+}
+.body {
+  width: 100%;
+  align-items: center;
+  gap: var(--spacing-gap-3);
+}
+.header {
+  align-items: center;
+  text-align: center;
+  gap: var(--spacing-gap);
+  & > h1 {
+    font-size: var(--fs-h3);
+  }
+  & > p {
+    font-size: var(--fs-body2);
+    color: var(--color-on-background-faint);
+  }
+}
+.form {
+  width: 100%;
+  gap: var(--spacing-gap-2);
+}
+.footer {
+  width: 100%;
+  padding: var(--spacing-gap-3);
+  align-items: center;
+  border-top: 1px solid var(--color-outline);
+}
+.error {
+  font-size: 2rem;
+  color: var(--color-error);
+}

package/src/ui/System/Auth/SignUp/SignUp.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import {
+  Card,
+  CubicsUILogo,
+  TextInput,
+  PasswordInput,
+  Button,
+  PoweredByBanner,
+} from "@studiocubics/ui";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useEffect, type ChangeEvent } from "react";
+import styles from "./SignUp.module.css";
+import { useSignUpForm } from "./useSignUpForm";
+
+export function SignUp() {
+  const { user } = useUser();
+  const router = useRouter();
+  const { ticket, setFormState, formState, pending, error, handleSubmit } =
+    useSignUpForm();
+  const [step, setStep] = useState(0);
+
+  // Handle signed-in users visiting this page
+  // This will also redirect the user once they finish the sign-up process
+  useEffect(() => {
+    if (user?.id) {
+      router.push("/dashboard");
+    }
+  }, [user]);
+
+  // If there is no invitation ticket, restrict access to this page
+  if (!ticket) {
+    return (
+      <Card size="lg" className={styles.root}>
+        <p>
+          Looks like you haven&lsquo;t been invited!
+          <br /> Please <Link href={"/auth/requestAccount"}>request</Link> an
+          invitation from an admin.
+        </p>
+      </Card>
+    );
+  }
+
+  function handleFormStateChange(e: ChangeEvent<HTMLInputElement>) {
+    setFormState({ ...formState, [e.target.id]: e.target.value });
+  }
+
+  const Step0 = (
+    <>
+      <TextInput
+        label={"First Name"}
+        id="firstName"
+        value={formState.firstName}
+        onChange={handleFormStateChange}
+        required
+        fullWidth
+      />
+      <TextInput
+        label={"Last Name"}
+        id="lastName"
+        value={formState.lastName}
+        onChange={handleFormStateChange}
+        required
+        fullWidth
+      />
+      <Button
+        type="button"
+        variant="contained"
+        onClick={() => setStep(1)}
+        fullWidth
+        disabled={!formState.firstName || !formState.lastName}
+      >
+        Continue
+      </Button>
+    </>
+  );
+  const Step1 = (
+    <>
+      <PasswordInput
+        label={"Password"}
+        id="password"
+        value={formState.password}
+        onChange={handleFormStateChange}
+        required
+        fullWidth
+        disabled={pending}
+        disableStrengthMeter={false}
+      />
+      <PasswordInput
+        label={"Confirm Password"}
+        id="confirmPassword"
+        value={formState.confirmPassword}
+        onChange={handleFormStateChange}
+        required
+        fullWidth
+        disabled={pending}
+      />
+      <Button disabled={pending} variant="contained" type="submit" fullWidth>
+        Register
+      </Button>
+    </>
+  );
+  return (
+    <Card size="lg" className={styles.root}>
+      <div className={styles.body}>
+        <CubicsUILogo width={"120px"} />
+        <header className={styles.header}>
+          <h1>Create your account</h1>
+          <p>Welcome! Please fill in the details to get started.</p>
+        </header>
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <div id="clerk-captcha" />
+          {step == 0 && Step0}
+          {step == 1 && Step1}
+          {step > 0 && (
+            <Button
+              disabled={pending}
+              type="button"
+              onClick={() => setStep(step - 1)}
+              fullWidth
+            >
+              Go back
+            </Button>
+          )}
+          {error && <p className={styles.error}>{error}</p>}
+        </form>
+      </div>
+      <div className={styles.footer}>
+        <p>
+          Already have an account? <Link href={"/auth/signIn/"}>Sign In</Link>
+        </p>
+        <PoweredByBanner />
+      </div>
+    </Card>
+  );
+}

package/src/ui/System/Auth/SignUp/_index.ts

@@ -0,0 +1,2 @@
+export * from "./SignUp";
+export * from "./useSignUpForm";

package/src/ui/System/Auth/SignUp/useSignUpForm.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useSignUp } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+import { type SubmitEvent, useState } from "react";
+
+export function useSignUpForm() {
+  const clerkSignUp = useSignUp();
+  const [formState, setFormState] = useState({
+    firstName: "",
+    lastName: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+
+  const ticket = useSearchParams().get("__clerk_ticket");
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    const { firstName, lastName, password, confirmPassword } = formState;
+    if (!clerkSignUp.isLoaded) return;
+    if (!ticket) return;
+    if (password != confirmPassword) {
+      return setError("Passwords dont match!");
+    }
+
+    try {
+      setPending(true);
+      const signUpAttempt = await clerkSignUp.signUp.create({
+        strategy: "ticket",
+        ticket,
+        firstName,
+        lastName,
+        password,
+      });
+      if (signUpAttempt.status === "complete") {
+        await clerkSignUp.setActive({
+          session: signUpAttempt.createdSessionId,
+        });
+      } else {
+        throw new Error("Sign Up failed to complete");
+      }
+    } catch (err) {
+      console.error(err);
+      if (err instanceof Error) setError(err.message);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return { formState, setFormState, pending, ticket, error, handleSubmit };
+}

package/src/ui/System/Auth/_index.ts

@@ -0,0 +1,2 @@
+export * from "./SignIn/_index";
+export * from "./SignUp/_index";

package/src/ui/System/Invitations/InvitationList.tsx

@@ -0,0 +1,9 @@
+import { invitationListReadAction } from "../../../clerk/actions/invitations";
+import { InvitationListCard } from "./InvitationListCard";
+
+export async function InvitationList(params: ClerkInvitationListParams) {
+  const invitationList = await invitationListReadAction(params);
+  return invitationList.data.map((inv) => (
+    <InvitationListCard key={inv.id} invitation={inv} />
+  ));
+}

package/src/ui/System/Invitations/InvitationListActions.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useDisclosure } from "@studiocubics/hooks";
+import {
+  Button,
+  Dialog,
+  Switch,
+  TextInput,
+  ConfirmationForm,
+  Select,
+} from "@studiocubics/ui";
+import { Ban, Eye, EyeClosed, UserPlus } from "lucide-react";
+import Link from "next/link";
+import type { Invitation } from "@clerk/nextjs/server";
+import { initialiseForm, toCapitalised } from "@studiocubics/utils";
+import { useActionState, useEffect } from "react";
+import {
+  invitationDeleteAction,
+  invitationCreateAction,
+} from "../../../clerk/actions/invitations";
+import { roles } from "../../../clerk/rbacConfig";
+
+export function InvitationListActions({
+  status,
+}: {
+  status: ClerkInvitationListParams["status"];
+}) {
+  const isShowRevoked = status == "revoked";
+  return (
+    <>
+      <Link href={`?status=${!isShowRevoked ? "revoked" : ""}`}>
+        <Button
+          startIcon={isShowRevoked ? <Eye /> : <EyeClosed />}
+          size="sm"
+          color={isShowRevoked ? "primary" : undefined}
+        >
+          {isShowRevoked ? "Hide" : "Show"} Revoked
+        </Button>
+      </Link>
+      <InvitationCreateDialog />
+    </>
+  );
+}
+export function InvitationRevokeDialog({ id }: { id: Invitation["id"] }) {
+  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
+  const [state, action, pending] = useActionState(
+    invitationDeleteAction.bind(null, id),
+    initialiseForm(),
+  );
+  useEffect(() => {
+    if (state.success) {
+      handleClose();
+    }
+  }, [state]);
+  return (
+    <>
+      <Button
+        color="error"
+        type="submit"
+        startIcon={<Ban />}
+        onClick={handleOpen}
+        disabled={pending}
+      >
+        Revoke Invitation
+      </Button>
+      <Dialog open={open} onClose={handleStrictClose}>
+        <ConfirmationForm
+          variant="danger"
+          onCancel={handleClose}
+          action={action}
+          formTitle="Revoke Invitation"
+          confirmText="Revoke"
+          disabled={pending}
+        >
+          Are you sure you want to revoke this invitation?
+        </ConfirmationForm>
+      </Dialog>
+    </>
+  );
+}
+const initialInvitationCreateState = initialiseForm(
+  "emailAddress",
+  "expiresInDays",
+  "role",
+);
+export type InvitationCreateState = typeof initialInvitationCreateState;
+export function InvitationCreateDialog() {
+  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
+  const [state, action, pending] = useActionState<
+    InvitationCreateState,
+    FormData
+  >(invitationCreateAction, initialInvitationCreateState);
+  useEffect(() => {
+    if (state.success) {
+      handleClose();
+    }
+  }, [state]);
+  return (
+    <>
+      <Button
+        size="sm"
+        startIcon={<UserPlus />}
+        variant="contained"
+        onClick={handleOpen}
+      >
+        Invite New
+      </Button>
+      <Dialog open={open} onClose={handleStrictClose}>
+        <ConfirmationForm
+          onCancel={handleClose}
+          action={action}
+          formTitle="Invite New"
+          disabled={pending}
+        >
+          <TextInput
+            required
+            type="email"
+            name="emailAddress"
+            label="Email Address"
+            disabled={pending}
+            error={state.fieldErrors?.emailAddress}
+          />
+          <TextInput
+            type="number"
+            name="expiresInDays"
+            label="Expires in Days"
+            endIcon={<strong>Days&nbsp;&nbsp;</strong>}
+            defaultValue={30}
+            disabled={pending}
+            error={state.fieldErrors?.expiresInDays}
+          />
+          <Switch
+            name="ignoreExisting"
+            label="Ignore Existing Invites"
+            disabled={pending}
+          />
+          <Switch
+            name="notify"
+            value={true}
+            label="Notify with email"
+            disabled={pending}
+          />
+          <Select
+            name="role"
+            label="Select Role to assign user on sign up"
+            disabled={pending}
+            error={state.fieldErrors?.role}
+          >
+            {roles.map((r) => (
+              <option key={r} value={r}>
+                {toCapitalised(r)}
+              </option>
+            ))}
+          </Select>
+        </ConfirmationForm>
+      </Dialog>
+    </>
+  );
+}
+
+// emailAddress: string;
+// expiresInDays?: number;
+// ignoreExisting?: boolean;
+// notify?: boolean;
+// publicMetadata?: UserPublicMetadata;
+// redirectUrl?: string;
+// templateSlug?: "invitation" | "waitlist_invitation";

package/src/ui/System/Invitations/InvitationListCard.tsx

@@ -0,0 +1,79 @@
+import type { Invitation } from "@clerk/nextjs/server";
+import {
+  AccordionItem,
+  Chip,
+  CollectionItemCard,
+  CopyableText,
+  LabeledValue,
+  SectionWrapper,
+  Tooltip,
+} from "@studiocubics/ui";
+import { formatDate, relativeTime, toCapitalised } from "@studiocubics/utils";
+import { InvitationRevokeDialog } from "./InvitationListActions";
+import { ThemedMonacoEditor } from "../../Inputs/ThemedMonacoEditor/ThemedMonacoEditor";
+
+export function InvitationListCard({ invitation }: { invitation: Invitation }) {
+  return (
+    <AccordionItem
+      summary={
+        <CollectionItemCard
+          id={invitation.id}
+          title={invitation.emailAddress}
+          subtitle={
+            <>
+              Invited&thinsp;
+              <Tooltip>
+                <span>{relativeTime(invitation.createdAt)}</span>
+              </Tooltip>
+            </>
+          }
+          chip={toCapitalised(invitation.status)}
+          description={<span></span>}
+        />
+      }
+      name="InvitationListCard"
+    >
+      <SectionWrapper title={"Basic Details"} noBorders>
+        <LabeledValue label={"Id"}>{invitation.id}</LabeledValue>
+        <LabeledValue label={"Email Address"}>
+          {invitation.emailAddress}
+        </LabeledValue>
+        <LabeledValue label={"Status"}>
+          <Chip
+            color={
+              invitation.status == "accepted"
+                ? "primary"
+                : invitation.status == "pending"
+                  ? "secondary"
+                  : "error"
+            }
+          >
+            <strong>{toCapitalised(invitation.status)}</strong>
+          </Chip>
+        </LabeledValue>
+      </SectionWrapper>
+      <SectionWrapper title={"Timestamps"}>
+        <LabeledValue label={"Created At"}>
+          {formatDate(invitation.createdAt)}
+        </LabeledValue>
+        <LabeledValue label={"Updated At"}>
+          {formatDate(invitation.updatedAt)}
+        </LabeledValue>
+      </SectionWrapper>
+      <SectionWrapper title={"Invite Link"}>
+        <CopyableText>{invitation.url ?? "No link found!"}</CopyableText>
+      </SectionWrapper>
+      <SectionWrapper title={"Public Metadata"}>
+        <ThemedMonacoEditor
+          options={{ readOnly: true }}
+          height="10vh"
+          defaultLanguage="json"
+          defaultValue={JSON.stringify(invitation.publicMetadata)}
+        />
+      </SectionWrapper>
+      {invitation.status == "pending" && (
+        <InvitationRevokeDialog id={invitation.id} />
+      )}
+    </AccordionItem>
+  );
+}

package/src/ui/System/Invitations/InvitationListPage.tsx

@@ -0,0 +1,32 @@
+import { INVITATIONS_PAGE_LIMIT as limit } from "../../../constants/pageLimits";
+import { PageLayoutPagination } from "@studiocubics/ui";
+import { InvitationListPagination } from "./InvitationListPagination";
+import { InvitationList } from "./InvitationList";
+import type { SecurityPageProps } from "../types";
+import { InvitationListActions } from "./InvitationListActions";
+
+export async function InvitationListPage({
+  searchParams,
+  securityLinks,
+}: SecurityPageProps) {
+  const sp = await searchParams;
+  const status = sp.status as ClerkInvitationListParams["status"];
+  const page = Number(sp.page ?? 1);
+  const offset = (page - 1) * limit;
+  const params = {
+    limit,
+    offset,
+    status,
+  };
+
+  return (
+    <PageLayoutPagination
+      size="sm"
+      title={securityLinks[3]?.children}
+      actions={<InvitationListActions status={status} />}
+      paginationComponent={<InvitationListPagination page={page} {...params} />}
+    >
+      <InvitationList {...params} />
+    </PageLayoutPagination>
+  );
+}

package/src/ui/System/Invitations/InvitationListPagination.tsx

@@ -0,0 +1,19 @@
+import { NextSSRPagination } from "@studiocubics/next";
+import { invitationListReadAction } from "../../../clerk/actions/invitations";
+
+export async function InvitationListPagination({
+  page,
+  ...params
+}: {
+  page: number;
+  limit: number;
+} & ClerkInvitationListParams) {
+  const invitationList = await invitationListReadAction(params);
+  return (
+    <NextSSRPagination
+      page={page}
+      limit={params.limit}
+      total={invitationList.totalCount}
+    />
+  );
+}

package/src/ui/System/Invitations/_index.ts

@@ -0,0 +1,5 @@
+export * from "./InvitationList";
+export * from "./InvitationListActions";
+export * from "./InvitationListCard";
+export * from "./InvitationListPage";
+export * from "./InvitationListPagination";