update how access token management is handled

1 files changed, 41 insertions, 36 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
index 4b0db200a..89dba63b2 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
@@ -30,13 +30,13 @@ import { AccessToken } from "../../../declaration.js";
 
 interface Props {
   instanceId: string;
-  currentToken: string | undefined;
-  onClearToken: () => void;
-  onNewToken: (s: AccessToken) => void;
+  hasToken: boolean | undefined;
+  onClearToken: (c: AccessToken | undefined) => void;
+  onNewToken: (c: AccessToken | undefined, s: AccessToken) => void;
   onBack?: () => void;
 }
 
-export function DetailPage({ instanceId, currentToken: oldToken, onBack, onNewToken, onClearToken }: Props): VNode {
+export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearToken }: Props): VNode {
   type State = { old_token: string; new_token: string; repeat_token: string };
   const [form, setValue] = useState<Partial<State>>({
     old_token: "",
@@ -45,11 +45,9 @@ export function DetailPage({ instanceId, currentToken: oldToken, onBack, onNewTo
   });
   const { i18n } = useTranslationContext();
 
-  const hasOldtoken = !!oldToken
-  const hasInputTheCorrectOldToken = hasOldtoken && oldToken !== form.old_token;
   const errors = {
-    old_token: hasInputTheCorrectOldToken
-      ? i18n.str`is not the same as the current access token`
+    old_token: hasToken && !form.old_token
+      ? i18n.str`you need your access token to perform the operation`
       : undefined,
     new_token: !form.new_token
       ? i18n.str`cannot be empty`
@@ -72,8 +70,9 @@ export function DetailPage({ instanceId, currentToken: oldToken, onBack, onNewTo
 
   async function submitForm() {
     if (hasErrors) return;
+    const ot = hasToken ? `secret-token:${form.old_token}` as AccessToken : undefined;
     const nt = `secret-token:${form.new_token}` as AccessToken;
-    onNewToken(nt)
+    onNewToken(ot, nt)
   }
 
   return (
@@ -98,32 +97,38 @@ export function DetailPage({ instanceId, currentToken: oldToken, onBack, onNewTo
           <div class="column" />
           <div class="column is-four-fifths">
             <FormProvider errors={errors} object={form} valueHandler={setValue}>
-              {hasOldtoken && (
-                <Input<State>
-                  name="old_token"
-                  label={i18n.str`Current access token`}
-                  tooltip={i18n.str`access token currently in use`}
-                  inputType="password"
-                />
-              )}
-              {!hasInputTheCorrectOldToken && <Fragment>
-                {hasOldtoken && <Fragment>
-                  <p>
-                    <i18n.Translate>
-                      Clearing the access token will mean public access to the instance.
-                    </i18n.Translate>
-                  </p>
-                  <div class="buttons is-right mt-5">
-                    <button
-                      disabled={!!hasInputTheCorrectOldToken}
-                      class="button"
-                      onClick={onClearToken}
-                    >
-                      <i18n.Translate>Clear token</i18n.Translate>
-                    </button>
-                  </div>
-                </Fragment>
-                }
+              <Fragment>
+                {hasToken && (
+                  <Fragment>
+                    <Input<State>
+                      name="old_token"
+                      label={i18n.str`Current access token`}
+                      tooltip={i18n.str`access token currently in use`}
+                      inputType="password"
+                    />
+                    <p>
+                      <i18n.Translate>
+                        Clearing the access token will mean public access to the instance.
+                      </i18n.Translate>
+                    </p>
+                    <div class="buttons is-right mt-5">
+                      <button
+                        class="button"
+                        onClick={() => {
+                          if (hasToken) {
+                            const ot = `secret-token:${form.old_token}` as AccessToken;
+                            onClearToken(ot)
+                          } else {
+                            onClearToken(undefined)
+                          }
+                        }}
+                      >
+                        <i18n.Translate>Clear token</i18n.Translate>
+                      </button>
+                    </div>
+                  </Fragment>
+                )}
+
 
                 <Input<State>
                   name="new_token"
@@ -137,7 +142,7 @@ export function DetailPage({ instanceId, currentToken: oldToken, onBack, onNewTo
                   tooltip={i18n.str`confirm the same access token`}
                   inputType="password"
                 />
-              </Fragment>}
+              </Fragment>
             </FormProvider>
             <div class="buttons is-right mt-5">
               {onBack && (