import React, { useCallback, useState } from "react";
import styles from "./RoomAuthView.module.css";
import { Button } from "../button";
import { Body, Caption, Link, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { useLocation } from "react-router-dom";
import { useRecaptcha } from "../auth/useRecaptcha";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
import { Form } from "../form/Form";
import { UserMenuContainer } from "../UserMenuContainer";
export function RoomAuthView() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [{ privacyPolicyUrl, recaptchaKey }, register] =
useInteractiveRegistration();
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
const onSubmit = useCallback(
(e) => {
e.preventDefault();
const data = new FormData(e.target);
const userName = data.get("userName");
async function submit() {
setError(undefined);
setLoading(true);
const recaptchaResponse = await execute();
await register(userName, randomString(16), recaptchaResponse, true);
}
submit().catch((error) => {
console.error(error);
setLoading(false);
setError(error);
reset();
});
},
[register, reset, execute]
);
const location = useLocation();
return (
<>
Join Call
{"Not registered yet? "}
Create an account
);
}