fix: UI copywriting + iOS keyboard loop fix

Copywriting:
- "No Sites Yet" → "No Tanks Yet"
- "Add Your First Site" → "Connect Your Tank"
- "Switch Site" → "Switch Location"
- "Sites" section → "Locations" in Settings
- "Name Your Site" → "Name Your Location"
- "devices" count → "tanks" count

iOS PWA fix:
- Fixed keyboard show/hide loop on login screen
- Login container uses fixed positioning instead of min-h-screen
- All inputs forced to 16px to prevent iOS auto-zoom
- useEffect dependency fix to prevent re-render loop

Author: Ravi Singh

pwa/client/src/index.css

@@ -46,6 +46,11 @@ html, body, #root {
   overscroll-behavior: none;
 }
 
+/* Prevent iOS auto-zoom on input focus (requires 16px minimum) */
+input, select, textarea {
+  font-size: 16px !important;
+}
+
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   -webkit-tap-highlight-color: transparent;

pwa/client/src/pages/Dashboard.jsx

@@ -1,6 +1,3 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// Copyright (c) 2025-2026 Ravi Singh (Techposts)
-
 import { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSites } from '../hooks/useSites.jsx';
@@ -25,11 +22,11 @@ export default function Dashboard() {
             <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
           </svg>
         </div>
-        <h2 className="text-xl font-bold text-white mb-2">No Sites Yet</h2>
-        <p className="text-slate-400 mb-6 text-sm max-w-xs">Connect your TankSync receiver to start monitoring.</p>
+        <h2 className="text-xl font-bold text-white mb-2">No Tanks Yet</h2>
+        <p className="text-slate-400 mb-6 text-sm max-w-xs">Connect your TankSync receiver to start monitoring your water tanks.</p>
         <button onClick={() => navigate('/setup')}
           className="px-6 py-3 rounded-xl bg-water text-white font-semibold active:scale-[0.98] transition-all">
-          Add Your First Site
+          Connect Your Tank
         </button>
       </div>
     );
@@ -58,7 +55,7 @@ export default function Dashboard() {
 
   return (
     <div className="px-4 pt-1 pb-24">
-      {/* Site header */}
+      {/* Header */}
       <div className="flex items-center justify-between mb-3">
         <div>
           <h1 className="text-2xl font-bold text-white">{activeSite?.name || 'Dashboard'}</h1>
@@ -71,7 +68,7 @@ export default function Dashboard() {
         </div>
         {sites.length > 1 && (
           <button onClick={() => navigate('/sites')}
-            className="text-xs text-water bg-water/10 px-3 py-1.5 rounded-lg font-medium">Switch Site</button>
+            className="text-xs text-water bg-water/10 px-3 py-1.5 rounded-lg font-medium">Switch Location</button>
         )}
       </div>
 

pwa/client/src/pages/Login.jsx

@@ -1,42 +1,127 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// Copyright (c) 2025-2026 Ravi Singh (Techposts)
-
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth.jsx';
 
+const TURNSTILE_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY || '';
+
 export default function Login() {
-  const [isRegister, setIsRegister] = useState(false);
+  const [mode, setMode] = useState('login'); // 'login' | 'register' | 'verify'
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
+  const [code, setCode] = useState('');
   const [error, setError] = useState('');
+  const [info, setInfo] = useState('');
   const [loading, setLoading] = useState(false);
-  const { login, register } = useAuth();
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const turnstileRef = useRef(null);
+  const turnstileWidgetId = useRef(null);
+  const { login, register, verifyEmail, resendCode, needsVerification, user } = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get('redirect') || '/';
 
+  // If logged in and verified, redirect (run once, not on every render)
+  useEffect(() => {
+    if (user && !needsVerification) {
+      navigate(redirectTo, { replace: true });
+    } else if (user && needsVerification && mode !== 'verify') {
+      setEmail(user.email);
+      setMode('verify');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id, needsVerification]);
+
+  // Load Turnstile script for registration
+  useEffect(() => {
+    if (!TURNSTILE_SITE_KEY || mode !== 'register') return;
+    if (document.getElementById('cf-turnstile-script')) return;
+
+    const script = document.createElement('script');
+    script.id = 'cf-turnstile-script';
+    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+    script.async = true;
+    script.onload = () => renderTurnstile();
+    document.head.appendChild(script);
+    return () => {};
+  }, [mode]);
+
+  useEffect(() => {
+    if (mode === 'register' && TURNSTILE_SITE_KEY && window.turnstile && turnstileRef.current) {
+      renderTurnstile();
+    }
+  }, [mode]);
+
+  function renderTurnstile() {
+    if (!window.turnstile || !turnstileRef.current) return;
+    if (turnstileWidgetId.current) window.turnstile.remove(turnstileWidgetId.current);
+    turnstileWidgetId.current = window.turnstile.render(turnstileRef.current, {
+      sitekey: TURNSTILE_SITE_KEY,
+      theme: 'dark',
+      callback: () => {},
+    });
+  }
+
+  function getTurnstileToken() {
+    if (!TURNSTILE_SITE_KEY || !window.turnstile || turnstileWidgetId.current == null) return '';
+    return window.turnstile.getResponse(turnstileWidgetId.current) || '';
+  }
+
+  // Resend cooldown timer
+  useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const t = setTimeout(() => setResendCooldown(c => c - 1), 1000);
+    return () => clearTimeout(t);
+  }, [resendCooldown]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError('');
+    setInfo('');
     setLoading(true);
     try {
-      if (isRegister) {
-        await register(email, password, name);
+      if (mode === 'register') {
+        const turnstileToken = getTurnstileToken();
+        if (TURNSTILE_SITE_KEY && !turnstileToken) {
+          setError('Please complete the captcha');
+          setLoading(false);
+          return;
+        }
+        await register(email, password, name, turnstileToken);
+        setMode('verify');
+        setInfo('Verification code sent to your email');
+      } else if (mode === 'verify') {
+        await verifyEmail(email, code);
+        navigate(redirectTo);
       } else {
-        await login(email, password);
+        const data = await login(email, password);
+        if (data.needsVerification) {
+          setMode('verify');
+          setInfo('Please verify your email to continue');
+        } else {
+          navigate(redirectTo);
+        }
       }
-      navigate(redirectTo);
     } catch (err) {
       setError(err.message);
     } finally {
       setLoading(false);
     }
   };
 
+  const handleResend = async () => {
+    setError('');
+    try {
+      await resendCode(email);
+      setInfo('New code sent to your email');
+      setResendCooldown(60);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center px-6 bg-slate-950">
+    <div className="fixed inset-0 flex flex-col items-center justify-center px-6 bg-slate-950 overflow-auto">
       {/* Logo */}
       <div className="mb-10 text-center">
         <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-water/10 mb-4">
@@ -48,88 +133,106 @@ export default function Login() {
           </svg>
         </div>
         <h1 className="text-3xl font-bold text-white tracking-tight">TankSync</h1>
-        <p className="text-slate-400 mt-1 text-sm">Smart Water Monitoring</p>
+        <p className="text-slate-400 mt-1 text-sm">
+          {mode === 'verify' ? 'Verify your email' : 'Smart Water Monitoring'}
+        </p>
       </div>
 
       {/* Form card */}
       <div className="w-full max-w-sm">
         <form onSubmit={handleSubmit} className="space-y-4">
-          {isRegister && (
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-1.5">Name</label>
+          {mode === 'verify' ? (
+            <>
+              <p className="text-sm text-slate-400 text-center">
+                Enter the 6-digit code sent to <span className="text-white font-medium">{email}</span>
+              </p>
               <input
                 type="text"
-                value={name}
-                onChange={e => setName(e.target.value)}
-                className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
-                  focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
-                placeholder="Your name"
+                inputMode="numeric"
+                maxLength={6}
+                value={code}
+                onChange={e => setCode(e.target.value.replace(/\D/g, ''))}
+                required
+                autoFocus
+                className="w-full px-4 py-4 rounded-xl bg-surface border border-slate-700 text-white text-center
+                  text-2xl tracking-[0.5em] font-mono focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
+                placeholder="000000"
               />
-            </div>
+            </>
+          ) : (
+            <>
+              {mode === 'register' && (
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-1.5">Name</label>
+                  <input type="text" value={name} onChange={e => setName(e.target.value)}
+                    className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
+                      focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
+                    placeholder="Your name" />
+                </div>
+              )}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-1.5">Email</label>
+                <input type="email" value={email} onChange={e => setEmail(e.target.value)} required
+                  className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
+                    focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
+                  placeholder="you@example.com" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
+                <input type="password" value={password} onChange={e => setPassword(e.target.value)} required minLength={6}
+                  className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
+                    focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
+                  placeholder="At least 6 characters" />
+              </div>
+              {mode === 'register' && TURNSTILE_SITE_KEY && (
+                <div ref={turnstileRef} className="flex justify-center" />
+              )}
+            </>
           )}
 
-          <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">Email</label>
-            <input
-              type="email"
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-              required
-              className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
-                focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
-              placeholder="you@example.com"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              required
-              minLength={6}
-              className="w-full px-4 py-3 rounded-xl bg-surface border border-slate-700 text-white
-                focus:border-water focus:ring-1 focus:ring-water/50 outline-none transition-all"
-              placeholder="At least 6 characters"
-            />
-          </div>
-
           {error && (
-            <div className="text-danger text-sm bg-danger/10 px-4 py-2.5 rounded-xl">
-              {error}
-            </div>
+            <div className="text-danger text-sm bg-danger/10 px-4 py-2.5 rounded-xl">{error}</div>
+          )}
+          {info && (
+            <div className="text-success text-sm bg-success/10 px-4 py-2.5 rounded-xl">{info}</div>
           )}
 
-          <button
-            type="submit"
-            disabled={loading}
+          <button type="submit" disabled={loading}
             className="w-full py-3.5 rounded-xl bg-water text-white font-semibold text-base
               hover:bg-water-dark active:scale-[0.98] transition-all duration-150
-              disabled:opacity-50 disabled:cursor-not-allowed"
-          >
+              disabled:opacity-50 disabled:cursor-not-allowed">
             {loading ? (
               <span className="inline-flex items-center gap-2">
                 <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" opacity="0.3" />
                   <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" />
                 </svg>
-                {isRegister ? 'Creating account...' : 'Signing in...'}
+                {mode === 'verify' ? 'Verifying...' : mode === 'register' ? 'Creating account...' : 'Signing in...'}
               </span>
             ) : (
-              isRegister ? 'Create Account' : 'Sign In'
+              mode === 'verify' ? 'Verify Email' : mode === 'register' ? 'Create Account' : 'Sign In'
             )}
           </button>
         </form>
 
-        <div className="mt-6 text-center">
-          <button
-            onClick={() => { setIsRegister(!isRegister); setError(''); }}
-            className="text-sm text-slate-400 hover:text-water transition-colors"
-          >
-            {isRegister ? 'Already have an account? Sign in' : "Don't have an account? Create one"}
-          </button>
-        </div>
+        {mode === 'verify' && (
+          <div className="mt-4 text-center">
+            <button onClick={handleResend} disabled={resendCooldown > 0}
+              className="text-sm text-slate-400 hover:text-water transition-colors disabled:opacity-40">
+              {resendCooldown > 0 ? `Resend code in ${resendCooldown}s` : 'Resend verification code'}
+            </button>
+          </div>
+        )}
+
+        {mode !== 'verify' && (
+          <div className="mt-6 text-center">
+            <button
+              onClick={() => { setMode(mode === 'register' ? 'login' : 'register'); setError(''); setInfo(''); }}
+              className="text-sm text-slate-400 hover:text-water transition-colors">
+              {mode === 'register' ? 'Already have an account? Sign in' : "Don't have an account? Create one"}
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

pwa/client/src/pages/Settings.jsx

@@ -1,6 +1,3 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// Copyright (c) 2025-2026 Ravi Singh (Techposts)
-
 import { useState, useEffect } from 'react';
 import { useAuth } from '../hooks/useAuth.jsx';
 import { useSites } from '../hooks/useSites.jsx';
@@ -152,14 +149,14 @@ export default function Settings() {
         </div>
       )}
 
-      {/* Sites management */}
-      <Section title="Sites" action={
+      {/* Locations */}
+      <Section title="Locations" action={
         <button onClick={() => navigate('/setup')} className="text-xs text-water font-medium">
           Add Tank
         </button>
       }>
         {sites.length === 0 ? (
-          <div className="text-sm text-slate-400 py-4 text-center">No sites configured</div>
+          <div className="text-sm text-slate-400 py-4 text-center">No locations configured</div>
         ) : (
           <div className="space-y-2">
             {sites.map(site => (
@@ -187,7 +184,7 @@ export default function Settings() {
                         )}
                       </div>
                       <div className="text-xs text-slate-400 font-mono">{site.receiver_ip || 'No IP'}</div>
-                      <div className="text-xs text-slate-500">{site.deviceCount || 0} devices</div>
+                      <div className="text-xs text-slate-500">{site.deviceCount || 0} tank{(site.deviceCount || 0) !== 1 ? 's' : ''}</div>
                     </div>
                     <div className="flex gap-1">
                       {site.id !== activeSite?.id && (