[taler-merchant-backoffice] branch master updated: better login page

[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 0b57def  better login page
0b57def is described below

commit 0b57def514b01352a014f388bac686255ddd060a
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Feb 10 16:25:35 2021 -0300

    better login page
---
 src/components/auth/LoginPage.tsx    | 30 ++++++++++++++++++++++++++----
 src/components/hooks/backend.ts      | 13 +++++++++----
 src/components/navbar/index.tsx      |  5 +++--
 src/routes/instances/CreateModal.tsx |  5 +++--
 src/routes/instances/Table.tsx       |  3 ++-
 src/routes/instances/UpdateModal.tsx |  3 ++-
 6 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/auth/LoginPage.tsx 
b/src/components/auth/LoginPage.tsx
index 427de64..956e573 100644
--- a/src/components/auth/LoginPage.tsx
+++ b/src/components/auth/LoginPage.tsx
@@ -7,9 +7,31 @@ interface Props {
 
 export default function LoginPage({ onLogIn }: Props): VNode {
   const [token, update] = useState('')
-
-  return <div>
-    <input value={token} onInput={e => update(e?.currentTarget.value)} />
-    <button onClick={(): void => onLogIn(token)}>set</button>
+  
+  return <div class="modal is-active is-clipped">
+    <div class="modal-background" />
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Authentication required</p>
+      </header>
+      <section class="modal-card-body">
+        Please enter your auth id
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Id</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <p class="control is-expanded has-icons-left">
+                <input class="input" type="text" placeholder="abcdef" 
name="id" value={token} onInput={e => update(e?.currentTarget.value)} />
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-info" onClick={(): void => onLogIn(token)} 
>Confirm</button>
+      </footer>
+    </div>
   </div>
 }
\ No newline at end of file
diff --git a/src/components/hooks/backend.ts b/src/components/hooks/backend.ts
index 5f32692..7ff32bb 100644
--- a/src/components/hooks/backend.ts
+++ b/src/components/hooks/backend.ts
@@ -46,9 +46,13 @@ async function fetcher(url: string): Promise<any> {
   return request(url, 'get')
 }
 
-export function updateToken(token: string): void {
-  localStorage.setItem(TOKEN_KEY, token)
-  globalMutate('instances')
+export function updateToken(token: string | null): void {
+  if (token) {
+    localStorage.setItem(TOKEN_KEY, token)
+  } else {
+    localStorage.removeItem(TOKEN_KEY)
+  }
+  globalMutate('/instances', null)
 }
 
 interface WithCreate<T> {
@@ -79,12 +83,13 @@ export function useBackendInstance(id: string | null): 
HttpResponse<MerchantBack
   const update = async (updateId: string, instance: 
MerchantBackend.Instances.InstanceReconfigurationMessage) => {
     await request(`/instances/${updateId}`, 'patch', instance)
 
+    globalMutate('/instances', null)
     globalMutate(`/instances/${updateId}`, null)
   };
   const _delete = async (deleteId: string) => {
     await request(`/instances/${deleteId}`, 'delete')
 
-    globalMutate('/instances')
+    globalMutate('/instances', null)
     globalMutate(`/instances/${deleteId}`, null)
   }
 
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 00b093d..855b5cb 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -1,4 +1,5 @@
 import { h, VNode } from 'preact';
+import { updateToken } from '../hooks/backend';
 
 export default function NavigationBar(): VNode {
   return (
@@ -8,7 +9,7 @@ export default function NavigationBar(): VNode {
           <span class="icon"><i class="mdi mdi-forwardburger mdi-24px" 
/></span>
         </a>
         <div class="navbar-item has-control">
-          <div class="control"><input placeholder="Search everywhere..." 
class="input" /></div>
+          {/* <div class="control"><input placeholder="Search everywhere..." 
class="input" /></div> */}
         </div>
       </div>
       <div class="navbar-brand is-right">
@@ -17,7 +18,7 @@ export default function NavigationBar(): VNode {
         </a>
       </div>
       <div class="navbar-menu navbar-end">
-        <button class="button is-primary">Log out</button>
+        <button class="button is-primary" onClick={ () => updateToken(null) 
}>Log out</button>
       </div>
     </nav>
   );
diff --git a/src/routes/instances/CreateModal.tsx 
b/src/routes/instances/CreateModal.tsx
index d22ae7d..518af6d 100644
--- a/src/routes/instances/CreateModal.tsx
+++ b/src/routes/instances/CreateModal.tsx
@@ -26,7 +26,7 @@ const schema = yup.object().shape({
   name: yup.string().required().label("Name"),
   payto_uris: yup.array().of(yup.string())
     .min(1).label("Payment Method")
-    .meta({ placeholder: 'comma separated values' })
+    .meta({ placeholder: 'comma separated values', help: 
'payto://x-taler-bank/bank.taler:5882/blogger' })
     .transform(stringToArray),
   default_max_deposit_fee: yup.string().required().label("Max Deposit Fee"),
   default_max_wire_fee: yup.string().required().label("Max Wire"),
@@ -60,7 +60,7 @@ export default function CreateModal({ active, onCancel, 
onConfirm }: Props): VNo
     }
   }
 
-  return <ConfirmModal description="update instance" active={active} 
onConfirm={submit} onCancel={onCancel}>
+  return <ConfirmModal description="create instance" active={active} 
onConfirm={submit} onCancel={onCancel}>
     {Object.keys(schema.fields).map(f => {
 
       const info = schema.fields[f].describe()
@@ -74,6 +74,7 @@ export default function CreateModal({ active, onCancel, 
onConfirm }: Props): VNo
           <div class="field">
             <p class="control is-expanded has-icons-left">
               <input class="input" type="text" 
placeholder={info?.meta?.placeholder} readonly={info?.meta?.readonly} name={f} 
value={value[f]} onChange={e => valueHandler(prev => ({ ...prev, [f]: 
e.currentTarget.value }))} />
+              {info?.meta?.help}
             </p>
             {errors[f] ? <p class="help is-danger">{errors[f]}</p> : null}
           </div>
diff --git a/src/routes/instances/Table.tsx b/src/routes/instances/Table.tsx
index 8946867..56e1243 100644
--- a/src/routes/instances/Table.tsx
+++ b/src/routes/instances/Table.tsx
@@ -71,10 +71,11 @@ export default function Table({ instances, onCreate, 
onDelete, onSelect, onUpdat
             <thead>
               <tr>
                 <th class="is-checkbox-cell">
-                  <label class="b-checkbox checkbox">
+                  { instances.length > 0 ? <label class="b-checkbox checkbox">
                     <input type="checkbox" checked={rowSelection.length === 
instances.length} onClick={e => rowSelectionHandler(rowSelection.length === 
instances.length ? [] : instances.map(i => i.id))} />
                     <span class="check" />
                   </label>
+                  : null }
                 </th>
                 <th>id</th>
                 <th>name</th>
diff --git a/src/routes/instances/UpdateModal.tsx 
b/src/routes/instances/UpdateModal.tsx
index 1275911..f3f3bb8 100644
--- a/src/routes/instances/UpdateModal.tsx
+++ b/src/routes/instances/UpdateModal.tsx
@@ -13,7 +13,7 @@ const schema = yup.object().shape({
   name: yup.string().required().label("Name"),
   payto_uris: yup.array().of(yup.string())
     .min(1).label("Payment Method")
-    .meta({ placeholder: 'comma separated values' })
+    .meta({ placeholder: 'comma separated values', help: 
'payto://x-taler-bank/bank.taler:5882/blogger' })
     .transform(stringToArray),
   default_max_deposit_fee: yup.string().required().label("Max Deposit Fee"),
   default_max_wire_fee: yup.string().required().label("Max Wire"),
@@ -64,6 +64,7 @@ export default function UpdateModal({ element, onCancel, 
onConfirm }: Props): VN
           <div class="field">
             <p class="control is-expanded has-icons-left">
               <input class="input" type="text" 
placeholder={info?.meta?.placeholder} readonly={info?.meta?.readonly} name={f} 
value={value[f]} onChange={e => valueHandler(prev => ({ ...prev, [f]: 
e.currentTarget.value }))} />
+              {info?.meta?.help}
             </p>
             {errors[f] ? <p class="help is-danger">{errors[f]}</p> : null}
           </div>

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