Merge pull request #396 from cloudflare/confirm-settings-ui

add/fix settings UI

backend/src/config/server.ts

@@ -17,10 +17,10 @@ export async function getSettings(db: Database): Promise<ServerSettingsData> {
 		throw new Error('SQL Error: ' + result.error)
 	}
 
-	return data
+	return data as ServerSettingsData
 }
 
-export async function updateSettings(db: Database, data: ServerSettingsData) {
+export async function updateSettings(db: Database, data: Partial<ServerSettingsData>) {
 	const result = await upsertServerSettings(db, data)
 	if (result && !result.success) {
 		throw new Error('SQL Error: ' + result.error)

frontend/src/components/ResultMessage/index.tsx

@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik'
+
+type Props = {
+	type: 'success' | 'failure'
+	message: string
+}
+
+export default component$(({ type, message }: Props) => {
+	const colorClasses = getColorClasses(type)
+	return <p class={`border mb-5 p-5 text-center rounded ${colorClasses}`}>{message}</p>
+})
+
+export function getColorClasses(type: Props['type']): string {
+	switch (type) {
+		case 'success':
+			return 'bg-green-800 border-green-700 text-green-100'
+		case 'failure':
+			return 'bg-red-800 border-red-700 text-red-100 text-green-100'
+		default:
+			return 'bg-green-800 border-green-700 text-green-100'
+	}
+}

frontend/src/components/Settings/SubmitButton.tsx

@@ -0,0 +1,23 @@
+import { component$ } from '@builder.io/qwik'
+import Spinner from '../Spinner'
+
+type Props = {
+	loading: boolean
+	text: string
+}
+
+export const SubmitButton = component$<Props>(({ text, loading }) => {
+	return (
+		<button
+			type="submit"
+			class="w-full my-10 relative bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
+		>
+			{text}
+			{loading && (
+				<div class="absolute inset-0 bg-[#00000078] grid place-items-center cursor-progress">
+					<Spinner />
+				</div>
+			)}
+		</button>
+	)
+})

frontend/src/components/Spinner/index.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(() => {
+	return (
+		<div role="status">
+			<svg
+				aria-hidden="true"
+				class="w-6 h-6 mr-2 text-wildebeest-100 animate-spin fill-wildebeest-vibrant-600"
+				viewBox="0 0 100 101"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+					fill="currentFill"
+				/>
+			</svg>
+			<span class="sr-only">Loading...</span>
+		</div>
+	)
+})

frontend/src/routes/(admin)/settings/(admin)/server-settings/about/index.tsx

@@ -4,6 +4,8 @@ import { getDatabase } from 'wildebeest/backend/src/database'
 import { updateSettings } from 'wildebeest/backend/src/config/server'
 import { TextArea } from '~/components/Settings/TextArea'
 import { serverSettingsLoader } from '../layout'
+import { SubmitButton } from '~/components/Settings/SubmitButton'
+import ResultMessage from '~/components/ResultMessage'
 
 const zodSchema = zod$({
 	'extended description': z.string().min(1),
@@ -31,6 +33,9 @@ export default component$(() => {
 	const existingSettings = serverSettingsLoader()
 	const saveAction = action()
 
+	const showSuccessfulResult = !!saveAction.value?.success
+	const showUnsuccessfulResult = !!saveAction.value && !saveAction.value.success
+
 	return (
 		<Form action={saveAction}>
 			<p class="mt-12 mb-9">Provide in-depth information about how the server is operated, moderated, funded.</p>
@@ -56,12 +61,13 @@ export default component$(() => {
 				value={existingSettings.value['privacy policy']}
 			/>
 
-			<button
+			{showSuccessfulResult && <ResultMessage type="success" message="The changes have been saved successfully." />}
-				type="submit"
+
-				class="w-full my-10 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
+			{showUnsuccessfulResult && (
-			>
+				<ResultMessage type="failure" message="There was an error and changes couldn't be saved." />
-				Save Changes
+			)}
-			</button>
+
+			<SubmitButton text="Save Changes" loading={saveAction.isRunning} />
 		</Form>
 	)
 })

frontend/src/routes/(admin)/settings/(admin)/server-settings/branding/index.tsx

@@ -5,6 +5,8 @@ import { updateSettings } from 'wildebeest/backend/src/config/server'
 import { TextArea } from '~/components/Settings/TextArea'
 import { TextInput } from '~/components/Settings/TextInput'
 import { serverSettingsLoader } from '../layout'
+import ResultMessage from '~/components/ResultMessage'
+import { SubmitButton } from '~/components/Settings/SubmitButton'
 
 const zodSchema = zod$({
 	'server name': z.string().min(1),
@@ -32,6 +34,9 @@ export default component$(() => {
 	const existingSettings = serverSettingsLoader()
 	const saveAction = action()
 
+	const showSuccessfulResult = !!saveAction.value?.success
+	const showUnsuccessfulResult = !!saveAction.value && !saveAction.value.success
+
 	return (
 		<Form action={saveAction}>
 			<p class="mt-12 mb-9">
@@ -58,12 +63,13 @@ export default component$(() => {
 				description="A short description to help uniquely identify your server. Who is running it, who is it for?"
 			/>
 
-			<button
+			{showSuccessfulResult && <ResultMessage type="success" message="The changes have been saved successfully." />}
-				type="submit"
+
-				class="w-full my-10 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
+			{showUnsuccessfulResult && (
-			>
+				<ResultMessage type="failure" message="There was an error and changes couldn't be saved." />
-				Save Changes
+			)}
-			</button>
+
+			<SubmitButton text="Save Changes" loading={saveAction.isRunning} />
 		</Form>
 	)
 })

frontend/src/routes/(admin)/settings/(admin)/server-settings/layout.tsx

@@ -10,15 +10,9 @@ export type ServerSettingsData = ServerBrandingData & ServerAboutData
 export const serverSettingsLoader = loader$<Promise<Partial<ServerSettingsData>>>(async ({ platform }) => {
 	const database = await getDatabase(platform)
 
-	const settingsResp = await getSettings(database)
+	const settings = await getSettings(database)
-	let settingsData: Partial<ServerSettingsData> = {}
-	try {
-		settingsData = await settingsResp.json()
-	} catch {
-		settingsData = {}
-	}
 
-	return JSON.parse(JSON.stringify(settingsData))
+	return JSON.parse(JSON.stringify(settings))
 })
 
 export default component$(() => {

frontend/src/routes/(admin)/settings/(admin)/server-settings/rules/edit/[id]/index.tsx

@@ -4,6 +4,7 @@ import { getDatabase } from 'wildebeest/backend/src/database'
 import { getRules, upsertRule } from 'wildebeest/backend/src/config/rules'
 import { TextArea } from '~/components/Settings/TextArea'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
+import { SubmitButton } from '~/components/Settings/SubmitButton'
 
 export type ServerSettingsData = { rules: string[] }
 
@@ -34,7 +35,7 @@ export const ruleLoader = loader$<Promise<{ id: number; text: string }>>(async (
 	const database = await getDatabase(platform)
 	const rules = await getRules(database)
 
-	const rule: { id: number; text: string } | undefined = rules.find((r) => r.id === +params['id'])
+	const rule: { id: string; text: string } | undefined = rules.find((r) => r.id === params['id'])
 
 	if (!rule) {
 		throw html(404, getErrorHtml('The selected rule could not be found'))
@@ -76,12 +77,7 @@ export default component$(() => {
 					/>
 				</div>
 
-				<button
+				<SubmitButton text="Save Changes" loading={editActionObj.isRunning} />
-					type="submit"
-					class="w-full my-5 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
-				>
-					Save Changes
-				</button>
 			</Form>
 		</>
 	)

frontend/src/routes/(admin)/settings/(admin)/server-settings/rules/index.tsx

@@ -3,6 +3,7 @@ import { action$, Form, Link, loader$, z, zod$ } from '@builder.io/qwik-city'
 import { getDatabase } from 'wildebeest/backend/src/database'
 import { getRules, deleteRule, upsertRule } from 'wildebeest/backend/src/config/rules'
 import { TextArea } from '~/components/Settings/TextArea'
+import { SubmitButton } from '~/components/Settings/SubmitButton'
 
 export type ServerSettingsData = { rules: string[] }
 
@@ -76,12 +77,7 @@ export default component$(() => {
 					/>
 				</div>
 
-				<button
+				<SubmitButton text="Add Rule" loading={addActionObj.isRunning} />
-					type="submit"
-					class="w-full my-5 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
-				>
-					Add Rule
-				</button>
 			</Form>
 			<div>
 				{rules.value.map(({ id, text }, idx) => {

frontend/src/routes/(admin)/settings/(auth)/aliases/index.tsx

@@ -1,7 +1,8 @@
-import { component$, useStore, useSignal, $ } from '@builder.io/qwik'
+import { component$, useStore, $ } from '@builder.io/qwik'
 import { getDatabase } from 'wildebeest/backend/src/database'
 import { action$, Form, zod$, z } from '@builder.io/qwik-city'
 import { addAlias } from 'wildebeest/backend/src/accounts/alias'
+import ResultMessage from '~/components/ResultMessage'
 
 const zodSchema = zod$({
 	alias: z.string().min(1),
@@ -29,7 +30,6 @@ export const action = action$(async (data, { platform, json }) => {
 
 export default component$(() => {
 	const state = useStore({ alias: '' })
-	const toast = useSignal<'success' | 'failure' | null>(null)
 
 	const handleInput = $((event: Event) => {
 		state.alias = (event.target as HTMLInputElement).value
@@ -42,16 +42,15 @@ export default component$(() => {
 			<div class="max-w-4xl py-14 px-8">
 				<h2 class="text-2xl font-bold mb-6">Account Aliases</h2>
 
-				{toast.value === 'success' && (
+				{!!saveAction.value && (
-					<div class="bg-green-800 border-green-700 text-green-100 border mb-5 p-5 text-center rounded">
+					<ResultMessage
-						Successfully created a new alias. You can now initiate the move from the old account.
+						type={saveAction.value.success ? 'success' : 'failure'}
-					</div>
+						message={
-				)}
+							saveAction.value.success
-
+								? 'Successfully created a new alias. You can now initiate the move from the old account.'
-				{toast.value === 'failure' && (
+								: 'Failed to create alias.'
-					<div class="bg-red-800 border-red-700 text-red-100 border mb-5 p-5 text-center rounded">
+						}
-						Failed to create alias.
+					/>
-					</div>
 				)}
 
 				<p class="text-sm text-wildebeest-400 mb-10">