diff --git a/src/home/UnauthenticatedView.jsx b/src/home/UnauthenticatedView.jsx index 33c4260..79d3398 100644 --- a/src/home/UnauthenticatedView.jsx +++ b/src/home/UnauthenticatedView.jsx @@ -63,7 +63,7 @@ export function UnauthenticatedView() { } }); }, - [register] + [register, reset, execute] ); const { modalState, modalProps } = useModalTriggerState(); diff --git a/src/room/RoomAuthView.jsx b/src/room/RoomAuthView.jsx index db5a2d4..acaa1bb 100644 --- a/src/room/RoomAuthView.jsx +++ b/src/room/RoomAuthView.jsx @@ -1,5 +1,104 @@ -import React from "react"; +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 "../useRecaptcha"; +import { FieldRow, InputField, ErrorMessage } from "../Input"; +import { randomString } from "matrix-js-sdk/src/randomstring"; +import { useInteractiveRegistration } from "../ConferenceCallManagerHooks"; +import { Form } from "../form/Form"; export function RoomAuthView() { - return
Register
; + 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 +
+ + + + + This site is protected by ReCAPTCHA and the Google{" "} + + Privacy Policy + {" "} + and{" "} + + Terms of Service + {" "} + apply. +
+ By clicking "Go", you agree to our{" "} + Terms and conditions + + {error && ( + + {error.message} + + )} + +
+ +
+ + {"Not registered yet? "} + + Create an account + + +
+ + ); } diff --git a/src/room/RoomAuthView.module.css b/src/room/RoomAuthView.module.css new file mode 100644 index 0000000..48aa50f --- /dev/null +++ b/src/room/RoomAuthView.module.css @@ -0,0 +1,67 @@ +.form { + padding: 0 24px; + justify-content: center; + max-width: 360px; +} + +.form > * + * { + margin-bottom: 24px; +} + +.headline { + text-align: center; + margin-bottom: 60px; +} + +.callEndedContent { + text-align: center; + max-width: 360px; +} + +.callEndedContent h3 { + margin-bottom: 32px; +} + +.callEndedButton { + width: 100%; + margin-top: 54px; +} + +.container { + display: flex; + min-height: calc(100% - 64px); + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.main { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.logo { + display: flex; + margin-bottom: 54px; +} + +.headline { + margin-bottom: 40px; +} + +.footer { + margin-bottom: 44px; +} + +@media (min-width: 800px) { + .logo { + display: none; + } + + .container { + min-height: calc(100% - 76px); + } +} diff --git a/src/room/RoomPage.jsx b/src/room/RoomPage.jsx index 946f795..ec76e9a 100644 --- a/src/room/RoomPage.jsx +++ b/src/room/RoomPage.jsx @@ -47,7 +47,7 @@ export function RoomPage() { } return ( - + {(groupCall) => (