From 42b6c58db80b78efd62140e0752881090498dcc1 Mon Sep 17 00:00:00 2001
From: Florian Dold <florian.dold@gmail.com>
Date: Mon, 4 May 2020 17:16:06 +0530
Subject: [PATCH] settings tab

---
 src/webex/pages/popup.tsx   | 12 +++++++
 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 »