add login dialog

Author: joshunrau

apps/playground/src/components/Header/ActionsDropdown/ActionsDropdown.tsx

@@ -6,6 +6,7 @@ import { EllipsisVerticalIcon } from 'lucide-react';
 import { useAppStore } from '@/store';
 
 import { DeleteInstrumentDialog } from './DeleteInstrumentDialog';
+import { LoginDialog } from './LoginDialog';
 import { RestoreDefaultsDialog } from './RestoreDefaultsDialog';
 import { UploadBundleDialog } from './UploadBundleDialog';
 import { UserSettingsDialog } from './UserSettingsDialog';
@@ -15,6 +16,7 @@ export const ActionsDropdown = () => {
   const [showDeleteInstrumentDialog, setShowDeleteInstrumentDialog] = useState(false);
   const [showRestoreDefaultsDialog, setShowRestoreDefaultsDialog] = useState(false);
   const [showUploadBundleDialog, setShowUploadBundleDialog] = useState(false);
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
 
   const selectedInstrument = useAppStore((store) => store.selectedInstrument);
 
@@ -37,6 +39,11 @@ export const ActionsDropdown = () => {
               <span>GitHub</span>
             </a>
           </DropdownMenu.Item>
+          <DropdownMenu.Item asChild onSelect={() => setShowLoginDialog(true)}>
+            <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
+              Login
+            </button>
+          </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowUploadBundleDialog(true)}>
             <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
               Upload Bundle
@@ -71,6 +78,7 @@ export const ActionsDropdown = () => {
       <DeleteInstrumentDialog isOpen={showDeleteInstrumentDialog} setIsOpen={setShowDeleteInstrumentDialog} />
       <RestoreDefaultsDialog isOpen={showRestoreDefaultsDialog} setIsOpen={setShowRestoreDefaultsDialog} />
       <UploadBundleDialog isOpen={showUploadBundleDialog} setIsOpen={setShowUploadBundleDialog} />
+      <LoginDialog isOpen={showLoginDialog} setIsOpen={setShowLoginDialog} />
     </React.Fragment>
   );
 };

apps/playground/src/components/Header/ActionsDropdown/LoginDialog.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable perfectionist/sort-objects */
+
+import { Dialog, Form } from '@douglasneuroinformatics/libui/components';
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { z } from 'zod/v4';
+
+import { useAppStore } from '@/store';
+
+type $LoginData = z.infer<typeof $LoginData>;
+const $LoginData = z.object({
+  apiBaseUrl: z.url(),
+  username: z.string().min(1),
+  password: z.string().min(1)
+});
+
+export type LoginDialogProps = {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+};
+
+export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
+  const apiBaseUrl = useAppStore((store) => store.settings.apiBaseUrl);
+  const updateSettings = useAppStore((store) => store.updateSettings);
+
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+
+  const handleSubmit = ({ apiBaseUrl }: $LoginData) => {
+    updateSettings({ apiBaseUrl });
+    addNotification({ type: 'success' });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Content onOpenAutoFocus={(event) => event.preventDefault()}>
+        <Dialog.Header>
+          <Dialog.Title>Login</Dialog.Title>
+          <Dialog.Description>
+            Login to your Open Data Capture instance. A special access token is used that grants permissions to create
+            instruments only. You must have permission to create instruments to use this functionality.
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body className="grid gap-4">
+          <Form
+            content={[
+              {
+                title: 'Instance Settings',
+                fields: {
+                  apiBaseUrl: {
+                    description: 'The base path for your Open Data Capture REST API.',
+                    kind: 'string',
+                    placeholder: 'e.g., https://demo.opendatacapture.org/api',
+                    label: 'API Base URL',
+                    variant: 'input'
+                  }
+                }
+              },
+              {
+                title: 'Login Credentials',
+                fields: {
+                  username: {
+                    kind: 'string',
+                    label: 'Username',
+                    variant: 'input'
+                  },
+                  password: {
+                    kind: 'string',
+                    label: 'Password',
+                    variant: 'password'
+                  }
+                }
+              }
+            ]}
+            initialValues={{ apiBaseUrl }}
+            validationSchema={$LoginData}
+            onSubmit={(data) => {
+              void handleSubmit(data);
+              setIsOpen(false);
+            }}
+          />
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog>
+  );
+};