From 7abcfcc579e9a040fff9cbb97a80479790bb1a44 Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Fri, 14 Mar 2025 09:08:40 +0100
Subject: [PATCH] Add 'having issues' help text to login after 10 seconds

---
 frontend/src/pages/Login.tsx | 34 ++++++++++++++++++++++++++++++++++
 frontend/src/style.css       |  4 ++++
 2 files changed, 38 insertions(+)

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 9caf27ee..1986cefd 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -15,6 +15,7 @@ const Login = () => {
   const [password, setPassword] = useState('');
   const [saveLogin, setSaveLogin] = useState(false);
   const [waitingForBackend, setWaitingForBackend] = useState(false);
+  const [waitedCount, setWaitedCount] = useState(0);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const handleSubmit = async (event: { preventDefault: () => void }) => {
@@ -40,6 +41,8 @@ const Login = () => {
   };
 
   useEffect(() => {
+    let retryCount = 0;
+
     const backendCheckInterval = setInterval(async () => {
       try {
         const auth = await loadAuth();
@@ -59,6 +62,8 @@ const Login = () => {
         }
       } catch (error) {
         console.log('Checking backend availability: ', error);
+        retryCount += 1;
+        setWaitedCount(retryCount);
         setWaitingForBackend(true);
       }
     }, 1000);
@@ -137,6 +142,35 @@ const Login = () => {
 
           {!waitingForBackend && <Button label="Login" type="submit" />}
         </form>
+
+        {waitedCount > 10 && (
+          <div className="info-box">
+            <div className="info-box-item">
+              <h2>Having issues?</h2>
+
+              <div className="help-text left-align">
+                <p>Please verify that you setup your environment correctly:</p>
+                <ul>
+                  <li
+                    onClick={() => {
+                      navigator.clipboard.writeText(`TA_HOST=${window.location.origin}`);
+                    }}
+                  >
+                    TA_HOST={window.location.origin}
+                  </li>
+                  <li
+                    onClick={() => {
+                      navigator.clipboard.writeText('REDIS_CON=redis://archivist-redis:6379');
+                    }}
+                  >
+                    REDIS_CON=redis://archivist-redis:6379
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        )}
+
         <p className="login-links">
           <span>
             <a href="https://github.com/tubearchivist/tubearchivist" target="_blank">
diff --git a/frontend/src/style.css b/frontend/src/style.css
index b212c000..f5301d5b 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -179,6 +179,10 @@ button:hover {
   padding: 5px 0 5px 1rem;
 }
 
+.left-align {
+  text-align: start;
+}
+
 .help-text::before {
   content: '?';
   font-size: 1.5em;