From 4755837dcb817e100657aa1e7d189a8358166f36 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 19 Aug 2024 13:35:18 -0300 Subject: start ui --- packages/kyc-ui/src/Routing.tsx | 12 +- packages/kyc-ui/src/pages/Start.tsx | 325 +++++++++++++++++++++++------------- 2 files changed, 211 insertions(+), 126 deletions(-) (limited to 'packages/kyc-ui') diff --git a/packages/kyc-ui/src/Routing.tsx b/packages/kyc-ui/src/Routing.tsx index 54bec1404..101d83d0b 100644 --- a/packages/kyc-ui/src/Routing.tsx +++ b/packages/kyc-ui/src/Routing.tsx @@ -21,7 +21,7 @@ import { } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; -import { assertUnreachable } from "@gnu-taler/taler-util"; +import { AccessToken, assertUnreachable } from "@gnu-taler/taler-util"; import { useErrorBoundary } from "preact/hooks"; import { CallengeCompleted } from "./pages/CallengeCompleted.js"; import { Frame } from "./pages/Frame.js"; @@ -74,16 +74,10 @@ function PublicRounting(): VNode { return
not found
} case "start": { - const secret = safeGetParam(location.params, "secret"); - const redirectURL = safeToURL( - safeGetParam(location.params, "redirect_uri"), - ); - return ( { navigateTo(publicPages.completed.url({})); }} diff --git a/packages/kyc-ui/src/pages/Start.tsx b/packages/kyc-ui/src/pages/Start.tsx index 2b97641e0..ec7e37e00 100644 --- a/packages/kyc-ui/src/pages/Start.tsx +++ b/packages/kyc-ui/src/pages/Start.tsx @@ -14,13 +14,21 @@ GNU Taler; see the file COPYING. If not, see */ import { + AccessToken, HttpStatusCode, + KycBuiltInFromId, + KycRequirementInformation, + KycRequirementInformationId, + TalerError, + assertUnreachable, createRFC8959AccessTokenEncoded, encodeCrock, randomBytes } from "@gnu-taler/taler-util"; import { + Attention, Button, + Loading, LocalNotificationBanner, ShowInputErrorLabel, useExchangeApiContext, @@ -31,69 +39,128 @@ import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { safeToURL } from "../Routing.js"; import { useSessionState } from "../hooks/session.js"; +import { useKycInfo } from "../hooks/kyc.js"; type Props = { - clientId: string; - secret: string | undefined; - redirectURL: URL | undefined; + token: AccessToken; onCreated: () => void; focus?: boolean; }; export function Start({ - clientId, - secret, - redirectURL, + token, focus, onCreated, }: Props): VNode { const { i18n } = useTranslationContext(); const [notification, withErrorHandler] = useLocalNotificationHandler(); const { lib } = useExchangeApiContext(); - const { start } = useSessionState(); - const [password, setPassword] = useState(secret); - const [url, setUrl] = useState(redirectURL?.href); + const { state, start } = useSessionState(); + const result = useKycInfo({ accessToken: token }) + + if (!result) { + return ; + } + if (result instanceof TalerError) { + return 
{JSON.stringify(result, undefined, 2)}
; + } + + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotModified: { + return
not modified
; + } + case HttpStatusCode.NoContent: { + return
not requirements
; + } + default: { + assertUnreachable(result); + } + } + } const errors = undefinedIfEmpty({ - password: !password ? i18n.str`required` : undefined, - url: !url - ? i18n.str`required` - : !safeToURL(url) - ? i18n.str`invalid format` - : undefined, + // password: !password ? i18n.str`required` : undefined, + // url: !url + // ? i18n.str`required` + // : !safeToURL(url) + // ? i18n.str`invalid format` + // : undefined, }); const onStart = - !!errors || password === undefined || url === undefined + !!errors ? undefined : withErrorHandler( - async () => { - return { - type: "ok", - body: {}, - } - // return lib.exchange.uploadKycForm( - // "clientId", - // createRFC8959AccessTokenEncoded(password), - // ); - }, - (ok) => { - // start({ - // nonce: ok.body.nonce, - // clientId, - // redirectURL: url, - // state: encodeCrock(randomBytes(32)), - // }); - - onCreated(); - }, - // () => { - // // switch (fail.case) { - // // case HttpStatusCode.NotFound: - // // return i18n.str`Client doesn't exist.`; - // // } - // }, - ); + async () => { + return { + type: "ok", + body: {}, + } + // return lib.exchange.uploadKycForm( + // "clientId", + // createRFC8959AccessTokenEncoded(password), + // ); + }, + (ok) => { + // start({ + // nonce: ok.body.nonce, + // clientId, + // redirectURL: url, + // state: encodeCrock(randomBytes(32)), + // }); + + onCreated(); + }, + // () => { + // // switch (fail.case) { + // // case HttpStatusCode.NotFound: + // // return i18n.str`Client doesn't exist.`; + // // } + // }, + ); + + const requirements: typeof result.body.requirements = [{ + description: "this is the form description, click to show the form field bla bla bla", + form: "asdasd" as KycBuiltInFromId, + description_i18n: {}, + id: "ASDASD" as KycRequirementInformationId, + }, { + description: "this is the description of the link and service provider.", + form: "LINK", + description_i18n: {}, + id: "ASDASD" as KycRequirementInformationId, + }, { + description: "you can't click this becuase this is only information, wait until AML officer replies.", + form: "INFO", + description_i18n: {}, + id: "ASDASD" as KycRequirementInformationId, + }] + if (!result.body.requirements.length) { + return + +
+
+

+ + No requirements for this account + +

+
+
+ + + You can close this now + + +
+
+ + + } return ( @@ -102,91 +169,115 @@ export function Start({

- Setup new challenge with client ID: "{clientId}" + Complete any of the following requirements

-
{ - e.preventDefault(); - }} - > -
- -
- { - setPassword(e.currentTarget.value); - }} - readOnly={secret !== undefined} - class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - /> - -
-
- -
- -
- { - setUrl(e.currentTarget.value); - }} - readOnly={redirectURL !== undefined} - class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - /> - -
-
-
-
- +
+
    + {requirements.map((req, idx) => { + return
  • + +
    • + })} +
+
); } +function RequirementRow({ requirement: req }: { requirement: KycRequirementInformation }): VNode { + const { i18n } = useTranslationContext() + switch (req.form) { + case "INFO": { + return +
+
+ + + + +
+
+

+ + Information +

+

+ {req.description} +

+
+
+ + } + case "LINK": { + return +
+
+ + + +
+
+

+ + + Link + +

+

+ {req.description} +

+
+
+
+ + +
+ + } + default: { + return +
+
+ + + + +
+
+

+ + + Form + +

+

+ {req.description} +

+
+
+
+ + +
+ + } + } +} + /** * Show the element when the load ended * @param element -- cgit v1.2.3