Add room auth view
This commit is contained in:
Robert Long
parent
0fe38000f5
commit
eb4207e41d
5 changed files with 171 additions and 4 deletions
|
|
@ -63,7 +63,7 @@ export function UnauthenticatedView() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[register]
|
[register, reset, execute]
|
||||||
);
|
);
|
||||||
|
|
||||||
const { modalState, modalProps } = useModalTriggerState();
|
const { modalState, modalProps } = useModalTriggerState();
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
export function RoomAuthView() {
|
||||||
return <div>Register</div>;
|
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 (
|
||||||
|
<>
|
||||||
|
<Header>
|
||||||
|
<LeftNav>
|
||||||
|
<HeaderLogo />
|
||||||
|
</LeftNav>
|
||||||
|
<RightNav />
|
||||||
|
</Header>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<main className={styles.main}>
|
||||||
|
<Headline className={styles.headline}>Join Call</Headline>
|
||||||
|
<Form className={styles.form} onSubmit={onSubmit}>
|
||||||
|
<FieldRow>
|
||||||
|
<InputField
|
||||||
|
id="userName"
|
||||||
|
name="userName"
|
||||||
|
label="Your name"
|
||||||
|
placeholder="Your name"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</FieldRow>
|
||||||
|
<Caption>
|
||||||
|
This site is protected by ReCAPTCHA and the Google{" "}
|
||||||
|
<Link href="https://www.google.com/policies/privacy/">
|
||||||
|
Privacy Policy
|
||||||
|
</Link>{" "}
|
||||||
|
and{" "}
|
||||||
|
<Link href="https://policies.google.com/terms">
|
||||||
|
Terms of Service
|
||||||
|
</Link>{" "}
|
||||||
|
apply.
|
||||||
|
<br />
|
||||||
|
By clicking "Go", you agree to our{" "}
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
67
src/room/RoomAuthView.module.css
Normal file
67
src/room/RoomAuthView.module.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -47,7 +47,7 @@ export function RoomPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GroupCallLoader roomId={roomId} viaServers={viaServers}>
|
<GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
|
||||||
{(groupCall) => (
|
{(groupCall) => (
|
||||||
<GroupCallView
|
<GroupCallView
|
||||||
client={client}
|
client={client}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useEffect } from "react";
|
||||||
import * as Sentry from "@sentry/react";
|
import * as Sentry from "@sentry/react";
|
||||||
|
|
||||||
export function useSentryGroupCallHandler(groupCall) {
|
export function useSentryGroupCallHandler(groupCall) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue