@hexclave/next 1.0.3 → 1.0.5

package/src/components/api-key-dialogs.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from '@hexclave/shared/dist/schema-fields';
+import { captureError } from '@hexclave/shared/dist/utils/errors';
+import { runAsynchronously } from '@hexclave/shared/dist/utils/promises';
+import { ActionDialog, Button, CopyField, Input, Label, Typography } from '@hexclave/ui';
+import { useState } from "react";
+import { useForm } from 'react-hook-form';
+import * as yup from "yup";
+import { useUser } from '..';
+import { FormWarningText } from '../components/elements/form-warning';
+import { ApiKey, ApiKeyCreationOptions, ApiKeyType } from "../lib/hexclave-app/api-keys";
+import { useTranslation } from "../lib/translations";
+
+// Constants for expiration options
+export const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;
+export const expiresInOptions = {
+  [1000 * 60 * 60 * 24 * 1]: "1 day",
+  [1000 * 60 * 60 * 24 * 7]: "7 days",
+  [1000 * 60 * 60 * 24 * 30]: "30 days",
+  [1000 * 60 * 60 * 24 * 90]: "90 days",
+  [1000 * 60 * 60 * 24 * 365]: "1 year",
+  [neverInMs]: "Never",
+} as const;
+
+/**
+ * Dialog for creating a new API key
+ */
+export function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  onKeyCreated?: (key: ApiKey<Type, true>) => void,
+  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });
+  const [loading, setLoading] = useState(false);
+
+  const apiKeySchema = yupObject({
+    description: yupString().defined().nonEmpty(t('Description is required')),
+    expiresIn: yupString().defined(),
+  });
+
+  const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    resolver: yupResolver(apiKeySchema),
+    defaultValues: {
+      description: '',
+      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days
+    }
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {
+    setLoading(true);
+    try {
+      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));
+      const apiKey = await props.createApiKey({
+        description: data.description,
+        expiresAt,
+      });
+
+      if (props.onKeyCreated) {
+        props.onKeyCreated(apiKey);
+      }
+
+      reset();
+      props.onOpenChange(false);
+    } catch (error) {
+      captureError("Failed to create API key", { error });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ActionDialog
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      title={t('Create API Key')}
+      description={t('API keys grant programmatic access to your account.')}
+    >
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          runAsynchronously(handleSubmit(onSubmit));
+        }}
+        className="space-y-4"
+      >
+        <div className="space-y-2">
+          <Label htmlFor="description">{t('Description')}</Label>
+          <Input
+            id="description"
+            placeholder={t('e.g. Development, Production, CI/CD')}
+            {...register('description')}
+          />
+          {errors.description && <FormWarningText text={errors.description.message} />}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="expiresIn">{t('Expires In')}</Label>
+          <select
+            id="expiresIn"
+            className="w-full p-2 border border-input rounded-md bg-background"
+            {...register('expiresIn')}
+          >
+            {Object.entries(expiresInOptions).map(([value, label]) => (
+              <option key={value} value={value}>{t(label)}</option>
+            ))}
+          </select>
+          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              reset();
+              props.onOpenChange(false);
+            }}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button type="submit" loading={loading}>
+            {t('Create')}
+          </Button>
+        </div>
+      </form>
+    </ActionDialog>
+  );
+}
+
+/**
+ * Dialog for showing the newly created API key
+ */
+export function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  apiKey: ApiKey<Type, true> | null,
+  onClose?: () => void,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <ActionDialog
+      open={!!props.apiKey}
+      title={t("API Key")}
+      okButton={{ label: t("Close") }}
+      onClose={props.onClose}
+      preventClose
+      confirmText={t("I understand that I will not be able to view this key again.")}
+    >
+      <div className="flex flex-col gap-4">
+        <Typography>
+          {t("Here is your API key.")}{" "}
+          <span className="font-bold">
+            {t("Copy it to a safe place. You will not be able to view it again.")}
+          </span>
+        </Typography>
+        <CopyField
+          type="input"
+          monospace
+          value={props.apiKey?.value ?? ''}
+          label={t("Secret API Key")}
+        />
+      </div>
+    </ActionDialog>
+  );
+}

package/src/components/api-key-table.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from "@hexclave/ui";
+import { ColumnDef, Row, Table } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { ApiKey } from "../lib/hexclave-app/api-keys";
+
+type ExtendedApiKey = ApiKey & {
+  status: 'valid' | 'expired' | 'revoked',
+};
+
+function toolbarRender<TData>(table: Table<TData>) {
+  return (
+    <>
+      <SearchToolbarItem table={table} placeholder="Search table" />
+      <DataTableFacetedFilter
+        column={table.getColumn("status")}
+        title="Status"
+        options={['valid', 'expired', 'revoked'].map((provider) => ({
+          value: provider,
+          label: provider,
+        }))}
+      />
+    </>
+  );
+}
+
+function RevokeDialog(props: {
+  apiKey: ExtendedApiKey,
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+}) {
+  return <ActionDialog
+    open={props.open}
+    onOpenChange={props.onOpenChange}
+    title="Revoke API Key"
+    danger
+    cancelButton
+    okButton={{ label: "Revoke Key", onClick: async () => { await props.apiKey.revoke(); } }}
+    confirmText="I understand this will unlink all the apps using this API key"
+  >
+    {`Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`}
+  </ActionDialog>;
+}
+
+function Actions({ row }: { row: Row<ExtendedApiKey> }) {
+  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
+  return (
+    <>
+      <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />
+      <ActionCell
+        invisible={row.original.status !== 'valid'}
+        items={[{
+          item: "Revoke",
+          danger: true,
+          onClick: () => setIsRevokeModalOpen(true),
+        }]}
+      />
+    </>
+  );
+}
+
+const columns: ColumnDef<ExtendedApiKey>[] =  [
+  {
+    accessorKey: "description",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Description" />,
+    cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Status" />,
+    cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,
+    filterFn: standardFilterFn,
+  },
+  {
+    id: "value",
+    accessorFn: (row) => row.value.lastFour,
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Client Key" />,
+    cell: ({ row }) => <TextCell>*******{row.original.value.lastFour}</TextCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "expiresAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Expires At" />,
+    cell: ({ row }) => {
+      if (row.original.status === 'revoked') return <TextCell>-</TextCell>;
+      return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Created At" />,
+    cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <Actions row={row} />,
+  },
+];
+
+export function ApiKeyTable(props: { apiKeys: ApiKey[] }) {
+  const extendedApiKeys = useMemo(() => {
+    const keys = props.apiKeys.map((apiKey) => ({
+      ...apiKey,
+      status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],
+    } satisfies ExtendedApiKey));
+    // first sort based on status, then by createdAt
+    return keys.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.createdAt < b.createdAt ? 1 : -1;
+      }
+      return a.status === 'valid' ? -1 : 1;
+    });
+  }, [props.apiKeys]);
+
+  return <DataTable
+    data={extendedApiKeys}
+    columns={columns}
+    toolbarRender={toolbarRender}
+    defaultColumnFilters={[]}
+    defaultSorting={[]}
+  />;
+}

package/src/components/credential-sign-in.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "..";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+import { StyledLink } from "./link";
+
+export function CredentialSignIn() {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password'))
+  });
+
+  const { register, handleSubmit, setError, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+
+    try {
+      const { email, password } = data;
+      const result = await app.signInWithCredential({
+        email,
+        password,
+      });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input
+        id="email"
+        type="email"
+        autoComplete="email"
+        {...register('email')}
+      />
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="current-password"
+        {...register('password')}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+
+      <StyledLink href={app.urls.forgotPassword} className="mt-1 text-sm">
+        {t('Forgot password?')}
+      </StyledLink>
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign In')}
+      </Button>
+    </form>
+  );
+}

package/src/components/credential-sign-up.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { getPasswordError } from "@hexclave/shared/dist/helpers/password";
+import { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "../lib/hooks";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+
+export function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password')).test({
+      name: 'is-valid-password',
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    ...(!props.noPasswordRepeat && {
+      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), "", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))
+    })
+  });
+
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { email, password } = data;
+      const result = await app.signUpWithCredential({ email, password });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const registerPassword = register('password');
+  const registerPasswordRepeat = register('passwordRepeat');
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input id="email" type="email" autoComplete="email" {...register('email')}/>
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="new-password"
+        {...registerPassword}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          clearErrors('password');
+          clearErrors('passwordRepeat');
+          runAsynchronously(registerPassword.onChange(e));
+        }}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+      {
+        !props.noPasswordRepeat && (
+          <>
+            <Label htmlFor="repeat-password" className="mt-4 mb-1">{t('Repeat Password')}</Label>
+            <PasswordInput
+              id="repeat-password"
+              {...registerPasswordRepeat}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              clearErrors('password');
+              clearErrors('passwordRepeat');
+              runAsynchronously(registerPasswordRepeat.onChange(e));
+              }}
+            />
+            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />
+          </>
+        )
+      }
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign Up')}
+      </Button>
+    </form>
+  );
+}

package/src/components/elements/form-warning.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+export function FormWarningText({ text }: { text?: string }) {
+  if (!text) {
+    return null;
+  }
+  return (
+    <div className="text-red-500 text-sm mt-1">
+      {text}
+    </div>
+  );
+}

package/src/components/elements/maybe-full-page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import React, { useId } from "react";
+import { SsrScript } from "./ssr-layout-effect";
+
+export function MaybeFullPage({
+  children,
+  fullPage,
+}: {
+  children: React.ReactNode,
+  fullPage: boolean,
+  size?: number,
+  containerClassName?: string,
+}) {
+  const uniqueId = useId();
+  const id = `stack-full-page-container-${uniqueId}`;
+
+  const scriptString = `(([id]) => {
+    const el = document.getElementById(id);
+    if (!el) {
+      // component is not full page
+      return;
+    }
+    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;
+    el.style.minHeight = \`calc(100vh - \${offset}px)\`;
+  })(${JSON.stringify([id])})`;
+
+  if (fullPage) {
+    return (
+      <>
+        <div
+          suppressHydrationWarning
+          id={id}
+          style={{
+            minHeight: '100vh',
+            alignSelf: 'stretch',
+            flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          className="stack-scope"
+        >
+          {children}
+        </div>
+        <SsrScript script={scriptString} />
+      </>
+    );
+  } else {
+    return <>
+      {children}
+    </>;
+  }
+
+}

package/src/components/elements/separator-with-text.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { Separator } from "@hexclave/ui";
+
+export function SeparatorWithText({ text }: { text: string }) {
+  return (
+    <div className="flex items-center justify-center my-6 stack-scope">
+      <div className="flex-1">
+        <Separator />
+      </div>
+      <div className="mx-2 text-sm text-zinc-500">{text}</div>
+      <div className="flex-1">
+        <Separator />
+      </div>
+    </div>
+  );
+}