ask for name (optional) in submission form

Author: ScriptRaccoon

src/components/SuggestionForm.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
+	import { browser } from '$app/environment'
 	import { page } from '$app/state'
 	import { resize_textarea } from '$lib/client/utils'
 	import { faCheckCircle, faWarning } from '@fortawesome/free-solid-svg-icons'
 	import { tick } from 'svelte'
 	import Fa from 'svelte-fa'
 
+	const saved_name = browser ? (window.localStorage.getItem('name') ?? '') : ''
+
 	let title = $state('')
 	let body = $state('')
+	let name = $state(saved_name)
+
 	let error = $state('')
 	let url = $state('')
 	let sending = $state(false)
@@ -18,10 +23,16 @@
 		error = ''
 		url = ''
 
+		if (name) {
+			window.localStorage.setItem('name', name)
+		} else {
+			window.localStorage.removeItem('name')
+		}
+
 		try {
 			const res = await fetch('/api/issue', {
 				method: 'POST',
-				body: JSON.stringify({ title, body, url: page.url.href }),
+				body: JSON.stringify({ title, body, url: page.url.href, name }),
 			})
 
 			const res_json = await res.json()
@@ -57,15 +68,31 @@
 	<form onsubmit={create_issue}>
 		<div class="form-group">
 			<label for="title">Short summary</label>
-			<input type="text" id="title" bind:value={title} required />
+			<input
+				type="text"
+				id="title"
+				class="full-width"
+				bind:value={title}
+				required
+			/>
 		</div>
 
 		<div class="form-group">
 			<label for="body">Details</label>
-			<textarea id="body" {@attach resize_textarea} bind:value={body} required
+			<textarea
+				id="body"
+				{@attach resize_textarea}
+				bind:value={body}
+				required
+				class="full-width"
 			></textarea>
 		</div>
 
+		<div class="form-group">
+			<label for="name">Your name (optional)</label>
+			<input type="text" id="name" bind:value={name} />
+		</div>
+
 		<button class="button" disabled={sending}>
 			{#if sending}
 				Submitting...
@@ -102,11 +129,6 @@
 		color: var(--error-color);
 	}
 
-	input,
-	textarea {
-		width: 100%;
-	}
-
 	.form-group {
 		margin-bottom: 1rem;
 	}

src/routes/api/issue/+server.ts

@@ -9,6 +9,7 @@ import {
 	GITHUB_OWNER,
 	GITHUB_REPO,
 	TITLE_MAX_LENGTH,
+	NAME_MAX_LENGTH,
 } from './config'
 import { flag_violation, is_blocked, has_profanity, rate_limit } from '$lib/server/redis'
 
@@ -36,17 +37,18 @@ export const POST = async (event) => {
 
 	if ('error' in data) return json({ error: data.error }, { status: 400 })
 
-	const { title, body, url } = data
+	const { title, body, url, name } = data
 
 	if (has_profanity(title, body)) {
 		await flag_violation(ip, 'profanity')
 		return json({ error: 'Profanity detected' }, { status: 400 })
 	}
 
-	const full_body =
-		body +
-		'\n\n---\n' +
-		`This issue has been created via the submission form on ${url}`
+	const footer = name
+		? `This issue has been created by **${name}** via the submission form on ${url}`
+		: `This issue has been created via the submission form on ${url}`
+
+	const full_body = `${body}\n\n---\n${footer}`
 
 	try {
 		const octokit = await app.getInstallationOctokit(Number(GITHUB_INSTALLATION_ID))
@@ -67,15 +69,17 @@ export const POST = async (event) => {
 
 async function parse_data(
 	request: Request,
-): Promise<{ error: string } | { title: string; body: string; url: string }> {
+): Promise<
+	{ error: string } | { title: string; body: string; url: string; name: string }
+> {
 	let data
 	try {
 		data = await request.json()
 	} catch (_) {
 		return { error: 'Invalid request body' }
 	}
 
-	const { title, body, url } = data
+	const { title, body, url, name = '' } = data
 
 	if (!title) return { error: 'Title required' }
 	if (!body) return { error: 'Body required' }
@@ -84,6 +88,7 @@ async function parse_data(
 	if (typeof title !== 'string') return { error: 'Title must be a string' }
 	if (typeof body !== 'string') return { error: 'Body must be a string' }
 	if (typeof url !== 'string') return { error: 'URL must be a string' }
+	if (typeof name !== 'string') return { error: 'Name must be a string' }
 
 	if (title.length > TITLE_MAX_LENGTH) {
 		return { error: `Title must have at most ${TITLE_MAX_LENGTH} characters` }
@@ -96,5 +101,9 @@ async function parse_data(
 		return { error: 'URL must be a valid URL' }
 	}
 
-	return { title, body, url }
+	if (name.length > NAME_MAX_LENGTH) {
+		return { error: `Name must have at most ${NAME_MAX_LENGTH} characters` }
+	}
+
+	return { title, body, url, name }
 }

src/routes/api/issue/config.ts

@@ -4,3 +4,4 @@ export const GITHUB_OWNER = 'ScriptRaccoon'
 export const GITHUB_REPO = 'CatDat'
 export const TITLE_MAX_LENGTH = 50
 export const BODY_MAX_LENGTH = 10000
+export const NAME_MAX_LENGTH = 50

src/routes/app.css

@@ -202,6 +202,10 @@ button:focus-visible {
 	white-space: nowrap;
 }
 
+.full-width {
+	width: 100%;
+}
+
 summary {
 	cursor: pointer;
 	width: fit-content;