import AlertError from '@/components/alert-error'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; import { BreadcrumbItem } from '@/types'; import { Head, router, useForm } from '@inertiajs/react'; import { Check, Loader2, X } from 'lucide-react'; import { FormEventHandler, useState } from 'react'; interface TwilioSetupProps { credential: { account_sid: string; phone_number: string | null; is_active: boolean; verified_at: string; } | null; has_credentials: boolean; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Twilio Setup', href: '/settings/twilio' }, ]; export default function TwilioSetup({ credential, has_credentials }: TwilioSetupProps) { const [verifying, setVerifying] = useState(false); const [verified, setVerified] = useState(false); const [verificationError, setVerificationError] = useState(null); const { data, setData, post, processing, errors, reset } = useForm({ account_sid: credential?.account_sid || '', auth_token: '', phone_number: credential?.phone_number || '', }); const handleVerify = async () => { if (!data.account_sid || !data.auth_token) { return; } setVerifying(true); setVerificationError(null); setVerified(false); try { // Use axios which automatically handles CSRF token from Inertia const response = await window.axios.post('/twilio/verify', { account_sid: data.account_sid, auth_token: data.auth_token, }); if (response.data.valid) { setVerified(true); if (response.data.phone_number) { setData('phone_number', response.data.phone_number); } } else { setVerificationError('Invalid credentials'); } } catch (error: unknown) { const err = error as { response?: { data?: { message?: string, errors?: { account_sid?: string[] } } } }; setVerificationError( err.response?.data?.errors?.account_sid?.[0] || err.response?.data?.message || 'Failed to verify credentials. Please try again.' ); } finally { setVerifying(false); } }; const submit: FormEventHandler = (e) => { e.preventDefault(); post('/twilio/store', { onSuccess: () => { reset('auth_token'); setVerified(false); }, }); }; const handleDelete = () => { if (confirm('Are you sure you want to remove your Twilio credentials?')) { router.delete('/twilio/destroy'); } }; return (
Connect Your Twilio Account Enter your Twilio Account SID and Auth Token to enable voice calling features. You can find these credentials in your{' '} Twilio Console .
{ setData('account_sid', e.target.value); setVerified(false); }} placeholder="AC..." className="font-mono text-sm" disabled={processing} /> {errors.account_sid && (

{errors.account_sid}

)}
{ setData('auth_token', e.target.value); setVerified(false); }} placeholder="Enter your Auth Token" className="font-mono text-sm" disabled={processing} /> {errors.auth_token && (

{errors.auth_token}

)}
{verificationError && ( )} {verified && (
Credentials verified successfully!
)}
{has_credentials && ( )}
{credential && ( Current Configuration
Account SID:
{credential.account_sid}
{credential.phone_number && (
Phone Number:
{credential.phone_number}
)}
Status:
{credential.is_active ? ( Active ) : ( Inactive )}
Verified:
{new Date(credential.verified_at).toLocaleString()}
)} How to Get Your Twilio Credentials
  1. Visit the{' '} Twilio Console
  2. Sign in to your account or create a new one
  3. On the dashboard, you'll find your Account SID
  4. Click "Show" next to Auth Token to reveal it
  5. Copy both values and paste them above
  6. Click "Verify Credentials" to test the connection
  7. Once verified, click "Save Credentials" to complete setup

Note: Your Auth Token is encrypted and stored securely. We never share your credentials with third parties.

); }