[taler-merchant-backoffice] 05/07: improve sidebar to show instance id and navbar to show a title

[gnunet]

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

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

commit 6ca26ca2dafa4db313e436a022082bc79f9c08ee
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Mar 3 14:38:10 2021 -0300

    improve sidebar to show instance id and navbar to show a title
---
 .../frontend/src/components/menu/LangSelector.tsx  |  6 +--
 .../frontend/src/components/menu/NavigationBar.tsx |  5 ++-
 packages/frontend/src/components/menu/SideBar.tsx  | 45 +++++++++++++---------
 packages/frontend/src/components/menu/index.tsx    | 11 +++---
 packages/frontend/src/components/modal/index.tsx   |  5 ++-
 5 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/menu/LangSelector.tsx 
b/packages/frontend/src/components/menu/LangSelector.tsx
index 27a58a0..50a2199 100644
--- a/packages/frontend/src/components/menu/LangSelector.tsx
+++ b/packages/frontend/src/components/menu/LangSelector.tsx
@@ -15,8 +15,8 @@
  */
 
  import { h, VNode } from "preact";
-import { useContext, useState } from "preact/hooks";
-import { BackendContext } from "../../context/backend";
+import { useState } from "preact/hooks";
+import { useBackendContext } from "../../context/backend";
 import langIcon from '../../assets/icons/languageicon.svg'
 import * as messages from '../../messages'
 
@@ -36,7 +36,7 @@ function getLangName(s: keyof LangsNames | string) {
 
 export function LangSelector(): VNode {
   const [updatingLang, setUpdatingLang] = useState(false)
-  const { lang, setLang } = useContext(BackendContext)
+  const { lang, setLang } = useBackendContext()
   return <div class="dropdown is-active ">
     <div class="dropdown-trigger">
       <button class="button" aria-haspopup="true" 
aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
diff --git a/packages/frontend/src/components/menu/NavigationBar.tsx 
b/packages/frontend/src/components/menu/NavigationBar.tsx
index bb9719b..22d432e 100644
--- a/packages/frontend/src/components/menu/NavigationBar.tsx
+++ b/packages/frontend/src/components/menu/NavigationBar.tsx
@@ -25,12 +25,13 @@ import { LangSelector } from './LangSelector';
 
 interface Props {
   onMobileMenu: () => void;
+  title: string;
 }
 
-export function NavigationBar({ onMobileMenu }: Props): VNode {
+export function NavigationBar({ onMobileMenu, title }: Props): VNode {
   return (<nav class="navbar is-fixed-top" role="navigation" aria-label="main 
navigation">
     <div class="navbar-brand">
-      <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 
}}>Instances</span>
+      <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 
}}>{title}</span>
 
       <a role="button" class="navbar-burger" aria-label="menu" 
aria-expanded="false" onClick={(e) => {
         onMobileMenu()
diff --git a/packages/frontend/src/components/menu/SideBar.tsx 
b/packages/frontend/src/components/menu/SideBar.tsx
index 983eb86..5967117 100644
--- a/packages/frontend/src/components/menu/SideBar.tsx
+++ b/packages/frontend/src/components/menu/SideBar.tsx
@@ -20,25 +20,26 @@
 */
 
 
-import { h, VNode } from 'preact';
+import { Fragment, h, VNode } from 'preact';
 import { useContext } from 'preact/hooks';
-import { BackendContext, useConfigContext } from '../../context/backend';
+import { useBackendContext, useConfigContext } from '../../context/backend';
 import { LangSelector } from './LangSelector';
 
 interface Props {
   onLogout: () => void;
   mobile?: boolean;
+  instance?: string;
 }
 
-export function Sidebar({ mobile, onLogout }: Props): VNode {
+export function Sidebar({ mobile, instance, onLogout }: Props): VNode {
   const config = useConfigContext();
-  const backend = useContext(BackendContext);
+  const backend = useBackendContext();
 
   return (
     <aside class="aside is-placed-left is-expanded">
-      { mobile && <div class="footer" onClick={(e)=>{return 
e.stopImmediatePropagation()}}>
+      { mobile && <div class="footer" onClick={(e) => { return 
e.stopImmediatePropagation() }}>
         <LangSelector />
-      </div> }
+      </div>}
       <div class="aside-tools">
         <div class="aside-tools-label">
           <div><b>Taler</b> Merchant Office</div>
@@ -46,17 +47,25 @@ export function Sidebar({ mobile, onLogout }: Props): VNode 
{
         </div>
       </div>
       <div class="menu is-menu-main">
-        <p class="menu-label">General</p>
-        <ul class="menu-list">
-          <li>
-            <a href="/" class="is-active router-link-active has-icon">
-              <span class="icon"><i class="mdi mdi-desktop-mac" /></span>
-              <span class="menu-item-label">Instances</span>
-            </a>
-          </li>
-        </ul>
+        {!instance && <Fragment>
+          <p class="menu-label">General</p>
+          <ul class="menu-list">
+            <li>
+              <a href="/" class="is-active router-link-active has-icon">
+                <span class="icon"><i class="mdi mdi-desktop-mac" /></span>
+                <span class="menu-item-label">Instances</span>
+              </a>
+            </li>
+          </ul>
+        </Fragment>}
         <p class="menu-label">Instance</p>
         <ul class="menu-list">
+          { instance && <li>
+            <a href="/update" class="has-icon">
+              <span class="icon"><i class="mdi mdi-square-edit-outline" 
/></span>
+              <span class="menu-item-label">Settings</span>
+            </a>
+          </li> }
           <li>
             <a href="/forms" class="has-icon">
               <span class="icon"><i class="mdi mdi-square-edit-outline" 
/></span>
@@ -88,16 +97,16 @@ export function Sidebar({ mobile, onLogout }: Props): VNode 
{
             <div >
               <span style={{ width: '3rem' }} class="icon"><i class="mdi 
mdi-web" /></span>
               <span class="menu-item-label">
-                {new URL(backend.url).hostname} / default
+                {new URL(backend.url).hostname} / {!instance ? "default" : 
instance}
               </span>
             </div>
           </li>
-          {!backend.token ? null : <li>
+          <li>
             <a class="has-icon is-state-info is-hoverable" onClick={(): void 
=> onLogout()}>
               <span class="icon"><i class="mdi mdi-logout default" /></span>
               <span class="menu-item-label">Log out</span>
             </a>
-          </li>}
+          </li>
         </ul>
       </div>
     </aside>
diff --git a/packages/frontend/src/components/menu/index.tsx 
b/packages/frontend/src/components/menu/index.tsx
index 413cfa1..6353854 100644
--- a/packages/frontend/src/components/menu/index.tsx
+++ b/packages/frontend/src/components/menu/index.tsx
@@ -20,15 +20,16 @@ import { NavigationBar } from "./NavigationBar";
 import { Sidebar } from "./SideBar";
 
 interface Props {
-  sidebar?: boolean;
-  onLogout: () => void;
+  instance?: string;
+  onLogout?: () => void;
 }
 
-export function Menu({ sidebar, onLogout }: Props): VNode {
+export function Menu({ onLogout, instance }: Props): VNode {
   const [mobileOpen, setMobileOpen] = useState(false)
+  const title = !onLogout ? "Welcome!" : ( !instance ? "Admin" : instance)
   return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""} 
onClick={() => setMobileOpen(false)}>
-    <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} />
-    {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} />}
+    <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} 
title={title}/>
+    {onLogout && <Sidebar onLogout={onLogout} instance={instance} 
mobile={mobileOpen} />}
   </div>
 
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/modal/index.tsx 
b/packages/frontend/src/components/modal/index.tsx
index 682c1ed..aaa50fc 100644
--- a/packages/frontend/src/components/modal/index.tsx
+++ b/packages/frontend/src/components/modal/index.tsx
@@ -23,6 +23,7 @@
 import { h, VNode } from "preact";
 import { Message } from "preact-messages";
 import { useState } from "preact/hooks";
+import { MerchantBackend } from "../../declaration";
 import { FormProvider } from "../form/Field";
 import { Input } from "../form/Input";
 
@@ -92,7 +93,7 @@ export function DeleteModal({ element, onCancel, onConfirm }: 
DeleteModalProps):
 
 interface UpdateTokenModalProps {
   element: { id: string, name: string };
-  oldToken: string;
+  oldToken?: string;
   onCancel: () => void;
   onConfirm: (value: string) => void;
   onClear: () => void;
@@ -105,7 +106,7 @@ export function UpdateTokenModal({ element, onCancel, 
onClear, onConfirm, oldTok
   })
 
   const errors = {
-    old_token: oldToken !== form.old_token ? { message: 'should be the same' } 
: undefined,
+    old_token: oldToken && oldToken !== form.old_token ? { message: 'should be 
the same' } : undefined,
     new_token: !form.new_token ? { message: 'should be the same' } : ( 
form.new_token === form.old_token ? { message: 'cant repeat' } : undefined ),
   }
   

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