From 7f6101a24df0db86f33c3217e52838f09a25286d Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 9 Nov 2021 00:19:50 -0300 Subject: [PATCH] add provider/ remove provider --- packages/anastasis-core/src/index.ts | 66 +++++++++++++ packages/anastasis-core/src/reducer-types.ts | 8 ++ .../home/AddingProviderScreen.stories.tsx | 6 ++ .../src/pages/home/AddingProviderScreen.tsx | 99 +++++++++++-------- .../pages/home/AuthenticationEditorScreen.tsx | 26 +++-- .../src/pages/home/SecretSelectionScreen.tsx | 12 +++ .../src/pages/home/authMethod/index.tsx | 8 +- 7 files changed, 175 insertions(+), 50 deletions(-) diff --git a/packages/anastasis-core/src/index.ts b/packages/anastasis-core/src/index.ts index f88e6e8bc..15e1e5d97 100644 --- a/packages/anastasis-core/src/index.ts +++ b/packages/anastasis-core/src/index.ts @@ -65,6 +65,8 @@ import { ActionArgsChangeVersion, TruthMetaData, ActionArgsUpdatePolicy, + ActionArgsAddProvider, + ActionArgsDeleteProvider, } from "./reducer-types.js"; import fetchPonyfill from "fetch-ponyfill"; import { @@ -1060,9 +1062,15 @@ async function recoveryEnterUserAttributes( args: ActionArgsEnterUserAttributes, ): Promise { // FIXME: validate attributes + const providerUrls = Object.keys(state.authentication_providers ?? {}); + const newProviders = state.authentication_providers ?? {}; + for (const url of providerUrls) { + newProviders[url] = await getProviderInfo(url); + } const st: ReducerStateRecovery = { ...state, identity_attributes: args.identity_attributes, + authentication_providers: newProviders, }; return downloadPolicy(st); } @@ -1174,6 +1182,60 @@ function transitionRecoveryJump( }; } +//FIXME: doest the same that addProviderRecovery, but type are not generic enough +async function addProviderBackup( + state: ReducerStateBackup, + args: ActionArgsAddProvider, +): Promise { + const info = await getProviderInfo(args.provider_url) + return { + ...state, + authentication_providers: { + ...(state.authentication_providers ?? {}), + [args.provider_url]: info, + }, + }; +} + +//FIXME: doest the same that deleteProviderRecovery, but type are not generic enough +async function deleteProviderBackup( + state: ReducerStateBackup, + args: ActionArgsDeleteProvider, +): Promise { + const authentication_providers = {... state.authentication_providers ?? {} } + delete authentication_providers[args.provider_url] + return { + ...state, + authentication_providers, + }; +} + +async function addProviderRecovery( + state: ReducerStateRecovery, + args: ActionArgsAddProvider, +): Promise { + const info = await getProviderInfo(args.provider_url) + return { + ...state, + authentication_providers: { + ...(state.authentication_providers ?? {}), + [args.provider_url]: info, + }, + }; +} + +async function deleteProviderRecovery( + state: ReducerStateRecovery, + args: ActionArgsDeleteProvider, +): Promise { + const authentication_providers = {... state.authentication_providers ?? {} } + delete authentication_providers[args.provider_url] + return { + ...state, + authentication_providers, + }; +} + async function addAuthentication( state: ReducerStateBackup, args: ActionArgsAddAuthentication, @@ -1408,6 +1470,8 @@ const backupTransitions: Record< ...transitionBackupJump("back", BackupStates.UserAttributesCollecting), ...transition("add_authentication", codecForAny(), addAuthentication), ...transition("delete_authentication", codecForAny(), deleteAuthentication), + ...transition("add_provider", codecForAny(), addProviderBackup), + ...transition("delete_provider", codecForAny(), deleteProviderBackup), ...transition("next", codecForAny(), nextFromAuthenticationsEditing), }, [BackupStates.PoliciesReviewing]: { @@ -1476,6 +1540,8 @@ const recoveryTransitions: Record< [RecoveryStates.SecretSelecting]: { ...transitionRecoveryJump("back", RecoveryStates.UserAttributesCollecting), ...transitionRecoveryJump("next", RecoveryStates.ChallengeSelecting), + ...transition("add_provider", codecForAny(), addProviderRecovery), + ...transition("delete_provider", codecForAny(), deleteProviderRecovery), ...transition( "change_version", codecForActionArgsChangeVersion(), diff --git a/packages/anastasis-core/src/reducer-types.ts b/packages/anastasis-core/src/reducer-types.ts index 51b0045a0..3e6d6c852 100644 --- a/packages/anastasis-core/src/reducer-types.ts +++ b/packages/anastasis-core/src/reducer-types.ts @@ -334,6 +334,14 @@ export const codecForActionArgsEnterUserAttributes = () => .property("identity_attributes", codecForAny()) .build("ActionArgsEnterUserAttributes"); +export interface ActionArgsAddProvider { + provider_url: string; +} + +export interface ActionArgsDeleteProvider { + provider_url: string; +} + export interface ActionArgsAddAuthentication { authentication_method: { type: string; 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 { 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 { 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
no reducer in context
; } - 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
invalid state
} + async function addProvider(provider_url: string): Promise { + 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
invalid state
+ if (!errors && authProviders.includes(url!)) { + errors = 'That provider is already known' } - const authProviders = reducer.currentReducerState.authentication_providers || {} - return (

Example: https://kudos.demo.anastasis.lu

- - {testing &&

Testing

} - {!!error &&

{error}

} - {error === "" &&

This provider worked!

} - + {testing &&

Testing

} +
- + - +
-

- Current providers -

- {/* */} - {Object.keys(authProviders).map(k => { - const p = authProviders[k] - if (("currency" in p)) { - return - } - } + {authProviders.length > 0 ? ( + !providerLabel ? +

+ Current providers +

:

+ Current providers for {providerLabel} service +

+ ) : ( + !providerLabel ?

+ No known providers, add one. +

:

+ No known providers for {providerLabel} service +

)} - {/*
*/} + + {authProviders.map(k => { + const p = allAuthProviders[k] as AuthenticationProviderStatusOk + return + })} ); } -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
- +
} \ 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(undefined) + // const [addingProvider, setAddingProvider] = useState(undefined) const reducer = useAnastasisContext(); if (!reducer) { @@ -63,6 +67,14 @@ export function AuthenticationEditorScreen(): VNode { } } + if (manageProvider !== undefined) { + + return 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) }} >

@@ -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("") }} >

@@ -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.

- {/*

- -

*/} +

{authAvailableSet.size > 0 && (

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(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 setManageProvider(false)} /> + } + return (

@@ -69,6 +75,12 @@ export function SecretSelectionScreen(): VNode {

Secret found, you can select another version or continue to the challenges solving

+

+ +

+
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;