FCM test

frontend/src/components/ProfileModal.jsx

@@ -16,7 +16,9 @@ export default function ProfileModal({ onClose }) {
   const [newPw, setNewPw] = useState('');
   const [confirmPw, setConfirmPw] = useState('');
   const [loading, setLoading] = useState(false);
-  const [tab, setTab] = useState('profile'); // 'profile' | 'password'
+  const [tab, setTab] = useState('profile'); // 'profile' | 'password' | 'notifications'
+  const [pushTesting, setPushTesting] = useState(false);
+  const [pushResult, setPushResult] = useState(null);
   const [hideAdminTag, setHideAdminTag] = useState(!!user?.hide_admin_tag);
   const [allowDm, setAllowDm] = useState(user?.allow_dm !== 0);
 
@@ -101,6 +103,7 @@ export default function ProfileModal({ onClose }) {
         <div className="flex gap-2" style={{ marginBottom: 20 }}>
           <button className={`btn btn-sm ${tab === 'profile' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('profile')}>Profile</button>
           <button className={`btn btn-sm ${tab === 'password' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('password')}>Change Password</button>
+          <button className={`btn btn-sm ${tab === 'notifications' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => { setTab('notifications'); setPushResult(null); }}>Notifications</button>
         </div>
 
         {tab === 'profile' && (
@@ -167,6 +170,56 @@ export default function ProfileModal({ onClose }) {
           </div>
         )}
 
+        {tab === 'notifications' && (
+          <div className="flex-col gap-3">
+            <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+              <p style={{ margin: '0 0 8px' }}>Tap <strong>Send Test Notification</strong> to trigger a push to this device. The notification will arrive shortly if everything is configured correctly.</p>
+              <p style={{ margin: 0 }}>If it doesn't arrive, check:<br/>
+                • Notification permission granted (browser prompt)<br/>
+                • Android Settings → Apps → RosterChirp → Notifications → Enabled<br/>
+                • App is backgrounded when the test fires
+              </p>
+            </div>
+            <button
+              className="btn btn-primary"
+              disabled={pushTesting}
+              onClick={async () => {
+                setPushTesting(true);
+                setPushResult(null);
+                try {
+                  const { results } = await api.testPush();
+                  setPushResult({ ok: true, results });
+                } catch (e) {
+                  setPushResult({ ok: false, error: e.message });
+                } finally {
+                  setPushTesting(false);
+                }
+              }}
+            >
+              {pushTesting ? 'Sending…' : 'Send Test Notification'}
+            </button>
+            {pushResult && (
+              <div style={{
+                padding: '10px 12px',
+                borderRadius: 8,
+                background: pushResult.ok ? 'var(--surface-variant)' : '#fdecea',
+                color: pushResult.ok ? 'var(--text-primary)' : '#c62828',
+                fontSize: 13,
+              }}>
+                {pushResult.ok ? (
+                  pushResult.results.map((r, i) => (
+                    <div key={i}>
+                      <strong>{r.device}</strong>: {r.status === 'sent' ? '✓ Sent — check your device for the notification' : `✗ Failed — ${r.error}`}
+                    </div>
+                  ))
+                ) : (
+                  <div>✗ {pushResult.error}</div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
         {tab === 'password' && (
           <div className="flex-col gap-3">
             <div className="flex-col gap-1">

frontend/src/pages/Chat.jsx

@@ -126,19 +126,29 @@ export default function Chat() {
           if (granted !== 'granted') return;
         }
 
+        console.log('[Push] Requesting FCM token...');
         const fcmToken = await getToken(firebaseMessaging, {
           vapidKey,
           serviceWorkerRegistration: reg,
         });
-        if (!fcmToken) return;
+        if (!fcmToken) {
+          console.warn('[Push] getToken() returned null — notification permission may not be granted at OS level, or VAPID key is wrong');
+          return;
+        }
+        console.log('[Push] FCM token obtained:', fcmToken.slice(0, 30) + '...');
 
         const token = localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token');
-        await fetch('/api/push/subscribe', {
+        const subRes = await fetch('/api/push/subscribe', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
           body: JSON.stringify({ fcmToken }),
         });
-        console.log('[Push] FCM subscription registered');
+        if (!subRes.ok) {
+          const err = await subRes.json().catch(() => ({}));
+          console.warn('[Push] Subscribe failed:', err.error || subRes.status);
+        } else {
+          console.log('[Push] FCM subscription registered successfully');
+        }
       } catch (e) {
         console.warn('[Push] FCM subscription failed:', e.message);
       }

frontend/src/utils/api.js

@@ -170,6 +170,7 @@ export const api = {
   getFirebaseConfig: () => req('GET', '/push/firebase-config'),
   subscribePush: (fcmToken) => req('POST', '/push/subscribe', { fcmToken }),
   unsubscribePush: () => req('POST', '/push/unsubscribe'),
+  testPush: () => req('POST', '/push/test'),
 
   // Link preview
   getLinkPreview: (url) => req('GET', `/link-preview?url=${encodeURIComponent(url)}`),