2022-01-06 00:09:51 +00:00
|
|
|
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";
|
2022-01-06 00:34:01 +00:00
|
|
|
import { useRecaptcha } from "../auth/useRecaptcha";
|
2022-01-06 01:27:01 +00:00
|
|
|
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
|
2022-01-06 00:09:51 +00:00
|
|
|
import { randomString } from "matrix-js-sdk/src/randomstring";
|
2022-01-06 00:47:53 +00:00
|
|
|
import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
|
2022-01-06 00:09:51 +00:00
|
|
|
import { Form } from "../form/Form";
|
2022-01-06 22:10:33 +00:00
|
|
|
import { UserMenuContainer } from "../UserMenuContainer";
|
2022-02-15 20:46:58 +00:00
|
|
|
import { generateRandomName } from "../auth/generateRandomName";
|
2022-01-05 23:35:12 +00:00
|
|
|
|
|
|
|
|
export function RoomAuthView() {
|
2022-01-06 00:09:51 +00:00
|
|
|
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);
|
2022-02-15 20:46:58 +00:00
|
|
|
const displayName = data.get("displayName");
|
2022-01-06 00:09:51 +00:00
|
|
|
|
|
|
|
|
async function submit() {
|
|
|
|
|
setError(undefined);
|
|
|
|
|
setLoading(true);
|
|
|
|
|
const recaptchaResponse = await execute();
|
2022-02-15 20:46:58 +00:00
|
|
|
const userName = generateRandomName();
|
|
|
|
|
await register(
|
|
|
|
|
userName,
|
|
|
|
|
randomString(16),
|
|
|
|
|
displayName,
|
|
|
|
|
recaptchaResponse,
|
|
|
|
|
true
|
|
|
|
|
);
|
2022-01-06 00:09:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
submit().catch((error) => {
|
|
|
|
|
console.error(error);
|
|
|
|
|
setLoading(false);
|
|
|
|
|
setError(error);
|
|
|
|
|
reset();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
[register, reset, execute]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const location = useLocation();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Header>
|
|
|
|
|
<LeftNav>
|
|
|
|
|
<HeaderLogo />
|
|
|
|
|
</LeftNav>
|
2022-01-06 22:10:33 +00:00
|
|
|
<RightNav>
|
2022-02-02 23:09:16 +00:00
|
|
|
<UserMenuContainer preventNavigation />
|
2022-01-06 22:10:33 +00:00
|
|
|
</RightNav>
|
2022-01-06 00:09:51 +00:00
|
|
|
</Header>
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<main className={styles.main}>
|
|
|
|
|
<Headline className={styles.headline}>Join Call</Headline>
|
|
|
|
|
<Form className={styles.form} onSubmit={onSubmit}>
|
|
|
|
|
<FieldRow>
|
|
|
|
|
<InputField
|
2022-02-15 20:46:58 +00:00
|
|
|
id="displayName"
|
|
|
|
|
name="displayName"
|
|
|
|
|
label="Display Name"
|
|
|
|
|
placeholder="Display Name"
|
2022-01-06 00:09:51 +00:00
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
autoComplete="off"
|
|
|
|
|
/>
|
|
|
|
|
</FieldRow>
|
|
|
|
|
<Caption>
|
2022-02-02 22:31:11 +00:00
|
|
|
By clicking "Join call now", you agree to our{" "}
|
2022-01-06 00:09:51 +00:00
|
|
|
<Link href={privacyPolicyUrl}>Terms and conditions</Link>
|
|
|
|
|
</Caption>
|
|
|
|
|
{error && (
|
|
|
|
|
<FieldRow>
|
|
|
|
|
<ErrorMessage>{error.message}</ErrorMessage>
|
|
|
|
|
</FieldRow>
|
|
|
|
|
)}
|
|
|
|
|
<Button type="submit" size="lg" disabled={loading}>
|
|
|
|
|
{loading ? "Loading..." : "Join call now"}
|
|
|
|
|
</Button>
|
|
|
|
|
<div id={recaptchaId} />
|
|
|
|
|
</Form>
|
|
|
|
|
</main>
|
|
|
|
|
<Body className={styles.footer}>
|
|
|
|
|
{"Not registered yet? "}
|
|
|
|
|
<Link
|
|
|
|
|
color="primary"
|
|
|
|
|
to={{ pathname: "/login", state: { from: location } }}
|
|
|
|
|
>
|
|
|
|
|
Create an account
|
|
|
|
|
</Link>
|
|
|
|
|
</Body>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2022-01-05 23:35:12 +00:00
|
|
|
}
|
