aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/webex/pages/popup.tsx12
-rw-r--r--src/webex/pages/welcome.tsx62
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 ยป