diff options
Diffstat (limited to 'src/webex')
35 files changed, 98 insertions, 2570 deletions
diff --git a/src/webex/background.html b/src/webex/background.html deleted file mode 100644 index 12a962c67..000000000 --- a/src/webex/background.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <script src="../../dist/background-bundle.js"></script> - <title>(wallet bg page)</title> - </head> - <body> - <img id="taler-logo" src="/img/icon.png" /> - </body> -</html> diff --git a/src/webex/notify.ts b/src/webex/notify.ts index 910a20999..d76d121a0 100644 --- a/src/webex/notify.ts +++ b/src/webex/notify.ts @@ -24,7 +24,7 @@ /** * Imports. */ -import wxApi = require("./wxApi"); +import * as wxApi from "./wxApi"; declare var cloneInto: any; diff --git a/src/webex/pageEntryPoint.ts b/src/webex/pageEntryPoint.ts new file mode 100644 index 000000000..04e3dd8d1 --- /dev/null +++ b/src/webex/pageEntryPoint.ts @@ -0,0 +1,64 @@ +/* + This file is part of GNU Taler + (C) 2020 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/> + */ + +/** + * Main entry point for extension pages. + * + * @author Florian Dold <dold@taler.net> + */ + +import ReactDOM from "react-dom"; +import { createPopup } from "./pages/popup"; +import { createWithdrawPage } from "./pages/withdraw"; +import { createWelcomePage } from "./pages/welcome"; + +function main() { + try { + let mainElement; + const m = location.pathname.match(/([^/]+)$/); + if (!m) { + throw Error("can't parse page URL"); + } + const page = m[1]; + switch (page) { + case "popup.html": + mainElement = createPopup(); + break; + case "withdraw.html": + mainElement = createWithdrawPage(); + break; + case "welcome.html": + mainElement = createWelcomePage(); + break; + default: + throw Error(`page '${page}' not implemented`); + } + const container = document.getElementById("container"); + if (!container) { + throw Error("container not found, can't mount page contents"); + } + ReactDOM.render(mainElement, container); + } catch (e) { + console.error("got error", e); + document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; + } +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", main); +} else { + main(); +} diff --git a/src/webex/pages/add-auditor.html b/src/webex/pages/add-auditor.html deleted file mode 100644 index 7f30b5fb6..000000000 --- a/src/webex/pages/add-auditor.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - - <title>Taler Wallet: Add Auditor</title> - - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/add-auditor-bundle.js"></script> - - <style> - .tree-item { - margin: 2em; - border-radius: 5px; - border: 1px solid gray; - padding: 1em; - } - .button-linky { - background: none; - color: black; - text-decoration: underline; - border: none; - } - </style> - </head> - - <body> - <div id="container"></div> - </body> -</html> diff --git a/src/webex/pages/add-auditor.tsx b/src/webex/pages/add-auditor.tsx index 5840f4d63..dbe84cde4 100644 --- a/src/webex/pages/add-auditor.tsx +++ b/src/webex/pages/add-auditor.tsx @@ -23,7 +23,6 @@ import { CurrencyRecord } from "../../types/dbTypes"; import { getCurrencies, updateCurrency } from "../wxApi"; import React, { useState } from "react"; -import { registerMountPage } from "../renderHtml"; interface ConfirmAuditorProps { url: string; @@ -114,7 +113,7 @@ function ConfirmAuditor(props: ConfirmAuditorProps) { ); } -registerMountPage(() => { +export function makeAddAuditorPage() { const walletPageUrl = new URL(document.location.href); const url = walletPageUrl.searchParams.get("url"); if (!url) { @@ -135,4 +134,4 @@ registerMountPage(() => { const expirationStamp = Number.parseInt(auditorStampStr); const args = { url, currency, auditorPub, expirationStamp }; return <ConfirmAuditor {...args} />; -}); +} diff --git a/src/webex/pages/auditors.html b/src/webex/pages/auditors.html deleted file mode 100644 index 7c207f750..000000000 --- a/src/webex/pages/auditors.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Auditors</title> - - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/auditors-bundle.js"></script> - - <style> - body { - font-size: 100%; - } - .tree-item { - margin: 2em; - border-radius: 5px; - border: 1px solid gray; - padding: 1em; - } - .button-linky { - background: none; - color: black; - text-decoration: underline; - border: none; - } - </style> - </head> - - <body> - <div id="container"></div> - </body> -</html> diff --git a/src/webex/pages/auditors.tsx b/src/webex/pages/auditors.tsx index e2bb29af1..e933aeace 100644 --- a/src/webex/pages/auditors.tsx +++ b/src/webex/pages/auditors.tsx @@ -151,8 +151,6 @@ class CurrencyList extends React.Component<{}, CurrencyListState> { } } -function main() { - ReactDOM.render(<CurrencyList />, document.getElementById("container")!); +function makeAuditorsPage() { + return <CurrencyList />; } - -document.addEventListener("DOMContentLoaded", main); diff --git a/src/webex/pages/benchmark.html b/src/webex/pages/benchmark.html deleted file mode 100644 index d4216ecad..000000000 --- a/src/webex/pages/benchmark.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Benchmarks</title> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - <link rel="icon" href="/img/icon.png" /> - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/benchmark-bundle.js"></script> - </head> - <body> - <section id="main"> - <h1>Benchmarks</h1> - <div id="container"></div> - </section> - </body> -</html> diff --git a/src/webex/pages/benchmark.tsx b/src/webex/pages/benchmark.tsx index 7de546bb0..1efe7898d 100644 --- a/src/webex/pages/benchmark.tsx +++ b/src/webex/pages/benchmark.tsx @@ -27,8 +27,6 @@ import { BenchmarkResult } from "../../types/walletTypes"; import * as wxApi from "../wxApi"; import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { registerMountPage } from "../renderHtml"; interface BenchmarkRunnerState { repetitions: number; @@ -101,6 +99,6 @@ class BenchmarkRunner extends React.Component<any, BenchmarkRunnerState> { } } -registerMountPage(() => { +export function makeBenchmarkPage() { return <BenchmarkRunner />; -}); +} diff --git a/src/webex/pages/pay.html b/src/webex/pages/pay.html deleted file mode 100644 index 6afc95615..000000000 --- a/src/webex/pages/pay.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Confirm Contract</title> - - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/pay-bundle.js"></script> - - <style> - button.accept { - background-color: #5757d2; - border: 1px solid black; - border-radius: 5px; - margin: 1em 0; - padding: 0.5em; - font-weight: bold; - color: white; - } - button.linky { - background: none !important; - border: none; - padding: 0 !important; - - font-family: arial, sans-serif; - color: #069; - text-decoration: underline; - cursor: pointer; - } - - input.url { - width: 25em; - } - - button.accept:disabled { - background-color: #dedbe8; - border: 1px solid white; - border-radius: 5px; - margin: 1em 0; - padding: 0.5em; - font-weight: bold; - color: #2c2c2c; - } - - .errorbox { - border: 1px solid; - display: inline-block; - margin: 1em; - padding: 1em; - font-weight: bold; - background: #ff8a8a; - } - - .okaybox { - border: 1px solid; - display: inline-block; - margin: 1em; - padding: 1em; - font-weight: bold; - background: #00fa9a; - } - </style> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <article id="container" class="fade"></article> - </section> - </body> -</html> diff --git a/src/webex/pages/pay.tsx b/src/webex/pages/pay.tsx index 714e3b0a3..09aa595c3 100644 --- a/src/webex/pages/pay.tsx +++ b/src/webex/pages/pay.tsx @@ -26,7 +26,7 @@ import * as i18n from "../i18n"; import { PreparePayResult } from "../../types/walletTypes"; -import { renderAmount, ProgressButton, registerMountPage } from "../renderHtml"; +import { renderAmount, ProgressButton } from "../renderHtml"; import * as wxApi from "../wxApi"; import React, { useState, useEffect } from "react"; @@ -178,11 +178,11 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) { ); } -registerMountPage(() => { +export function makePayPage() { const url = new URL(document.location.href); const talerPayUri = url.searchParams.get("talerPayUri"); if (!talerPayUri) { throw Error("invalid parameter"); } return <TalerPayDialog talerPayUri={talerPayUri} />; -}); +}
\ No newline at end of file diff --git a/src/webex/pages/payback.html b/src/webex/pages/payback.html deleted file mode 100644 index 706949544..000000000 --- a/src/webex/pages/payback.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Payback</title> - - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/payback-bundle.js"></script> - - <style> - body { - font-size: 100%; - } - .tree-item { - margin: 2em; - border-radius: 5px; - border: 1px solid gray; - padding: 1em; - } - .button-linky { - background: none; - color: black; - text-decoration: underline; - border: none; - } - </style> - </head> - - <body> - <div id="container"></div> - </body> -</html> diff --git a/src/webex/pages/payback.tsx b/src/webex/pages/payback.tsx index 96d43ff49..9c53aac91 100644 --- a/src/webex/pages/payback.tsx +++ b/src/webex/pages/payback.tsx @@ -23,13 +23,8 @@ /** * Imports. */ -import { ReserveRecord } from "../../types/dbTypes"; -import { renderAmount, registerMountPage } from "../renderHtml"; import * as React from "react"; -import { useState } from "react"; -function Payback() { +export function makePaybackPage() { return <div>not implemented</div>; } - -registerMountPage(() => <Payback />); diff --git a/src/webex/pages/popup.css b/src/webex/pages/popup.css deleted file mode 100644 index cca002399..000000000 --- a/src/webex/pages/popup.css +++ /dev/null @@ -1,185 +0,0 @@ -/** - * @author Gabor X. Toth - * @author Marcello Stanisci - * @author Florian Dold - */ - -body { - min-height: 20em; - width: 30em; - margin: 0; - padding: 0; - max-height: 800px; - overflow: hidden; - background-color: #f8faf7; - font-family: Arial, Helvetica, sans-serif; -} - -.nav { - background-color: #033; - padding: 0.5em 0; -} - -.nav a { - color: #f8faf7; - padding: 0.7em 1.4em; - text-decoration: none; -} - -.nav a.active { - background-color: #f8faf7; - color: #000; - font-weight: bold; -} - -.container { - overflow-y: scroll; - max-height: 400px; -} - -.abbrev { - text-decoration-style: dotted; -} - -#content { - padding: 1em; -} - -#wallet-table .amount { - text-align: right; -} - -.hidden { - display: none; -} - -#transactions-table th, -#transactions-table td { - padding: 0.2em 0.5em; -} - -#reserve-create table { - width: 100%; -} - -#reserve-create table td.label { - width: 5em; -} - -#reserve-create table .input input[type="text"] { - width: 100%; -} - -.historyItem { - min-width: 380px; - display: flex; - flex-direction: row; - border-bottom: 1px solid #d9dbd8; - padding: 0.5em; - align-items: center; -} - -.historyItem .amount { - font-size: 110%; - font-weight: bold; - text-align: right; -} - -.historyDate, -.historyTitle, -.historyText, -.historySmall { - margin: 0.3em; -} - -.historyDate { - font-size: 90%; - color: slategray; - text-align: right; -} - -.historyLeft { - display: flex; - flex-direction: column; - text-align: right; -} - -.historyContent { - flex: 1; -} - -.historyTitle { - font-weight: 400; -} - -.historyText { - font-size: 90%; -} - -.historySmall { - font-size: 70%; - text-transform: uppercase; -} - -.historyAmount { - flex-grow: 1; -} - -.historyAmount .primary { - font-size: 100%; -} - -.historyAmount .secondary { - font-size: 80%; -} - -.historyAmount .positive { - color: #088; -} - -.historyAmount .positive:before { - content: "+"; -} - -.historyAmount .negative { - color: #800; -} - -.historyAmount .negative:before { - color: #800; - content: "-"; -} -.icon { - margin: 0 10px; - text-align: center; - width: 35px; - font-size: 20px; - border-radius: 50%; - background: #ccc; - color: #fff; - padding-top: 4px; - height: 30px; -} - -.option { - text-transform: uppercase; - text-align: right; - padding: 0.4em; - font-size: 0.9em; -} - -input[type="checkbox"], -input[type="radio"] { - vertical-align: middle; - position: relative; - bottom: 1px; -} - -input[type="radio"] { - bottom: 2px; -} - -.balance { - text-align: center; - padding-top: 2em; -} diff --git a/src/webex/pages/popup.html b/src/webex/pages/popup.html deleted file mode 100644 index 030641d60..000000000 --- a/src/webex/pages/popup.html +++ /dev/null @@ -1,16 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8" /> - - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - <link rel="stylesheet" type="text/css" href="popup.css" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/popup-bundle.js"></script> - </head> - - <body> - <div id="container" style="margin: 0; padding: 0;"></div> - </body> -</html> diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index 17880db58..f4a2bf568 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -35,7 +35,6 @@ import { abbrev, renderAmount, PageLink, - registerMountPage, } from "../renderHtml"; import * as wxApi from "../wxApi"; @@ -807,7 +806,7 @@ function WalletPopup() { ); } -registerMountPage(() => { +export function createPopup() { chrome.runtime.connect({ name: "popup" }); return <WalletPopup />; -}); +}
\ No newline at end of file diff --git a/src/webex/pages/redirect.html b/src/webex/pages/redirect.html deleted file mode 100644 index 67fddb527..000000000 --- a/src/webex/pages/redirect.html +++ /dev/null @@ -1,12 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8" /> - - <script src="/src/webex/pages/redirect.js"></script> - </head> - - <body> - Redirecting to extension page ... - </body> -</html> diff --git a/src/webex/pages/redirect.js b/src/webex/pages/redirect.js deleted file mode 100644 index 547b225bd..000000000 --- a/src/webex/pages/redirect.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * This is the entry point for redirects, and should be the only - * web-accessible resource declared in the manifest. This prevents - * malicious websites from embedding wallet pages in them. - * - * We still need this redirect page since a webRequest can only directly - * redirect to pages inside the extension that are a web-accessible resource. - */ - -const myUrl = new URL(window.location.href); -const redirectUrl = myUrl.searchParams.get("url"); -if (!redirectUrl) { - console.error("missing redirect URL"); -} else { - window.location.replace(redirectUrl); -} diff --git a/src/webex/pages/refund.html b/src/webex/pages/refund.html deleted file mode 100644 index c671bb193..000000000 --- a/src/webex/pages/refund.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Refund Status</title> - - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/refund-bundle.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <article id="container" class="fade"></article> - </section> - </body> -</html> diff --git a/src/webex/pages/refund.tsx b/src/webex/pages/refund.tsx index 389d5e569..8263ceace 100644 --- a/src/webex/pages/refund.tsx +++ b/src/webex/pages/refund.tsx @@ -73,7 +73,7 @@ function RefundStatusView(props: { talerRefundUri: string }) { ); } -async function main() { +export function createRefundPage() { const url = new URL(document.location.href); const container = document.getElementById("container"); @@ -88,10 +88,5 @@ async function main() { return; } - ReactDOM.render( - <RefundStatusView talerRefundUri={talerRefundUri} />, - container, - ); + return <RefundStatusView talerRefundUri={talerRefundUri} />; } - -document.addEventListener("DOMContentLoaded", () => main()); diff --git a/src/webex/pages/reset-required.html b/src/webex/pages/reset-required.html deleted file mode 100644 index 124d5f46f..000000000 --- a/src/webex/pages/reset-required.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Select Taler Provider</title> - - <link rel="icon" href="/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/reset-required-bundle.js"></script> - - <style> - body { - font-size: 100%; - overflow-y: scroll; - } - </style> - </head> - - <body> - <section id="main"> - <div id="container"></div> - </section> - </body> -</html> diff --git a/src/webex/pages/reset-required.tsx b/src/webex/pages/reset-required.tsx index 81f21f459..e58243b34 100644 --- a/src/webex/pages/reset-required.tsx +++ b/src/webex/pages/reset-required.tsx @@ -21,7 +21,6 @@ */ import * as React from "react"; -import * as ReactDOM from "react-dom"; import * as wxApi from "../wxApi"; @@ -89,6 +88,6 @@ class ResetNotification extends React.Component<any, State> { } } -document.addEventListener("DOMContentLoaded", () => { - ReactDOM.render(<ResetNotification />, document.getElementById("container")!); -}); +export function createResetRequiredPage() { + return <ResetNotification />; +} diff --git a/src/webex/pages/return-coins.html b/src/webex/pages/return-coins.html deleted file mode 100644 index 54106f3e6..000000000 --- a/src/webex/pages/return-coins.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Return Coins to Bank Account</title> - - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <link rel="icon" href="/img/icon.png" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/return-coins-bundle.js"></script> - </head> - - <body> - <div id="container"></div> - </body> -</html> diff --git a/src/webex/pages/return-coins.tsx b/src/webex/pages/return-coins.tsx index 3786697c6..06a3ba169 100644 --- a/src/webex/pages/return-coins.tsx +++ b/src/webex/pages/return-coins.tsx @@ -310,8 +310,6 @@ class ReturnCoins extends React.Component<{}, ReturnCoinsState> { } } -function main() { - ReactDOM.render(<ReturnCoins />, document.getElementById("container")!); +export function createReturnCoinsPage() { + return <ReturnCoins />; } - -document.addEventListener("DOMContentLoaded", main); diff --git a/src/webex/pages/show-db.html b/src/webex/pages/show-db.html deleted file mode 100644 index ae77e3fb0..000000000 --- a/src/webex/pages/show-db.html +++ /dev/null @@ -1,18 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Reserve Created</title> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - <link rel="icon" href="/img/icon.png" /> - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/show-db-bundle.js"></script> - </head> - <body> - <h1>DB Dump</h1> - <input type="file" id="fileInput" style="display: none;" /> - <button id="import">Import Dump</button> - <button id="download">Download Dump</button> - <pre id="dump"></pre> - </body> -</html> diff --git a/src/webex/pages/show-db.ts b/src/webex/pages/show-db.ts deleted file mode 100644 index 16ea80d2d..000000000 --- a/src/webex/pages/show-db.ts +++ /dev/null @@ -1,103 +0,0 @@ -/* - This file is part of TALER - (C) 2015 GNUnet e.V. - - 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. - - 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 - TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -/** - * Wallet database dump for debugging. - * - * @author Florian Dold - */ - -function replacer( - match: string, - pIndent: string, - pKey: string, - pVal: string, - pEnd: string, -) { - const key = "<span class=json-key>"; - const val = "<span class=json-value>"; - const str = "<span class=json-string>"; - let r = pIndent || ""; - if (pKey) { - r = r + key + '"' + pKey.replace(/[": ]/g, "") + '":</span> '; - } - if (pVal) { - r = r + (pVal[0] === '"' ? str : val) + pVal + "</span>"; - } - return r + (pEnd || ""); -} - -function prettyPrint(obj: any) { - const jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/gm; - return JSON.stringify(obj, null as any, 3) - .replace(/&/g, "&") - .replace(/\\"/g, """) - .replace(/</g, "<") - .replace(/>/g, ">") - .replace(jsonLine, replacer); -} - -document.addEventListener("DOMContentLoaded", () => { - chrome.runtime.sendMessage({ type: "dump-db" }, (resp) => { - const el = document.getElementById("dump"); - if (!el) { - throw Error(); - } - el.innerHTML = prettyPrint(resp); - - document.getElementById("download")!.addEventListener("click", (evt) => { - console.log("creating download"); - const element = document.createElement("a"); - element.setAttribute( - "href", - "data:text/plain;charset=utf-8," + - encodeURIComponent(JSON.stringify(resp)), - ); - element.setAttribute("download", "wallet-dump.txt"); - element.style.display = "none"; - document.body.appendChild(element); - element.click(); - }); - }); - - const fileInput = document.getElementById("fileInput")! as HTMLInputElement; - fileInput.onchange = (evt) => { - if (!fileInput.files || fileInput.files.length !== 1) { - alert("please select exactly one file to import"); - return; - } - const file = fileInput.files[0]; - const fr = new FileReader(); - fr.onload = (e: any) => { - console.log("got file"); - const dump = JSON.parse(e.target.result); - console.log("parsed contents", dump); - chrome.runtime.sendMessage( - { type: "import-db", detail: { dump } }, - (resp) => { - alert("loaded"); - }, - ); - }; - console.log("reading file", file); - fr.readAsText(file); - }; - - document.getElementById("import")!.addEventListener("click", (evt) => { - fileInput.click(); - evt.preventDefault(); - }); -}); diff --git a/src/webex/pages/tip.html b/src/webex/pages/tip.html deleted file mode 100644 index 0625640ed..000000000 --- a/src/webex/pages/tip.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Received Tip</title> - - <link rel="icon" href="/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/tip-bundle.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <div id="container"></div> - </section> - </body> -</html> diff --git a/src/webex/pages/tip.tsx b/src/webex/pages/tip.tsx index 35e033c0d..10e12d590 100644 --- a/src/webex/pages/tip.tsx +++ b/src/webex/pages/tip.tsx @@ -100,26 +100,12 @@ function TipDisplay(props: { talerTipUri: string }) { ); } -async function main() { - try { +export function createTipPage() { const url = new URL(document.location.href); const talerTipUri = url.searchParams.get("talerTipUri"); if (typeof talerTipUri !== "string") { throw Error("talerTipUri must be a string"); } - ReactDOM.render( - <TipDisplay talerTipUri={talerTipUri} />, - document.getElementById("container")!, - ); - } catch (e) { - // TODO: provide more context information, maybe factor it out into a - // TODO:generic error reporting function or component. - document.body.innerText = i18n.str`Fatal error: "${e.message}".`; - console.error(`got error "${e.message}"`, e); - } + return <TipDisplay talerTipUri={talerTipUri} />; } - -document.addEventListener("DOMContentLoaded", () => { - main(); -}); diff --git a/src/webex/pages/welcome.html b/src/webex/pages/welcome.html deleted file mode 100644 index 8f17891e2..000000000 --- a/src/webex/pages/welcome.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Withdraw</title> - - <link rel="icon" href="/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/welcome-bundle.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet Installed!</h1> - <div id="container">Loading...</div> - </section> - </body> -</html> diff --git a/src/webex/pages/welcome.tsx b/src/webex/pages/welcome.tsx index 83f4f01d5..8510ad383 100644 --- a/src/webex/pages/welcome.tsx +++ b/src/webex/pages/welcome.tsx @@ -22,7 +22,7 @@ import React, { useState, useEffect } from "react"; import { getDiagnostics } from "../wxApi"; -import { registerMountPage, PageLink } from "../renderHtml"; +import { PageLink } from "../renderHtml"; import { WalletDiagnostics } from "../../types/walletTypes"; function Diagnostics() { @@ -110,4 +110,6 @@ function Welcome() { ); } -registerMountPage(() => <Welcome />); +export function createWelcomePage() { + return <Welcome />; +}
\ No newline at end of file diff --git a/src/webex/pages/withdraw.html b/src/webex/pages/withdraw.html deleted file mode 100644 index 861b219f5..000000000 --- a/src/webex/pages/withdraw.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Withdraw</title> - - <link rel="icon" href="/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="../style/pure.css" /> - <link rel="stylesheet" type="text/css" href="../style/wallet.css" /> - - <script src="/dist/page-common-bundle.js"></script> - <script src="/dist/withdraw-bundle.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <div class="fade" id="exchange-selection"></div> - </section> - </body> -</html> diff --git a/src/webex/pages/withdraw.tsx b/src/webex/pages/withdraw.tsx index 7a2665314..e071dc8ba 100644 --- a/src/webex/pages/withdraw.tsx +++ b/src/webex/pages/withdraw.tsx @@ -217,6 +217,11 @@ async function main() { } } -document.addEventListener("DOMContentLoaded", () => { - main(); -}); +export function createWithdrawPage() { + const url = new URL(document.location.href); + const talerWithdrawUri = url.searchParams.get("talerWithdrawUri"); + if (!talerWithdrawUri) { + throw Error("withdraw URI required"); + } + return <NewExchangeSelection talerWithdrawUri={talerWithdrawUri} />; +}
\ No newline at end of file diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx index 08e7de607..082dd84dd 100644 --- a/src/webex/renderHtml.tsx +++ b/src/webex/renderHtml.tsx @@ -27,7 +27,6 @@ import { AmountJson } from "../util/amounts"; import * as Amounts from "../util/amounts"; import { DenominationRecord } from "../types/dbTypes"; import { ExchangeWithdrawDetails } from "../types/walletTypes"; -import * as moment from "moment"; import * as i18n from "./i18n"; import React from "react"; import ReactDOM from "react-dom"; @@ -331,29 +330,6 @@ export function ProgressButton( ); } -export function registerMountPage(mainFn: () => React.ReactElement) { - async function main() { - try { - const mainElement = mainFn(); - const container = document.getElementById("container"); - if (!container) { - throw Error("container not found, can't mount page contents"); - } - ReactDOM.render(mainElement, container); - } catch (e) { - document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; - console.error("got error", e); - } - } - - if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", main); - return; - } else { - main(); - } -} - export function PageLink(props: React.PropsWithChildren<{ pageName: string }>) { const url = chrome.extension.getURL(`/src/webex/pages/${props.pageName}`); return ( diff --git a/src/webex/style/pure.css b/src/webex/style/pure.css deleted file mode 100644 index 88a4bb7d7..000000000 --- a/src/webex/style/pure.css +++ /dev/null @@ -1,1513 +0,0 @@ -/*! -Pure v0.6.2 -Copyright 2013 Yahoo! -Licensed under the BSD License. -https://github.com/yahoo/pure/blob/master/LICENSE.md -*/ -/*! -normalize.css v^3.0 | MIT License | git.io/normalize -Copyright (c) Nicolas Gallagher and Jonathan Neal -*/ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} - -/*csslint important:false*/ - -/* ========================================================================== - Pure Base Extras - ========================================================================== */ - -/** - * Extra rules that Pure adds on top of Normalize.css - */ - -/** - * Always hide an element when it has the `hidden` HTML attribute. - */ - -.hidden, -[hidden] { - display: none !important; -} - -/** - * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining - * aspect ratio. - */ -.pure-img { - max-width: 100%; - height: auto; - display: block; -} - -/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ - -.pure-g { - letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ - *letter-spacing: normal; /* reset IE < 8 */ - *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ - text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ - - /* - Sets the font stack to fonts known to work properly with the above letter - and word spacings. See: https://github.com/yahoo/pure/issues/41/ - - The following font stack makes Pure Grids work on all known environments. - - * FreeSans: Ships with many Linux distros, including Ubuntu - - * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and - Arial to get picked up by the browser, even though neither is available - in Chrome OS. - - * Droid Sans: Ships with all versions of Android. - - * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. - */ - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - - /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - - /* Prevents distributing space between rows */ - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start; -} - -/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - table .pure-g { - display: block; - } -} - -/* Opera as of 12 on Windows needs word-spacing. - The ".opera-only" selector is used to prevent actual prefocus styling - and is not required in markup. -*/ -.opera-only :-o-prefocus, -.pure-g { - word-spacing: -0.43em; -} - -.pure-u { - display: inline-block; - *display: inline; /* IE < 8: fake inline-block */ - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; -} - -/* -Resets the font family back to the OS/browser's default sans-serif font, -this the same font stack that Normalize.css sets for the `body`. -*/ -.pure-g [class*="pure-u"] { - font-family: sans-serif; -} - -.pure-u-1, -.pure-u-1-1, -.pure-u-1-2, -.pure-u-1-3, -.pure-u-2-3, -.pure-u-1-4, -.pure-u-3-4, -.pure-u-1-5, -.pure-u-2-5, -.pure-u-3-5, -.pure-u-4-5, -.pure-u-5-5, -.pure-u-1-6, -.pure-u-5-6, -.pure-u-1-8, -.pure-u-3-8, -.pure-u-5-8, -.pure-u-7-8, -.pure-u-1-12, -.pure-u-5-12, -.pure-u-7-12, -.pure-u-11-12, -.pure-u-1-24, -.pure-u-2-24, -.pure-u-3-24, -.pure-u-4-24, -.pure-u-5-24, -.pure-u-6-24, -.pure-u-7-24, -.pure-u-8-24, -.pure-u-9-24, -.pure-u-10-24, -.pure-u-11-24, -.pure-u-12-24, -.pure-u-13-24, -.pure-u-14-24, -.pure-u-15-24, -.pure-u-16-24, -.pure-u-17-24, -.pure-u-18-24, -.pure-u-19-24, -.pure-u-20-24, -.pure-u-21-24, -.pure-u-22-24, -.pure-u-23-24, -.pure-u-24-24 { - display: inline-block; - *display: inline; - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; -} - -.pure-u-1-24 { - width: 4.1667%; - *width: 4.1357%; -} - -.pure-u-1-12, -.pure-u-2-24 { - width: 8.3333%; - *width: 8.3023%; -} - -.pure-u-1-8, -.pure-u-3-24 { - width: 12.5%; - *width: 12.469%; -} - -.pure-u-1-6, -.pure-u-4-24 { - width: 16.6667%; - *width: 16.6357%; -} - -.pure-u-1-5 { - width: 20%; - *width: 19.969%; -} - -.pure-u-5-24 { - width: 20.8333%; - *width: 20.8023%; -} - -.pure-u-1-4, -.pure-u-6-24 { - width: 25%; - *width: 24.969%; -} - -.pure-u-7-24 { - width: 29.1667%; - *width: 29.1357%; -} - -.pure-u-1-3, -.pure-u-8-24 { - width: 33.3333%; - *width: 33.3023%; -} - -.pure-u-3-8, -.pure-u-9-24 { - width: 37.5%; - *width: 37.469%; -} - -.pure-u-2-5 { - width: 40%; - *width: 39.969%; -} - -.pure-u-5-12, -.pure-u-10-24 { - width: 41.6667%; - *width: 41.6357%; -} - -.pure-u-11-24 { - width: 45.8333%; - *width: 45.8023%; -} - -.pure-u-1-2, -.pure-u-12-24 { - width: 50%; - *width: 49.969%; -} - -.pure-u-13-24 { - width: 54.1667%; - *width: 54.1357%; -} - -.pure-u-7-12, -.pure-u-14-24 { - width: 58.3333%; - *width: 58.3023%; -} - -.pure-u-3-5 { - width: 60%; - *width: 59.969%; -} - -.pure-u-5-8, -.pure-u-15-24 { - width: 62.5%; - *width: 62.469%; -} - -.pure-u-2-3, -.pure-u-16-24 { - width: 66.6667%; - *width: 66.6357%; -} - -.pure-u-17-24 { - width: 70.8333%; - *width: 70.8023%; -} - -.pure-u-3-4, -.pure-u-18-24 { - width: 75%; - *width: 74.969%; -} - -.pure-u-19-24 { - width: 79.1667%; - *width: 79.1357%; -} - -.pure-u-4-5 { - width: 80%; - *width: 79.969%; -} - -.pure-u-5-6, -.pure-u-20-24 { - width: 83.3333%; - *width: 83.3023%; -} - -.pure-u-7-8, -.pure-u-21-24 { - width: 87.5%; - *width: 87.469%; -} - -.pure-u-11-12, -.pure-u-22-24 { - width: 91.6667%; - *width: 91.6357%; -} - -.pure-u-23-24 { - width: 95.8333%; - *width: 95.8023%; -} - -.pure-u-1, -.pure-u-1-1, -.pure-u-5-5, -.pure-u-24-24 { - width: 100%; -} -.pure-button { - /* Structure */ - display: inline-block; - zoom: 1; - line-height: normal; - white-space: nowrap; - vertical-align: middle; - text-align: center; - cursor: pointer; - -webkit-user-drag: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - box-sizing: border-box; -} - -/* Firefox: Get rid of the inner focus border */ -.pure-button::-moz-focus-inner { - padding: 0; - border: 0; -} - -/* Inherit .pure-g styles */ -.pure-button-group { - letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ - *letter-spacing: normal; /* reset IE < 8 */ - *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ - text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ -} - -.opera-only :-o-prefocus, -.pure-button-group { - word-spacing: -0.43em; -} - -.pure-button-group .pure-button { - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; -} - -/*csslint outline-none:false*/ - -.pure-button { - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - color: #444; /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); /* rgba supported */ - border: 1px solid #999; /*IE 6/7/8*/ - border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ - background-color: #e6e6e6; - text-decoration: none; - border-radius: 2px; -} - -.pure-button-hover, -.pure-button:hover, -.pure-button:focus { - /* csslint ignore:start */ - filter: alpha(opacity=90); - /* csslint ignore:end */ - background-image: -webkit-linear-gradient( - transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) - ); - background-image: linear-gradient( - transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) - ); -} -.pure-button:focus { - outline: 0; -} -.pure-button-active, -.pure-button:active { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, - 0 0 6px rgba(0, 0, 0, 0.2) inset; - border-color: #000\9; -} - -.pure-button[disabled], -.pure-button-disabled, -.pure-button-disabled:hover, -.pure-button-disabled:focus, -.pure-button-disabled:active { - border: none; - background-image: none; - /* csslint ignore:start */ - filter: alpha(opacity=40); - /* csslint ignore:end */ - opacity: 0.4; - cursor: not-allowed; - box-shadow: none; - pointer-events: none; -} - -.pure-button-hidden { - display: none; -} - -.pure-button-primary, -.pure-button-selected, -a.pure-button-primary, -a.pure-button-selected { - background-color: rgb(0, 120, 231); - color: #fff; -} - -/* Button Groups */ -.pure-button-group .pure-button { - margin: 0; - border-radius: 0; - border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */ - border-right: 1px solid rgba(0, 0, 0, 0.2); -} - -.pure-button-group .pure-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; -} -.pure-button-group .pure-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-right: none; -} - -/*csslint box-model:false*/ -/* -Box-model set to false because we're setting a height on select elements, which -also have border and padding. This is done because some browsers don't render -the padding. We explicitly set the box-model for select elements to border-box, -so we can ignore the csslint warning. -*/ - -.pure-form input[type="text"], -.pure-form input[type="password"], -.pure-form input[type="email"], -.pure-form input[type="url"], -.pure-form input[type="date"], -.pure-form input[type="month"], -.pure-form input[type="time"], -.pure-form input[type="datetime"], -.pure-form input[type="datetime-local"], -.pure-form input[type="week"], -.pure-form input[type="number"], -.pure-form input[type="search"], -.pure-form input[type="tel"], -.pure-form input[type="color"], -.pure-form select, -.pure-form textarea { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - vertical-align: middle; - box-sizing: border-box; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type]) { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - box-sizing: border-box; -} - -/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ -/* May be able to remove this tweak as color inputs become more standardized across browsers. */ -.pure-form input[type="color"] { - padding: 0.2em 0.5em; -} - -.pure-form input[type="text"]:focus, -.pure-form input[type="password"]:focus, -.pure-form input[type="email"]:focus, -.pure-form input[type="url"]:focus, -.pure-form input[type="date"]:focus, -.pure-form input[type="month"]:focus, -.pure-form input[type="time"]:focus, -.pure-form input[type="datetime"]:focus, -.pure-form input[type="datetime-local"]:focus, -.pure-form input[type="week"]:focus, -.pure-form input[type="number"]:focus, -.pure-form input[type="search"]:focus, -.pure-form input[type="tel"]:focus, -.pure-form input[type="color"]:focus, -.pure-form select:focus, -.pure-form textarea:focus { - outline: 0; - border-color: #129fea; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type]):focus { - outline: 0; - border-color: #129fea; -} - -.pure-form input[type="file"]:focus, -.pure-form input[type="radio"]:focus, -.pure-form input[type="checkbox"]:focus { - outline: thin solid #129fea; - outline: 1px auto #129fea; -} -.pure-form .pure-checkbox, -.pure-form .pure-radio { - margin: 0.5em 0; - display: block; -} - -.pure-form input[type="text"][disabled], -.pure-form input[type="password"][disabled], -.pure-form input[type="email"][disabled], -.pure-form input[type="url"][disabled], -.pure-form input[type="date"][disabled], -.pure-form input[type="month"][disabled], -.pure-form input[type="time"][disabled], -.pure-form input[type="datetime"][disabled], -.pure-form input[type="datetime-local"][disabled], -.pure-form input[type="week"][disabled], -.pure-form input[type="number"][disabled], -.pure-form input[type="search"][disabled], -.pure-form input[type="tel"][disabled], -.pure-form input[type="color"][disabled], -.pure-form select[disabled], -.pure-form textarea[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type])[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; -} -.pure-form input[readonly], -.pure-form select[readonly], -.pure-form textarea[readonly] { - background-color: #eee; /* menu hover bg color */ - color: #777; /* menu text color */ - border-color: #ccc; -} - -.pure-form input:focus:invalid, -.pure-form textarea:focus:invalid, -.pure-form select:focus:invalid { - color: #b94a48; - border-color: #e9322d; -} -.pure-form input[type="file"]:focus:invalid:focus, -.pure-form input[type="radio"]:focus:invalid:focus, -.pure-form input[type="checkbox"]:focus:invalid:focus { - outline-color: #e9322d; -} -.pure-form select { - /* Normalizes the height; padding is not sufficient. */ - height: 2.25em; - border: 1px solid #ccc; - background-color: white; -} -.pure-form select[multiple] { - height: auto; -} -.pure-form label { - margin: 0.5em 0 0.2em; -} -.pure-form fieldset { - margin: 0; - padding: 0.35em 0 0.75em; - border: 0; -} -.pure-form legend { - display: block; - width: 100%; - padding: 0.3em 0; - margin-bottom: 0.3em; - color: #333; - border-bottom: 1px solid #e5e5e5; -} - -.pure-form-stacked input[type="text"], -.pure-form-stacked input[type="password"], -.pure-form-stacked input[type="email"], -.pure-form-stacked input[type="url"], -.pure-form-stacked input[type="date"], -.pure-form-stacked input[type="month"], -.pure-form-stacked input[type="time"], -.pure-form-stacked input[type="datetime"], -.pure-form-stacked input[type="datetime-local"], -.pure-form-stacked input[type="week"], -.pure-form-stacked input[type="number"], -.pure-form-stacked input[type="search"], -.pure-form-stacked input[type="tel"], -.pure-form-stacked input[type="color"], -.pure-form-stacked input[type="file"], -.pure-form-stacked select, -.pure-form-stacked label, -.pure-form-stacked textarea { - display: block; - margin: 0.25em 0; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form-stacked input:not([type]) { - display: block; - margin: 0.25em 0; -} -.pure-form-aligned input, -.pure-form-aligned textarea, -.pure-form-aligned select, -/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ -.pure-form-aligned .pure-help-inline, -.pure-form-message-inline { - display: inline-block; - *display: inline; - *zoom: 1; - vertical-align: middle; -} -.pure-form-aligned textarea { - vertical-align: top; -} - -/* Aligned Forms */ -.pure-form-aligned .pure-control-group { - margin-bottom: 0.5em; -} -.pure-form-aligned .pure-control-group label { - text-align: right; - display: inline-block; - vertical-align: middle; - width: 10em; - margin: 0 1em 0 0; -} -.pure-form-aligned .pure-controls { - margin: 1.5em 0 0 11em; -} - -/* Rounded Inputs */ -.pure-form input.pure-input-rounded, -.pure-form .pure-input-rounded { - border-radius: 2em; - padding: 0.5em 1em; -} - -/* Grouped Inputs */ -.pure-form .pure-group fieldset { - margin-bottom: 10px; -} -.pure-form .pure-group input, -.pure-form .pure-group textarea { - display: block; - padding: 10px; - margin: 0 0 -1px; - border-radius: 0; - position: relative; - top: -1px; -} -.pure-form .pure-group input:focus, -.pure-form .pure-group textarea:focus { - z-index: 3; -} -.pure-form .pure-group input:first-child, -.pure-form .pure-group textarea:first-child { - top: 1px; - border-radius: 4px 4px 0 0; - margin: 0; -} -.pure-form .pure-group input:first-child:last-child, -.pure-form .pure-group textarea:first-child:last-child { - top: 1px; - border-radius: 4px; - margin: 0; -} -.pure-form .pure-group input:last-child, -.pure-form .pure-group textarea:last-child { - top: -2px; - border-radius: 0 0 4px 4px; - margin: 0; -} -.pure-form .pure-group button { - margin: 0.35em 0; -} - -.pure-form .pure-input-1 { - width: 100%; -} -.pure-form .pure-input-3-4 { - width: 75%; -} -.pure-form .pure-input-2-3 { - width: 66%; -} -.pure-form .pure-input-1-2 { - width: 50%; -} -.pure-form .pure-input-1-3 { - width: 33%; -} -.pure-form .pure-input-1-4 { - width: 25%; -} - -/* Inline help for forms */ -/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ -.pure-form .pure-help-inline, -.pure-form-message-inline { - display: inline-block; - padding-left: 0.3em; - color: #666; - vertical-align: middle; - font-size: 0.875em; -} - -/* Block help for forms */ -.pure-form-message { - display: block; - color: #666; - font-size: 0.875em; -} - -@media only screen and (max-width: 480px) { - .pure-form button[type="submit"] { - margin: 0.7em 0 0; - } - - .pure-form input:not([type]), - .pure-form input[type="text"], - .pure-form input[type="password"], - .pure-form input[type="email"], - .pure-form input[type="url"], - .pure-form input[type="date"], - .pure-form input[type="month"], - .pure-form input[type="time"], - .pure-form input[type="datetime"], - .pure-form input[type="datetime-local"], - .pure-form input[type="week"], - .pure-form input[type="number"], - .pure-form input[type="search"], - .pure-form input[type="tel"], - .pure-form input[type="color"], - .pure-form label { - margin-bottom: 0.3em; - display: block; - } - - .pure-group input:not([type]), - .pure-group input[type="text"], - .pure-group input[type="password"], - .pure-group input[type="email"], - .pure-group input[type="url"], - .pure-group input[type="date"], - .pure-group input[type="month"], - .pure-group input[type="time"], - .pure-group input[type="datetime"], - .pure-group input[type="datetime-local"], - .pure-group input[type="week"], - .pure-group input[type="number"], - .pure-group input[type="search"], - .pure-group input[type="tel"], - .pure-group input[type="color"] { - margin-bottom: 0; - } - - .pure-form-aligned .pure-control-group label { - margin-bottom: 0.3em; - text-align: left; - display: block; - width: 100%; - } - - .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 0; - } - - /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ - .pure-form .pure-help-inline, - .pure-form-message-inline, - .pure-form-message { - display: block; - font-size: 0.75em; - /* Increased bottom padding to make it group with its related input element. */ - padding: 0.2em 0 0.8em; - } -} - -/*csslint adjoining-classes: false, box-model:false*/ -.pure-menu { - box-sizing: border-box; -} - -.pure-menu-fixed { - position: fixed; - left: 0; - top: 0; - z-index: 3; -} - -.pure-menu-list, -.pure-menu-item { - position: relative; -} - -.pure-menu-list { - list-style: none; - margin: 0; - padding: 0; -} - -.pure-menu-item { - padding: 0; - margin: 0; - height: 100%; -} - -.pure-menu-link, -.pure-menu-heading { - display: block; - text-decoration: none; - white-space: nowrap; -} - -/* HORIZONTAL MENU */ -.pure-menu-horizontal { - width: 100%; - white-space: nowrap; -} - -.pure-menu-horizontal .pure-menu-list { - display: inline-block; -} - -/* Initial menus should be inline-block so that they are horizontal */ -.pure-menu-horizontal .pure-menu-item, -.pure-menu-horizontal .pure-menu-heading, -.pure-menu-horizontal .pure-menu-separator { - display: inline-block; - *display: inline; - zoom: 1; - vertical-align: middle; -} - -/* Submenus should still be display: block; */ -.pure-menu-item .pure-menu-item { - display: block; -} - -.pure-menu-children { - display: none; - position: absolute; - left: 100%; - top: 0; - margin: 0; - padding: 0; - z-index: 3; -} - -.pure-menu-horizontal .pure-menu-children { - left: 0; - top: auto; - width: inherit; -} - -.pure-menu-allow-hover:hover > .pure-menu-children, -.pure-menu-active > .pure-menu-children { - display: block; - position: absolute; -} - -/* Vertical Menus - show the dropdown arrow */ -.pure-menu-has-children > .pure-menu-link:after { - padding-left: 0.5em; - content: "\25B8"; - font-size: small; -} - -/* Horizontal Menus - show the dropdown arrow */ -.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { - content: "\25BE"; -} - -/* scrollable menus */ -.pure-menu-scrollable { - overflow-y: scroll; - overflow-x: hidden; -} - -.pure-menu-scrollable .pure-menu-list { - display: block; -} - -.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { - display: inline-block; -} - -.pure-menu-horizontal.pure-menu-scrollable { - white-space: nowrap; - overflow-y: hidden; - overflow-x: auto; - -ms-overflow-style: none; - -webkit-overflow-scrolling: touch; - /* a little extra padding for this style to allow for scrollbars */ - padding: 0.5em 0; -} - -.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { - display: none; -} - -/* misc default styling */ - -.pure-menu-separator, -.pure-menu-horizontal .pure-menu-children .pure-menu-separator { - background-color: #ccc; - height: 1px; - margin: 0.3em 0; -} - -.pure-menu-horizontal .pure-menu-separator { - width: 1px; - height: 1.3em; - margin: 0 0.3em; -} - -/* Need to reset the separator since submenu is vertical */ -.pure-menu-horizontal .pure-menu-children .pure-menu-separator { - display: block; - width: auto; -} - -.pure-menu-heading { - text-transform: uppercase; - color: #565d64; -} - -.pure-menu-link { - color: #777; -} - -.pure-menu-children { - background-color: #fff; -} - -.pure-menu-link, -.pure-menu-disabled, -.pure-menu-heading { - padding: 0.5em 1em; -} - -.pure-menu-disabled { - opacity: 0.5; -} - -.pure-menu-disabled .pure-menu-link:hover { - background-color: transparent; -} - -.pure-menu-active > .pure-menu-link, -.pure-menu-link:hover, -.pure-menu-link:focus { - background-color: #eee; -} - -.pure-menu-selected .pure-menu-link, -.pure-menu-selected .pure-menu-link:visited { - color: #000; -} - -.pure-table { - /* Remove spacing between table cells (from Normalize.css) */ - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - border: 1px solid #cbcbcb; -} - -.pure-table caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; -} - -.pure-table td, -.pure-table th { - border-left: 1px solid #cbcbcb; /* inner column border */ - border-width: 0 0 0 1px; - font-size: inherit; - margin: 0; - overflow: visible; /*to make ths where the title is really long work*/ - padding: 0.5em 1em; /* cell padding */ -} - -/* Consider removing this next declaration block, as it causes problems when -there's a rowspan on the first cell. Case added to the tests. issue#432 */ -.pure-table td:first-child, -.pure-table th:first-child { - border-left-width: 0; -} - -.pure-table thead { - background-color: #e0e0e0; - color: #000; - text-align: left; - vertical-align: bottom; -} - -/* -striping: - even - #fff (white) - odd - #f2f2f2 (light gray) -*/ -.pure-table td { - background-color: transparent; -} -.pure-table-odd td { - background-color: #f2f2f2; -} - -/* nth-child selector for modern browsers */ -.pure-table-striped tr:nth-child(2n-1) td { - background-color: #f2f2f2; -} - -/* BORDERED TABLES */ -.pure-table-bordered td { - border-bottom: 1px solid #cbcbcb; -} -.pure-table-bordered tbody > tr:last-child > td { - border-bottom-width: 0; -} - -/* HORIZONTAL BORDERED TABLES */ - -.pure-table-horizontal td, -.pure-table-horizontal th { - border-width: 0 0 1px 0; - border-bottom: 1px solid #cbcbcb; -} -.pure-table-horizontal tbody > tr:last-child > td { - border-bottom-width: 0; -} diff --git a/src/webex/style/wallet.css b/src/webex/style/wallet.css deleted file mode 100644 index 16a414b3d..000000000 --- a/src/webex/style/wallet.css +++ /dev/null @@ -1,283 +0,0 @@ -body { - font-size: 100%; - overflow-y: scroll; -} - -#main { - border: solid 1px black; - border-radius: 10px; - margin-left: auto; - margin-right: auto; - margin-top: 2em; - max-width: 50%; - padding: 2em; -} - -header { - width: 100%; - height: 100px; - margin: 0; - padding: 0; - border-bottom: 1px solid black; -} - -header h1 { - font-size: 200%; - margin: 0; - padding: 0 0 0 120px; - position: relative; - top: 50%; - transform: translateY(-50%); -} - -header #logo { - float: left; - width: 100px; - height: 100px; - padding: 0; - margin: 0; - text-align: center; - border-right: 1px solid black; - background-image: url(/img/logo.png); - background-size: 100px; -} - -aside { - width: 100px; - float: left; -} - -section#main { - margin: auto; - padding: 20px; - border-left: 1px solid black; - height: 100%; - max-width: 50%; -} - -section#main h1:first-child { - margin-top: 0; -} - -h1 { - font-size: 160%; -} - -h2 { - font-size: 140%; -} - -h3 { - font-size: 120%; -} - -h4, -h5, -h6 { - font-size: 100%; -} - -.form-row { - padding-top: 5px; - padding-bottom: 5px; -} - -label { - padding-right: 1em; -} - -input.url { - width: 25em; -} - -.formish { -} - -.json-key { - color: brown; -} -.json-value { - color: navy; -} -.json-string { - color: olive; -} - -button { - font-size: 120%; - padding: 0.5em; -} - -button.confirm-pay { - float: right; -} - -/* We use fading to hide slower DOM updates */ -.fade { - -webkit-animation: fade 0.7s; - animation: fade 0.7s; - opacity: 1; -} - -@-webkit-keyframes fade { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes fade { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -button.linky { - background: none !important; - border: none; - padding: 0 !important; - - font-family: arial, sans-serif; - color: #069; - text-decoration: underline; - cursor: pointer; -} - -.blacklink a:link, -.blacklink a:visited, -.blacklink a:hover, -.blacklink a:active { - color: #000; -} - -table, -th, -td { - border: 1px solid black; -} - -button.accept { - background-color: #5757d2; - border: 1px solid black; - border-radius: 5px; - margin: 1em 0; - padding: 0.5em; - font-weight: bold; - color: white; -} -button.linky { - background: none !important; - border: none; - padding: 0 !important; - - font-family: arial, sans-serif; - color: #069; - text-decoration: underline; - cursor: pointer; -} - -button.accept:disabled { - background-color: #dedbe8; - border: 1px solid white; - border-radius: 5px; - margin: 1em 0; - padding: 0.5em; - font-weight: bold; - color: #2c2c2c; -} - -input.url { - width: 25em; -} - -table { - border-collapse: collapse; -} - -td { - border-left: 1px solid black; - border-right: 1px solid black; - text-align: center; - padding: 0.3em; -} - -span.spacer { - padding-left: 0.5em; - padding-right: 0.5em; -} - -.button-success, -.button-destructive, -.button-warning, -.button-secondary { - color: white; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -} - -.button-success { - background: rgb(28, 184, 65); -} - -.button-destructive { - background: rgb(202, 60, 60); -} - -.button-warning { - background: rgb(223, 117, 20); -} - -.button-secondary { - background: rgb(66, 184, 221); -} - -a.actionLink { - color: black; -} - -.errorbox { - border: 1px solid; - display: inline-block; - margin: 1em; - padding: 1em; - font-weight: bold; - background: #ff8a8a; -} - -.okaybox { - border: 1px solid; - display: inline-block; - margin: 1em; - padding: 1em; - font-weight: bold; - background: #00fa9a; -} - -a.opener { - color: black; -} -.opener-open::before { - content: "\25bc"; -} -.opener-collapsed::before { - content: "\25b6 "; -} - -.svg-icon { - display: inline-flex; - align-self: center; - position: relative; - height: 1em; - width: 1em; -} -.svg-icon svg { - height: 1em; - width: 1em; -} -object.svg-icon.svg-baseline { - transform: translate(0, 0.125em); -} |