commit 6ca26ca2dafa4db313e436a022082bc79f9c08ee
parent 0d59f0ec9bbcd28ff3e528cc8afe69262e9a37cb
Author: Sebastian <sebasjm@gmail.com>
Date: Wed, 3 Mar 2021 14:38:10 -0300
improve sidebar to show instance id and navbar to show a title
Diffstat:
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ),
}
