backoffcie new version, lot of changes

2 files changed, 107 insertions, 32 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index f3cf80b92..be2f8dde5 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -25,6 +25,7 @@ import { useBackendContext } from "../../context/backend.js";
 import { useConfigContext } from "../../context/config.js";
 import { useInstanceKYCDetails } from "../../hooks/instance.js";
 import { LangSelector } from "./LangSelector.js";
+import { useCredentialsChecker } from "../../hooks/backend.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -36,6 +37,7 @@ interface Props {
   instance: string;
   admin?: boolean;
   mimic?: boolean;
+  isPasswordOk: boolean;
 }
 
 export function Sidebar({
@@ -45,6 +47,7 @@ export function Sidebar({
   onLogout,
   admin,
   mimic,
+  isPasswordOk
 }: Props): VNode {
   const config = useConfigContext();
   const backend = useBackendContext();
@@ -53,7 +56,7 @@ export function Sidebar({
   const needKYC = kycStatus.ok && kycStatus.data.type === "redirect";
 
   return (
-    <aside class="aside is-placed-left is-expanded">
+    <aside class="aside is-placed-left is-expanded" style={{ overflowY: "scroll" }}>
       {mobile && (
         <div
           class="footer"
@@ -78,10 +81,10 @@ export function Sidebar({
         </div>
       </div>
       <div class="menu is-menu-main">
-        {instance ? (
+        {isPasswordOk && instance ? (
           <Fragment>
             <ul class="menu-list">
-            <li>
+              <li>
                 <a href={"/orders"} class="has-icon">
                   <span class="icon">
                     <i class="mdi mdi-cash-register" />
@@ -104,7 +107,7 @@ export function Sidebar({
               <li>
                 <a href={"/transfers"} class="has-icon">
                   <span class="icon">
-                    <i class="mdi mdi-bank" />
+                    <i class="mdi mdi-arrow-left-right" />
                   </span>
                   <span class="menu-item-label">
                     <i18n.Translate>Transfers</i18n.Translate>
@@ -137,12 +140,22 @@ export function Sidebar({
             </p>
             <ul class="menu-list">
               <li>
-                <a href={"/update"} class="has-icon">
+                <a href={"/bank"} class="has-icon">
                   <span class="icon">
-                    <i class="mdi mdi-square-edit-outline" />
+                    <i class="mdi mdi-bank" />
+                  </span>
+                  <span class="menu-item-label">
+                    <i18n.Translate>Bank account</i18n.Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/validators"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-lock" />
                   </span>
                   <span class="menu-item-label">
-                    <i18n.Translate>Account</i18n.Translate>
+                    <i18n.Translate>Validators</i18n.Translate>
                   </span>
                 </a>
               </li>
@@ -164,6 +177,26 @@ export function Sidebar({
                   </span>
                 </a>
               </li>
+              <li>
+                <a href={"/server"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-square-edit-outline" />
+                  </span>
+                  <span class="menu-item-label">
+                    <i18n.Translate>Server</i18n.Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/token"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-security" />
+                  </span>
+                  <span class="menu-item-label">
+                    <i18n.Translate>Access token</i18n.Translate>
+                  </span>
+                </a>
+              </li>
             </ul>
           </Fragment>
         ) : undefined}
@@ -174,12 +207,12 @@ export function Sidebar({
           <li>
             <a class="has-icon is-state-info is-hoverable"
               onClick={(): void => onShowSettings()}
-              >
+            >
               <span class="icon">
                 <i class="mdi mdi-newspaper" />
               </span>
               <span class="menu-item-label">
-                <i18n.Translate>Settings</i18n.Translate>
+                <i18n.Translate>Interface</i18n.Translate>
               </span>
             </a>
           </li>
@@ -211,7 +244,7 @@ export function Sidebar({
               </span>
             </div>
           </li>
-          {admin && !mimic && (
+          {isPasswordOk && admin && !mimic && (
             <Fragment>
               <p class="menu-label">
                 <i18n.Translate>Instances</i18n.Translate>
@@ -238,19 +271,21 @@ export function Sidebar({
               </li>
             </Fragment>
           )}
-          <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">
-                <i18n.Translate>Log out</i18n.Translate>
-              </span>
-            </a>
-          </li>
+          {isPasswordOk &&
+            <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">
+                  <i18n.Translate>Log out</i18n.Translate>
+                </span>
+              </a>
+            </li>
+          }
         </ul>
       </div>
     </aside>
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
index cdbae4ae0..cb318906f 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -24,7 +24,7 @@ import { Sidebar } from "./SideBar.js";
 
 function getInstanceTitle(path: string, id: string): string {
   switch (path) {
-    case InstancePaths.update:
+    case InstancePaths.server:
       return `${id}: Settings`;
     case InstancePaths.order_list:
       return `${id}: Orders`;
@@ -50,6 +50,12 @@ function getInstanceTitle(path: string, id: string): string {
       return `${id}: New webhook`;
     case InstancePaths.webhooks_update:
       return `${id}: Update webhook`;
+    case InstancePaths.validators_list:
+      return `${id}: Validators`;
+    case InstancePaths.validators_new:
+      return `${id}: New validator`;
+    case InstancePaths.validators_update:
+      return `${id}: Update validators`;
     case InstancePaths.templates_new:
       return `${id}: New template`;
     case InstancePaths.templates_update:
@@ -58,6 +64,10 @@ function getInstanceTitle(path: string, id: string): string {
       return `${id}: Templates`;
     case InstancePaths.templates_use:
       return `${id}: Use template`;
+    case InstancePaths.settings:
+      return `${id}: Interface`;
+    case InstancePaths.settings:
+      return `${id}: Interface`;
     default:
       return "";
   }
@@ -77,6 +87,7 @@ interface MenuProps {
   onLogout?: () => void;
   onShowSettings: () => void;
   setInstanceName: (s: string) => void;
+  isPasswordOk: boolean;
 }
 
 function WithTitle({
@@ -100,14 +111,15 @@ export function Menu({
   path,
   admin,
   setInstanceName,
+  isPasswordOk
 }: MenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
 
   const titleWithSubtitle = title
     ? title
     : !admin
-    ? getInstanceTitle(path, instance)
-    : getAdminTitle(path, instance);
+      ? getInstanceTitle(path, instance)
+      : getAdminTitle(path, instance);
   const adminInstance = instance === "default";
   const mimic = admin && !adminInstance;
   return (
@@ -129,14 +141,15 @@ export function Menu({
             mimic={mimic}
             instance={instance}
             mobile={mobileOpen}
+            isPasswordOk={isPasswordOk}
           />
         )}
 
         {mimic && (
           <nav class="level" style={{
             zIndex: 100,
-            position:"fixed",
-            width:"50%",
+            position: "fixed",
+            width: "50%",
             marginLeft: "20%"
           }}>
             <div class="level-item has-text-centered has-background-warning">
@@ -161,8 +174,9 @@ export function Menu({
 
 interface NotYetReadyAppMenuProps {
   title: string;
-  onLogout?: () => void;
   onShowSettings: () => void;
+  onLogout?: () => void;
+  isPasswordOk: boolean;
 }
 
 interface NotifProps {
@@ -181,8 +195,8 @@ export function NotificationCard({
               n.type === "ERROR"
                 ? "message is-danger"
                 : n.type === "WARN"
-                ? "message is-warning"
-                : "message is-info"
+                  ? "message is-warning"
+                  : "message is-info"
             }
           >
             <div class="message-header">
@@ -201,10 +215,36 @@ export function NotificationCard({
   );
 }
 
+interface NotConnectedAppMenuProps {
+  title: string;
+}
+export function NotConnectedAppMenu({
+  title,
+}: NotConnectedAppMenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  useEffect(() => {
+    document.title = `Taler Backoffice: ${title}`;
+  }, [title]);
+
+  return (
+    <div
+      class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+      onClick={() => setMobileOpen(false)}
+    >
+      <NavigationBar
+        onMobileMenu={() => setMobileOpen(!mobileOpen)}
+        title={title}
+      />
+    </div>
+  );
+}
+
 export function NotYetReadyAppMenu({
   onLogout,
   onShowSettings,
   title,
+  isPasswordOk
 }: NotYetReadyAppMenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
 
@@ -222,7 +262,7 @@ export function NotYetReadyAppMenu({
         title={title}
       />
       {onLogout && (
-        <Sidebar onShowSettings={onShowSettings} onLogout={onLogout} instance="" mobile={mobileOpen} />
+        <Sidebar onShowSettings={onShowSettings} onLogout={onLogout} instance="" mobile={mobileOpen} isPasswordOk={isPasswordOk} />
       )}
     </div>
   );