2023-11-17 17:38:52 +01:00
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
import { GoogleReCaptcha, useGoogleReCaptcha } from "react-google-recaptcha-v3";
|
2023-11-05 01:16:45 +01:00
|
|
|
import { useAsyncFn } from "react-use";
|
|
|
|
|
|
|
|
import { Button } from "@/components/Button";
|
2023-11-17 17:38:52 +01:00
|
|
|
import { Icon, Icons } from "@/components/Icon";
|
|
|
|
import {
|
|
|
|
LargeCard,
|
|
|
|
LargeCardButtons,
|
|
|
|
LargeCardText,
|
|
|
|
} from "@/components/layout/LargeCard";
|
|
|
|
import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
|
2023-11-05 17:56:56 +01:00
|
|
|
import { useAuth } from "@/hooks/auth/useAuth";
|
2023-11-05 01:16:45 +01:00
|
|
|
import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart";
|
|
|
|
|
|
|
|
interface VerifyPassphraseProps {
|
|
|
|
mnemonic: string | null;
|
2023-11-17 19:10:02 +01:00
|
|
|
hasCaptcha?: boolean;
|
2023-11-05 17:56:56 +01:00
|
|
|
userData: AccountProfile | null;
|
2023-11-05 01:16:45 +01:00
|
|
|
onNext?: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function VerifyPassphrase(props: VerifyPassphraseProps) {
|
|
|
|
const [mnemonic, setMnemonic] = useState("");
|
2023-11-05 17:56:56 +01:00
|
|
|
const { register, restore } = useAuth();
|
2023-11-05 01:16:45 +01:00
|
|
|
|
2023-11-17 17:38:52 +01:00
|
|
|
const { executeRecaptcha } = useGoogleReCaptcha();
|
|
|
|
|
2023-11-05 01:16:45 +01:00
|
|
|
const [result, execute] = useAsyncFn(
|
|
|
|
async (inputMnemonic: string) => {
|
2023-11-05 17:56:56 +01:00
|
|
|
if (!props.mnemonic || !props.userData)
|
2023-11-17 17:38:52 +01:00
|
|
|
throw new Error("Data is not valid");
|
2023-11-17 19:10:02 +01:00
|
|
|
|
|
|
|
let recaptchaToken: string | undefined;
|
|
|
|
if (props.hasCaptcha) {
|
|
|
|
recaptchaToken = executeRecaptcha
|
|
|
|
? await executeRecaptcha()
|
|
|
|
: undefined;
|
|
|
|
if (!recaptchaToken) throw new Error("ReCaptcha validation failed");
|
|
|
|
}
|
|
|
|
|
2023-11-05 01:16:45 +01:00
|
|
|
if (inputMnemonic !== props.mnemonic)
|
|
|
|
throw new Error("Passphrase doesn't match");
|
|
|
|
|
2023-11-05 17:56:56 +01:00
|
|
|
await register({
|
|
|
|
mnemonic: inputMnemonic,
|
|
|
|
userData: props.userData,
|
2023-11-17 17:38:52 +01:00
|
|
|
recaptchaToken,
|
2023-11-05 01:16:45 +01:00
|
|
|
});
|
|
|
|
|
2023-11-05 17:56:56 +01:00
|
|
|
// TODO import (and sort out conflicts)
|
|
|
|
|
|
|
|
await restore();
|
|
|
|
|
2023-11-05 01:16:45 +01:00
|
|
|
props.onNext?.();
|
|
|
|
},
|
2023-11-05 17:56:56 +01:00
|
|
|
[props, register, restore]
|
2023-11-05 01:16:45 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2023-11-17 17:38:52 +01:00
|
|
|
<LargeCard>
|
|
|
|
<LargeCardText
|
|
|
|
icon={<Icon icon={Icons.CIRCLE_CHECK} />}
|
|
|
|
title="Enter your passphrase"
|
|
|
|
>
|
|
|
|
If you've already lost it, how will you ever be able to take care
|
|
|
|
of a child?
|
|
|
|
</LargeCardText>
|
|
|
|
<AuthInputBox
|
|
|
|
label="Your passphrase"
|
|
|
|
value={mnemonic}
|
|
|
|
onChange={setMnemonic}
|
|
|
|
/>
|
|
|
|
{result.error ? (
|
|
|
|
<p className="mt-3 text-authentication-errorText">
|
|
|
|
{result.error.message}
|
|
|
|
</p>
|
|
|
|
) : null}
|
|
|
|
<LargeCardButtons>
|
|
|
|
<Button theme="purple" onClick={() => execute(mnemonic)}>
|
|
|
|
Register
|
|
|
|
</Button>
|
|
|
|
</LargeCardButtons>
|
|
|
|
</LargeCard>
|
2023-11-05 01:16:45 +01:00
|
|
|
);
|
|
|
|
}
|