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

Author: joepio

CONTRIBUTING.md

@@ -50,6 +50,7 @@ TL;DR Clone the repo and run `cargo run` from each folder (e.g. `cli` or `server
 - Visit your `localhost` in your locally running `atomic-data-browser` instance: (e.g. `http://localhost:5173/app/show?subject=http%3A%2F%2Flocalhost`)
 - use `cargo watch -- cargo run` to automatically recompile `atomic-server` when you update JS assets in `browser`
 - 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` and add `ATOMIC_SMTP_HOST=localhost` `ATOMIC_SMTP_PORT=1025` to your `.env`.
 
 ### IDE setup (VSCode)
 

browser/CHANGELOG.md

@@ -174,20 +174,33 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - 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: (success?: boolean) => void,
   /** Boolean indicating wether the dialog is currently open */
-  isOpen: boolean,
-];
+  isOpen: boolean;
+};
 
 export type UseDialogOptions<E extends HTMLElement> = {
   bindShow?: React.Dispatch<boolean>;

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

@@ -2,6 +2,7 @@ import { lighten } from 'polished';
 import { styled, css } from 'styled-components';
 
 import { FaExclamationTriangle } from 'react-icons/fa';
+import { Column } from './Row';
 
 export const errorLookStyle = css`
   color: ${props => props.theme.colors.alert};
@@ -25,18 +26,21 @@ export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
         <FaExclamationTriangle />
         Something went wrong
       </BiggerText>
-      <Pre>
-        <code>{error.message}</code>
+      <Column>
+        <CodeBlock>{error.message}</CodeBlock>
         {showTrace && (
           <>
-            <br />
-            <br />
-            <span>Stack trace:</span>
-            <br />
-            <code>{error.stack}</code>
+            Stack trace:
+            <CodeBlock
+              style={{
+                maxHeight: '10rem',
+              }}
+            >
+              {error.stack}
+            </CodeBlock>
           </>
         )}
-      </Pre>
+      </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 />;
+}