-
+
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 65bc799..262da57 100644
--- a/dashboard/src/app/globals.css
+++ b/dashboard/src/app/globals.css
@@ -75,15 +75,4 @@
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
deleted file mode 100644
index 0ca84b6..0000000
--- a/dashboard/src/components/forms/client-form.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-'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 22ccc98..3c69472 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
deleted file mode 100644
index f485776..0000000
--- a/dashboard/src/components/ui/command.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'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
deleted file mode 100644
index c7b4160..0000000
--- a/dashboard/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'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
deleted file mode 100644
index 266eea7..0000000
--- a/dashboard/src/components/ui/multi-select.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'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}
-
-