From 6a0c5263bba435b3ab3a8cda335ceadf7cdd4664 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 8 Nov 2021 16:51:23 +0100 Subject: anastasis-webui: ui tweaks --- .../src/components/menu/NavigationBar.tsx | 78 +++++++----- .../src/components/menu/SideBar.tsx | 4 +- .../anastasis-webui/src/components/menu/index.tsx | 132 +++++++++++++-------- .../src/pages/home/ContinentSelectionScreen.tsx | 30 ++++- 4 files changed, 160 insertions(+), 84 deletions(-) (limited to 'packages/anastasis-webui/src') diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx index c07f04ab6..02004c105 100644 --- a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx +++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx @@ -15,13 +15,13 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; -import logo from '../../assets/logo.jpeg'; -import { LangSelector } from './LangSelector'; +import { h, VNode } from "preact"; +import logo from "../../assets/logo.jpeg"; +import { LangSelector } from "./LangSelector"; interface Props { onMobileMenu: () => void; @@ -29,27 +29,51 @@ interface Props { } export function NavigationBar({ onMobileMenu, title }: Props): VNode { - return ( + ); -} \ No newline at end of file +} diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx index 72655662f..a40f4be09 100644 --- a/packages/anastasis-webui/src/components/menu/SideBar.tsx +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -44,9 +44,9 @@ export function Sidebar({ mobile }: Props): VNode { } */}
-
Anastasis Reducer
+
Anastasis
- {process.env.__VERSION__} ({config.version}) + Version {process.env.__VERSION__} ({config.version})
diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx index febcd79c8..89add9603 100644 --- a/packages/anastasis-webui/src/components/menu/index.tsx +++ b/packages/anastasis-webui/src/components/menu/index.tsx @@ -15,41 +15,53 @@ */ import { ComponentChildren, Fragment, h, VNode } from "preact"; -import Match from 'preact-router/match'; +import Match from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; import { NavigationBar } from "./NavigationBar"; import { Sidebar } from "./SideBar"; - - - interface MenuProps { title: string; } -function WithTitle({ title, children }: { title: string; children: ComponentChildren }): VNode { +function WithTitle({ + title, + children, +}: { + title: string; + children: ComponentChildren; +}): VNode { useEffect(() => { - document.title = `Taler Backoffice: ${title}` - }, [title]) - return {children} + document.title = `${title}`; + }, [title]); + return {children}; } export function Menu({ title }: MenuProps): VNode { - const [mobileOpen, setMobileOpen] = useState(false) - - return {({ path }: { path: string }) => { - const titleWithSubtitle = title // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance)) - return ( -
setMobileOpen(false)}> - setMobileOpen(!mobileOpen)} title={titleWithSubtitle} /> - - - -
- - ) - }} - + const [mobileOpen, setMobileOpen] = useState(false); + + return ( + + {({ path }: { path: string }) => { + const titleWithSubtitle = title; // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance)) + return ( + +
setMobileOpen(false)} + > + setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + +
+ + ); + }} + + ); } interface NotYetReadyAppMenuProps { @@ -60,37 +72,56 @@ interface NotYetReadyAppMenuProps { interface NotifProps { notification?: Notification; } -export function NotificationCard({ notification: n }: NotifProps): VNode | null { - if (!n) return null - return
-
-
-
-
-

{n.message}

-
- {n.description && -
- {n.description} -
} -
+export function NotificationCard({ + notification: n, +}: NotifProps): VNode | null { + if (!n) return null; + return ( +
+
+
+
+
+

{n.message}

+
+ {n.description &&
{n.description}
} +
+
-
+ ); } -export function NotYetReadyAppMenu({ onLogout, title }: NotYetReadyAppMenuProps): VNode { - const [mobileOpen, setMobileOpen] = useState(false) +export function NotYetReadyAppMenu({ + onLogout, + title, +}: NotYetReadyAppMenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { - document.title = `Taler Backoffice: ${title}` - }, [title]) - - return
setMobileOpen(false)}> - setMobileOpen(!mobileOpen)} title={title} /> - {onLogout && } -
- + document.title = `Taler Backoffice: ${title}`; + }, [title]); + + return ( +
setMobileOpen(false)} + > + setMobileOpen(!mobileOpen)} + title={title} + /> + {onLogout && } +
+ ); } export interface Notification { @@ -99,6 +130,5 @@ export interface Notification { type: MessageType; } -export type ValueOrFunction = T | ((p: T) => T) -export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS' - +export type ValueOrFunction = T | ((p: T) => T); +export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx index 464950b60..f7731ba00 100644 --- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx @@ -123,13 +123,35 @@ export function ContinentSelectionScreen(): VNode {

- Your location will help us to determine which personal information - to ask you for the next step. + Your choice will help us with asking the right information to unique + identify you when you want to recover your backed up secrets.

- You should choose the country that issued most of your long-term - legal documents or personal identifiers. + Choose the country that issued most of your long-term legal + documents or personal identifiers.

+
+

+ If you just want to try out Anastasis, we recomment that you + choose Testcontinent with Demoland. For this special + country, you will be asked for a simple number and not real, + personal identifiable information. +

+ {/* +

+ Because of the diversity of personally identifying information in + different countries and cultures, we do not support all countries + yet. If you want to improve the supported countries,{" "} + contact us. +

*/} +
-- cgit v1.2.3