1 files changed, 101 insertions, 0 deletions
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<string | undefined>()
+  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<HTMLInputElement>(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 (
+    <AnastasisClientFrame hideNav
+      title={!providerLabel ? `Backup: Adding a provider` : `Backup: Adding a ${providerLabel} provider`}
+      hideNext={errors}>
+      <div>
+        <p>
+          Add a provider url {errors}
+        </p>
+        <div class="container">
+          <TextInput
+            label="Provider URL"
+            placeholder="https://provider.com"
+            grabFocus
+            bind={[providerURL, setProviderURL]} />
+        </div>
+        {!!error && <p class="block has-text-danger">{error}</p>}
+        {error === "" && <p class="block has-text-success">This provider worked!</p>}
+        <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+          <button class="button" onClick={testProvider}>TEST</button>
+        </div>
+        <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+          <button class="button" onClick={cancel}>Cancel</button>
+          <span data-tooltip={errors}>
+            <button class="button is-info" disabled={errors !== undefined} onClick={addProvider}>Add</button>
+          </span>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}