Klip: Kutt like it's perfect. An easy to use self-hosted URL shortener.
https://uwu.ryukyu/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.4 KiB
80 lines
2.4 KiB
import { useFormState } from "react-use-form-state";
|
|
import { Flex } from "reflexbox/styled-components";
|
|
import React, { useState } from "react";
|
|
import axios from "axios";
|
|
|
|
import Text, { H2, Span } from "../components/Text";
|
|
import AppWrapper from "../components/AppWrapper";
|
|
import { TextInput } from "../components/Input";
|
|
import { Button } from "../components/Button";
|
|
import { Col } from "../components/Layout";
|
|
import Icon from "../components/Icon";
|
|
import { useMessage } from "../hooks";
|
|
import { APIv2 } from "../consts";
|
|
|
|
const ReportPage = () => {
|
|
const [formState, { text }] = useFormState<{ url: string }>();
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useMessage(5000);
|
|
|
|
const onSubmit = async e => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setMessage();
|
|
try {
|
|
await axios.post(`${APIv2.Links}/report`, { link: formState.values.url });
|
|
setMessage("Thanks for the report, we'll take actions shortly.", "green");
|
|
formState.clear();
|
|
} catch (error) {
|
|
setMessage(error?.response?.data?.error || "Couldn't send report.");
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<AppWrapper>
|
|
<Col width={600} maxWidth="97%" alignItems="flex-start">
|
|
<H2 my={3} bold>
|
|
Report abuse
|
|
</H2>
|
|
<Text mb={3}>
|
|
Report abuses, malware and phishing links to the below email address
|
|
or use the form. We will take actions shortly.
|
|
</Text>
|
|
<Text mb={4}>
|
|
{(process.env.REPORT_EMAIL || "").replace("@", "[at]")}
|
|
</Text>
|
|
<Text mb={3}>
|
|
<Span bold>URL containing malware/scam:</Span>
|
|
</Text>
|
|
<Flex
|
|
as="form"
|
|
flexDirection={["column", "row"]}
|
|
alignItems={["flex-start", "center"]}
|
|
justifyContent="flex-start"
|
|
onSubmit={onSubmit}
|
|
>
|
|
<TextInput
|
|
{...text("url")}
|
|
placeholder="kutt.it/example"
|
|
height={[44, 54]}
|
|
width={[1, 1 / 2]}
|
|
flex="0 0 auto"
|
|
mr={3}
|
|
required
|
|
/>
|
|
<Button type="submit" flex="0 0 auto" height={[40, 44]} mt={[3, 0]}>
|
|
{loading && <Icon name={"spinner"} stroke="white" mr={2} />}
|
|
Send report
|
|
</Button>
|
|
</Flex>
|
|
<Text fontSize={14} mt={3} color={message.color}>
|
|
{message.text}
|
|
</Text>
|
|
</Col>
|
|
</AppWrapper>
|
|
);
|
|
};
|
|
|
|
export default ReportPage;
|