From 6c479eb83ef1e63c7a95881efa2641b69e7fd56d Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 22 Feb 2023 15:32:02 +0100
Subject: [PATCH] dbCheck

---
 src/components/invitation/Invitation.tsx | 198 +++++++++++++++--------
 src/components/invitation/style.css      | 117 ++++++++++++++
 2 files changed, 249 insertions(+), 66 deletions(-)

diff --git a/src/components/invitation/Invitation.tsx b/src/components/invitation/Invitation.tsx
index 212d752..7a782aa 100644
--- a/src/components/invitation/Invitation.tsx
+++ b/src/components/invitation/Invitation.tsx
@@ -1,6 +1,6 @@
 import { createForm } from '@felte/solid';
-import { Component, createEffect, Match, Show, Switch } from 'solid-js';
-import { TextField, Button } from '@kobalte/core';
+import { Component, createSignal, Match, Switch } from 'solid-js';
+import { TextField, Button, Dialog } from '@kobalte/core';
 
 import './style.css';
 import { createServerAction$ } from 'solid-start/server';
@@ -18,6 +18,10 @@ interface Props {
 const Invitation: Component<Props> = (props) => {
   const navigate = useNavigate();
 
+  const [openDialog, setOpenDialog] = createSignal(false);
+
+  const [status, setStatus] = createSignal<string>();
+
   const [saving, save] = createServerAction$(async (args: any) => {
     const { props, values } = args;
     console.log({
@@ -46,12 +50,19 @@ const Invitation: Component<Props> = (props) => {
       caller: 'Invitation / dbCheck',
       args,
     });
-    let baseDbInfo;
+    let baseDbInfoAuth;
     try {
       const baseDb = new PouchDb(cloneDeep(args));
-      baseDbInfo = await baseDb.info();
+      baseDbInfoAuth = await baseDb.info();
     } catch (error) {
-      baseDbInfo = error;
+      baseDbInfoAuth = { error };
+    }
+    let baseDbInfoAnon;
+    try {
+      const baseDb = new PouchDb(args.name);
+      baseDbInfoAnon = await baseDb.info();
+    } catch (error) {
+      baseDbInfoAnon = { error };
     }
     const name = `${args.name}/userdb-${toHex(args.auth.username)}`;
     let userDbInfo;
@@ -59,9 +70,16 @@ const Invitation: Component<Props> = (props) => {
       const userDb = new PouchDb({ ...args, name });
       userDbInfo = await userDb.info();
     } catch (error) {
-      userDbInfo = error;
+      userDbInfo = { error };
     }
-    return { baseDbInfo, userDbInfo, args, name };
+    let userDbInfoAnon;
+    try {
+      const userDb = new PouchDb(name);
+      userDbInfoAnon = await userDb.info();
+    } catch (error) {
+      userDbInfoAnon = { error };
+    }
+    return { baseDbInfoAuth, baseDbInfoAnon, userDbInfo, userDbInfoAnon };
   });
 
   const submitHandler = async (values: any, context: any) => {
@@ -106,6 +124,19 @@ const Invitation: Component<Props> = (props) => {
       data: data(),
       result,
     });
+    if (result.baseDbInfoAnon.error) {
+      setStatus('baseError');
+    } else if (!result.userDbInfo.error) {
+      setStatus('OK');
+    } else if (
+      result.userDbInfoAnon.error.reason ===
+      'You are not authorized to access this db.'
+    ) {
+      setStatus('passwordError');
+    } else {
+      setStatus('notFound');
+    }
+    setOpenDialog(true);
   };
 
   console.log({
@@ -114,65 +145,100 @@ const Invitation: Component<Props> = (props) => {
   });
 
   return (
-    <form use:form>
-      <TextField.Root>
-        <TextField.Label>Mail address</TextField.Label>
-        <TextField.Input
-          type='mail'
-          name='mail'
-          required={true}
-          placeholder='Email address'
-        />
-        <TextField.ErrorMessage>
-          Please provide a valid URL
-        </TextField.ErrorMessage>
-      </TextField.Root>
-      <TextField.Root>
-        <TextField.Label>Database</TextField.Label>
-        <TextField.Input
-          type='url'
-          name='database'
-          required={true}
-          placeholder='Database URL'
-        />
-        <TextField.ErrorMessage>
-          Please provide a valid URL
-        </TextField.ErrorMessage>
-      </TextField.Root>
-      <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>
-      <Switch>
-        <Match when={!!props.values}>
-          <Button.Root type='submit'>Save</Button.Root>
-          <Button.Root onclick={deleteHandler}>Delete</Button.Root>
-        </Match>
-        <Match when={!props.values}>
-          <Button.Root type='submit'>Create</Button.Root>
-        </Match>
-      </Switch>
-      <Button.Root onclick={dbCheckHandler}>DB check</Button.Root>
-      <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
-    </form>
+    <>
+      <form use:form>
+        <TextField.Root>
+          <TextField.Label>Mail address</TextField.Label>
+          <TextField.Input
+            type='mail'
+            name='mail'
+            required={true}
+            placeholder='Email address'
+          />
+          <TextField.ErrorMessage>
+            Please provide a valid URL
+          </TextField.ErrorMessage>
+        </TextField.Root>
+        <TextField.Root>
+          <TextField.Label>Database</TextField.Label>
+          <TextField.Input
+            type='url'
+            name='database'
+            required={true}
+            placeholder='Database URL'
+          />
+          <TextField.ErrorMessage>
+            Please provide a valid URL
+          </TextField.ErrorMessage>
+        </TextField.Root>
+        <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>
+        <Switch>
+          <Match when={!!props.values}>
+            <Button.Root type='submit'>Save</Button.Root>
+            <Button.Root onclick={deleteHandler}>Delete</Button.Root>
+          </Match>
+          <Match when={!props.values}>
+            <Button.Root type='submit'>Create</Button.Root>
+          </Match>
+        </Switch>
+        <Button.Root onclick={dbCheckHandler}>DB check</Button.Root>
+        <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
+      </form>
+      <Dialog.Root isOpen={openDialog()} onOpenChange={setOpenDialog}>
+        <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'>
+                  Database check
+                </Dialog.Title>
+                <Dialog.CloseButton class='dialog__close-button'>
+                  X
+                </Dialog.CloseButton>
+              </div>
+              <Dialog.Description class='dialog__description'>
+                <Switch>
+                  <Match when={status() === 'baseError'}>
+                    The database address seems to be wrong !!
+                  </Match>{' '}
+                  <Match when={status() === 'OK'}>
+                    The user is already existing.
+                  </Match>
+                  <Match when={status() === 'notFound'}>
+                    The user must be created.
+                  </Match>
+                  <Match when={status() === 'passwordError'}>
+                    The user seems to exist but the password is wrong.
+                  </Match>
+                </Switch>
+              </Dialog.Description>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
   );
 };
 
diff --git a/src/components/invitation/style.css b/src/components/invitation/style.css
index 921a8cc..bdd1dc4 100644
--- a/src/components/invitation/style.css
+++ b/src/components/invitation/style.css
@@ -18,3 +18,120 @@ label {
 form {
   text-align: left;
 }
+
+
+/* Dialog */
+
+.dialog__trigger {
+  appearance: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: auto;
+  outline: none;
+  border-radius: 6px;
+  padding: 0 16px;
+  background-color: hsl(200 98% 39%);
+  color: white;
+  font-size: 16px;
+  line-height: 0;
+  transition: 250ms background-color;
+}
+.dialog__trigger:hover {
+  background-color: hsl(201 96% 32%);
+}
+.dialog__trigger:focus-visible {
+  outline: 2px solid hsl(200 98% 39%);
+  outline-offset: 2px;
+}
+.dialog__trigger:active {
+  background-color: hsl(201 90% 27%);
+}
+.dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 0.2);
+  animation: overlayHide 250ms ease 100ms forwards;
+}
+.dialog__overlay[data-expanded] {
+  animation: overlayShow 250ms ease;
+}
+.dialog__positioner {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dialog__content {
+  z-index: 50;
+  max-width: min(calc(100vw - 16px), 500px);
+  border: 1px solid hsl(240 5% 84%);
+  border-radius: 6px;
+  padding: 16px;
+  background-color: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  animation: contentHide 300ms ease-in forwards;
+}
+.dialog__content[data-expanded] {
+  animation: contentShow 300ms ease-out;
+}
+.dialog__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.dialog__close-button {
+  height: 16px;
+  width: 16px;
+  color: hsl(240 5% 34%);
+}
+.dialog__title {
+  font-size: 20px;
+  font-weight: 500;
+  color: hsl(240 6% 10%);
+}
+.dialog__description {
+  font-size: 16px;
+  color: hsl(240 5% 26%);
+}
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes overlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}