ADD CROSS DOMAIN SUPPORT

2024-06-26 22:35:29 +02:00
parent a0c8199474
commit 41143ca5f8
26 changed files with 514 additions and 126 deletions
--- a/apps/dashboard/src/components/clients/create-client-success.tsx
+++ b/apps/dashboard/src/components/clients/create-client-success.tsx
@@ -1,9 +1,9 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { clipboard } from '@/utils/clipboard';
-import { Copy, RocketIcon } from 'lucide-react';
+import { RocketIcon } from 'lucide-react';

 import type { IServiceClient } from '@openpanel/db';

+import CopyInput from '../forms/copy-input';
 import { Label } from '../ui/label';

 type Props = IServiceClient;
@@ -11,25 +11,10 @@ type Props = IServiceClient;
 export function CreateClientSuccess({ id, secret, cors }: Props) {
  return (
    <div className="grid gap-4">
-      <button className="text-left" onClick={() => clipboard(id)}>
-        <Label>Client ID</Label>
-        <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
-          {id}
-          <Copy size={16} />
-        </div>
-      </button>
+      <CopyInput label="Client ID" value={id} />
      {secret && (
        <div className="w-full">
-          <button
-            className="w-full text-left"
-            onClick={() => clipboard(secret)}
-          >
-            <Label>Client secret</Label>
-            <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
-              {secret}
-              <Copy size={16} />
-            </div>
-          </button>
+          <CopyInput label="Secret" value={secret} />
          {cors && (
            <p className="mt-1 text-xs text-muted-foreground">
              You will only need the secret if you want to send server events.
@@ -40,7 +25,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
      {cors && (
        <div className="text-left">
          <Label>CORS settings</Label>
-          <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
+          <div className="flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 font-mono text-sm">
            {cors}
          </div>
        </div>
--- a/apps/dashboard/src/components/forms/copy-input.tsx
+++ b/apps/dashboard/src/components/forms/copy-input.tsx
@@ -0,0 +1,28 @@
+import { clipboard } from '@/utils/clipboard';
+import { cn } from '@/utils/cn';
+import { CopyIcon } from 'lucide-react';
+
+import { Label } from '../ui/label';
+
+type Props = {
+  label: React.ReactNode;
+  value: string;
+  className?: string;
+};
+
+const CopyInput = ({ label, value, className }: Props) => {
+  return (
+    <button
+      className={cn('w-full text-left', className)}
+      onClick={() => clipboard(value)}
+    >
+      {!!label && <Label>{label}</Label>}
+      <div className="flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 font-mono text-sm">
+        {value}
+        <CopyIcon size={16} />
+      </div>
+    </button>
+  );
+};
+
+export default CopyInput;
--- a/apps/dashboard/src/components/forms/input-with-label.tsx
+++ b/apps/dashboard/src/components/forms/input-with-label.tsx
@@ -6,39 +6,56 @@ import type { InputProps } from '../ui/input';
 import { Label } from '../ui/label';
 import { Tooltiper } from '../ui/tooltip';

-type InputWithLabelProps = InputProps & {
+type WithLabel = {
+  children: React.ReactNode;
  label: string;
  error?: string | undefined;
  info?: string;
+  className?: string;
+};
+type InputWithLabelProps = InputProps & Omit<WithLabel, 'children'>;
+
+export const WithLabel = ({
+  children,
+  className,
+  label,
+  info,
+  error,
+}: WithLabel) => {
+  return (
+    <div className={className}>
+      <div className="mb-2 flex items-end justify-between">
+        <Label
+          className="mb-0 flex flex-1 shrink-0 items-center gap-1 whitespace-nowrap"
+          htmlFor={label}
+        >
+          {label}
+          {info && (
+            <Tooltiper content={info}>
+              <InfoIcon size={14} />
+            </Tooltiper>
+          )}
+        </Label>
+        {error && (
+          <Tooltiper asChild content={error}>
+            <div className="flex items-center gap-1 text-sm leading-none text-destructive">
+              Issues
+              <BanIcon size={14} />
+            </div>
+          </Tooltiper>
+        )}
+      </div>
+      {children}
+    </div>
+  );
 };

 export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
-  ({ label, className, info, ...props }, ref) => {
+  (props, ref) => {
    return (
-      <div className={className}>
-        <div className="mb-2 flex items-end justify-between">
-          <Label
-            className="mb-0 flex flex-1 shrink-0 items-center gap-1 whitespace-nowrap"
-            htmlFor={label}
-          >
-            {label}
-            {info && (
-              <Tooltiper content={info}>
-                <InfoIcon size={14} />
-              </Tooltiper>
-            )}
-          </Label>
-          {props.error && (
-            <Tooltiper asChild content={props.error}>
-              <div className="flex items-center gap-1 text-sm leading-none text-destructive">
-                Issues
-                <BanIcon size={14} />
-              </div>
-            </Tooltiper>
-          )}
-        </div>
-        <Input ref={ref} id={label} {...props} />
-      </div>
+      <WithLabel {...props}>
+        <Input ref={ref} id={props.label} {...props} />
+      </WithLabel>
    );
  }
 );
--- a/apps/dashboard/src/components/forms/tag-input.tsx
+++ b/apps/dashboard/src/components/forms/tag-input.tsx
@@ -0,0 +1,139 @@
+// Based on Christin Alares tag input component (https://github.com/christianalares/seventy-seven)
+
+import type { ElementRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+import { useAnimate } from 'framer-motion';
+import { XIcon } from 'lucide-react';
+
+type Props = {
+  placeholder: string;
+  value: string[];
+  error?: string;
+  className?: string;
+  onChange: (value: string[]) => void;
+  renderTag?: (tag: string) => string;
+};
+
+const TagInput = ({
+  value: propValue,
+  onChange,
+  renderTag,
+  placeholder,
+  error,
+}: Props) => {
+  const value = (
+    Array.isArray(propValue) ? propValue : propValue ? [propValue] : []
+  ).filter(Boolean);
+
+  const [isMarkedForDeletion, setIsMarkedForDeletion] = useState(false);
+  const inputRef = useRef<ElementRef<'input'>>(null);
+  const [inputValue, setInputValue] = useState('');
+
+  const [scope, animate] = useAnimate();
+
+  const appendTag = (tag: string) => {
+    onChange([...value, tag]);
+  };
+
+  const removeTag = (tag: string) => {
+    onChange(value.filter((t) => t !== tag));
+    inputRef.current?.focus();
+  };
+
+  useEffect(() => {
+    if (inputValue.length > 0) {
+      setIsMarkedForDeletion(false);
+    }
+  }, [inputValue]);
+
+  return (
+    <div
+      ref={scope}
+      className={cn(
+        'inline-flex w-full flex-wrap items-center gap-2 rounded-md border border-input p-1 px-3 ring-offset-background has-[input:focus]:ring-2 has-[input:focus]:ring-ring has-[input:focus]:ring-offset-1',
+        !!error && 'border-destructive'
+      )}
+    >
+      {value.map((tag, i) => {
+        const isCreating = false;
+
+        return (
+          <span
+            data-tag={tag}
+            key={tag}
+            className={cn(
+              'inline-flex items-center gap-2 rounded bg-def-200 px-2 py-1 text-sm',
+              isMarkedForDeletion &&
+                i === value.length - 1 &&
+                'bg-destructive-foreground ring-2 ring-destructive/50 ring-offset-1',
+              isCreating && 'opacity-60'
+            )}
+          >
+            {renderTag ? renderTag(tag) : tag}
+            <Button
+              size="icon"
+              variant="outline"
+              className="h-4 w-4 rounded-full"
+              onClick={() => removeTag(tag)}
+            >
+              <span className="sr-only">Remove tag</span>
+              <XIcon name="close" className="size-3" />
+            </Button>
+          </span>
+        );
+      })}
+
+      <input
+        ref={inputRef}
+        placeholder={`${placeholder} ↵`}
+        className="min-w-20 flex-1 py-1 text-sm focus-visible:outline-none"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+
+            const tagAlreadyExists = value.some(
+              (tag) => tag.toLowerCase() === inputValue.toLowerCase()
+            );
+
+            if (inputValue) {
+              if (tagAlreadyExists) {
+                animate(
+                  `span[data-tag="${inputValue.toLowerCase()}"]`,
+                  {
+                    scale: [1, 1.3, 1],
+                  },
+                  {
+                    duration: 0.3,
+                  }
+                );
+                return;
+              }
+
+              appendTag(inputValue);
+              setInputValue('');
+            }
+          }
+
+          if (e.key === 'Backspace' && inputValue === '') {
+            if (!isMarkedForDeletion) {
+              setIsMarkedForDeletion(true);
+              return;
+            }
+            const last = value[value.length - 1];
+            if (last) {
+              removeTag(last);
+            }
+            setIsMarkedForDeletion(false);
+            setInputValue('');
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default TagInput;
--- a/apps/dashboard/src/components/ui/checkbox.tsx
+++ b/apps/dashboard/src/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'block h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
      className
    )}
    {...props}
@@ -29,9 +29,14 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 const CheckboxInput = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->((props, ref) => (
-  <label className="flex min-h-10 cursor-pointer select-none items-center gap-4 rounded-md border border-border px-3">
-    <Checkbox ref={ref} {...props} />
+>(({ className, ...props }, ref) => (
+  <label
+    className={cn(
+      'flex min-h-10 cursor-pointer select-none gap-4 rounded-md border border-border px-3 py-[0.5rem]',
+      className
+    )}
+  >
+    <Checkbox ref={ref} {...props} className="relative top-0.5" />
    <div className="text-sm font-medium">{props.children}</div>
  </label>
 ));
--- a/apps/dashboard/src/components/ui/key-value.tsx
+++ b/apps/dashboard/src/components/ui/key-value.tsx
@@ -20,10 +20,10 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
      )}
      {...{ href, onClick }}
    >
-      <div className="bg-black/5 p-1 px-2">{name}</div>
+      <div className="bg-black/5 p-1 px-2 capitalize">{name}</div>
      <div
        className={cn(
-          'text-highlight overflow-hidden text-ellipsis whitespace-nowrap bg-card p-1 px-2 font-mono',
+          'overflow-hidden text-ellipsis whitespace-nowrap bg-card p-1 px-2 font-mono text-highlight',
          clickable && 'group-hover:underline'
        )}
      >