src/lib/components/SMS/RecipientList.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	export type Recipient = {
+		id: string;
+		name: string;
+		phone: string;
+	};
+</script>
+
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		recipients: Recipient[];
+		selected: Recipient[];
+	} & Omit<SvelteHTMLElements['table'], 'children'>;
+
+	let { recipients, selected = $bindable([]), class: className, ...props }: Props = $props();
+
+	let checked = $state(recipients.map(() => false));
+
+	$effect(() => {
+		selected = checked
+			.entries()
+			.filter(([, val]) => val)
+			.map(([index]) => recipients[index])
+			.toArray();
+	});
+</script>
+
+<table {...props} class={twMerge('table', clsx(className))}>
+	<thead>
+		<tr>
+			<th>
+				<input
+					class="checkbox"
+					type="checkbox"
+					onchange={({ currentTarget }) => {
+						checked = checked.map(() => currentTarget.checked);
+					}}
+				/>
+			</th>
+			<th> Name </th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each recipients as resident, index}
+			<tr>
+				<th
+					><input
+						class="checkbox"
+						type="checkbox"
+						checked={checked[index]}
+						onchange={({ currentTarget }) => {
+							checked[index] = currentTarget.checked;
+						}}
+					/></th
+				>
+				<td>{resident.name}</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>

src/lib/components/SMS/index.ts

@@ -0,0 +1,2 @@
+export * from './RecipientList.svelte';
+export { default as RecipientList } from './RecipientList.svelte';

src/routes/app/settings/+page.server.ts

@@ -1,5 +1,4 @@
 import { PhoneRegex } from '$lib/regex';
-import { encrypt } from '$lib/server/crypto/encryption.js';
 import { logger } from '$lib/server/logger';
 import { prisma } from '$lib/server/prisma';
 import { fail, type Actions } from '@sveltejs/kit';
@@ -67,9 +66,9 @@ export const actions = {
 				tenantId: tenantId,
 				twilioConfig: {
 					create: {
-						accountSID: encrypt(accountSID),
-						authToken: encrypt(authToken),
-						phoneNumber: encrypt(phoneNumber),
+						accountSID: accountSID,
+						authToken: authToken,
+						phoneNumber: phoneNumber,
 					},
 				},
 			},

src/routes/app/sms/+page.server.ts

@@ -1,4 +1,4 @@
-import { PhoneRegex } from '$lib/regex';
+import type { Recipient } from '$lib/components/SMS';
 import { logger } from '$lib/server/logger';
 import { prisma } from '$lib/server/prisma/index.js';
 import { fail, type Actions } from '@sveltejs/kit';
@@ -31,8 +31,20 @@ export const load = async (event) => {
 		logger.warn(validationError.message);
 	}
 
+	const residents = await prisma.resident.findMany({
+		where: {
+			tenantId: event.locals.tenant.id,
+		},
+		select: {
+			id: true,
+			name: true,
+			phoneNumber: true,
+		},
+	});
+
 	return {
 		isTwilioConfigured: success,
+		residents: residents,
 	};
 };
 
@@ -40,22 +52,18 @@ export const actions = {
 	default: async (event) => {
 		const form = await event.request.formData();
 
-		if (!form.has('phone')) {
-			return fail(400, { error: 'phone_missing' });
+		if (!form.has('recipients')) {
+			return fail(400, { error: 'recipients_missing' });
 		}
-		if (!form.get('message')) {
+		if (!form.has('message')) {
 			return fail(400, { error: 'message_missing' });
 		}
 
-		const {
-			success: phoneSuccess,
-			data: phone,
-			error: phoneError,
-		} = zod.string().regex(PhoneRegex).safeParse(form.get('phone'));
-		if (!phoneSuccess) {
-			logger.error(phoneError);
-			return fail(400, { error: 'invalid_phone' });
+		const recipients: Recipient[] = JSON.parse(form.get('recipients') as string);
+		if (!Array.isArray(recipients)) {
+			return fail(400, { error: 'invalid_recipients' });
 		}
+		logger.info(recipients);
 
 		const message = form.get('message');
 		if (typeof message !== 'string') {
@@ -78,17 +86,20 @@ export const actions = {
 
 		const client = twilio(config.accountSID, config.authToken);
 
-		try {
-			const result = await client.messages.create({
-				to: phone,
-				body: message,
-				from: config.phoneNumber,
-			});
-			logger.debug(result);
-		} catch (e) {
-			logger.error(e);
-			fail(500, { success: false });
+		for (const recipient of recipients) {
+			try {
+				const result = await client.messages.create({
+					to: recipient.phone,
+					body: message,
+					from: config.phoneNumber,
+				});
+				logger.debug(result);
+			} catch (e) {
+				logger.error(e);
+				fail(500, { success: false });
+			}
 		}
+
 		return {
 			success: true,
 		};

src/routes/app/sms/+page.svelte

@@ -2,11 +2,12 @@
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/Actions';
-	import { Textarea, TextInput } from '$lib/components/DataInput';
+	import { Textarea } from '$lib/components/DataInput';
 	import { Alert } from '$lib/components/Feedback';
 	import { Link } from '$lib/components/Navigation';
+	import { RecipientList, type Recipient } from '$lib/components/SMS';
 	import { messages } from '$lib/i18n';
-	import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte';
+	import { CircleX, MessageCircleMore, TriangleAlert } from 'lucide-svelte';
 	import type { ActionData, PageData } from './$types';
 
 	type Props = {
@@ -14,73 +15,66 @@
 		form: ActionData;
 	};
 	let { data, form }: Props = $props();
+
+	let recipients = $derived(
+		data.residents.map((r) => ({ id: r.id, name: r.name, phone: r.phoneNumber }))
+	);
+	let selectedRecipients: Recipient[] = $state([]);
 </script>
 
-{#snippet PhoneLabel()}
-	<PhoneOutgoing size="18" /> {messages.sms_label_phone()}
-{/snippet}
-
-{#snippet MessageLabel()}
-	<MessageCircleMore size="18" /> {messages.sms_label_message()}
-{/snippet}
-
-<div class="page">
-	<div class="card bg-base-200 px-4 pt-4 shadow-xl">
-		{#if form?.error}
-			<Alert status="error">
-				{#snippet icon()}
-					<CircleX />
-				{/snippet}
-				<span>{form.error}</span>
-			</Alert>
-		{:else if !data.isTwilioConfigured}
-			<Alert status="warning">
-				{#snippet icon()}
-					<TriangleAlert />
-				{/snippet}
-				<span>
-					Twilio must be configured on the <Link onclick={() => goto('/app/settings')}
-						>Settings</Link
-					> page
-				</span>
-			</Alert>
-		{/if}
-		<div class="card-title justify-center">
-			<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
+<div class="flex flex-col items-center gap-4">
+	{#if form?.error}
+		<Alert class="flex w-fit justify-center" status="error">
+			{#snippet icon()}
+				<CircleX />
+			{/snippet}
+			<span>{form.error}</span>
+		</Alert>
+	{:else if !data.isTwilioConfigured}
+		<Alert class="flex w-fit justify-center" status="warning">
+			{#snippet icon()}
+				<TriangleAlert />
+			{/snippet}
+			<span>
+				Twilio must be configured on the <Link onclick={() => goto('/app/settings')}
+					>Settings</Link
+				> page
+			</span>
+		</Alert>
+	{/if}
+	<h2 class="text-4xl font-semibold">{messages.sms_prompt()}</h2>
+	<div class="flex justify-center gap-4">
+		<div class="flex flex-col items-center gap-2">
+			<h2 class="text-3xl font-medium">Recipients</h2>
+			<div class="h-full overflow-y-scroll rounded-lg bg-base-100 p-4">
+				<RecipientList {recipients} bind:selected={selectedRecipients} />
+			</div>
 		</div>
 		<form id="sms" method="POST" use:enhance>
-			<div class="card-body">
-				<TextInput
-					disabled={!data.isTwilioConfigured}
-					type="tel"
-					name="phone"
-					label={PhoneLabel}
-					placeholder="XXX-XXX-XXXX"
-					bordered
-					fade
-				/>
+			<div class="flex flex-col gap-4">
+				<input name="recipients" type="hidden" value={JSON.stringify(selectedRecipients)} />
 				<Textarea
 					disabled={!data.isTwilioConfigured}
-					label={MessageLabel}
 					size="lg"
 					error={form?.error}
 					name="message"
 					placeholder="..."
 					form="sms"
 					resizable={false}
-				/>
-			</div>
-			<div class="card-actions justify-center px-8 pb-4">
-				<Button disabled={!data.isTwilioConfigured} type="submit" variant="outline" full>
+					cols={40}
+					rows={12}
+				>
+					{#snippet label()}
+						<span class="flex items-center gap-2 text-xl">
+							<MessageCircleMore size="22" />
+							{messages.sms_label_message()}
+						</span>
+					{/snippet}
+				</Textarea>
+				<Button full color="primary" disabled={!data.isTwilioConfigured} type="submit">
 					{messages.sms_button_submit()}
 				</Button>
 			</div>
 		</form>
 	</div>
 </div>
-
-<style>
-	.page {
-		@apply flex flex-col items-center justify-around gap-24 py-[10%];
-	}
-</style>