0784a30ef0
Hugh pointed out that the button labeled "Join call now" on this screen is misleading, because it does not join you to the call but rather send you to the lobby. Meanwhile, the designs call for this screen to use the words "Join as guest" and "Continue", so let's go with that.
120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
/*
|
|
Copyright 2022-2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { FC, useCallback, useState } from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import { logger } from "matrix-js-sdk/src/logger";
|
|
import { Button, Heading, Text } from "@vector-im/compound-web";
|
|
|
|
import styles from "./RoomAuthView.module.css";
|
|
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
|
|
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
|
|
import { Form } from "../form/Form";
|
|
import { UserMenuContainer } from "../UserMenuContainer";
|
|
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
|
|
import { Config } from "../config/Config";
|
|
import { ExternalLink, Link } from "../button/Link";
|
|
|
|
export const RoomAuthView: FC = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<Error>();
|
|
|
|
const { registerPasswordlessUser, recaptchaId } =
|
|
useRegisterPasswordlessUser();
|
|
|
|
const onSubmit = useCallback(
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
(e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
const data = new FormData(e.target);
|
|
const dataForDisplayName = data.get("displayName");
|
|
const displayName =
|
|
typeof dataForDisplayName === "string" ? dataForDisplayName : "";
|
|
|
|
registerPasswordlessUser(displayName).catch((error) => {
|
|
logger.error("Failed to register passwordless user", e);
|
|
setLoading(false);
|
|
setError(error);
|
|
});
|
|
},
|
|
[registerPasswordlessUser],
|
|
);
|
|
|
|
const { t } = useTranslation();
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<>
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenuContainer preventNavigation />
|
|
</RightNav>
|
|
</Header>
|
|
<div className={styles.container}>
|
|
<main className={styles.main}>
|
|
<Heading size="xl" weight="semibold" className={styles.headline}>
|
|
{t("lobby.join_as_guest")}
|
|
</Heading>
|
|
<Form className={styles.form} onSubmit={onSubmit}>
|
|
<FieldRow>
|
|
<InputField
|
|
id="displayName"
|
|
name="displayName"
|
|
label={t("common.display_name")}
|
|
placeholder={t("common.display_name")}
|
|
data-testid="joincall_displayName"
|
|
type="text"
|
|
required
|
|
autoComplete="off"
|
|
/>
|
|
</FieldRow>
|
|
<Text size="sm">
|
|
<Trans i18nKey="room_auth_view_eula_caption">
|
|
By clicking "Join call now", you agree to our{" "}
|
|
<ExternalLink href={Config.get().eula}>
|
|
End User Licensing Agreement (EULA)
|
|
</ExternalLink>
|
|
</Trans>
|
|
</Text>
|
|
{error && (
|
|
<FieldRow>
|
|
<ErrorMessage error={error} />
|
|
</FieldRow>
|
|
)}
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
disabled={loading}
|
|
data-testid="joincall_joincall"
|
|
>
|
|
{loading
|
|
? t("common.loading")
|
|
: t("room_auth_view_continue_button")}
|
|
</Button>
|
|
<div id={recaptchaId} />
|
|
</Form>
|
|
</main>
|
|
<Text className={styles.footer}>
|
|
<Trans i18nKey="unauthenticated_view_body">
|
|
Not registered yet?{" "}
|
|
<Link to="/register" state={{ from: location }}>
|
|
Create an account
|
|
</Link>
|
|
</Trans>
|
|
</Text>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|