Build out a simple login form for the explorer so it can be deployed

explorer/package.json

@@ -11,19 +11,23 @@
   "private": true,
   "dependencies": {
     "@codemirror/language": "6.0.0",
+    "@emotion/react": "^11.11.1",
+    "@guardian/source-foundations": "^14.1.4",
+    "@guardian/source-react-components": "^22.0.2",
     "graphiql": "^2.4.7",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-is": "^18.2.0"
+    "react-is": "^18.2.0",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
+    "browserify-sign": "^4.2.2",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
-    "browserify-sign": "^4.2.2",
     "css-loader": "^6.8.1",
     "html-webpack-plugin": "^5.5.3",
     "process": "^0.11.10",

explorer/src/LoginForm.tsx

@@ -0,0 +1,103 @@
+import React, {useEffect, useMemo, useState} from "react";
+import {GraphiQL} from "graphiql";
+import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit';
+import {css} from "@emotion/react";
+import 'graphiql/graphiql.css';
+import {Button, TextInput} from "@guardian/source-react-components";
+
+const loginContainer = css`
+    margin: auto;
+    width: fit-content;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+`;
+
+const loginElement = css`
+    align-self: center;
+`
+const inputStyle = css`
+    max-width: 800px;
+    width: 800px;
+`;
+
+const buttonContainer = css`
+    display: flex;
+    margin-top: 1em;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-evenly;
+`;
+
+export const LoginForm:React.FC = () => {
+    const defaultBaseUrl = localStorage.getItem("CapiGQLBase") ?? "https://";
+    const defaultApiKey = localStorage.getItem("CapiGQLKey") ?? "";
+    const [haveCachedLogin, setHaveCachedLogin] = useState(!!(localStorage.getItem("CapiGQLBase") && localStorage.getItem("CapiGQLKey")));
+
+    const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
+    const [apiKey, setApiKey] = useState(defaultApiKey);
+    const [readyToGo, setReadyToGo] = useState(false);
+    const [urlIsValid, setUrlIsValid] = useState(false);
+    const urlValidator = /^https?:\/\/[\w-:.]+$/;
+
+    useEffect(() => {
+        setUrlIsValid(urlValidator.test(baseUrl));
+    }, [baseUrl]);
+
+    const clearCache = () => {
+        localStorage.removeItem("CapiGQLBase");
+        localStorage.removeItem("CapiGQLKey");
+        setBaseUrl("https://");
+        setApiKey("");
+        setHaveCachedLogin(false);
+    }
+
+    const fetcher = useMemo<Fetcher|null>(()=>{
+        if(readyToGo) {
+            localStorage.setItem("CapiGQLBase", baseUrl);
+            localStorage.setItem("CapiGQLKey", apiKey);
+
+            return createGraphiQLFetcher({url: `${baseUrl}/query`, headers: {'X-Api-Key': apiKey}});
+        } else {
+            return null;
+        }
+    }, [readyToGo]);
+
+
+    return fetcher && readyToGo ?
+        <GraphiQL fetcher={fetcher} /> :
+        <div css={loginContainer}>
+            <div css={loginElement}>
+                <h1>Please log in</h1>
+            </div>
+            <div css={loginElement}>
+            <TextInput label="CAPI GraphQL base URL"
+                       css={inputStyle}
+                       value={baseUrl}
+                       error={urlIsValid ? undefined : "Please input only a base URL with no trailing slash, i.e. https://my.server.name"}
+                       onChange={(evt)=>setBaseUrl(evt.target.value)}/>
+            </div>
+            <div css={loginElement}>
+            <TextInput label="API key"
+                       css={inputStyle}
+                       value={apiKey}
+                       type="password"
+                       onChange={(evt)=>setApiKey(evt.target.value)}
+                       />
+            </div>
+                <div css={buttonContainer}>
+                    <div>
+                    <Button disabled={!urlIsValid || apiKey==""}
+                            onClick={()=>setReadyToGo(true)}>
+                        Connect
+                    </Button>
+                    </div>
+                    <div>
+                    <Button disabled={!haveCachedLogin}
+                            priority="secondary"
+                            onClick={clearCache}>
+                        Clear</Button>
+                    </div>
+                </div>
+        </div>
+}

explorer/src/main.tsx

@@ -1,17 +1,13 @@
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { GraphiQL } from 'graphiql';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import 'graphiql/graphiql.css';
-
-const fetcher = createGraphiQLFetcher({ url: "/query", headers: {'X-Consumer-Username': ":internal"} });
+import {LoginForm} from "./LoginForm";
 
 const rootElem = document.createElement('div');
 rootElem.setAttribute("style","height: 100vh");
 
 document.body.append(rootElem)
 ReactDOM.render(
-    <GraphiQL fetcher={fetcher} />,
+    <LoginForm />,
     rootElem,
 );

explorer/tsconfig.json

@@ -2,13 +2,14 @@
   "compilerOptions": {
     "allowJs": true,
     "esModuleInterop": true,
-    "jsx": "react",
     "module": "ES2015",
     "moduleResolution": "node",
     "sourceMap": true,
     "strict": true,
     "isolatedModules": true,
-    "target": "ES2016"
+    "target": "ES2016",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react"
   },
   "include": ["./src/", "__tests__", "types.d.ts"],
   "exclude": ["node_modules"]