diff options
| -rw-r--r-- | src/webex/pages/popup.tsx | 12 | ||||
| -rw-r--r-- | src/webex/pages/welcome.tsx | 62 |
2 files changed, 46 insertions, 28 deletions
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index f6d95e2f9..7da8056d0 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -40,6 +40,7 @@ import { HistoryEvent } from "../../types/history"; import moment from "moment"; import { Timestamp } from "../../util/time"; import { classifyTalerUri, TalerUriType } from "../../util/taleruri"; +import { PermissionsCheckbox } from "./welcome"; // FIXME: move to newer react functions /* eslint-disable react/no-deprecated */ @@ -153,6 +154,7 @@ class WalletNavBar extends React.Component<any, any> { <div className="nav" id="header"> <Tab target="/balance">{i18n.str`Balance`}</Tab> <Tab target="/history">{i18n.str`History`}</Tab> + <Tab target="/settings">{i18n.str`Settings`}</Tab> <Tab target="/debug">{i18n.str`Debug`}</Tab> </div> ); @@ -624,6 +626,15 @@ const HistoryComponent = (props: any): JSX.Element => { return formatHistoryItem(record); }; +class WalletSettings extends React.Component<any, any> { + render(): JSX.Element { + return <div> + <h2>Permissions</h2> + <PermissionsCheckbox /> + </div>; + } +} + class WalletHistory extends React.Component<any, any> { private myHistory: any[]; private gotError = false; @@ -876,6 +887,7 @@ function WalletPopup(): JSX.Element { <Router> <WalletBalanceView route="/balance" default /> <WalletHistory route="/history" /> + <WalletSettings route="/settings" /> <WalletDebug route="/debug" /> </Router> </div> diff --git a/src/webex/pages/welcome.tsx b/src/webex/pages/welcome.tsx index 5092d2dd8..6e445e431 100644 --- a/src/webex/pages/welcome.tsx +++ b/src/webex/pages/welcome.tsx @@ -96,7 +96,7 @@ function Diagnostics(): JSX.Element | null { return <p>Running diagnostics ...</p>; } -function Welcome(): JSX.Element { +export function PermissionsCheckbox(): JSX.Element { const [extendedPermissions, setExtendedPermissions] = useState(false); async function handleExtendedPerm(newVal: boolean): Promise<void> { const res = await wxApi.setExtendedPermissions(newVal); @@ -104,42 +104,48 @@ function Welcome(): JSX.Element { } useEffect(() => { async function getExtendedPermValue(): Promise<void> { - const res = await wxApi.getExtendedPermissions() + const res = await wxApi.getExtendedPermissions(); setExtendedPermissions(res.newValue); } getExtendedPermValue(); }); return ( + <div> + <input + checked={extendedPermissions} + onChange={(x) => handleExtendedPerm(x.target.checked)} + type="checkbox" + id="checkbox-perm" + style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} + /> + <label + htmlFor="checkbox-perm" + style={{ marginLeft: "0.5em", fontWeight: "bold" }} + > + Automatically open wallet based on page content + </label> + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + (Enabling this option below will make using the wallet faster, but + requires more permissions from your browser.) + </span> + </div> + ); +} + +function Welcome(): JSX.Element { + return ( <> <p>Thank you for installing the wallet.</p> <Diagnostics /> <h2>Permissions</h2> - <div> - <input - checked={extendedPermissions} - onChange={(x) => handleExtendedPerm(x.target.checked)} - type="checkbox" - id="checkbox-perm" - style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} - /> - <label - htmlFor="checkbox-perm" - style={{ marginLeft: "0.5em", fontWeight: "bold" }} - > - Automatically open wallet based on page content - </label> - <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - (Enabling this option below will make using the wallet faster, but - requires more permissions from your browser.) - </span> - </div> + <PermissionsCheckbox /> <h2>Next Steps</h2> <a href="https://demo.taler.net/" style={{ display: "block" }}> Try the demo ยป |