86 lines
2.2 KiB
Svelte
86 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { goto } from '$app/navigation';
|
|
import { Button } from '$lib/components/Actions';
|
|
import { Textarea, TextInput } from '$lib/components/DataInput';
|
|
import { Alert } from '$lib/components/Feedback';
|
|
import { Link } from '$lib/components/Navigation';
|
|
import { messages } from '$lib/i18n';
|
|
import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte';
|
|
import type { ActionData, PageData } from './$types';
|
|
|
|
type Props = {
|
|
data: PageData;
|
|
form: ActionData;
|
|
};
|
|
let { data, form }: Props = $props();
|
|
</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>
|
|
<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
|
|
/>
|
|
<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>
|
|
{messages.sms_button_submit()}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.page {
|
|
@apply flex flex-col items-center justify-around gap-24 py-[10%];
|
|
}
|
|
</style>
|