2023-11-18 15:12:31 +01:00
|
|
|
import { useState } from "react";
|
|
|
|
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
|
2023-11-05 01:16:45 +01:00
|
|
|
import { useAsyncFn } from "react-use";
|
|
|
|
|
2023-11-21 21:26:26 +01:00
|
|
|
import { updateSettings } from "@/backend/accounts/settings";
|
2023-11-05 01:16:45 +01:00
|
|
|
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-21 21:26:26 +01:00
|
|
|
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
|
2023-11-05 01:16:45 +01:00
|
|
|
import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart";
|
2023-11-21 21:26:26 +01:00
|
|
|
import { useBookmarkStore } from "@/stores/bookmarks";
|
|
|
|
import { useLanguageStore } from "@/stores/language";
|
|
|
|
import { useProgressStore } from "@/stores/progress";
|
|
|
|
import { useSubtitleStore } from "@/stores/subtitles";
|
|
|
|
import { useThemeStore } from "@/stores/theme";
|
2023-11-05 01:16:45 +01:00
|
|
|
|
|
|
|
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-21 21:26:26 +01:00
|
|
|
const { register, restore, importData } = useAuth();
|
|
|
|
const progressItems = useProgressStore((store) => store.items);
|
|
|
|
const bookmarkItems = useBookmarkStore((store) => store.bookmarks);
|
|
|
|
|
|
|
|
const applicationLanguage = useLanguageStore((store) => store.language);
|
|
|
|
const defaultSubtitleLanguage = useSubtitleStore(
|
|
|
|
(store) => store.lastSelectedLanguage
|
|
|
|
);
|
|
|
|
const applicationTheme = useThemeStore((store) => store.theme);
|
|
|
|
|
|
|
|
const backendUrl = useBackendUrl();
|
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-21 21:26:26 +01:00
|
|
|
const account = await register({
|
2023-11-05 17:56:56 +01:00
|
|
|
mnemonic: inputMnemonic,
|
|
|
|
userData: props.userData,
|
2023-11-17 17:38:52 +01:00
|
|
|
recaptchaToken,
|
2023-11-05 01:16:45 +01:00
|
|
|
});
|
|
|
|
|
2023-11-21 21:26:26 +01:00
|
|
|
await importData(account, progressItems, bookmarkItems);
|
|
|
|
|
|
|
|
await updateSettings(backendUrl, account, {
|
|
|
|
applicationLanguage,
|
|
|
|
defaultSubtitleLanguage: defaultSubtitleLanguage ?? undefined,
|
|
|
|
applicationTheme: applicationTheme ?? undefined,
|
|
|
|
});
|
2023-11-05 17:56:56 +01:00
|
|
|
|
|
|
|
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>
|
2023-11-22 17:00:14 +01:00
|
|
|
<form>
|
|
|
|
<LargeCardText
|
|
|
|
icon={<Icon icon={Icons.CIRCLE_CHECK} />}
|
|
|
|
title="Enter your passphrase"
|
2023-11-18 15:12:31 +01:00
|
|
|
>
|
2023-11-22 17:00:14 +01:00
|
|
|
If you've already lost it, how will you ever be able to take care
|
|
|
|
of a child?
|
|
|
|
</LargeCardText>
|
|
|
|
<AuthInputBox
|
|
|
|
label="Your passphrase"
|
|
|
|
autoComplete="username"
|
|
|
|
name="username"
|
|
|
|
value={mnemonic}
|
|
|
|
onChange={setMnemonic}
|
|
|
|
/>
|
|
|
|
{result.error ? (
|
|
|
|
<p className="mt-3 text-authentication-errorText">
|
|
|
|
{result.error.message}
|
|
|
|
</p>
|
|
|
|
) : null}
|
|
|
|
<LargeCardButtons>
|
|
|
|
<Button
|
|
|
|
theme="purple"
|
|
|
|
loading={result.loading}
|
|
|
|
onClick={() => execute(mnemonic)}
|
|
|
|
>
|
|
|
|
Register
|
|
|
|
</Button>
|
|
|
|
</LargeCardButtons>
|
|
|
|
</form>
|
2023-11-17 17:38:52 +01:00
|
|
|
</LargeCard>
|
2023-11-05 01:16:45 +01:00
|
|
|
);
|
|
|
|
}
|