check credetials on login

packages/merchant-backoffice-ui/src/components/exception/login.tsx

@@ -24,6 +24,7 @@ import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
 import { useInstanceContext } from "../../context/instance.js";
+import { useCredentialsChecker } from "../../hooks/backend.js";
 import { Notification } from "../../utils/types.js";
 
 interface Props {
@@ -31,15 +32,15 @@ interface Props {
   onConfirm: (backend: string, token?: string) => void;
 }
 
-function getTokenValuePart(t?: string): string | undefined {
+function getTokenValuePart(t: string): string {
   if (!t) return t;
   const match = /secret-token:(.*)/.exec(t);
-  if (!match || !match[1]) return undefined;
+  if (!match || !match[1]) return "";
   return match[1];
 }
 
-function normalizeToken(r: string | undefined): string | undefined {
+function normalizeToken(r: string): string {
-  return r ? `secret-token:${encodeURIComponent(r)}` : undefined;
+  return `secret-token:${encodeURIComponent(r)}`;
 }
 
 function cleanUp(s: string): string {
@@ -53,8 +54,9 @@ function cleanUp(s: string): string {
 export function LoginModal({ onConfirm, withMessage }: Props): VNode {
   const { url: backendUrl, token: baseToken } = useBackendContext();
   const { admin, token: instanceToken } = useInstanceContext();
+  const testLogin = useCredentialsChecker();
   const currentToken = getTokenValuePart(
-    !admin ? baseToken : instanceToken || "",
+    (!admin ? baseToken : instanceToken) ?? "",
   );
   const [token, setToken] = useState(currentToken);
 
@@ -137,8 +139,14 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
           >
             <button
               class="button is-info"
-              onClick={(): void => {
+              onClick={async () => {
-                onConfirm(url, normalizeToken(token));
+                const secretToken = normalizeToken(token);
+                const isOk = await testLogin(url, secretToken);
+                if (isOk) {
+                  onConfirm(url, secretToken);
+                } else {
+                  onConfirm(url);
+                }
               }}
             >
               <i18n.Translate>Confirm</i18n.Translate>

packages/merchant-backoffice-ui/src/hooks/backend.ts

@@ -139,6 +139,25 @@ interface useBackendBaseRequestType {
 
 type YesOrNo = "yes" | "no";
 
+export function useCredentialsChecker() {
+  const { request } = useApiContext();
+  //check against instance details endpoint
+  //while merchant backend doesn't have a login endpoint
+  return async function testLogin(
+    instance: string,
+    token: string,
+  ): Promise<boolean> {
+    try {
+      const response = await request(instance, `/private/`, {
+        token,
+      });
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+}
+
 /**
  *
  * @param root the request is intended to the base URL and no the instance URL

packages/merchant-backoffice-ui/src/hooks/index.ts

@@ -59,7 +59,6 @@ export function useBackendDefaultToken(
 export function useBackendInstanceToken(
   id: string,
 ): [string | undefined, StateUpdater<string | undefined>] {
-  const [random, setRandom] = useState(0);
   const [token, setToken] = useLocalStorage(`backend-token-${id}`);
   const [defaultToken, defaultSetToken] = useBackendDefaultToken();
 
@@ -74,8 +73,6 @@ export function useBackendInstanceToken(
   ): void {
     setToken((p) => {
       const toStore = value instanceof Function ? value(p) : value;
-      // setToken(value)
-      setRandom(new Date().getTime());
       return toStore;
     });
   }