feat: add report button to profiles

This commit is contained in:
Sam 2023-03-23 15:20:07 +01:00
parent a0bc39bcba
commit f02e64fca7
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
4 changed files with 73 additions and 1 deletions

View File

@ -14,7 +14,7 @@ type Report struct {
ID int64 `json:"id"`
UserID xid.ID `json:"user_id"`
UserName string `json:"user_name"`
MemberID *xid.ID `json:"member_id"`
MemberID xid.ID `json:"member_id"`
MemberName *string `json:"member_name"`
Reason string `json:"reason"`
ReporterID xid.ID `json:"reporter_id"`

View File

@ -31,6 +31,7 @@
import ErrorAlert from "$lib/components/ErrorAlert.svelte";
import { goto } from "$app/navigation";
import renderMarkdown from "$lib/api/markdown";
import ReportButton from "./ReportButton.svelte";
export let data: PageData;
@ -149,6 +150,11 @@
</div>
{/each}
</div>
{#if $userStore && $userStore.id !== data.id}
<div class="row">
<ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
</div>
{/if}
{#if data.members.length > 0 || ($userStore && $userStore.id === data.id)}
<div class="row">
<div class="col">

View File

@ -0,0 +1,60 @@
<script lang="ts">
import type { APIError } from "$lib/api/entities";
import { apiFetchClient } from "$lib/api/fetch";
import ErrorAlert from "$lib/components/ErrorAlert.svelte";
import { addToast } from "$lib/toast";
import { Button, FormGroup, Icon, Modal, ModalBody, ModalFooter } from "sveltestrap";
export let subject: string;
export let reportUrl: string;
const MAX_REASON_LENGTH = 2000;
let reason = "";
let error: APIError | null = null;
let isOpen = false;
const toggle = () => (isOpen = !isOpen);
const doReport = async () => {
try {
await apiFetchClient<any>(reportUrl, "POST", { reason: reason });
error = null;
addToast({ header: "Sent report", body: "Successfully sent report!" });
toggle();
} catch (e) {
error = e as APIError;
}
};
</script>
<div>
<Button color="danger" outline on:click={toggle}
><Icon name="exclamation-triangle-fill" /> Report {subject}</Button
>
</div>
<Modal header="Report {subject}" {isOpen} {toggle}>
<ModalBody>
{#if error}
<ErrorAlert {error} />
{/if}
<FormGroup floating label="Reason" class="mt-2">
<textarea style="min-height: 100px;" class="form-control" bind:value={reason} />
</FormGroup>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" aria-hidden /> Please only report {subject}s for violating the
<a class="text-reset" href="/page/terms" target="_blank" rel="noopener noreferrer"
>terms of service</a
>.
</p>
</ModalBody>
<ModalFooter>
<Button
color="danger"
disabled={!reason || reason.length > MAX_REASON_LENGTH}
on:click={doReport}>Report</Button
>
<Button color="secondary" on:click={toggle}>Cancel</Button>
</ModalFooter>
</Modal>

View File

@ -10,6 +10,7 @@
import { PUBLIC_BASE_URL } from "$env/static/public";
import { userStore } from "$lib/store";
import renderMarkdown from "$lib/api/markdown";
import ReportButton from "../ReportButton.svelte";
export let data: PageData;
@ -86,6 +87,11 @@
</div>
{/each}
</div>
{#if $userStore && $userStore.id !== data.user.id}
<div class="row">
<ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
</div>
{/if}
</div>
</div>