Make RegisterSignIn work

Author: joepio

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "vadimcn.vscode-lldb",
-    "rust-lang.rust-analyzer",
-    "serayuzgur.crates"
+    "rust-lang.rust-analyzer"
   ]
 }

browser/data-browser/src/components/ConfirmationDialog.tsx

@@ -33,7 +33,11 @@ export function ConfirmationDialog({
   bindShow,
   theme = ConfirmationDialogTheme.Default,
 }: React.PropsWithChildren<ConfirmationDialogProps>): JSX.Element {
-  const [dialogProps, showDialog, hideDialog] = useDialog({
+  const {
+    dialogProps,
+    show: showDialog,
+    close: hideDialog,
+  } = useDialog({
     bindShow,
     onCancel,
     onSuccess: onConfirm,

browser/data-browser/src/components/Dialog/index.tsx

@@ -24,7 +24,8 @@ import { useDialog } from './useDialog';
 import { useControlLock } from '../../hooks/useControlLock';
 
 export interface InternalDialogProps {
-  show: boolean;
+  /** Is the Dialog visible */
+  isVisible: boolean;
   onClose: (success: boolean) => void;
   onClosed: () => void;
   width?: CSS.Property.Width;
@@ -86,7 +87,7 @@ export function Dialog(props: React.PropsWithChildren<InternalDialogProps>) {
 
 const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
   children,
-  show,
+  isVisible,
   width,
   onClose,
   onClosed,
@@ -95,7 +96,7 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
   const innerDialogRef = useRef<HTMLDivElement>(null);
   const { hasOpenInnerPopup } = useDialogTreeContext();
 
-  useControlLock(show);
+  useControlLock(isVisible);
 
   const cancelDialog = useCallback(() => {
     onClose(false);
@@ -121,22 +122,26 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
     () => {
       cancelDialog();
     },
-    { enabled: show && !hasOpenInnerPopup },
+    { enabled: isVisible && !hasOpenInnerPopup },
   );
 
   // When closing the `data-closing` attribute must be set before rendering so the animation has started when the regular useEffect is called.
   useLayoutEffect(() => {
-    if (!show && dialogRef.current && dialogRef.current.hasAttribute('open')) {
+    if (
+      !isVisible &&
+      dialogRef.current &&
+      dialogRef.current.hasAttribute('open')
+    ) {
       dialogRef.current.setAttribute('data-closing', 'true');
     }
-  }, [show]);
+  }, [isVisible]);
 
   useEffect(() => {
     if (!dialogRef.current) {
       return;
     }
 
-    if (show) {
+    if (isVisible) {
       if (!dialogRef.current.hasAttribute('open'))
         // @ts-ignore
         dialogRef.current.showModal();
@@ -151,7 +156,7 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
         onClosed();
       }, ANIM_MS);
     }
-  }, [show, onClosed]);
+  }, [isVisible, onClosed]);
 
   return (
     <StyledDialog

browser/data-browser/src/components/Dialog/useDialog.tsx

@@ -7,8 +7,8 @@ export type UseDialogReturnType = {
   /** Function to show the dialog */
   show: () => void;
   /** Function to close the dialog */
-  close: (success?: boolean) => void,
-  /** Boolean indicating wether the dialog is currently open */
+  close: (success?: boolean) => void;
+  /** Whether the dialog is currently open */
   isOpen: boolean;
 };
 
@@ -25,26 +25,27 @@ export function useDialog<E extends HTMLElement>(
 ): UseDialogReturnType {
   const { bindShow, onCancel, onSuccess, triggerRef } = options ?? {};
 
-  const [showDialog, setShowDialog] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const [wasSuccess, setWasSuccess] = useState(false);
 
   const show = useCallback(() => {
     document.body.setAttribute('inert', '');
-    setShowDialog(true);
-    setVisible(true);
+    setIsVisible(true);
+    setIsOpen(true);
     bindShow?.(true);
   }, []);
 
   const close = useCallback((success = false) => {
     setWasSuccess(success);
-    setShowDialog(false);
+    setIsVisible(false);
+    // The 'isOpen' will be set to false by handleClosed after the animation
   }, []);
 
   const handleClosed = useCallback(() => {
     document.body.removeAttribute('inert');
     bindShow?.(false);
-    setVisible(false);
+    setIsOpen(false);
 
     if (wasSuccess) {
       onSuccess?.();
@@ -60,12 +61,12 @@ export function useDialog<E extends HTMLElement>(
   /** Props that should be passed to a {@link Dialog} component. */
   const dialogProps = useMemo<InternalDialogProps>(
     () => ({
-      show: showDialog,
+      isVisible,
       onClose: close,
       onClosed: handleClosed,
     }),
-    [showDialog, close, handleClosed],
+    [isVisible, close, handleClosed],
   );
 
-  return [dialogProps, show, close, visible];
+  return { dialogProps, show, close, isOpen };
 }

browser/data-browser/src/components/ParentPicker/ParentPickerDialog.tsx

@@ -29,7 +29,7 @@ export function ParentPickerDialog({
 }: ParentPickerDialogProps): React.JSX.Element {
   const [selected, setSelected] = useState<string>();
 
-  const [dialogProps, show, close, isOpen] = useDialog({
+  const { dialogProps, show, close, isOpen } = useDialog({
     onCancel,
     bindShow: onOpenChange,
   });

browser/data-browser/src/components/RegisterSignIn.tsx

@@ -5,8 +5,7 @@ import {
   DialogTitle,
   useDialog,
 } from './Dialog';
-import React, { FormEvent, useCallback, useEffect, useState } from 'react';
-import { useSettings } from '../helpers/AppSettings';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
 import { Button } from './Button';
 import {
   addPublicKey,
@@ -22,16 +21,15 @@ import { Row } from './Row';
 import { ErrorLook } from './ErrorLook';
 import { SettingsAgent } from './SettingsAgent';
 
-interface RegisterSignInProps {
-  // URL where to send the user to after successful registration
-  redirect?: string;
-}
-
 /** What is currently showing */
 enum PageStateOpts {
+  /** Start state, select register or sign in */
   none,
+  /** Enter Secret*/
   signIn,
+  /** Register new Email address */
   register,
+  /** Reset existing email, send Secret reset email link */
   reset,
   mailSentRegistration,
   mailSentAddPubkey,
@@ -41,22 +39,17 @@ enum PageStateOpts {
  * Two buttons: Register / Sign in.
  * Opens a Dialog / Modal with the appropriate form.
  */
-export function RegisterSignIn({
-  children,
-}: React.PropsWithChildren<RegisterSignInProps>): JSX.Element {
+export function RegisterSignIn(): JSX.Element {
   const { dialogProps, show, close } = useDialog();
-  const { agent } = useSettings();
   const [pageState, setPageState] = useState<PageStateOpts>(PageStateOpts.none);
   const [email, setEmail] = useState('');
   const { emailRegister } = useServerSupports();
 
-  if (agent) {
-    return <>{children}</>;
-  } else if (!emailRegister) {
+  if (!emailRegister) {
     return (
       <>
         <SettingsAgent />
-        <ErrorLook>No e-mail support on this server...</ErrorLook>
+        <ErrorLook>No email support on this server...</ErrorLook>
       </>
     );
   }
@@ -82,7 +75,7 @@ export function RegisterSignIn({
           Sign In
         </Button>
       </Row>
-      {/* <Dialog {...dialogProps}>
+      <Dialog {...dialogProps}>
         {pageState === PageStateOpts.register && (
           <Register
             setPageState={setPageState}
@@ -111,10 +104,10 @@ export function RegisterSignIn({
           <MailSentConfirm
             email={email}
             close={close}
-            message={'Click that link to create a new PassPhrase.'}
+            message={'Click that link to create a new Secret.'}
           />
         )}
-      </Dialog> */}
+      </Dialog>
     </>
   );
 }
@@ -135,7 +128,7 @@ function Reset({ email, setEmail, setPageState }) {
   return (
     <>
       <DialogTitle>
-        <h1>Reset your PassKey</h1>
+        <h1>Reset your Secret</h1>
       </DialogTitle>
       <DialogContent>
         <p>
@@ -145,7 +138,7 @@ function Reset({ email, setEmail, setPageState }) {
         </p>
         <EmailField
           email={email}
-          setEmail={(e: any) => {
+          setEmail={(e: unknown) => {
             setErr(undefined);
             setEmail(e);
           }}
@@ -277,7 +270,7 @@ function SignIn({ setPageState }) {
           Register
         </Button>
         <Button subtle onClick={() => setPageState(PageStateOpts.reset)}>
-          I lost my passphrase
+          I lost my Secret
         </Button>
       </DialogActions>
     </>

browser/data-browser/src/components/SettingsAgent.tsx

@@ -108,9 +108,9 @@ export const SettingsAgent: React.FunctionComponent = () => {
   return (
     <form>
       <Field
-        label={agent ? 'Passphrase' : 'Enter your Passphrase'}
+        label={agent ? 'Secret' : 'Enter your Secret'}
         helper={
-          "The Agent Passphrase is a secret, long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
+          "The Secret is a long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
         }
         error={error}
       >
@@ -124,7 +124,7 @@ export const SettingsAgent: React.FunctionComponent = () => {
             id='current-password'
             autoComplete='current-password'
             spellCheck='false'
-            placeholder='Paste your Passphrase'
+            placeholder='Paste your Secret'
           />
           <ButtonInput
             type='button'

browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx

@@ -34,7 +34,11 @@ export function FilePickerDialog({
   noUpload = false,
 }: FilePickerProps): React.JSX.Element {
   const { drive } = useSettings();
-  const [dialogProps, showDialog, closeDialog] = useDialog({
+  const {
+    dialogProps,
+    show: showDialog,
+    close: closeDialog,
+  } = useDialog({
     bindShow: onShowChange,
   });
 

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewArticleDialog.tsx

@@ -44,7 +44,10 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
     onClose();
   }, [name, createResourceAndNavigate, onClose, parent]);
 
-  const [dialogProps, show, hide] = useDialog({ onSuccess, onCancel: onClose });
+  const { dialogProps, show, close } = useDialog({
+    onSuccess,
+    onCancel: onClose,
+  });
 
   const onNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
@@ -69,7 +72,7 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
         <form
           onSubmit={(e: FormEvent) => {
             e.preventDefault();
-            hide(true);
+            close(true);
           }}
         >
           <Field required label='Title'>
@@ -89,10 +92,10 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
         </form>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => hide(false)} subtle>
+        <Button onClick={() => close(false)} subtle>
           Cancel
         </Button>
-        <Button onClick={() => hide(true)} disabled={!valid}>
+        <Button onClick={() => close(true)} disabled={!valid}>
           Create
         </Button>
       </DialogActions>

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewCollectionDialog.tsx

@@ -22,7 +22,7 @@ export const NewCollectionDialog: FC<CustomResourceDialogProps> = ({
   const [valueFilter, setValue] = useState<string | undefined>();
   const [propertyFilter, setProperty] = useState<string | undefined>();
 
-  const [dialogProps, show, hide] = useDialog({ onCancel: onClose });
+  const { dialogProps, show, close } = useDialog({ onCancel: onClose });
 
   const createResourceAndNavigate = useCreateAndNavigate();
 
@@ -91,7 +91,7 @@ export const NewCollectionDialog: FC<CustomResourceDialogProps> = ({
         </form>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => hide(false)} subtle>
+        <Button onClick={() => close(false)} subtle>
           Cancel
         </Button>
         <Button onClick={onDone} disabled={!propertyFilter && !valueFilter}>