set auth token on instance creation

2 files changed, 16 insertions, 2 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 89dba63b2..d22a9e4d4 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
@@ -27,6 +27,7 @@ import { FormProvider } from "../../../components/form/FormProvider.js";
 import { Input } from "../../../components/form/Input.js";
 import { useInstanceContext } from "../../../context/instance.js";
 import { AccessToken } from "../../../declaration.js";
+import { NotificationCard } from "../../../components/menu/index.js";
 
 interface Props {
   instanceId: string;
@@ -66,7 +67,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
 
   const instance = useInstanceContext();
 
-  const text = i18n.str`You are updating the access token from instance with id ${instance.id}`;
+  const text = i18n.str`You are updating the access token from instance with id "${instance.id}"`;
 
   async function submitForm() {
     if (hasErrors) return;
@@ -84,7 +85,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
               <div class="level-left">
                 <div class="level-item">
                   <span class="is-size-4">
-                    Instance id: <b>{instanceId}</b>
+                    {text}
                   </span>
                 </div>
               </div>
@@ -92,6 +93,16 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
           </div>
         </section>
         <hr />
+        
+        {!hasToken &&
+          <NotificationCard
+            notification={{
+              message: i18n.str`This instance doesn't have authentication token.`,
+              description: i18n.str`You can leave it empty if there is another layer of security.`,
+              type: "WARN",
+            }}
+          />
+        }
 
         <div class="columns">
           <div class="column" />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx
index bc2bd9fa3..22365c9e1 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx
@@ -31,6 +31,7 @@ interface Props {
   onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode;
   onChange: () => void;
   onNotFound: () => VNode;
+  onCancel: () => void;
 }
 
 export default function Token({
@@ -38,6 +39,7 @@ export default function Token({
   onChange,
   onUnauthorized,
   onNotFound,
+  onCancel,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
 
@@ -68,6 +70,7 @@ export default function Token({
       <NotificationCard notification={notif} />
       <DetailPage
         instanceId={id}
+        onBack={onCancel}
         hasToken={hasToken}
         onClearToken={async (currentToken): Promise<void> => {
           try {