commit a868b2376d1fd6fc83118a1cc2cb76ff6671c8b8
parent 2560ef581f3be82b563695c22cef8de130519ede
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 1 Mar 2021 17:46:11 -0300
lang selector behavior
Diffstat:
8 files changed, 53 insertions(+), 21 deletions(-)
diff --git a/packages/frontend/src/components/auth/index.tsx b/packages/frontend/src/components/auth/index.tsx
@@ -81,7 +81,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
<div class="field">
<p class="control is-expanded">
- <input class="input" type="text" placeholder={true ? "set new token" : "hidden token value"} name="id" value={token} onInput={(e): void => setToken(e?.currentTarget.value)} />
+ <input class="input" type="text" placeholder={"set new token"} name="id" value={token} onInput={(e): void => setToken(e?.currentTarget.value)} />
</p>
</div>
</div>
diff --git a/packages/frontend/src/components/form/InputArray.tsx b/packages/frontend/src/components/form/InputArray.tsx
@@ -87,7 +87,7 @@ export function InputArray<T>({ name, readonly, addonBefore, isValid, fromStr =
<Message id={`validation.${error.type}`} fields={error.params}>{error.message}</Message>
</p> : null}
{array.map(v => <div class="tags has-addons">
- <span class="tag is-medium is-info">{v}</span>
+ <span class="tag is-medium is-info" style={{maxWidth:'90%'}}>{v}</span>
<a class="tag is-medium is-danger is-delete" onClick={() => {
onChange(array.filter(f => f !== v) as any);
setCurrentValue(toStr(v));
diff --git a/packages/frontend/src/components/menu/LangSelector.tsx b/packages/frontend/src/components/menu/LangSelector.tsx
@@ -1,12 +1,25 @@
-import { h, VNode } from "preact";
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+ import { h, VNode } from "preact";
import { useContext, useState } from "preact/hooks";
import { BackendContext } from "../../context/backend";
import langIcon from '../../assets/icons/languageicon.svg'
import * as messages from '../../messages'
-interface Props {
-}
-
type LangsNames = {
[P in keyof typeof messages]: string
}
diff --git a/packages/frontend/src/components/menu/NavigationBar.tsx b/packages/frontend/src/components/menu/NavigationBar.tsx
@@ -32,10 +32,13 @@ export function NavigationBar({ onMobileMenu }: Props): VNode {
<div class="navbar-brand">
<span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>Instances</span>
- <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" onClick={onMobileMenu}>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
+ <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" onClick={(e) => {
+ onMobileMenu()
+ e.stopPropagation()
+ }}>
+ <span aria-hidden="true" />
+ <span aria-hidden="true" />
+ <span aria-hidden="true" />
</a>
</div>
diff --git a/packages/frontend/src/components/menu/SideBar.tsx b/packages/frontend/src/components/menu/SideBar.tsx
@@ -27,19 +27,18 @@ import { LangSelector } from './LangSelector';
interface Props {
onLogout: () => void;
- onClick: () => void;
mobile?: boolean;
}
-export function Sidebar({ onLogout, onClick }: Props): VNode {
+export function Sidebar({ mobile, onLogout }: Props): VNode {
const config = useConfigContext();
const backend = useContext(BackendContext);
return (
- <aside class="aside is-placed-left is-expanded" onClick={onClick}>
- <div class="footer" onClick={(e)=>{return e.stopImmediatePropagation()}}>
+ <aside class="aside is-placed-left is-expanded">
+ { 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>
@@ -95,7 +94,7 @@ export function Sidebar({ onLogout, onClick }: Props): VNode {
</li>
{!backend.token ? null : <li>
<a class="has-icon is-state-info is-hoverable" onClick={(): void => onLogout()}>
- <span class="icon"><i class="mdi mdi-logout default"></i></span>
+ <span class="icon"><i class="mdi mdi-logout default" /></span>
<span class="menu-item-label">Log out</span>
</a>
</li>}
diff --git a/packages/frontend/src/components/menu/index.tsx b/packages/frontend/src/components/menu/index.tsx
@@ -1,4 +1,20 @@
-import { Fragment, h, VNode } from "preact";
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { NavigationBar } from "./NavigationBar";
import { Sidebar } from "./SideBar";
@@ -10,9 +26,9 @@ interface Props {
export function Menu({ sidebar, onLogout }: Props): VNode {
const [mobileOpen, setMobileOpen] = useState(false)
- return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""}>
+ return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)}>
<NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} />
- {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} onClick={() => setMobileOpen(false)} />}
+ {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} />}
</div>
}
\ No newline at end of file
diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx
@@ -80,12 +80,12 @@ function ApplicationStatusRoutes(): VNode {
const addTokenCleaner = (c: () => void) => setCleaners(cs => [...cs, c])
const addTokenCleanerNemo = useCallback((c: () => void) => { addTokenCleaner(c) }, [cleaner])
- const v = backendConfig.data?.currency + ' ' + backendConfig.data?.version
+ const v = `${backendConfig.data?.currency} ${backendConfig.data?.version}`
const ctx = useMemo(() => ({ currency: backendConfig.data?.currency || '', version: backendConfig.data?.version || '' }), [v])
if (!backendConfig.data) {
- if (!backendConfig.error) return <div class="is-loading"></div>
+ if (!backendConfig.error) return <div class="is-loading" />
if (backendConfig.unauthorized) {
return <div id="app">
diff --git a/packages/frontend/src/schemas/index.ts b/packages/frontend/src/schemas/index.ts
@@ -51,6 +51,7 @@ export const InstanceSchema = yup.object().shape({
auth_token: yup.string()
.min(8).max(20)
.optional()
+ .nullable()
.meta({type: 'secured'}),
payto_uris: yup.array().of(yup.string())
.min(1)
