set token on create instance page use dialog

4 files changed, 75 insertions, 20 deletions

diff --git a/packages/frontend/src/components/modal/index.tsx b/packages/frontend/src/components/modal/index.tsx
index cba1ce8..8f6b722 100644
--- a/packages/frontend/src/components/modal/index.tsx
+++ b/packages/frontend/src/components/modal/index.tsx
@@ -165,6 +165,40 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd
   </ClearConfirmModal>
 }
 
+export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: UpdateTokenModalProps): VNode {
+  type State = { old_token: string, new_token: string, repeat_token: string }
+  const [form, setValue] = useState<Partial<State>>({
+    new_token: '', repeat_token: '',
+  })
+  const i18n = useTranslator()
+
+  const errors = {
+    new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined),
+    repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined
+  }
+
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  const text = i18n`You are setting the authorization token for the new instance`
+
+  return <ClearConfirmModal description={text}
+    onCancel={onCancel}
+    onConfirm={!hasErrors ? () => onConfirm(form.new_token!) : undefined}
+    onClear={onClear}
+  >
+    <div class="columns">
+      <div class="column" />
+      <div class="column is-four-fifths" >
+        <FormProvider errors={errors} object={form} valueHandler={setValue}>
+          <Input<State> name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} inputType="password" />
+          <Input<State> name="repeat_token" label={i18n`Repeat token`} tooltip={i18n`confirm the same token`} inputType="password" />
+        </FormProvider>
+        <p><Translate>Clearing the auth token will mean public access to the instance</Translate></p>
+      </div>
+      <div class="column" />
+    </div>
+  </ClearConfirmModal>
+}
 
 export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
   const i18n = useTranslator()
diff --git a/packages/frontend/src/hooks/instance.ts b/packages/frontend/src/hooks/instance.ts
index 2e5c6c2..462870f 100644
--- a/packages/frontend/src/hooks/instance.ts
+++ b/packages/frontend/src/hooks/instance.ts
@@ -29,9 +29,13 @@ interface InstanceAPI {
 
 export function useInstanceAPI(): InstanceAPI {
   const { url: baseUrl, token: adminToken } = useBackendContext()
-  const { token, id, admin } = useInstanceContext()
+  const { token: instanceToken, id, admin } = useInstanceContext()
 
-  const url = !admin ? baseUrl : `${baseUrl}/instances/${id}`
+  const { url, token } = !admin ? {
+    url: baseUrl, token: adminToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  };
 
   const updateInstance = async (instance: MerchantBackend.Instances.InstanceReconfigurationMessage): Promise<void> => {
     await request(`${url}/private/`, {
diff --git a/packages/frontend/src/paths/admin/create/CreatePage.tsx b/packages/frontend/src/paths/admin/create/CreatePage.tsx
index aa46f2f..e1803c6 100644
--- a/packages/frontend/src/paths/admin/create/CreatePage.tsx
+++ b/packages/frontend/src/paths/admin/create/CreatePage.tsx
@@ -32,7 +32,9 @@ import { InputLocation } from "../../../components/form/InputLocation";
 import { InputPayto } from "../../../components/form/InputPayto";
 import { InputSecured } from "../../../components/form/InputSecured";
 import { InputWithAddon } from "../../../components/form/InputWithAddon";
+import { SetTokenNewInstanceModal, UpdateTokenModal } from "../../../components/modal";
 import { useBackendContext } from "../../../context/backend";
+import { useInstanceContext } from "../../../context/instance";
 import { MerchantBackend } from "../../../declaration";
 import { Translate, useTranslator } from "../../../i18n";
 import { InstanceCreateSchema as schema } from '../../../schemas';
@@ -53,9 +55,10 @@ function with_defaults(id?: string): Partial<Entity> {
     default_wire_transfer_delay: { d_ms: 2000 * 60 * 5 },
   };
 }
-
 export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
   const [value, valueHandler] = useState(with_defaults(forceId))
+  const [isTokenSet, updateIsTokenSet] = useState<boolean>(false);
+  const [isTokenDialogActive, updateIsTokenDialogActive] = useState<boolean>(false);
 
   let errors: FormErrors<Entity> = {}
   try {
@@ -76,8 +79,34 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
     return onCreate(schema.cast(value) as Entity);
   }
   const backend = useBackendContext()
+  
+  function updateToken(token: string | null) {
+    valueHandler(old => ({ ...old, auth_token: token === null ? undefined : token }))
+  }
+
   const i18n = useTranslator()
   return <div>
+    <div class="columns">
+      <div class="column" />
+      <div class="column is-four-fifths">
+        {isTokenDialogActive && <SetTokenNewInstanceModal
+          onCancel={() => {
+            updateIsTokenDialogActive(false);
+            updateIsTokenSet(false);
+          }}
+          onClear={() => {
+            updateToken(null);
+            updateIsTokenDialogActive(false);
+            updateIsTokenSet(true);
+          }}
+          onConfirm={(newToken) => {
+            updateToken(newToken); updateIsTokenDialogActive(false);
+            updateIsTokenSet(true);
+          }}
+        />}
+      </div>
+      <div class="column" />
+    </div>
 
     <section class="section is-main-section">
       <div class="columns">
@@ -89,8 +118,6 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
 
             <Input<Entity> name="name" label={i18n`Name`} tooltip={i18n`descriptive name`} />
 
-            <InputSecured<Entity> name="auth_token" label={i18n`Auth token`} tooltip={i18n`useful to prevent others from changing the instance configuration`} />
-
             <InputPayto<Entity> name="payto_uris" label={i18n`Account address`} help="x-taler-bank/bank.taler:5882/blogger" tooltip={i18n`where the money will be sent`} />
 
             <InputCurrency<Entity> name="default_max_deposit_fee" label={i18n`Default max deposit fee`} tooltip={i18n`max deposit fee when an order has not overridden it`} />
@@ -115,7 +142,10 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
 
           <div class="buttons is-right mt-5">
             {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
-            <AsyncButton onClick={submit} disabled={hasErrors} ><Translate>Confirm</Translate></AsyncButton>
+            {isTokenSet ?
+              <AsyncButton onClick={submit} disabled={hasErrors} ><Translate>Confirm</Translate></AsyncButton> :
+              <button class="button" onClick={() => updateIsTokenDialogActive(true)} ><Translate>Set token</Translate></button>
+            }
           </div>
 
         </div>
diff --git a/packages/frontend/src/paths/instance/update/UpdatePage.tsx b/packages/frontend/src/paths/instance/update/UpdatePage.tsx
index e12e09f..3fe17ff 100644
--- a/packages/frontend/src/paths/instance/update/UpdatePage.tsx
+++ b/packages/frontend/src/paths/instance/update/UpdatePage.tsx
@@ -94,19 +94,6 @@ export function UpdatePage({ onUpdate, onChangeAuth, selected, onBack }: Props):
   }
   const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
   const submit = async (): Promise<void> => {
-    // use conversion instead of this
-    // const newToken = value.auth_token;
-    // value.auth_token = undefined;
-
-    //if new token was not set or has been set to the actual current token
-    //it is not needed to send a change
-    //otherwise, checked where we are setting a new token or removing it
-    // const auth: MerchantBackend.Instances.InstanceAuthConfigurationMessage | undefined =
-    //   newToken === undefined || newToken === currentTokenValue ? undefined : (newToken === null ?
-    //     { method: "external" } :
-    //     { method: "token", token: `secret-token:${newToken}` });
-
-    // remove above use conversion
     schema.validateSync(value, { abortEarly: false })
     await onUpdate(schema.cast(value));
     await onBack()
@@ -117,7 +104,7 @@ export function UpdatePage({ onUpdate, onChangeAuth, selected, onBack }: Props):
   const i18n = useTranslator()
 
   return <div>
-    <section class="section ">
+    <section class="section">
 
       <section class="hero is-hero-bar">
         <div class="hero-body">