From ec53c9700fc56ce6629dffd1a8ee3f8e28ec08ae Mon Sep 17 00:00:00 2001
From: Daniele Guido <1181642+danieleguido@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:34:25 +0100
Subject: [PATCH] Fix termsOfUse acceptance before getting the token

---
 src/components/TermsOfUseModal.tsx |  6 +++
 src/components/TokenWrapper.tsx    | 67 ++++++++++++++++++------------
 2 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/components/TermsOfUseModal.tsx b/src/components/TermsOfUseModal.tsx
index 5647605..48efcc2 100644
--- a/src/components/TermsOfUseModal.tsx
+++ b/src/components/TermsOfUseModal.tsx
@@ -99,6 +99,12 @@ const TermsOfUseModal: React.FC<{
     [wsStatus, token],
   )
 
+  useEffect(() => {
+    // if this is just a login, just close it.
+    if (acceptedTermsDate && view === BrowserViewTermsOfUse) {
+      setView(null)
+    }
+  }, [acceptedTermsDate])
   useEffect(() => {
     if (!enableAcceptTermsButton && isIntersecting) {
       setEnableAcceptTermsButton(true)
diff --git a/src/components/TokenWrapper.tsx b/src/components/TokenWrapper.tsx
index 2e78fd6..6eead60 100644
--- a/src/components/TokenWrapper.tsx
+++ b/src/components/TokenWrapper.tsx
@@ -73,8 +73,7 @@ const TokenWrapper: React.FC<{ delay?: number }> = ({ delay = 2000 }) => {
     <Container>
       <h1>
         {status === "idle" && !isBusy && "Generate your API token"}
-        {isBusy && "Generating your API token..."}
-        {status === "pending" && " Almost there..."}
+        {(isBusy || status === "pending") && "Generating your API token..."}
         {status === "error" &&
           errorIsFailure &&
           !isBusy &&
@@ -82,19 +81,6 @@ const TokenWrapper: React.FC<{ delay?: number }> = ({ delay = 2000 }) => {
         {status === "success" && !isBusy && "Your Api token"}
       </h1>
 
-      {showLoginForm && (
-        <section className="my-4 d-flex flex-column justify-content-center">
-          <h2 className="mx-auto ">Please login to get your Api Token</h2>
-          <button
-            type="submit"
-            className="btn btn-primary mx-auto d-flex justify-content-center px-5"
-            onClick={() => setView(BrowserViewLogin)}
-          >
-            Log in or Register
-          </button>
-        </section>
-      )}
-
       {errorIsFailure && (
         <Alert
           type="error"
@@ -110,28 +96,55 @@ const TokenWrapper: React.FC<{ delay?: number }> = ({ delay = 2000 }) => {
         value=""
       >
         <div className="ms-3">
-          API access is always subject to the&nbsp;
-          <button
-            className="btn btn-link d-inline-block"
-            onClick={() => {
-              setView(BrowserViewTermsOfUse)
-            }}
-          >
-            Terms of use
-          </button>
-          .{" "}
-          {acceptTermsDate !== null && (
+          {acceptTermsDate !== null ? (
             <p className="m-0">
-              You accepted the Terms of Use{" "}
+              API access is always subject to the&nbsp;
+              <button
+                className="btn btn-link d-inline-block"
+                onClick={() => {
+                  setView(BrowserViewTermsOfUse)
+                }}
+              >
+                Terms of use
+              </button>
+              . You accepted the Terms of Use{" "}
               <b>
                 {DateTime.fromISO(acceptTermsDate)
                   .setLocale("en-GB")
                   .toLocaleString(DateTime.DATETIME_FULL)}
               </b>
             </p>
+          ) : (
+            <p className="m-0">
+              You have not accepted our <b>Terms of Use</b> yet. Please read the{" "}
+              <b>entire</b> terms of use document carefully and accept it before
+              using the token.
+            </p>
           )}
         </div>
       </Alert>
+      {acceptTermsDate === null && (
+        <button
+          className="btn btn-secondary mt-3 mx-auto"
+          onClick={() => {
+            setView(BrowserViewTermsOfUse)
+          }}
+        >
+          Read and accept the Terms of use to generate the token
+        </button>
+      )}
+      {showLoginForm && (
+        <section className="my-4 d-flex flex-column justify-content-center">
+          <h2 className="mx-auto ">Please login to get your Api Token</h2>
+          <button
+            type="submit"
+            className="btn btn-secondary mx-auto d-flex justify-content-center px-5"
+            onClick={() => setView(BrowserViewLogin)}
+          >
+            Log in or Register
+          </button>
+        </section>
+      )}
       {isBusy && (
         <div className="spinner-border text-dark" role="status">
           <span className="visually-hidden">Loading...</span>