🛂 Allow Bluetooth control without authentication

Remove RequireAuth wrapper from fireplace page and login blocking from
Home component. Bluetooth device control does not require cloud
authentication - it uses direct BLE communication with static AES keys.

When logged out in Cloud mode:
- Home page: Show clean placeholder cards with "Tap to control" instead
  of permanent loading skeletons
- Fireplace page: Show auth block with Bluetooth hint instead of
  unusable Thermostat skeleton
- Connection mode toggle remains visible to switch to Bluetooth

Users can now add devices and control them via Bluetooth without ever
logging in. Cloud mode still requires authentication.

Author: AndreMiras

public/locales/en/fireplace.json

@@ -6,7 +6,10 @@
   "lastUpdated": "Updated {{seconds}}s ago",
   "justNow": "Just now",
   "auth": {
-    "loginToControl": "Please log in to control this stove."
+    "loginRequired": "Login Required",
+    "loginToControl": "Please log in to control this stove.",
+    "bluetoothAvailable": "Bluetooth Available",
+    "bluetoothHint": "Log in to use Cloud mode, or switch to Bluetooth for offline control."
   },
   "advanced": "Advanced",
   "deviceInfo": {

public/locales/en/home.json

@@ -4,7 +4,10 @@
   "addFirstDevice": "Add your first device",
   "manageDevices": "Manage Devices",
   "manageDevicesDescription": "Add or remove fireplace devices from your list",
-  "loginRequired": "Please log in to control your fireplaces.",
+  "loginRequired": "Login Required",
+  "bluetoothAvailable": "Bluetooth Mode Available",
+  "bluetoothHint": "You can control your stove via Bluetooth without logging in. Add a device and use Bluetooth mode on the device page.",
+  "tapToControl": "Tap to control",
   "macPlaceholder": "aabbccddeeff",
   "validation": {
     "invalidMac": "Invalid MAC address.",

public/locales/es/fireplace.json

@@ -6,7 +6,10 @@
   "lastUpdated": "Actualizado hace {{seconds}}s",
   "justNow": "Justo ahora",
   "auth": {
-    "loginToControl": "Por favor, inicia sesión para controlar esta estufa."
+    "loginRequired": "Inicio de sesión requerido",
+    "loginToControl": "Por favor, inicia sesión para controlar esta estufa.",
+    "bluetoothAvailable": "Bluetooth disponible",
+    "bluetoothHint": "Inicia sesión para usar el modo Cloud, o cambia a Bluetooth para control sin conexión."
   },
   "advanced": "Avanzado",
   "debug": "Depuración",

public/locales/es/home.json

@@ -4,6 +4,10 @@
   "addFirstDevice": "Agregue su primer dispositivo",
   "manageDevices": "Administrar dispositivos",
   "manageDevicesDescription": "Agregar o eliminar dispositivos de su lista",
+  "loginRequired": "Inicio de sesión requerido",
+  "bluetoothAvailable": "Modo Bluetooth disponible",
+  "bluetoothHint": "Puedes controlar tu estufa via Bluetooth sin iniciar sesion. Agrega un dispositivo y usa el modo Bluetooth en la pagina del dispositivo.",
+  "tapToControl": "Toca para controlar",
   "macPlaceholder": "aabbccddeeff",
   "validation": {
     "invalidMac": "Dirección MAC no válida.",

public/locales/fr/fireplace.json

@@ -6,7 +6,10 @@
   "lastUpdated": "Mis à jour il y a {{seconds}}s",
   "justNow": "À l'instant",
   "auth": {
-    "loginToControl": "Veuillez vous connecter pour contrôler ce poêle."
+    "loginRequired": "Connexion requise",
+    "loginToControl": "Veuillez vous connecter pour contrôler ce poêle.",
+    "bluetoothAvailable": "Bluetooth disponible",
+    "bluetoothHint": "Connectez-vous pour utiliser le mode Cloud, ou passez en Bluetooth pour un contrôle hors ligne."
   },
   "advanced": "Avancé",
   "debug": "Débogage",

public/locales/fr/home.json

@@ -4,6 +4,10 @@
   "addFirstDevice": "Ajoutez votre premier appareil",
   "manageDevices": "Gérer les appareils",
   "manageDevicesDescription": "Ajouter ou supprimer des appareils de votre liste",
+  "loginRequired": "Connexion requise",
+  "bluetoothAvailable": "Mode Bluetooth disponible",
+  "bluetoothHint": "Vous pouvez contrôler votre poêle via Bluetooth sans vous connecter. Ajoutez un appareil et utilisez le mode Bluetooth sur la page de l'appareil.",
+  "tapToControl": "Appuyez pour contrôler",
   "macPlaceholder": "aabbccddeeff",
   "validation": {
     "invalidMac": "Adresse MAC invalide.",

src/components/DeviceThermostat.tsx

@@ -1,6 +1,10 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
+import { useTranslation } from "react-i18next";
 
+import { useBluetooth } from "@/context/bluetooth";
 import { useDeviceControl } from "@/hooks/useDeviceControl";
+import { useIsLoggedIn } from "@/utils/hooks";
 
 import { Thermostat } from "./thermostat";
 import { ThermostatSkeleton } from "./thermostat/ThermostatSkeleton";
@@ -10,6 +14,10 @@ interface DeviceThermostatProps {
 }
 
 const DeviceThermostat = ({ mac }: DeviceThermostatProps) => {
+  const { t } = useTranslation("home");
+  const isLoggedIn = useIsLoggedIn();
+  const { connectionMode } = useBluetooth();
+
   const {
     powerState,
     temperature,
@@ -24,6 +32,32 @@ const DeviceThermostat = ({ mac }: DeviceThermostatProps) => {
     onPowerLevelChange,
   } = useDeviceControl(mac);
 
+  // Can't show data in cloud mode without authentication
+  const cannotLoadData =
+    connectionMode === "cloud" && isLoggedIn === false && loading;
+
+  // Show a placeholder card when we can't load data
+  if (cannotLoadData) {
+    return (
+      <div className="flex flex-col">
+        <Link href={`/fireplace/${mac}`} className="block">
+          <div className="w-[340px] bg-card text-card-foreground rounded-3xl p-8 shadow-[0_10px_40px_rgba(0,0,0,0.1)] hover:shadow-[0_10px_50px_rgba(0,0,0,0.15)] transition-shadow cursor-pointer">
+            <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+              <FontAwesomeIcon
+                icon={["fas", "fire-flame-curved"]}
+                className="text-4xl mb-4 opacity-50"
+              />
+              <p className="text-sm text-center">{t("tapToControl")}</p>
+            </div>
+          </div>
+        </Link>
+        <div className="text-center mt-2">
+          <span className="text-sm text-muted-foreground">{mac}</span>
+        </div>
+      </div>
+    );
+  }
+
   if (loading) {
     return <ThermostatSkeleton />;
   }

src/components/Home.test.tsx

@@ -91,14 +91,34 @@ describe("Home", () => {
     });
   });
 
-  it("should show login prompt when not authenticated", async () => {
+  it("should show bluetooth hint when not authenticated and BLE is supported", async () => {
     localStorage.clear(); // No token
     // getSession won't be called since there's no stored token
+    // BLE is mocked as supported in beforeEach
 
     render(<Home />);
 
     await waitFor(() => {
-      expect(screen.getByText(/please log in/i)).toBeInTheDocument();
+      expect(screen.getByText(/bluetooth mode available/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /control your stove via bluetooth without logging in/i,
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("should show login form when not authenticated and BLE is not supported", async () => {
+    localStorage.clear(); // No token
+    vi.mocked(bluetoothLocal.isBluetoothSupported).mockReturnValue(false);
+
+    render(<Home />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/login required/i)).toBeInTheDocument();
+      // Should show login form (aria-label is "Email" and "Password")
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
     });
   });
 

src/components/Home.tsx

@@ -1,24 +1,28 @@
-import { useContext, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { TokenContext } from "@/context/token";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent } from "@/components/ui/card";
+import { useBluetooth } from "@/context/bluetooth";
 import {
   addStoredDevice,
   getStoredDevices,
   removeStoredDevice,
   StoredDevice,
 } from "@/utils/deviceStorage";
+import { useIsLoggedIn } from "@/utils/hooks";
 
 import DeviceManagement from "./DeviceManagement";
 import DeviceThermostat from "./DeviceThermostat";
 import Login from "./Login";
 
 const Home = () => {
   const { t } = useTranslation("home");
-  const { token } = useContext(TokenContext);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [devices, setDevices] = useState<StoredDevice[]>([]);
+  const isLoggedIn = useIsLoggedIn();
+  const { isBleSupported } = useBluetooth();
 
   useEffect(() => setDevices(getStoredDevices()), []);
 
@@ -32,28 +36,10 @@ const Home = () => {
     setDevices(newDevices);
   };
 
-  // Show login prompt if not authenticated
-  if (token === null) {
+  // Show loading while checking auth state
+  if (isLoggedIn === undefined) {
     return (
       <Card>
-        <CardHeader>
-          <CardTitle>{t("title")}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-muted-foreground mb-4">{t("loginRequired")}</p>
-          <Login />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Show loading while checking token
-  if (token === undefined) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("title")}</CardTitle>
-        </CardHeader>
         <CardContent>
           <div className="flex justify-center py-8">
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
@@ -63,6 +49,9 @@ const Home = () => {
     );
   }
 
+  // Show hint about Bluetooth when not logged in
+  const showLoginHint = isLoggedIn === false;
+
   return (
     <div className="space-y-4">
       {/* Header with manage devices button */}
@@ -77,6 +66,30 @@ const Home = () => {
         />
       </div>
 
+      {/* Login hint when not authenticated */}
+      {showLoginHint && (
+        <Alert>
+          {isBleSupported ? (
+            <>
+              <FontAwesomeIcon
+                icon={["fab", "bluetooth-b"]}
+                className="h-4 w-4"
+              />
+              <AlertTitle>{t("bluetoothAvailable")}</AlertTitle>
+              <AlertDescription>{t("bluetoothHint")}</AlertDescription>
+            </>
+          ) : (
+            <>
+              <FontAwesomeIcon icon="user" className="h-4 w-4" />
+              <AlertTitle>{t("loginRequired")}</AlertTitle>
+              <AlertDescription>
+                <Login />
+              </AlertDescription>
+            </>
+          )}
+        </Alert>
+      )}
+
       {/* Empty state */}
       {devices.length === 0 && (
         <Card>