diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
22 files changed, 286 insertions, 500 deletions
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index f9756fd32..b2179a66a 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -10,7 +10,8 @@ "scripts": { "clean": "rimraf dist lib tsconfig.tsbuildinfo", "test": "jest ./tests", - "compile": "tsc && rollup -c" + "compile": "tsc && rollup -c", + "watch": "tsc --watch & rollup -w -c" }, "dependencies": { "@gnu-taler/taler-util": "workspace:*", @@ -29,12 +30,14 @@ "@rollup/plugin-replace": "^2.3.4", "@testing-library/preact": "^2.0.1", "@types/chrome": "^0.0.128", + "@types/history": "^4.7.8", "@types/jest": "^26.0.23", "@types/node": "^14.14.22", "ava": "3.15.0", "babel-plugin-transform-react-jsx": "^6.24.1", "enzyme": "^3.11.0", "enzyme-adapter-preact-pure": "^3.1.0", + "history": "4.10.1", "jest": "^26.6.3", "jest-preset-preact": "^4.0.3", "preact-cli": "^3.0.5", diff --git a/packages/taler-wallet-webextension/src/Application.tsx b/packages/taler-wallet-webextension/src/Application.tsx new file mode 100644 index 000000000..096f6a09a --- /dev/null +++ b/packages/taler-wallet-webextension/src/Application.tsx @@ -0,0 +1,99 @@ +import Router, { route, Route } from "preact-router"; +import { createHashHistory } from 'history'; +import { useEffect } from "preact/hooks"; + +import { WalletPopup } from "./pages/popup"; +import { WithdrawalDialog } from "./pages/withdraw"; +import { Welcome } from "./pages/welcome"; +import { TalerPayDialog } from "./pages/pay"; +import { RefundStatusView } from "./pages/refund"; +import { TalerTipDialog } from './pages/tip'; + + +export enum Pages { + welcome = '/welcome', + pay = '/pay', + payback = '/payback', + refund = '/refund', + reset_required = '/reset-required', + return_coins = '/return-coins', + tips = '/tips', + withdraw = '/withdraw', + popup = '/popup/:rest', +} + +export function Application() { + const sp = new URL(document.location.href).searchParams + const queryParams: any = {} + sp.forEach((v, k) => { queryParams[k] = v; }); + + return <Router history={createHashHistory()} > + <Route path={Pages.popup} component={WalletPopup} /> + + <Route path={Pages.welcome} component={() => { + return <section id="main"> + <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;"> + <h1 style="font-family: monospace; font-size: 250%;"> + <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span> + </h1> + </div> + <h1>Browser Extension Installed!</h1> + <div> + <Welcome /> + </div> + </section> + }} /> + + <Route path={Pages.pay} component={() => { + return <section id="main"> + <h1>GNU Taler Wallet</h1> + <article class="fade"> + <TalerPayDialog talerPayUri={queryParams.talerPayUri} /> + </article> + </section> + }} /> + + <Route path={Pages.refund} component={() => { + return <section id="main"> + <h1>GNU Taler Wallet</h1> + <article class="fade"> + <RefundStatusView talerRefundUri={queryParams.talerRefundUri} /> + </article> + </section> + }} /> + + <Route path={Pages.tips} component={() => { + return <section id="main"> + <h1>GNU Taler Wallet</h1> + <div> + <TalerTipDialog talerTipUri={queryParams.talerTipUri} /> + </div> + </section> + }} /> + <Route path={Pages.withdraw} component={() => { + return <section id="main"> + <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;"> + <h1 style="font-family: monospace; font-size: 250%;"> + <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span> + </h1> + </div> + <div class="fade"> + <WithdrawalDialog talerWithdrawUri={queryParams.talerWithdrawUri} /> + </div> + </section> + }} /> + + <Route path={Pages.reset_required} component={() => <div>no yet implemented</div>} /> + <Route path={Pages.payback} component={() => <div>no yet implemented</div>} /> + <Route path={Pages.return_coins} component={() => <div>no yet implemented</div>} /> + + <Route default component={Redirect} to='/popup/balance' /> + </Router> +} + +export function Redirect({ to }: { to: string }): null { + useEffect(() => { + route(to, true) + }) + return null +} diff --git a/packages/taler-wallet-webextension/src/pageEntryPoint.ts b/packages/taler-wallet-webextension/src/pageEntryPoint.ts index 06dc594c5..00fd5fc72 100644 --- a/packages/taler-wallet-webextension/src/pageEntryPoint.ts +++ b/packages/taler-wallet-webextension/src/pageEntryPoint.ts @@ -20,50 +20,17 @@ * @author Florian Dold <dold@taler.net> */ -import {render} from "preact"; -import { createPopup } from "./pages/popup"; -import { createWithdrawPage } from "./pages/withdraw"; -import { createWelcomePage } from "./pages/welcome"; -import { createPayPage } from "./pages/pay"; -import { createRefundPage } from "./pages/refund"; +import { render } from "preact"; import { setupI18n } from "@gnu-taler/taler-wallet-core"; -import { createTipPage } from './pages/tip'; +import { Application } from './Application'; function main(): void { 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; - case "pay.html": - mainElement = createPayPage(); - break; - case "refund.html": - mainElement = createRefundPage(); - break; - case "tip.html": - mainElement = createTipPage(); - 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"); } - render(mainElement, container); + render(Application(), container); } catch (e) { console.error("got error", e); document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/pages/pay.tsx index 80d846d67..10f83165d 100644 --- a/packages/taler-wallet-webextension/src/pages/pay.tsx +++ b/packages/taler-wallet-webextension/src/pages/pay.tsx @@ -41,7 +41,11 @@ import { } from "@gnu-taler/taler-util"; import { JSX, VNode } from "preact"; -function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { +interface Props { + talerPayUri?: string +} + +export function TalerPayDialog({ talerPayUri }: Props): JSX.Element { const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(undefined); const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(undefined); const [payErrMsg, setPayErrMsg] = useState<string | undefined>(""); @@ -50,6 +54,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { let totalFees: AmountJson | undefined = undefined; useEffect(() => { + if (!talerPayUri) return; const doFetch = async (): Promise<void> => { const p = await wxApi.preparePay(talerPayUri); setPayStatus(p); @@ -57,6 +62,10 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { doFetch(); }, [numTries, talerPayUri]); + if (!talerPayUri) { + return <span>missing pay uri</span> + } + if (!payStatus) { return <span>Loading payment information ...</span>; } @@ -83,7 +92,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { return ( <span> You have already paid for this article. Click{" "} - <a href={fulfillmentUrl}>here</a> to view it again. + <a href={fulfillmentUrl} target="_bank" rel="external">here</a> to view it again. </span> ); } else { diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx index cf76044ce..afd331c84 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/pages/popup.tsx @@ -24,9 +24,7 @@ /** * Imports. */ -import * as i18n from "../i18n"; - -import { + import { AmountJson, Amounts, BalancesResponse, @@ -40,121 +38,43 @@ import { Timestamp, amountFractionalBase, } from "@gnu-taler/taler-util"; - -import { renderAmount, PageLink } from "../renderHtml"; +import { Component, ComponentChildren, JSX } from "preact"; +import { route, Route, Router } from 'preact-router'; +import { Match } from 'preact-router/match'; +import { useEffect, useState } from "preact/hooks"; +import * as i18n from "../i18n"; +import { PageLink, renderAmount } from "../renderHtml"; import * as wxApi from "../wxApi"; - -import { useState, useEffect } from "preact/hooks"; - import { PermissionsCheckbox } from "./welcome"; -import { JSXInternal } from "preact/src/jsx"; -import { Component, ComponentChild, ComponentChildren, JSX, toChildArray, VNode } from "preact"; - -// FIXME: move to newer react functions - -class Router extends Component<any, any> { - static setRoute(s: string): void { - window.location.hash = s; - } - - static getRoute(): string { - // Omit the '#' at the beginning - return window.location.hash.substring(1); - } - - static onRoute(f: any): () => void { - Router.routeHandlers.push(f); - return () => { - const i = Router.routeHandlers.indexOf(f); - this.routeHandlers = this.routeHandlers.splice(i, 1); - }; - } - - private static routeHandlers: any[] = []; - - componentWillMount(): void { - console.log("router mounted"); - window.onhashchange = () => { - this.setState({}); - for (const f of Router.routeHandlers) { - f(); - } - }; - } - - render(): JSX.Element { - const route = window.location.hash.substring(1); - console.log("rendering route", route); - let defaultChild: ComponentChild | null = null; - let foundChild: ComponentChild | null = null; - toChildArray(this.props.children).forEach((child) => { - const childProps: any = (child as any).props; - if (!childProps) { - return; - } - if (childProps.default) { - defaultChild = child; - } - if (childProps.route === route) { - foundChild = child; - } - }); - const c: ComponentChild | null = foundChild || defaultChild; - if (!c) { - throw Error("unknown route"); - } - Router.setRoute((c as any).props.route); - return <div>{c}</div>; - } -} interface TabProps { target: string; + current?: string; children?: ComponentChildren; } function Tab(props: TabProps): JSX.Element { let cssClass = ""; - if (props.target === Router.getRoute()) { + if (props.current === props.target) { cssClass = "active"; } - const onClick = (e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>): void => { - Router.setRoute(props.target); - e.preventDefault(); - }; return ( - <a onClick={onClick} href={props.target} className={cssClass}> + <a href={props.target} className={cssClass}> {props.children} </a> ); } -class WalletNavBar extends Component<any, any> { - private cancelSubscription: any; - - componentWillMount(): void { - this.cancelSubscription = Router.onRoute(() => { - this.setState({}); - }); - } - - componentWillUnmount(): void { - if (this.cancelSubscription) { - this.cancelSubscription(); - } - } +function WalletNavBar({ current }: { current?: string }) { - render(): JSX.Element { - console.log("rendering nav bar"); - return ( - <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> - ); - } + return ( + <div className="nav" id="header"> + <Tab target="/popup/balance" current={current}>{i18n.str`Balance`}</Tab> + <Tab target="/popup/history" current={current}>{i18n.str`History`}</Tab> + <Tab target="/popup/settings" current={current}>{i18n.str`Settings`}</Tab> + <Tab target="/popup/debug" current={current}>{i18n.str`Debug`}</Tab> + </div> + ); } /** @@ -174,7 +94,7 @@ function EmptyBalanceView(): JSX.Element { return ( <i18n.Translate wrap="p"> You have no balance to show. Need some{" "} - <PageLink pageName="welcome.html">help</PageLink> getting started? + <PageLink pageName="/welcome">help</PageLink> getting started? </i18n.Translate> ); } @@ -494,7 +414,7 @@ function WalletHistory(props: any): JSX.Element { return ( <div> - {txs.map((tx,i) => ( + {txs.map((tx, i) => ( <TransactionItem key={i} tx={tx} /> ))} </div> @@ -525,7 +445,7 @@ async function confirmReset(): Promise<void> { if ( confirm( "Do you want to IRREVOCABLY DESTROY everything inside your" + - " wallet and LOSE ALL YOUR COINS?", + " wallet and LOSE ALL YOUR COINS?", ) ) { await wxApi.resetDb(); @@ -634,7 +554,7 @@ async function findTalerUriInActiveTab(): Promise<string | undefined> { }); } -function WalletPopup(): JSX.Element { +export function WalletPopup(): JSX.Element { const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( undefined, ); @@ -671,19 +591,29 @@ function WalletPopup(): JSX.Element { } return ( <div> - <WalletNavBar /> + <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match> <div style={{ margin: "1em" }}> <Router> - <WalletBalanceView route="/balance" default /> - <WalletSettings route="/settings" /> - <WalletDebug route="/debug" /> - <WalletHistory route="/history" /> + <Route path={Pages.balance} component={WalletBalanceView} /> + <Route path={Pages.settings} component={WalletSettings} /> + <Route path={Pages.debug} component={WalletDebug} /> + <Route path={Pages.history} component={WalletHistory} /> </Router> </div> </div> ); } -export function createPopup(): JSX.Element { - return <WalletPopup />; +enum Pages { + balance = '/popup/balance', + settings = '/popup/settings', + debug = '/popup/debug', + history = '/popup/history', +} + +export function Redirect({ to }: { to: string }): null { + useEffect(() => { + route(to, true) + }) + return null } diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/pages/refund.tsx index 6525f68c6..49b78160e 100644 --- a/packages/taler-wallet-webextension/src/pages/refund.tsx +++ b/packages/taler-wallet-webextension/src/pages/refund.tsx @@ -26,18 +26,22 @@ import { ApplyRefundResponse, Amounts, } from "@gnu-taler/taler-util"; -// import { h } from 'preact'; import { useEffect, useState } from "preact/hooks"; import { JSX } from "preact/jsx-runtime"; -function RefundStatusView(props: { talerRefundUri: string }): JSX.Element { - const [applyResult, setApplyResult] = useState<ApplyRefundResponse|undefined>(undefined); +interface Props { + talerRefundUri?: string +} + +export function RefundStatusView({ talerRefundUri }: Props): JSX.Element { + const [applyResult, setApplyResult] = useState<ApplyRefundResponse | undefined>(undefined); const [errMsg, setErrMsg] = useState<string | undefined>(undefined); useEffect(() => { + if (!talerRefundUri) return; const doFetch = async (): Promise<void> => { try { - const result = await wxApi.applyRefund(props.talerRefundUri); + const result = await wxApi.applyRefund(talerRefundUri); setApplyResult(result); } catch (e) { console.error(e); @@ -46,10 +50,14 @@ function RefundStatusView(props: { talerRefundUri: string }): JSX.Element { } }; doFetch(); - }, [props.talerRefundUri]); + }, [talerRefundUri]); console.log("rendering"); + if (!talerRefundUri) { + return <span>missing taler refund uri</span>; + } + if (errMsg) { return <span>Error: {errMsg}</span>; } diff --git a/packages/taler-wallet-webextension/src/pages/tip.tsx b/packages/taler-wallet-webextension/src/pages/tip.tsx index 65ddb3734..8528a5511 100644 --- a/packages/taler-wallet-webextension/src/pages/tip.tsx +++ b/packages/taler-wallet-webextension/src/pages/tip.tsx @@ -26,7 +26,11 @@ import { AmountView } from "../renderHtml"; import * as wxApi from "../wxApi"; import { JSX } from "preact/jsx-runtime"; -function TalerTipDialog({ talerTipUri }: { talerTipUri: string }): JSX.Element { +interface Props { + talerTipUri?: string +} + +export function TalerTipDialog({ talerTipUri }: Props): JSX.Element { const [updateCounter, setUpdateCounter] = useState<number>(0); const [prepareTipResult, setPrepareTipResult] = useState< PrepareTipResult | undefined @@ -35,6 +39,7 @@ function TalerTipDialog({ talerTipUri }: { talerTipUri: string }): JSX.Element { const [tipIgnored, setTipIgnored] = useState(false); useEffect(() => { + if (!talerTipUri) return; const doFetch = async (): Promise<void> => { const p = await wxApi.prepareTip({ talerTipUri }); setPrepareTipResult(p); @@ -54,6 +59,10 @@ function TalerTipDialog({ talerTipUri }: { talerTipUri: string }): JSX.Element { setTipIgnored(true); }; + if (!talerTipUri) { + return <span>missing tip uri</span>; + } + if (tipIgnored) { return <span>You've ignored the tip.</span>; } diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx b/packages/taler-wallet-webextension/src/pages/welcome.tsx index 54819558c..61c9f036c 100644 --- a/packages/taler-wallet-webextension/src/pages/welcome.tsx +++ b/packages/taler-wallet-webextension/src/pages/welcome.tsx @@ -87,7 +87,7 @@ function Diagnostics(): JSX.Element | null { <p> Your wallet database is outdated. Currently automatic migration is not supported. Please go{" "} - <PageLink pageName="reset-required.html">here</PageLink> to reset + <PageLink pageName="/reset-required">here</PageLink> to reset the wallet database. </p> ) : null} @@ -99,38 +99,38 @@ function Diagnostics(): JSX.Element | null { return <p>Running diagnostics ...</p>; } -export function PermissionsCheckbox(): JSX.Element { - const [extendedPermissionsEnabled, setExtendedPermissionsEnabled] = useState( - false, - ); - async function handleExtendedPerm(): Promise<void> { - let nextVal: boolean | undefined; - if (extendedPermissionsEnabled) { - const granted = await new Promise<boolean>((resolve, reject) => { - // We set permissions here, since apparently FF wants this to be done - // as the result of an input event ... - getPermissionsApi().request(extendedPermissions, (granted: boolean) => { - if (chrome.runtime.lastError) { - console.error("error requesting permissions"); - console.error(chrome.runtime.lastError); - reject(chrome.runtime.lastError); - return; - } - console.log("permissions granted:", granted); - resolve(granted); - }); + +async function handleExtendedPerm(isEnabled: boolean, setEnable: (v:boolean) => void): Promise<void> { + let nextVal: boolean | undefined; + + if (!isEnabled) { + const granted = await new Promise<boolean>((resolve, reject) => { + // We set permissions here, since apparently FF wants this to be done + // as the result of an input event ... + getPermissionsApi().request(extendedPermissions, (granted: boolean) => { + if (chrome.runtime.lastError) { + console.error("error requesting permissions"); + console.error(chrome.runtime.lastError); + reject(chrome.runtime.lastError); + return; + } + console.log("permissions granted:", granted); + resolve(granted); }); - const res = await wxApi.setExtendedPermissions(granted); - console.log(res); - nextVal = res.newValue; - } else { - const res = await wxApi.setExtendedPermissions(false); - console.log(res); - nextVal = res.newValue; - } - console.log("new permissions applied:", nextVal); - setExtendedPermissionsEnabled(nextVal ?? false); + }); + const res = await wxApi.setExtendedPermissions(granted); + nextVal = res.newValue; + } else { + const res = await wxApi.setExtendedPermissions(false); + nextVal = res.newValue; } + console.log("new permissions applied:", nextVal); + setEnable(nextVal ?? false); +} + +export function PermissionsCheckbox(): JSX.Element { + const [extendedPermissionsEnabled, setExtendedPermissionsEnabled] = useState(false); + useEffect(() => { async function getExtendedPermValue(): Promise<void> { const res = await wxApi.getExtendedPermissions(); @@ -138,11 +138,12 @@ export function PermissionsCheckbox(): JSX.Element { } getExtendedPermValue(); }); + return ( <div> <input checked={extendedPermissionsEnabled} - onChange={() => handleExtendedPerm()} + onChange={() => handleExtendedPerm(extendedPermissionsEnabled, setExtendedPermissionsEnabled) } type="checkbox" id="checkbox-perm" style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} @@ -168,7 +169,7 @@ export function PermissionsCheckbox(): JSX.Element { ); } -function Welcome(): JSX.Element { +export function Welcome(): JSX.Element { return ( <> <p>Thank you for installing the wallet.</p> diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.tsx index 1d628be22..d99bcf9c0 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/pages/withdraw.tsx @@ -34,12 +34,14 @@ import { import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; import { JSX } from "preact/jsx-runtime"; -function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { +interface Props { + talerWithdrawUri?: string; +} +export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element { const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(undefined); const [selectedExchange, setSelectedExchange] = useState< string | undefined >(undefined); - const talerWithdrawUri = props.talerWithdrawUri; const [cancelled, setCancelled] = useState(false); const [selecting, setSelecting] = useState(false); const [errMsg, setErrMsg] = useState<string | undefined>(""); @@ -52,10 +54,9 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { }, []); useEffect(() => { + if (!talerWithdrawUri) return const fetchData = async (): Promise<void> => { - const res = await getWithdrawalDetailsForUri({ - talerWithdrawUri: props.talerWithdrawUri, - }); + const res = await getWithdrawalDetailsForUri({ talerWithdrawUri }); setDetails(res); if (res.defaultExchangeBaseUrl) { setSelectedExchange(res.defaultExchangeBaseUrl); @@ -64,6 +65,10 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { fetchData(); }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]); + if (!talerWithdrawUri) { + return <span>missing withdraw uri</span>; + } + if (!details) { return <span>Loading...</span>; } diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx b/packages/taler-wallet-webextension/src/renderHtml.tsx index 5574e96ea..2fde6f537 100644 --- a/packages/taler-wallet-webextension/src/renderHtml.tsx +++ b/packages/taler-wallet-webextension/src/renderHtml.tsx @@ -167,7 +167,7 @@ export function ProgressButton({isLoading, ...rest}: LoadingButtonProps): JSX.El export function PageLink( props: { pageName: string, children?: ComponentChildren }, ): JSX.Element { - const url = chrome.extension.getURL(`/${props.pageName}`); + const url = chrome.extension.getURL(`/static/popup.html#/${props.pageName}`); return ( <a className="actionLink" diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts index 22dd2c0e3..57146c0f5 100644 --- a/packages/taler-wallet-webextension/src/wxBackend.ts +++ b/packages/taler-wallet-webextension/src/wxBackend.ts @@ -276,7 +276,7 @@ try { chrome.runtime.onInstalled.addListener((details) => { console.log("onInstalled with reason", details.reason); if (details.reason === "install") { - const url = chrome.extension.getURL("/static/welcome.html"); + const url = chrome.extension.getURL("/static/popup.html#/welcome"); chrome.tabs.create({ active: true, url: url }); } }); @@ -311,7 +311,7 @@ function headerListener( switch (uriType) { case TalerUriType.TalerWithdraw: return makeSyncWalletRedirect( - "/static/withdraw.html", + "/static/popup.html#/withdraw", details.tabId, details.url, { @@ -320,7 +320,7 @@ function headerListener( ); case TalerUriType.TalerPay: return makeSyncWalletRedirect( - "/static/pay.html", + "/static/popup.html#/pay", details.tabId, details.url, { @@ -329,7 +329,7 @@ function headerListener( ); case TalerUriType.TalerTip: return makeSyncWalletRedirect( - "/static/tip.html", + "/static/popup.html#/tip", details.tabId, details.url, { @@ -338,7 +338,7 @@ function headerListener( ); case TalerUriType.TalerRefund: return makeSyncWalletRedirect( - "/static/refund.html", + "/static/popup.html#/refund", details.tabId, details.url, { diff --git a/packages/taler-wallet-webextension/static/add-auditor.html b/packages/taler-wallet-webextension/static/add-auditor.html deleted file mode 100644 index 47a97c075..000000000 --- a/packages/taler-wallet-webextension/static/add-auditor.html +++ /dev/null @@ -1,33 +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="/pageEntryPoint.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/packages/taler-wallet-webextension/static/auditors.html b/packages/taler-wallet-webextension/static/auditors.html deleted file mode 100644 index 15261290d..000000000 --- a/packages/taler-wallet-webextension/static/auditors.html +++ /dev/null @@ -1,35 +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/webextension/pageEntryPoint.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/packages/taler-wallet-webextension/static/benchmark.html b/packages/taler-wallet-webextension/static/benchmark.html deleted file mode 100644 index d0ca32aeb..000000000 --- a/packages/taler-wallet-webextension/static/benchmark.html +++ /dev/null @@ -1,16 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Benchmarks</title> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <link rel="icon" href="/static/img/icon.png" /> - <script src="/dist/pageEntryPoint.js"></script> - </head> - <body> - <section id="main"> - <h1>Benchmarks</h1> - <div id="container"></div> - </section> - </body> -</html> diff --git a/packages/taler-wallet-webextension/static/pay.html b/packages/taler-wallet-webextension/static/pay.html deleted file mode 100644 index 129765815..000000000 --- a/packages/taler-wallet-webextension/static/pay.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Confirm Contract</title> - - <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <link rel="icon" href="/static/img/icon.png" /> - <script src="/dist/pageEntryPoint.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/packages/taler-wallet-webextension/static/payback.html b/packages/taler-wallet-webextension/static/payback.html deleted file mode 100644 index 7ca9dc974..000000000 --- a/packages/taler-wallet-webextension/static/payback.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Payback</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="/pageEntryPoint.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/packages/taler-wallet-webextension/static/refund.html b/packages/taler-wallet-webextension/static/refund.html deleted file mode 100644 index 68c826bcf..000000000 --- a/packages/taler-wallet-webextension/static/refund.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Refund Status</title> - - <link rel="icon" href="/static/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <script src="/dist/pageEntryPoint.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <article id="container" class="fade"></article> - </section> - </body> -</html> diff --git a/packages/taler-wallet-webextension/static/reset-required.html b/packages/taler-wallet-webextension/static/reset-required.html deleted file mode 100644 index 84943fbf1..000000000 --- a/packages/taler-wallet-webextension/static/reset-required.html +++ /dev/null @@ -1,25 +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/pure.css" /> - <link rel="stylesheet" type="text/css" href="/style/wallet.css" /> - <script src="/pageEntryPoint.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/packages/taler-wallet-webextension/static/style/popup.css b/packages/taler-wallet-webextension/static/style/popup.css index cca002399..c0201e584 100644 --- a/packages/taler-wallet-webextension/static/style/popup.css +++ b/packages/taler-wallet-webextension/static/style/popup.css @@ -6,7 +6,7 @@ body { min-height: 20em; - width: 30em; + /* width: 30em; */ margin: 0; padding: 0; max-height: 800px; @@ -183,3 +183,58 @@ input[type="radio"] { text-align: center; padding-top: 2em; } + +/** + pay html +*/ +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; +} diff --git a/packages/taler-wallet-webextension/static/tip.html b/packages/taler-wallet-webextension/static/tip.html deleted file mode 100644 index 9c074e129..000000000 --- a/packages/taler-wallet-webextension/static/tip.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Received Tip</title> - - <link rel="icon" href="/static/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <script src="/dist/pageEntryPoint.js"></script> - </head> - - <body> - <section id="main"> - <h1>GNU Taler Wallet</h1> - <div id="container"></div> - </section> - </body> -</html> diff --git a/packages/taler-wallet-webextension/static/welcome.html b/packages/taler-wallet-webextension/static/welcome.html deleted file mode 100644 index e0b429f4b..000000000 --- a/packages/taler-wallet-webextension/static/welcome.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet Installed</title> - - <link rel="icon" href="/static/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <script src="/dist/pageEntryPoint.js"></script> - </head> - - <body> - <section id="main"> - <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;"> - <h1 style="font-family: monospace; font-size: 250%;"> - <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span> - </h1> - </div> - <h1>Browser Extension Installed!</h1> - <div id="container">Loading...</div> - </section> - </body> -</html> diff --git a/packages/taler-wallet-webextension/static/withdraw.html b/packages/taler-wallet-webextension/static/withdraw.html deleted file mode 100644 index b2b837658..000000000 --- a/packages/taler-wallet-webextension/static/withdraw.html +++ /dev/null @@ -1,22 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Taler Wallet: Withdraw</title> - <link rel="icon" href="/static/img/icon.png" /> - <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> - <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <script src="/dist/pageEntryPoint.js"></script> - </head> - - <body> - <section id="main"> - <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;"> - <h1 style="font-family: monospace; font-size: 250%;"> - <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span> - </h1> - </div> - <div class="fade" id="container"></div> - </section> - </body> -</html> |