[taler-merchant-backoffice] branch master updated: set token on create instance page use dialog

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new a3d5b48  set token on create instance page use dialog
a3d5b48 is described below

commit a3d5b4882aa76bd56b8ac70f5b2a927bd7ba5b5d
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon May 31 12:54:52 2021 -0300

    set token on create instance page use dialog
---
 CHANGELOG.md                                       | 13 --------
 packages/frontend/src/components/modal/index.tsx   | 34 +++++++++++++++++++
 packages/frontend/src/hooks/instance.ts            |  8 +++--
 .../frontend/src/paths/admin/create/CreatePage.tsx | 38 +++++++++++++++++++---
 .../src/paths/instance/update/UpdatePage.tsx       | 15 +--------
 5 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad3634d..852efd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,19 +30,6 @@ and this project adheres to [Semantic 
Versioning](https://semver.org/spec/v2.0.0
  - when creating the first default instance, the page keeps reloading 
preventing for filling the form
  - 
 
- - api key remove from login, and bearer
- - 'secret-token:'  add missing, remove when the user set
- - change the password and stay there logged in
- - auth token section
- - header with the instance id
- - create a section with the auth token
- - bug after clicking change, cycliing over change the password  
- - reserve created suffcefluy
- - message => wire transfer subject
- - reservers
- - exchange https:// pattern (wallet util base url helper)
- - valid wire method
-
  - create instance with auth token
  - add more information about reserve when is not founded
  - replace manipulation of amount with taler util libraries
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">

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.