85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { For, createSignal, onMount } from "solid-js";
|
|
|
|
import { Trans } from "@lingui-solid/solid/macro";
|
|
|
|
import {
|
|
Checkbox,
|
|
Column,
|
|
Dialog,
|
|
DialogProps,
|
|
List,
|
|
Row,
|
|
Text,
|
|
Time,
|
|
} from "@revolt/ui";
|
|
import { Symbol } from "@revolt/ui/components/utils/Symbol";
|
|
|
|
import MdPolicy from "@material-design-icons/svg/outlined/policy.svg?component-solid";
|
|
|
|
import { useModals } from "..";
|
|
import { Modals } from "../types";
|
|
|
|
let shownForSession = false;
|
|
|
|
export function PolicyChangeModal(
|
|
props: DialogProps & Modals & { type: "policy_change" },
|
|
) {
|
|
const { showError } = useModals();
|
|
const [confirm, setConfirm] = createSignal(false);
|
|
|
|
// automatically close if we've already shown this modal in this session
|
|
const allowDisplay = !shownForSession;
|
|
shownForSession = true;
|
|
onMount(() => !allowDisplay && props.onClose());
|
|
|
|
return (
|
|
<Dialog
|
|
icon={<MdPolicy />}
|
|
show={allowDisplay && props.show}
|
|
onClose={props.onClose}
|
|
title={<Trans>Review policy changes</Trans>}
|
|
actions={[
|
|
{ text: <Trans>Close</Trans> },
|
|
{
|
|
text: <Trans>Acknowledge</Trans>,
|
|
isDisabled: !confirm(),
|
|
async onClick() {
|
|
await props.acknowledge().catch(showError);
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<Trans>
|
|
Click on the items below to learn more about different changes!
|
|
</Trans>
|
|
<List>
|
|
<For each={props.changes}>
|
|
{(change) => (
|
|
<List.Item onClick={() => window.open(change.url, "_blank")}>
|
|
<Row align>
|
|
<Column gap="none" grow>
|
|
<Text class="title">{change.description}</Text>
|
|
<Text class="label">
|
|
<Trans>
|
|
Effective{" "}
|
|
<Time format="iso8601" value={change.effective_time} /> (
|
|
<Time format="relative" value={change.effective_time} />)
|
|
</Trans>
|
|
</Text>
|
|
</Column>
|
|
<Symbol>open_in_new</Symbol>
|
|
</Row>
|
|
</List.Item>
|
|
)}
|
|
</For>
|
|
</List>
|
|
<Checkbox
|
|
checked={confirm()}
|
|
onChange={() => setConfirm((checked) => !checked)}
|
|
>
|
|
I've read and reviewed the changes.
|
|
</Checkbox>
|
|
</Dialog>
|
|
);
|
|
}
|