From 37d0f9438e6e6507c46d56324e38a5f0c391ab45 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Fri, 4 Aug 2023 13:32:08 -0300
Subject: accesstoken in memory and better login when switching between
 accounts

---
 .../src/components/exception/login.tsx             | 97 ++++++++++++++++++++--
 1 file changed, 91 insertions(+), 6 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/components/exception/login.tsx')

diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
index 42c5e89d0..984b6fe06 100644
--- a/packages/merchant-backoffice-ui/src/components/exception/login.tsx
+++ b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
@@ -20,7 +20,7 @@
  */
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { h, VNode } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
 import { useInstanceContext } from "../../context/instance.js";
@@ -40,7 +40,7 @@ function getTokenValuePart(t: string): string {
 }
 
 function normalizeToken(r: string): string {
-  return `secret-token:${encodeURIComponent(r)}`;
+  return `secret-token:${r}`;
 }
 
 function cleanUp(s: string): string {
@@ -53,7 +53,7 @@ function cleanUp(s: string): string {
 
 export function LoginModal({ onConfirm, withMessage }: Props): VNode {
   const { url: backendUrl, token: baseToken } = useBackendContext();
-  const { admin, token: instanceToken } = useInstanceContext();
+  const { admin, token: instanceToken, id } = useInstanceContext();
   const testLogin = useCredentialsChecker();
   const currentToken = getTokenValuePart(
     (!admin ? baseToken : instanceToken) ?? "",
@@ -63,6 +63,78 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
   const [url, setURL] = useState(cleanUp(backendUrl));
   const { i18n } = useTranslationContext();
 
+  if (admin && id !== "default") {
+    //admin trying to access another instance
+    return (<div class="columns is-centered" style={{ margin: "auto" }}>
+      <div class="column is-two-thirds ">
+        <div class="modal-card" style={{ width: "100%", margin: 0 }}>
+          <header
+            class="modal-card-head"
+            style={{ border: "1px solid", borderBottom: 0 }}
+          >
+            <p class="modal-card-title">{i18n.str`Login required`}</p>
+          </header>
+          <section
+            class="modal-card-body"
+            style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }}
+          >
+            <p>
+              <i18n.Translate>Need the access token for the instance.</i18n.Translate>
+            </p>
+            <div class="field is-horizontal">
+              <div class="field-label is-normal">
+                <label class="label">
+                  <i18n.Translate>Access Token</i18n.Translate>
+                </label>
+              </div>
+              <div class="field-body">
+                <div class="field">
+                  <p class="control is-expanded">
+                    <input
+                      class="input"
+                      type="password"
+                      placeholder={"set new access token"}
+                      name="token"
+                      onKeyPress={(e) =>
+                        e.keyCode === 13
+                          ? onConfirm(url, normalizeToken(token))
+                          : null
+                      }
+                      value={token}
+                      onInput={(e): void => setToken(e?.currentTarget.value)}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+          <footer
+            class="modal-card-foot "
+            style={{
+              justifyContent: "flex-end",
+              border: "1px solid",
+              borderTop: 0,
+            }}
+          >
+            <AsyncButton
+              onClick={async () => {
+                const secretToken = normalizeToken(token);
+                const { valid, cause } = await testLogin(`${url}/instances/${id}`, secretToken);
+                if (valid) {
+                  onConfirm(url, secretToken);
+                } else {
+                  onConfirm(url);
+                }
+              }}
+            >
+              <i18n.Translate>Confirm</i18n.Translate>
+            </AsyncButton>
+          </footer>
+        </div>
+      </div>
+    </div>)
+  }
+
   return (
     <div class="columns is-centered" style={{ margin: "auto" }}>
       <div class="column is-two-thirds ">
@@ -137,8 +209,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
               borderTop: 0,
             }}
           >
-            <button
-              class="button is-info"
+            <AsyncButton
               onClick={async () => {
                 const secretToken = normalizeToken(token);
                 const { valid, cause } = await testLogin(url, secretToken);
@@ -150,10 +221,24 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
               }}
             >
               <i18n.Translate>Confirm</i18n.Translate>
-            </button>
+            </AsyncButton>
           </footer>
         </div>
       </div>
     </div>
   );
 }
+
+function AsyncButton({onClick, children}:{onClick: () => Promise<void>, children: ComponentChildren}):VNode {
+  const [running, setRunning] = useState(false)
+  return <button class="button is-info" disabled={running} onClick={() => {
+    setRunning(true)
+    onClick().then(() => {
+      setRunning(false)
+    }).catch(() => {
+      setRunning(false)
+    })
+  }}>
+    {children}
+  </button>
+}
-- 
cgit v1.2.3

