diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
new file mode 100644
index 000000000..43807fefe
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/camelcase */
+/*
+ This file is part of GNU Taler
+ (C) 2021 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
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { ReducerState } from 'anastasis-core';
+import { createExample, reducerStatesExample } from '../../utils';
+import { AddingProviderScreen as TestedComponent } from './AddingProviderScreen';
+
+
+export default {
+ title: 'Pages/backup/AddingProviderScreen',
+ component: TestedComponent,
+ args: {
+ order: 4,
+ },
+ argTypes: {
+ onUpdate: { action: 'onUpdate' },
+ onBack: { action: 'onBack' },
+ },
+};
+
+export const NewProvider = createExample(TestedComponent, {
+ ...reducerStatesExample.authEditing,
+} as ReducerState);
+
+export const NewSMSProvider = createExample(TestedComponent, {
+ ...reducerStatesExample.authEditing,
+} as ReducerState, { providerType: 'sms'});
+
+export const NewIBANProvider = createExample(TestedComponent, {
+ ...reducerStatesExample.authEditing,
+} as ReducerState, { providerType: 'iban' });
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
new file mode 100644
index 000000000..9c83da49e
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+ encodeCrock,
+ stringToBytes
+} from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { TextInput } from "../../components/fields/TextInput";
+import { authMethods, KnownAuthMethods } from "./authMethod";
+import { AnastasisClientFrame } from "./index";
+
+interface Props {
+ providerType?: KnownAuthMethods;
+ cancel: () => void;
+}
+export function AddingProviderScreen({ providerType, cancel }: Props): VNode {
+ const [providerURL, setProviderURL] = useState("");
+ const [error, setError] = useState()
+ const providerLabel = providerType ? authMethods[providerType].label : undefined
+
+ function testProvider(): void {
+ setError(undefined)
+
+ fetch(`${providerURL}/config`)
+ .then(r => r.json().catch(d => ({})))
+ .then(r => {
+ if (!("methods" in r) || !Array.isArray(r.methods)) {
+ setError("This provider doesn't have authentication method. Check the provider URL")
+ return;
+ }
+ if (!providerLabel) {
+ setError("")
+ return
+ }
+ let found = false
+ for (let i = 0; i < r.methods.length && !found; i++) {
+ found = r.methods[i].type !== providerType
+ }
+ if (!found) {
+ setError(`This provider does not support authentication method ${providerLabel}`)
+ }
+ })
+ .catch(e => {
+ setError(`There was an error testing this provider, try another one. ${e.message}`)
+ })
+
+ }
+ function addProvider(): void {
+ // addAuthMethod({
+ // authentication_method: {
+ // type: "sms",
+ // instructions: `SMS to ${providerURL}`,
+ // challenge: encodeCrock(stringToBytes(providerURL)),
+ // },
+ // });
+ }
+ const inputRef = useRef(null);
+ useLayoutEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ let errors = !providerURL ? 'Add provider URL' : undefined
+ try {
+ new URL(providerURL)
+ } catch {
+ errors = 'Check the URL'
+ }
+ if (!!error && !errors) {
+ errors = error
+ }
+
+ return (
+
+
+
+ Add a provider url {errors}
+
+
+
+
+ {!!error &&
{error}
}
+ {error === "" &&
This provider worked!
}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index ab482044f..b95d3f1e3 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -1,7 +1,8 @@
/* eslint-disable @typescript-eslint/camelcase */
import { AuthMethod } from "anastasis-core";
-import { ComponentChildren, h, VNode } from "preact";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
+import { TextInput } from "../../components/fields/TextInput";
import { useAnastasisContext } from "../../context/anastasis";
import { authMethods, KnownAuthMethods } from "./authMethod";
import { AnastasisClientFrame } from "./index";
@@ -13,6 +14,7 @@ const getKeys = Object.keys as (obj: T) => Array
export function AuthenticationEditorScreen(): VNode {
const [noProvidersAck, setNoProvidersAck] = useState(false)
const [selectedMethod, setSelectedMethod] = useState(undefined);
+ const [addingProvider, setAddingProvider] = useState(undefined)
const reducer = useAnastasisContext()
if (!reducer) {
@@ -62,36 +64,58 @@ export function AuthenticationEditorScreen(): VNode {
};
const AuthSetup = authMethods[selectedMethod].screen ?? AuthMethodNotImplemented;
- return (
+ return (
+
+ {!authAvailableSet.has(selectedMethod) && {
+ null
+ }}
+ >
+ We have found no trusted cloud providers for your recovery secret. You can add a provider manually.
+ To add a provider you must know the provider URL (e.g. https://provider.com)
+