Added phone number to admin page

asselstine · asselstine · commit 00adf30eab89 · 2026-02-23T13:39:01.000-08:00
diff --git a/src/routes/admin.ts b/src/routes/admin.ts
@@ -18,7 +18,8 @@ adminRoutes.get("/status", async (c) => {
   }
   const result = await checkAllServices(
     c.env.TWILIO_ACCOUNT_SID,
-    c.env.TWILIO_AUTH_TOKEN
+    c.env.TWILIO_AUTH_TOKEN,
+    c.env.TWILIO_PHONE_NUMBER
   );
   return c.json(result);
 });
diff --git a/src/services/status.ts b/src/services/status.ts
@@ -8,6 +8,7 @@ export type ServiceStatus = {
 export type StatusResult = {
   overall: "ok" | "degraded" | "down";
   checked_at: string;
+  phone_number: string | null;
   services: ServiceStatus[];
 };
 
@@ -64,7 +65,7 @@ async function checkTwilio(accountSid: string, authToken: string): Promise<Servi
   }
 }
 
-export async function checkAllServices(accountSid: string, authToken: string): Promise<StatusResult> {
+export async function checkAllServices(accountSid: string, authToken: string, phoneNumber?: string): Promise<StatusResult> {
   const services = await Promise.all([
     checkAvalancheApi(),
     checkTwilio(accountSid, authToken),
@@ -77,6 +78,7 @@ export async function checkAllServices(accountSid: string, authToken: string): P
   return {
     overall,
     checked_at: new Date().toISOString(),
+    phone_number: phoneNumber || null,
     services,
   };
 }
diff --git a/src/templates/admin.html b/src/templates/admin.html
@@ -9,6 +9,9 @@
   body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; padding: 20px; max-width: 640px; margin: 0 auto; }
   h1 { margin-bottom: 6px; font-size: 1.4em; }
   .subtitle { font-size: 0.85em; color: #666; margin-bottom: 20px; }
+  .phone { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
+  .phone-label { font-size: 0.8em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
+  .phone-number { font-size: 1.3em; font-weight: 600; letter-spacing: 0.5px; }
   .overall { padding: 16px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; font-size: 1.1em; text-align: center; }
   .overall.ok { background: #dcfce7; color: #166534; }
   .overall.degraded { background: #fef9c3; color: #854d0e; }
@@ -32,12 +35,21 @@
 <body>
 <h1>Avalanche SMS</h1>
 <div class="subtitle">System Status</div>
+<div class="phone" id="phone" style="display:none">
+  <div><div class="phone-label">Text lat,long or send location to</div><div class="phone-number" id="phone-number"></div></div>
+</div>
 <div class="overall loading" id="overall">Checking...</div>
 <div id="services"></div>
 <button class="refresh-btn" id="refresh-btn" onclick="refresh()">Refresh</button>
 <div class="updated" id="updated"></div>
 <script>
 var labels = { ok: 'All Systems Operational', degraded: 'Partial Outage', down: 'Major Outage' };
+function formatPhone(num) {
+  // Format +15551234567 as +1 (555) 123-4567
+  var m = num.match(/^\+1(\d{3})(\d{3})(\d{4})$/);
+  if (m) return '+1 (' + m[1] + ') ' + m[2] + '-' + m[3];
+  return num;
+}
 function refresh() {
   var btn = document.getElementById('refresh-btn');
   btn.disabled = true;
@@ -48,6 +60,13 @@ <h1>Avalanche SMS</h1>
   fetch('/status').then(function(r) { return r.json(); }).then(function(data) {
     ov.className = 'overall ' + data.overall;
     ov.textContent = labels[data.overall] || data.overall;
+    var phoneEl = document.getElementById('phone');
+    if (data.phone_number) {
+      document.getElementById('phone-number').textContent = formatPhone(data.phone_number);
+      phoneEl.style.display = '';
+    } else {
+      phoneEl.style.display = 'none';
+    }
     var container = document.getElementById('services');
     container.innerHTML = '';
     data.services.forEach(function(s) {
