diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-09 16:11:49 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-09 16:12:18 -0300 |
commit | 3ebb1d18154375471e329f2bad40534d858cbe1e (patch) | |
tree | 5a7e5d14eb03c88eddbe0d61afa4ee1335768d65 /packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx | |
parent | 78b056a0b1613ef19d1d72c17fd256c2e86e6774 (diff) | |
download | wallet-core-3ebb1d18154375471e329f2bad40534d858cbe1e.tar.xz |
better select secret screen
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx | 114 |
1 files changed, 101 insertions, 13 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx index d4675f9da..6aeee9e7a 100644 --- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx @@ -13,7 +13,11 @@ You should have received a copy of the GNU Affero General Public License along with GNU Anastasis; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AuthenticationProviderStatusOk } from "@gnu-taler/anastasis-core"; +import { + AuthenticationProviderStatus, + AuthenticationProviderStatusError, + AuthenticationProviderStatusOk, +} from "@gnu-taler/anastasis-core"; import { h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { TextInput } from "../../components/fields/TextInput.js"; @@ -38,7 +42,6 @@ async function testProvider( "This provider doesn't have authentication method. Check the provider URL", ); } - console.log("expected", expectedMethodType); if (!expectedMethodType) { return; } @@ -68,8 +71,10 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { const reducer = useAnastasisContext(); const [providerURL, setProviderURL] = useState(""); + const [error, setError] = useState<string | undefined>(); const [testing, setTesting] = useState(false); + const providerLabel = providerType ? authMethods[providerType].label : undefined; @@ -81,19 +86,32 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { !reducer.currentReducerState.authentication_providers ? {} : reducer.currentReducerState.authentication_providers; - const authProviders = Object.keys(allAuthProviders).filter((provUrl) => { - const p = allAuthProviders[provUrl]; - if (!providerLabel) { - return p && "currency" in p; - } else { - return ( - p && - "currency" in p && + + const authProvidersByStatus = Object.keys(allAuthProviders).reduce( + (prev, url) => { + const p = allAuthProviders[url]; + if ( + providerLabel && + p.status === "ok" && p.methods.findIndex((m) => m.type === providerType) !== -1 - ); - } - }); + ) { + return prev; + } + const others = prev[p.status] ? prev[p.status] : []; + others.push({ ...p, url }); + return { + ...prev, + [p.status]: others, + }; + }, + {} as Record< + AuthenticationProviderStatus["status"], + (AuthenticationProviderStatus & { url: string })[] + >, + ); + const authProviders = authProvidersByStatus["ok"].map((p) => p.url); + console.log("rodos", allAuthProviders); //FIXME: move this timeout logic into a hook const timeout = useRef<number | undefined>(undefined); useEffect(() => { @@ -211,6 +229,17 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { <TableRow key={k} url={k} info={p} onDelete={deleteProvider} /> ); })} + {authProvidersByStatus["error"]?.map((k) => { + const p = k as AuthenticationProviderStatusError; + return ( + <TableRowError + key={k} + url={k.url} + info={p} + onDelete={deleteProvider} + /> + ); + })} </div> </AnastasisClientFrame> ); @@ -277,3 +306,62 @@ function TableRow({ </div> ); } + +function TableRowError({ + url, + info, + onDelete, +}: { + onDelete: (s: string) => void; + url: string; + info: AuthenticationProviderStatusError; +}): VNode { + const [status, setStatus] = useState("checking"); + useEffect(function () { + testProvider(url.endsWith("/") ? url.substring(0, url.length - 1) : url) + .then(function () { + setStatus("responding"); + }) + .catch(function () { + setStatus("failed to contact"); + }); + }); + return ( + <div + class="box" + style={{ display: "flex", justifyContent: "space-between" }} + > + <div> + <div class="subtitle">{url}</div> + <dl> + <dt> + <b>Error</b> + </dt> + <dd>{info.hint}</dd> + <dt> + <b>Code</b> + </dt> + <dd>{info.code}</dd> + <dt> + <b>Status</b> + </dt> + <dd>{status}</dd> + </dl> + </div> + <div + class="block" + style={{ + marginTop: "auto", + marginBottom: "auto", + display: "flex", + justifyContent: "space-between", + flexDirection: "column", + }} + > + <button class="button is-danger" onClick={() => onDelete(url)}> + Remove + </button> + </div> + </div> + ); +} |