Files
blap/modules/restricted-guests/src/RoomPreviewBar.tsx
T
2026-06-08 10:32:12 +01:00

71 lines
2.2 KiB
TypeScript

/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { type FC, type JSX } from "react";
import { Button } from "@vector-im/compound-web";
import { type Api } from "@element-hq/element-web-module-api";
import styled from "styled-components";
import { useWatchable } from "@element-hq/element-web-module-api";
import { type ModuleConfig } from "./config.ts";
import RegisterDialog from "./RegisterDialog.tsx";
interface RoomPreviewBarProps {
api: Api;
config: ModuleConfig;
children: JSX.Element;
roomId?: string;
roomAlias?: string;
promptAskToJoin?: boolean;
}
const Container = styled.aside`
margin: auto;
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
font-feature-settings: normal;
`;
const RoomPreviewBar: FC<RoomPreviewBarProps> = ({ api, config, roomId, roomAlias, promptAskToJoin, children }) => {
const profile = useWatchable(api.profile);
const isGuest = profile.isGuest;
if (promptAskToJoin || !isGuest || !(roomId || roomAlias)) return children;
const onTryJoin = async (): Promise<void> => {
const { finished } = api.openDialog(
{
title: api.i18n.translate("register_dialog_title"),
},
RegisterDialog,
{
api,
config,
showLoginLink: true,
},
);
const { model: accountAuthInfo, ok } = await finished;
if (ok && accountAuthInfo) {
await api.overwriteAccountAuth(accountAuthInfo);
await api.navigation.toMatrixToLink(`https://matrix.to/#/${roomId ?? roomAlias}`, true);
}
};
return (
<Container className="mx_RoomPreviewBar">
<div className="mx_RoomPreviewBar_message">{api.i18n.translate("join_message")}</div>
<div className="mx_RoomPreviewBar_actions">
<Button onClick={onTryJoin}>{api.i18n.translate("join_cta")}</Button>
</div>
</Container>
);
};
export default RoomPreviewBar;