From 969951036905997f9df51845c0eeceb83b4c1e19 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 10 Jul 2021 00:33:31 -0300 Subject: [PATCH] refactored ui add provider --- .../src/components/styled/index.tsx | 58 +++++++- .../src/popup/ProviderAddPage.tsx | 129 ++++++++---------- 2 files changed, 111 insertions(+), 76 deletions(-) diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 6e7e736a5..ffcafd70f 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -1,13 +1,14 @@ -// import { FunctionalComponent, JSX } from 'preact'; -// import styled from './preact-styled' -// import { css } from '@linaria/core'; +// need to import linaria types, otherwise compiler will complain +import type * as Linaria from '@linaria/core'; + import { styled } from '@linaria/react'; export const PopupBox = styled.div` height: calc(320px - 34px - 16px); display: flex; flex-direction: column; + justify-content: space-between; & > section { overflow: auto; @@ -22,9 +23,14 @@ export const PopupBox = styled.div` margin-left: 5px; } } + + & > section > h1 { + margin-top: 0.3em; + margin-bottom: 0.3em; + } ` -const Button = styled.button` +export const Button = styled.button` display: inline-block; zoom: 1; line-height: normal; @@ -50,7 +56,7 @@ const Button = styled.button` outline: 0; } - [disabled] { + &:disabled { border: none; background-image: none; /* csslint ignore:start */ @@ -113,6 +119,10 @@ export const Row = styled.div` padding: 0.5em; ` +export const LightText = styled.div` + color: gray; +` + export const SmallText = styled.div` font-size: small; margin-top: 0.5em; @@ -133,3 +143,41 @@ export const CenteredTextBold = styled(CenteredText)` font-weight: bold; color: ${((props: any): any => String(props.color) as any) as any}; ` +export const Input = styled.div` + & label { + display: block; + padding: 5px; + } + & input { + display: block; + padding: 5px; + width: calc(100% - 4px - 10px); + } +` + +export const ErrorBox = styled.div` + border: 2px solid #f5c6cb; + border-radius: 0.25em; + display: flex; + justify-content: space-between; + flex-direction: column; + /* margin: 0.5em; */ + padding-left: 1em; + padding-right: 1em; + width: "100%"; + color: #721c24; + background: #f8d7da; + + & > div { + display: flex; + justify-content: space-between; + + & > button { + align-self: center; + font-size: 100%; + padding: 0; + height: 28px; + width: 28px; + } + } +` diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx index ac22a5f83..4b5da05f4 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -23,8 +23,6 @@ function getJsonIfOk(r: Response) { export function ProviderAddPage({ onBack }: Props): VNode { const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined) - const [readingTerms, setReadingTerms] = useState(undefined) - const alreadyCheckedTheTerms = readingTerms === false if (!verifying) { return } - if (readingTerms) { - return setReadingTerms(undefined)} - onAccept={() => setReadingTerms(false)} - /> - } return { setVerifying(undefined); }} - onShowTerms={() => { - setReadingTerms(true) - }} onConfirm={() => { wxApi.addBackupProvider(verifying.url).then(onBack) }} @@ -89,50 +77,53 @@ export interface SetUrlViewProps { withError?: string; } import arrowDown from '../../static/img/chevron-down.svg'; +import { Button, ButtonPrimary, ErrorBox, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index"; +import { Checkbox } from "../components/Checkbox"; + +function ErrorMessage({ title, description }: { title?: string, description?: string }) { + const [showErrorDetail, setShowErrorDetail] = useState(false); + if (!title) return null + return +
+

{title}

+ +
+ {showErrorDetail &&

{description}

} + +} export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) { const [value, setValue] = useState(initialValue || "") const [error, setError] = useState(withError) - const [showErrorDetail, setShowErrorDetail] = useState(false); - return
-
-
- Add backup provider for saving coins -
-

Backup provider URL

-
https://
- setValue(e.currentTarget.value)} /> + return +
+

Add backup provider

+ + Backup providers may charge for their service

- Backup providers may charge for their service + + + setValue(e.currentTarget.value)} /> + + + + +

- {error && -
-
-

Could not get provider information

-

- -

-
- {showErrorDetail &&
{error}
} -
- - }
-
- -
- -
+
+ + { + let url = value.startsWith('http://') || value.startsWith('https://') ? value : `https://${value}` + url = url.endsWith('/') ? url.substring(0, url.length - 1) : url; + return onVerify(url).then(r => r ? setError(r) : undefined) + }}>Next
-
+ } export interface ConfirmProviderViewProps { @@ -140,34 +131,30 @@ export interface ConfirmProviderViewProps { url: string, onCancel: () => void; onConfirm: () => void; - onShowTerms: () => void; - termsChecked: boolean; } -export function ConfirmProviderView({ url, termsChecked, onShowTerms, provider, onCancel, onConfirm }: ConfirmProviderViewProps) { - return
-
-
Verify provider service terms for {url} backup provider
+export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: ConfirmProviderViewProps) { + const [accepted, setAccepted] = useState(false); + + return +
+

Review terms of service

+
Provider URL: {url}
+ Please review and accept this provider's terms of service +

1. Pricing

- {Amounts.isZero(provider.annual_fee) ? 'free of charge' : provider.annual_fee} for a year of backup service + {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}

+

2. Storage

- {provider.storage_limit_in_megabytes} megabytes of storage + {provider.storage_limit_in_megabytes} megabytes of storage per year of service

+ setAccepted(old => !old)} enabled={accepted}/>
-
+ }