add provider/ remove provider

5 files changed, 101 insertions, 50 deletions

diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
index a96734caa..08e2b4371 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
@@ -40,6 +40,12 @@ export const NewProvider = createExample(TestedComponent, {
   ...reducerStatesExample.authEditing,
 } as ReducerState);
 
+
+export const NewProviderWithoutProviderList = createExample(TestedComponent, {
+  ...reducerStatesExample.authEditing,
+  authentication_providers: {}
+} as ReducerState);
+
 export const NewVideoProvider = createExample(TestedComponent, {
   ...reducerStatesExample.authEditing,
 } as ReducerState, { providerType: 'video'});
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
index 5cf6fbb09..7504f4d2b 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
@@ -1,6 +1,6 @@
 import { AuthenticationProviderStatusOk } from "anastasis-core";
 import { h, VNode } from "preact";
-import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { TextInput } from "../../components/fields/TextInput";
 import { useAnastasisContext } from "../../context/anastasis";
 import { authMethods, KnownAuthMethods } from "./authMethod";
@@ -8,13 +8,13 @@ import { AnastasisClientFrame } from "./index";
 
 interface Props {
   providerType?: KnownAuthMethods;
-  cancel: () => void;
+  onCancel: () => void;
 }
 
 
 async function testProvider(url: string, expectedMethodType?: string): Promise<void> {
   try {
-    const response = await fetch(`${url}/config`)
+    const response = await fetch(new URL("config", url).href)
     const json = await (response.json().catch(d => ({})))
     if (!("methods" in json) || !Array.isArray(json.methods)) {
       throw Error("This provider doesn't have authentication method. Check the provider URL")
@@ -41,7 +41,7 @@ async function testProvider(url: string, expectedMethodType?: string): Promise<v
 
 }
 
-export function AddingProviderScreen({ providerType, cancel }: Props): VNode {
+export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
   const reducer = useAnastasisContext();
 
   const [providerURL, setProviderURL] = useState("");
@@ -54,8 +54,8 @@ export function AddingProviderScreen({ providerType, cancel }: Props): VNode {
   useEffect(() => {
     if (timeout) window.clearTimeout(timeout.current)
     timeout.current = window.setTimeout(async () => {
-      const url = providerURL.endsWith('/') ? providerURL.substring(0, providerURL.length - 1) : providerURL
-      if (!url) return;
+      const url = providerURL.endsWith('/') ? providerURL : (providerURL + '/')
+      if (!providerURL || authProviders.includes(url)) return;
       try {
         setTesting(true)
         await testProvider(url, providerType)
@@ -67,40 +67,50 @@ export function AddingProviderScreen({ providerType, cancel }: Props): VNode {
         if (e instanceof Error) setError(e.message)
       }
       setTesting(false)
-    }, 1000);
-  }, [providerURL])
+    }, 200);
+  }, [providerURL, reducer])
 
 
   if (!reducer) {
     return <div>no reducer in context</div>;
   }
 
-  function addProvider(): void {
-    // addAuthMethod({
-    //   authentication_method: {
-    //     type: "sms",
-    //     instructions: `SMS to ${providerURL}`,
-    //     challenge: encodeCrock(stringToBytes(providerURL)),
-    //   },
-    // });
+  if (!reducer.currentReducerState || !("authentication_providers" in reducer.currentReducerState)) {
+    return <div>invalid state</div>
+  }
+
+  async function addProvider(provider_url: string): Promise<void> {
+    await reducer?.transition("add_provider", { provider_url })
+    onCancel()
+  }
+  function deleteProvider(provider_url: string): void {
+    reducer?.transition("delete_provider", { provider_url })
   }
 
+  const allAuthProviders = 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) && p.methods.findIndex(m => m.type === providerType) !== -1
+    }
+  })
+
   let errors = !providerURL ? 'Add provider URL' : undefined
+  let url: string | undefined;
   try {
-    new URL(providerURL)
+    url = new URL("",providerURL).href
   } catch {
     errors = 'Check the URL'
   }
   if (!!error && !errors) {
     errors = error
   }
-
-  if (!reducer.currentReducerState || !("authentication_providers" in reducer.currentReducerState)) {
-    return <div>invalid state</div>
+  if (!errors && authProviders.includes(url!)) {
+    errors = 'That provider is already known'
   }
 
-  const authProviders = reducer.currentReducerState.authentication_providers || {}
-
   return (
     <AnastasisClientFrame hideNav
       title="Backup: Manage providers"
@@ -119,40 +129,45 @@ export function AddingProviderScreen({ providerType, cancel }: Props): VNode {
             label="Provider URL"
             placeholder="https://provider.com"
             grabFocus
+            error={errors}
             bind={[providerURL, setProviderURL]} />
         </div>
         <p class="block">
           Example: https://kudos.demo.anastasis.lu
         </p>
-
-        {testing && <p class="block has-text-info">Testing</p>}
-        {!!error && <p class="block has-text-danger">{error}</p>}
-        {error === "" && <p class="block has-text-success">This provider worked!</p>}
-
+        {testing && <p class="has-text-info">Testing</p>}
+        
         <div class="block" style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
-          <button class="button" onClick={cancel}>Cancel</button>
+          <button class="button" onClick={onCancel}>Cancel</button>
           <span data-tooltip={errors}>
-            <button class="button is-info" disabled={error !== "" || testing} onClick={addProvider}>Add</button>
+            <button class="button is-info" disabled={error !== "" || testing} onClick={() => addProvider(url!)}>Add</button>
           </span>
         </div>
 
-        <p class="subtitle">
-          Current providers
-        </p>
-        {/* <table class="table"> */}
-        {Object.keys(authProviders).map(k => {
-          const p = authProviders[k]
-          if (("currency" in p)) {
-            return <TableRow url={k} info={p} />
-          }
-        }
+        {authProviders.length > 0 ? (
+          !providerLabel ?
+            <p class="subtitle">
+              Current providers
+            </p> : <p class="subtitle">
+              Current providers for {providerLabel} service
+            </p>
+        ) : (
+          !providerLabel ? <p class="subtitle">
+            No known providers, add one.
+          </p> : <p class="subtitle">
+            No known providers for {providerLabel} service
+          </p>
         )}
-        {/* </table> */}
+
+        {authProviders.map(k => {
+          const p = allAuthProviders[k] as AuthenticationProviderStatusOk
+          return <TableRow url={k} info={p} onDelete={deleteProvider} />
+        })}
       </div>
     </AnastasisClientFrame>
   );
 }
-function TableRow({ url, info }: { url: string, info: AuthenticationProviderStatusOk }) {
+function TableRow({ url, info, onDelete }: { onDelete: (s: string) => void, url: string, info: AuthenticationProviderStatusOk }) {
   const [status, setStatus] = useState("checking")
   useEffect(function () {
     testProvider(url.endsWith('/') ? url.substring(0, url.length - 1) : url)
@@ -174,7 +189,7 @@ function TableRow({ url, info }: { url: string, info: AuthenticationProviderStat
       </dl>
     </div>
     <div class="block" style={{ marginTop: 'auto', marginBottom: 'auto', display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }}>
-      <button class="button is-danger" >Remove</button>
+      <button class="button is-danger" onClick={() => onDelete(url)}>Remove</button>
     </div>
   </div>
 }
\ No newline at end of file
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index 0bc735f34..00eb54d4d 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -2,10 +2,12 @@ import { AuthMethod, ReducerStateBackup } from "anastasis-core";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
+import { AddingProviderScreen } from "./AddingProviderScreen";
 import {
   authMethods,
   AuthMethodSetupProps,
   AuthMethodWithRemove,
+  isKnownAuthMethods,
   KnownAuthMethods,
 } from "./authMethod";
 import { AnastasisClientFrame } from "./index";
@@ -18,6 +20,8 @@ export function AuthenticationEditorScreen(): VNode {
     KnownAuthMethods | undefined
   >(undefined);
   const [tooFewAuths, setTooFewAuths] = useState(false);
+  const [manageProvider, setManageProvider] = useState<string | undefined>(undefined)
+
   // const [addingProvider, setAddingProvider] = useState<string | undefined>(undefined)
   const reducer = useAnastasisContext();
   if (!reducer) {
@@ -63,6 +67,14 @@ export function AuthenticationEditorScreen(): VNode {
     }
   }
 
+  if (manageProvider !== undefined) {
+    
+    return <AddingProviderScreen
+      onCancel={() => setManageProvider(undefined)}
+      providerType={isKnownAuthMethods(manageProvider) ? manageProvider : undefined}
+    />
+  }
+
   if (selectedMethod) {
     const cancel = (): void => setSelectedMethod(undefined);
     const addMethod = (args: any): void => {
@@ -86,9 +98,9 @@ export function AuthenticationEditorScreen(): VNode {
             active
             onCancel={cancel}
             description="No providers founds"
-            label="Add a provider manually (not implemented!)"
+            label="Add a provider manually"
             onConfirm={() => {
-              null;
+              setManageProvider(selectedMethod)
             }}
           >
             <p>
@@ -179,9 +191,9 @@ export function AuthenticationEditorScreen(): VNode {
               active={!noProvidersAck}
               onCancel={() => setNoProvidersAck(true)}
               description="No providers founds"
-              label="Add a provider manually (not implemented!)"
+              label="Add a provider manually"
               onConfirm={() => {
-                null;
+                setManageProvider("")
               }}
             >
               <p>
@@ -201,11 +213,11 @@ export function AuthenticationEditorScreen(): VNode {
             identity via the methods you configure here. The list of
             authentication method is defined by the backup provider list.
           </p>
-          {/* <p class="block">
-            <button class="button is-info">
+          <p class="block">
+            <button class="button is-info" onClick={() => setManageProvider("")}>
               Manage backup providers
             </button>
-          </p> */}
+          </p>
           {authAvailableSet.size > 0 && (
             <p class="block">
               We couldn't find provider for some of the authentication methods.
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index cf38d3f18..b1ec2856a 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -3,12 +3,14 @@ import { useState } from "preact/hooks";
 import { AsyncButton } from "../../components/AsyncButton";
 import { NumberInput } from "../../components/fields/NumberInput";
 import { useAnastasisContext } from "../../context/anastasis";
+import { AddingProviderScreen } from "./AddingProviderScreen";
 import { AnastasisClientFrame } from "./index";
 
 export function SecretSelectionScreen(): VNode {
   const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
   const reducer = useAnastasisContext()
 
+  const [manageProvider, setManageProvider] = useState(false)
   const currentVersion = (reducer?.currentReducerState
     && ("recovery_document" in reducer.currentReducerState)
     && reducer.currentReducerState.recovery_document?.version) || 0;
@@ -49,6 +51,10 @@ export function SecretSelectionScreen(): VNode {
     />
   }
 
+  if (manageProvider) {
+    return <AddingProviderScreen onCancel={() => setManageProvider(false)} />
+  }
+
   return (
     <AnastasisClientFrame title="Recovery: Select secret">
       <div class="columns">
@@ -69,6 +75,12 @@ export function SecretSelectionScreen(): VNode {
         </div>
         <div class="column">
           <p>Secret found, you can select another version or continue to the challenges solving</p>
+          <p class="block">
+            <button class="button is-info" onClick={() => setManageProvider(true)}>
+              Manage recovery providers
+            </button>
+          </p>
+
         </div>
       </div>
     </AnastasisClientFrame>
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/index.tsx b/packages/anastasis-webui/src/pages/home/authMethod/index.tsx
index 07f6ec206..8b0126ce7 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/index.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/index.tsx
@@ -41,7 +41,13 @@ interface AuthMethodConfiguration {
   solve: (props: AuthMethodSolveProps) => VNode;
   skip?: boolean;
 }
-export type KnownAuthMethods = "sms" | "email" | "post" | "question" | "video" | "totp" | "iban";
+// export type KnownAuthMethods = "sms" | "email" | "post" | "question" | "video" | "totp" | "iban";
+
+const ALL_METHODS = ['sms', 'email', 'post', 'question', 'video' , 'totp', 'iban'] as const;
+export type KnownAuthMethods = (typeof ALL_METHODS)[number];
+export function isKnownAuthMethods(value: string): value is KnownAuthMethods {
+  return ALL_METHODS.includes(value as KnownAuthMethods)
+}
 
 type KnowMethodConfig = {
   [name in KnownAuthMethods]: AuthMethodConfiguration;