Admin username/password

src/components/invitation/Invitation.tsx

@@ -10,6 +10,7 @@ import { put } from '~/lib/db';
 import { useNavigate } from 'solid-start';
 import { toHex } from '~/lib/to-hex';
 import { cloneDeep } from 'lodash';
+import Password, { UsernamePassword } from '../password/Password';
 
 interface Props {
   values?: any;
@@ -19,6 +20,8 @@ const Invitation: Component<Props> = (props) => {
   const navigate = useNavigate();
 
   const [openDialog, setOpenDialog] = createSignal(false);
+  const [openUsernamePasswordDialog, setOpenUserNamePasswordDialog] =
+    createSignal(false);
 
   const [status, setStatus] = createSignal<string>();
 
@@ -145,6 +148,18 @@ const Invitation: Component<Props> = (props) => {
       props,
       data: data(),
     });
+    setOpenUserNamePasswordDialog(true);
+  };
+
+  const usernamePasswordHandler = async (
+    usernamePassword: UsernamePassword
+  ) => {
+    console.log({
+      caller: 'Invitation / usernamePasswordHandler',
+      props,
+      usernamePassword,
+    });
+    setOpenUserNamePasswordDialog(false);
   };
 
   console.log({
@@ -254,6 +269,12 @@ const Invitation: Component<Props> = (props) => {
           </div>
         </Dialog.Portal>
       </Dialog.Root>
+      <Password
+        open={openUsernamePasswordDialog}
+        setOpen={setOpenUserNamePasswordDialog}
+        url={data('database')}
+        usernamePassword={usernamePasswordHandler}
+      />
     </>
   );
 };

src/components/password/Password.tsx

@@ -0,0 +1,110 @@
+import { createForm } from '@felte/solid';
+import { Button, Dialog, TextField } from '@kobalte/core';
+import { cloneDeep } from 'lodash';
+import { Component, createEffect, createSignal } from 'solid-js';
+
+export interface UsernamePassword {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  url: string;
+  usernamePassword: (params: UsernamePassword) => void;
+  open: () => boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const [passwords, setPasswords] = createSignal(
+  new Map<string, UsernamePassword>()
+);
+
+const Password: Component<Props> = (props) => {
+  const { url, usernamePassword, open, setOpen } = props;
+
+  const submitHandler = async (values: any, context: any) => {
+    console.log({
+      caller: 'Password / submitHandler',
+      props,
+      values,
+      context,
+    });
+    const unPw = { username: values.username, password: values.password };
+    const newPasswords = cloneDeep(passwords());
+    newPasswords.set(url, unPw);
+    setPasswords(newPasswords);
+
+    usernamePassword(unPw);
+  };
+
+  let { form, data } = createForm({
+    onSubmit: submitHandler,
+    initialValues: passwords().get(url),
+  });
+
+  createEffect(() => {
+    const unPw = passwords().get(url);
+    console.log({
+      caller: 'Password / createEffect',
+      props,
+      passwords: passwords(),
+      unPw,
+    });
+    const newForm = createForm({
+      onSubmit: submitHandler,
+      initialValues: passwords().get(url),
+    });
+    form = newForm.form;
+    data = newForm.data;
+  });
+
+  return (
+    <Dialog.Root isOpen={open()} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay class='dialog__overlay' />
+        <div class='dialog__positioner'>
+          <Dialog.Content class='dialog__content'>
+            <div class='dialog__header'>
+              <Dialog.Title class='dialog__title'>
+                Admin user name and password
+              </Dialog.Title>
+              <Dialog.CloseButton class='dialog__close-button'>
+                X
+              </Dialog.CloseButton>
+            </div>
+            <Dialog.Description class='dialog__description'>
+              <div>Please enter the admin and password for {url}</div>
+              <form use:form>
+                <TextField.Root>
+                  <TextField.Label>User name</TextField.Label>
+                  <TextField.Input
+                    type='text'
+                    name='username'
+                    required={true}
+                    placeholder='user name'
+                  />
+                </TextField.Root>
+                <TextField.Root>
+                  <TextField.Label>Password</TextField.Label>
+                  <TextField.Input
+                    type='text'
+                    name='password'
+                    required={true}
+                    placeholder='Password'
+                    autocomplete='off'
+                  />
+                  <TextField.ErrorMessage>
+                    Please provide a valid password
+                  </TextField.ErrorMessage>
+                </TextField.Root>
+                <Button.Root type='submit'>Save and create</Button.Root>
+              </form>
+            </Dialog.Description>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default Password;

src/components/password/index.ts

@@ -0,0 +1 @@
+export { default, UsernamePassword } from './Password';