Update: Age gate view

This commit is contained in:
nizune 2021-07-03 00:46:19 +02:00
parent 030d743af9
commit b100d06cda
3 changed files with 41 additions and 8 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 5cad406a2fb09d90803c5604d6f27701c3bf140b
Subproject commit ec907eb606a3e1d5046bef503caa0585f6bcbc22

View file

@ -1,7 +1,7 @@
import styled from "styled-components";
import { useEffect, useState } from "preact/hooks";
import ChannelHeader from "./ChannelHeader";
import { useParams } from "react-router-dom";
import { useParams, useHistory } from "react-router-dom";
import { MessageArea } from "./messaging/MessageArea";
import Checkbox from "../../components/ui/Checkbox";
import Button from "../../components/ui/Button";
@ -30,6 +30,32 @@ const ChannelContent = styled.div`
flex-direction: column;
`;
const AgeGate = styled.div`
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
padding: 12px;
img {
height: 150px;
}
.subtext {
color: var(--secondary-foreground);
margin-bottom: 12px;
font-size: 14px;
}
.actions {
margin-top: 20px;
display: flex;
gap: 12px;
}
`;
export function Channel({ id }: { id: string }) {
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
@ -47,15 +73,22 @@ function TextChannel({ channel }: { channel: Channel }) {
const [ showMembers, setMembers ] = useState(true);
if ((channel.channel_type === 'TextChannel' || channel.channel_type === 'Group') && channel.name.includes('nsfw')) {
const goBack = useHistory();
const [ consent, setConsent ] = useState(false);
const [ ageGate, setAgeGate ] = useState(false);
if (!ageGate) {
return (
<div style={{ maxWidth: '480px' }}>
<h3>this channel is marked as nsfw</h3>
<Checkbox checked={consent} onChange={v => setConsent(v)}>I am at least 18 years old</Checkbox>
<Button onClick={() => consent && setAgeGate(true)}>view content</Button>
</div>
<AgeGate>
<img src={"https://static.revolt.chat/emoji/mutant/26a0.svg"} draggable={false}/>
<h2>{channel.name}</h2>
<span className="subtext">This channel is marked as NSFW. <a href="#">Learn more</a></span>
<Checkbox checked={consent} onChange={v => setConsent(v)}>I confirm that I am at least 18 years old.</Checkbox>
<div className="actions">
<Button contrast onClick={() => goBack}>Go back</Button>
<Button contrast onClick={() => consent && setAgeGate(true)}>Enter Channel</Button>
</div>
</AgeGate>
)
}
}

View file

@ -185,7 +185,7 @@
width: 1.5em;
height: 1.5em;
font-size: 12px;
color: white;
border-radius: 50%;
align-items: center;
display: inline-flex;