Add register form + email confirm #640 #544 #489 #276

Author: joepio

CONTRIBUTE.md

@@ -47,7 +47,7 @@ Clone the repo and run `cargo run` from each folder (e.g. `cli` or `server`).
 - Go to `browser` and run `pnpm dev` to start the browsre
 - Visit your `localhost` in your locally running `atomic-data-browser` instance: (e.g. `http://localhost:8080/app/show?subject=http%3A%2F%2Flocalhost`)
 - use `cargo watch -- cargo run --bin atomic-server -- --env-file server/.env` to automatically recompile `atomic-server` when you update code or JS assets.
-- If you want to debug emails: `brew install mailhog` => `mailhog` => `http://localhost:8025`
+- If you want to debug emails: `brew install mailhog` => `mailhog` => `http://localhost:8025` and add `ATOMIC_SMTP_HOST=localhost` `ATOMIC_SMTP_PORT=1025` to your `.env`.
 
 ## Improve local compilation speed
 

browser/CHANGELOG.md

@@ -19,20 +19,33 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add `store.getResourceAncestry` method, which returns the ancestry of a resource, including the resource itself.
 - Add `resource.title` property, which returns the name of a resource, or the first property that is can be used to name the resource.
 - `store.createSubject` now accepts a `parent` argument, which allows creating nested subjects.
+- Add `store.getServerSupports` to know which features a Server supports
+
+### @tomic/react
+
+- Add `useServerSupports` hook to see supported features of the server
 
 ## v0.35.0
 
 ### @tomic/browser
 
+- Let users register using e-mail address, improve sign-up UX.
+- Add `Store.parseMetaTags` to load JSON-AD objects stored in the DOM. Speeds up initial page load by allowing server to set JSON-AD objects in the initial HTML response.
 - Move static assets around, align build with server and fix PWA #292
 - Add `useChildren` hook and `Store.getChildren` method
 - Add new file preview UI for images, audio, text and PDF files.
 - Add new file preview types to the folder grid view.
 - Fix Dialogue form #308
 - Refactor search, escape query strings for Tantivy
 - Add `import` context menu, allows importing anywhere
+- Let users register using e-mail address, improve sign-up UX.
 
 ### @tomic/react
+- `store.createSubject` allows creating nested paths
+- `store.createSubject` allows creating nested paths
+- Add `useChildren` hook and `Store.getChildren` method
+- Add `Store.postToServer` method, add `endpoints`, `import_json_ad_string`
+- Add `store.preloadClassesAndProperties` and remove `urls.properties.getAll` and `urls.classes.getAll`. This enables using `atomic-data-browser` without relying on `atomicdata.dev` being available.
 
 - Add more options to `useSearch`
 

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

@@ -7,9 +7,11 @@ import { Button } from './Button';
 interface CodeBlockProps {
   content?: string;
   loading?: boolean;
+  wrapContent?: boolean;
 }
 
-export function CodeBlock({ content, loading }: CodeBlockProps) {
+/** Codeblock with copy feature */
+export function CodeBlock({ content, loading, wrapContent }: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState<string | undefined>(undefined);
 
   function copyToClipboard() {
@@ -19,7 +21,7 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   }
 
   return (
-    <CodeBlockStyled data-code-content={content}>
+    <CodeBlockStyled data-code-content={content} wrapContent={wrapContent}>
       {loading ? (
         'loading...'
       ) : (
@@ -46,7 +48,12 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   );
 }
 
-export const CodeBlockStyled = styled.pre`
+interface Props {
+  /** Renders all in a single line */
+  wrapContent?: boolean;
+}
+
+export const CodeBlockStyled = styled.pre<Props>`
   position: relative;
   background-color: ${p => p.theme.colors.bg1};
   border-radius: ${p => p.theme.radius};
@@ -55,4 +62,6 @@ export const CodeBlockStyled = styled.pre`
   font-family: monospace;
   width: 100%;
   overflow-x: auto;
+  word-wrap: ${p => (p.wrapContent ? 'break-word' : 'initial')};
+  white-space: ${p => (p.wrapContent ? 'pre-wrap' : 'pre')};
 `;

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

@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 import { InternalDialogProps } from './index';
 
-export type UseDialogReturnType = [
+export type UseDialogReturnType = {
   /** Props meant to pass to a {@link Dialog} component */
-  dialogProps: InternalDialogProps,
+  dialogProps: InternalDialogProps;
   /** Function to show the dialog */
-  show: () => void,
+  show: () => void;
   /** Function to close the dialog */
-  close: () => void,
+  close: () => void;
   /** Boolean indicating wether the dialog is currently open */
-  isOpen: boolean,
-];
+  isOpen: boolean;
+};
 
 /** Sets up state, and functions to use with a {@link Dialog} */
 export const useDialog = (): UseDialogReturnType => {
@@ -40,5 +40,5 @@ export const useDialog = (): UseDialogReturnType => {
     [showDialog, close, handleClosed],
   );
 
-  return [dialogProps, show, close, visible];
+  return { dialogProps, show, close, isOpen: visible };
 };

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

@@ -2,6 +2,7 @@ import { lighten } from 'polished';
 import styled from 'styled-components';
 import React from 'react';
 import { FaExclamationTriangle } from 'react-icons/fa';
+import { Column } from './Row';
 
 export const ErrorLook = styled.span`
   color: ${props => props.theme.colors.alert};
@@ -21,13 +22,21 @@ export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
         <FaExclamationTriangle />
         Something went wrong
       </BiggerText>
-      <CodeBlock>{error.message}</CodeBlock>
-      {showTrace && (
-        <>
-          <span>Stack trace:</span>
-          <CodeBlock>{error.stack}</CodeBlock>
-        </>
-      )}
+      <Column>
+        <CodeBlock>{error.message}</CodeBlock>
+        {showTrace && (
+          <>
+            Stack trace:
+            <CodeBlock
+              style={{
+                maxHeight: '10rem',
+              }}
+            >
+              {error.stack}
+            </CodeBlock>
+          </>
+        )}
+      </Column>
     </ErrorLookBig>
   );
 }

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSettings } from '../helpers/AppSettings';
+import { RegisterSignIn } from './RegisterSignIn';
+
+/**
+ * The Guard can be wrapped around a Component that depends on a user being logged in.
+ * If the user is not logged in, it will show a button to sign up / sign in.
+ * Show to users after a new Agent has been created.
+ * Instructs them to save their secret somewhere safe
+ */
+export function Guard({ children }: React.PropsWithChildren<any>): JSX.Element {
+  const { agent } = useSettings();
+
+  if (agent) {
+    return <>{children}</>;
+  } else return <RegisterSignIn />;
+}

browser/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx

@@ -36,7 +36,7 @@ export function NewBookmarkButton({
 
   const [url, setUrl] = useState('');
 
-  const [dialogProps, show, hide] = useDialog();
+  const { dialogProps, show, close } = useDialog();
 
   const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
 
@@ -86,7 +86,7 @@ export function NewBookmarkButton({
           </form>
         </DialogContent>
         <DialogActions>
-          <Button onClick={hide} subtle>
+          <Button onClick={close} subtle>
             Cancel
           </Button>
           <Button onClick={onDone} disabled={url.trim() === ''}>

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

@@ -67,7 +67,7 @@ const ParentWrapper = styled.nav`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-
+  overflow-y: hidden;
   view-transition-name: breadcrumb-bar;
 `;
 
@@ -115,6 +115,7 @@ const BreadCrumbBase = css`
   font-family: ${props => props.theme.fontFamily};
   padding: 0.1rem 0.5rem;
   color: ${p => p.theme.colors.textLight};
+  white-space: nowrap;
 `;
 
 const BreadCrumbCurrent = styled.div`