From 0a3b8c2123578e238195ea721f512a4bf61859b4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 18 Nov 2020 10:02:27 +0000
Subject: [PATCH] Add new consent prompt to homeserver options as first step

This adds the new style consent text defaulting to matrix.org alongside the
older style. More work is still needed here to polish this and then remove the
older one.
---
 src/App.tsx                           |  3 +-
 src/components/HomeserverOptions.scss | 10 ++++
 src/components/HomeserverOptions.tsx  |  8 ++++
 src/pages/LinkRouter.tsx              | 67 +++++++++++++--------------
 4 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fe11e17..aedd578 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { useState, useEffect } from 'react';
 
+import GlobalContext from './contexts/GlobalContext';
 import SingleColumn from './layouts/SingleColumn';
 import CreateLinkTile from './components/CreateLinkTile';
 import MatrixTile from './components/MatrixTile';
@@ -24,8 +25,6 @@ import LinkRouter from './pages/LinkRouter';
 
 import './App.scss';
 
-import GlobalContext from './contexts/GlobalContext';
-
 /* eslint-disable no-restricted-globals */
 
 const App: React.FC = () => {
diff --git a/src/components/HomeserverOptions.scss b/src/components/HomeserverOptions.scss
index f0736c0..c4d0533 100644
--- a/src/components/HomeserverOptions.scss
+++ b/src/components/HomeserverOptions.scss
@@ -17,6 +17,16 @@ limitations under the License.
 @import '../color-scheme';
 
 .homeserverOptions {
+    .actions {
+        display: flex;
+        width: 100%;
+        margin-top: 2em;
+
+        > * {
+            flex: 1;
+        }
+    }
+
     display: grid;
     row-gap: 20px;
 
diff --git a/src/components/HomeserverOptions.tsx b/src/components/HomeserverOptions.tsx
index 750b1c0..452a2e3 100644
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@@ -89,6 +89,14 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
 
     return (
         <Tile className="homeserverOptions">
+            <div>
+                View this link using matrix.org to preview content, or you can
+                use another server or continue without a preview.
+            </div>
+            <div className="actions">
+                <StyledCheckbox>Ask every time</StyledCheckbox>
+                <Button>Continue</Button>
+            </div>
             <div className="homeserverOptionsDescription">
                 <div>
                     <h3>
diff --git a/src/pages/LinkRouter.tsx b/src/pages/LinkRouter.tsx
index cf3b4d6..6bd0581 100644
--- a/src/pages/LinkRouter.tsx
+++ b/src/pages/LinkRouter.tsx
@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext } from 'react';
 
+import HSContext, { HSOptions } from '../contexts/HSContext';
 import Tile from '../components/Tile';
 import LinkPreview from '../components/LinkPreview';
 import InvitingClientTile from '../components/InvitingClientTile';
 import { parseHash } from '../parser/parser';
 import { LinkKind } from '../parser/types';
+import HomeserverOptions from '../components/HomeserverOptions';
 
 /* eslint-disable no-restricted-globals */
 
@@ -31,42 +33,39 @@ interface IProps {
 const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
     // our room id's will be stored in the hash
     const parsedLink = parseHash(link);
+    const [hsState] = useContext(HSContext);
 
-    let feedback: JSX.Element;
-    let client: JSX.Element = <></>;
-    switch (parsedLink.kind) {
-        case LinkKind.ParseFailed:
-            feedback = (
-                <Tile>
-                    <p>
-                        That URL doesn't seem right. Links should be in the
-                        format:
-                    </p>
-                    <br />
-                    <p>
-                        {location.host}/#/{'<'}matrix-resourceidentifier{'>'}
-                    </p>
-                </Tile>
-            );
-            break;
-        default:
-            if (parsedLink.arguments.client) {
-                client = (
-                    <InvitingClientTile
-                        clientName={parsedLink.arguments.client}
-                    />
-                );
-            }
-
-            feedback = (
-                <>
-                    <LinkPreview link={parsedLink} />
-                    {client}
-                </>
-            );
+    if (parsedLink.kind === LinkKind.ParseFailed) {
+        return (
+            <Tile>
+                <p>
+                    That URL doesn't seem right. Links should be in the format:
+                </p>
+                <br />
+                <p>
+                    {location.host}/#/{'<'}matrix-resourceidentifier{'>'}
+                </p>
+            </Tile>
+        );
     }
 
-    return feedback;
+    if (hsState.option === HSOptions.Unset) {
+        return <HomeserverOptions link={parsedLink} />;
+    }
+
+    let client: JSX.Element = <></>;
+    if (parsedLink.arguments.client) {
+        client = (
+            <InvitingClientTile clientName={parsedLink.arguments.client} />
+        );
+    }
+
+    return (
+        <>
+            <LinkPreview link={parsedLink} />
+            {client}
+        </>
+    );
 };
 
 export default LinkRouter;