-
+
OAuth2 Clients
See and manage all OAuth2 clients registered with your Ory Hydra instance
+ {
+ pmCreateClient && (
+
+ )
+ }
-
+ {
+ pmAccessClient ?
+ (
+ initialFetch &&
+ )
+ :
+
+ }
);
}
diff --git a/dashboard/src/app/globals.css b/dashboard/src/app/globals.css
index 262da57..65bc799 100644
--- a/dashboard/src/app/globals.css
+++ b/dashboard/src/app/globals.css
@@ -75,4 +75,15 @@
body {
@apply bg-sidebar text-foreground;
}
+}
+
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ }
}
\ No newline at end of file
diff --git a/dashboard/src/components/forms/client-form.tsx b/dashboard/src/components/forms/client-form.tsx
new file mode 100644
index 0000000..0ca84b6
--- /dev/null
+++ b/dashboard/src/components/forms/client-form.tsx
@@ -0,0 +1,588 @@
+'use client';
+
+import { z } from 'zod';
+import { clientFormSchema } from '@/lib/forms/client-form';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { OAuth2Client } from '@ory/client';
+import { AxiosResponse } from 'axios';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useRouter } from 'next/navigation';
+import { Minus } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import Link from 'next/link';
+
+interface CreateClientFormProps {
+ action: (data: z.infer
) => Promise>;
+}
+
+export function CreateClientForm({ action }: CreateClientFormProps) {
+
+ const router = useRouter();
+
+ const [redirectUris, setRedirectUris] = useState(['']);
+ const [postLogoutRedirectUris, setPostLogoutRedirectUris] = useState(['']);
+
+ const form = useForm>({
+ resolver: zodResolver(clientFormSchema),
+ defaultValues: {
+ client_name: '',
+ scope: '',
+ redirect_uris: [''],
+ skip: false,
+ logo_uri: '',
+ policy_uri: '',
+ tos_uri: '',
+ owner: '',
+ },
+ });
+
+ const [successDialogOpen, setSuccessDialogOpen] = useState(false);
+ const [createdClient, setCreatedClient] = useState();
+ const handleSubmit = async (data: z.infer) => {
+ await action(data)
+ .then((response) => {
+ console.log(response);
+ return response.data;
+ })
+ .then((client) => {
+ setCreatedClient(client);
+ setSuccessDialogOpen(true);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ };
+
+ const addRedirectUri = () => {
+ setRedirectUris([...redirectUris, '']);
+ };
+
+ const addPostLogoutRedirectUri = () => {
+ setPostLogoutRedirectUris([...postLogoutRedirectUris, '']);
+ };
+
+ const removeRedirectUri = (index: number) => {
+ const updatedRedirectUris = redirectUris.filter((_, i) => i !== index);
+ setRedirectUris(updatedRedirectUris);
+ form.setValue('redirect_uris', updatedRedirectUris);
+ };
+
+ const removePostLogoutRedirectUri = (index: number) => {
+ const updatedPostLogoutRedirectUris = postLogoutRedirectUris.filter((_, i) => i !== index);
+ setPostLogoutRedirectUris(postLogoutRedirectUris);
+ form.setValue('post_logout_redirect_uris', updatedPostLogoutRedirectUris);
+ };
+
+ const handleInputChange = (index: number, event: any) => {
+ const updatedRedirectUris = [...redirectUris];
+ updatedRedirectUris[index] = event.target.value;
+ setRedirectUris(updatedRedirectUris);
+ form.setValue('redirect_uris', updatedRedirectUris);
+ };
+
+ const handlePostLogoutInputChange = (index: number, event: any) => {
+ const updatedPostLogoutRedirectUris = [...postLogoutRedirectUris];
+ updatedPostLogoutRedirectUris[index] = event.target.value;
+ setPostLogoutRedirectUris(updatedPostLogoutRedirectUris);
+ form.setValue('post_logout_redirect_uris', updatedPostLogoutRedirectUris);
+ };
+
+ return (
+ <>
+ {
+ createdClient && (
+ setSuccessDialogOpen(false)}>
+
+
+ Client created
+
+ Your client was created successfully. Make sure to safe the client secret!
+
+
+
+ )
+ }
+
+
+
+ );
+}
diff --git a/dashboard/src/components/ui/card.tsx b/dashboard/src/components/ui/card.tsx
index 3c69472..22ccc98 100644
--- a/dashboard/src/components/ui/card.tsx
+++ b/dashboard/src/components/ui/card.tsx
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
));
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
));
CardContent.displayName = 'CardContent';
@@ -70,7 +70,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
));
diff --git a/dashboard/src/components/ui/command.tsx b/dashboard/src/components/ui/command.tsx
new file mode 100644
index 0000000..f485776
--- /dev/null
+++ b/dashboard/src/components/ui/command.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+ return (
+
+ );
+};
+
+const CommandInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+ className,
+ ...props
+ }: React.HTMLAttributes) => {
+ return (
+
+ );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+};
diff --git a/dashboard/src/components/ui/dialog.tsx b/dashboard/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c7b4160
--- /dev/null
+++ b/dashboard/src/components/ui/dialog.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+ }: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+ className,
+ ...props
+ }: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/dashboard/src/components/ui/multi-select.tsx b/dashboard/src/components/ui/multi-select.tsx
new file mode 100644
index 0000000..266eea7
--- /dev/null
+++ b/dashboard/src/components/ui/multi-select.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
+import { Command as CommandPrimitive } from 'cmdk';
+
+type MultiSelectItem = Record<'value' | 'label', string>;
+
+interface MultiSelectProps {
+ items: MultiSelectItem[];
+ placeholder?: string;
+}
+
+// Credits: https://github.com/mxkaske/mxkaske.dev/blob/main/components/craft/fancy-multi-select.tsx
+export function MultiSelect({ items, placeholder }: MultiSelectProps) {
+ const inputRef = React.useRef(null);
+ const [open, setOpen] = React.useState(false);
+ const [selected, setSelected] = React.useState([]);
+ const [inputValue, setInputValue] = React.useState('');
+
+ const handleUnselect = React.useCallback((item: MultiSelectItem) => {
+ setSelected((prev) => prev.filter((s) => s.value !== item.value));
+ }, []);
+
+ const handleKeyDown = React.useCallback(
+ (e: React.KeyboardEvent) => {
+ const input = inputRef.current;
+ if (input) {
+ if (e.key === 'Delete' || e.key === 'Backspace') {
+ if (input.value === '') {
+ setSelected((prev) => {
+ const newSelected = [...prev];
+ newSelected.pop();
+ return newSelected;
+ });
+ }
+ }
+ // This is not a default behaviour of the field
+ if (e.key === 'Escape') {
+ input.blur();
+ }
+ }
+ },
+ [],
+ );
+
+ const selectables = items.filter(
+ (item) => !selected.includes(item),
+ );
+
+ console.log(selectables, selected, inputValue);
+
+ return (
+
+
+
+ {selected.map((item) => {
+ return (
+
+ {item.label}
+
+
+ );
+ })}
+ {/* Avoid having the "Search" Icon */}
+ setOpen(false)}
+ onFocus={() => setOpen(true)}
+ placeholder={placeholder ?? 'Select an item...'}
+ className="ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+ />
+
+
+
+ {open && selectables.length > 0 ? (
+
+
+ {selectables.map((item) => {
+ return (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ onSelect={(value) => {
+ setInputValue('');
+ setSelected((prev) => [...prev, item]);
+ }}
+ className={'cursor-pointer'}
+ >
+ {item.label}
+
+ );
+ })}
+
+
+ ) : null}
+
+