frontend: Add hint that no device is configured

Author: ffreddow

frontend/src/locales/de.ts

@@ -55,6 +55,7 @@ export const de ={
         "all_keys_in_use": "Zur Zeit sind alle Fernzugriffsverbindungen belegt",
         "no_keys": "Bitte lerne das Gerät erneut an",
         "loading_devices_failed": "Laden der Geräte ist mit dem Code {{status}} fehlgeschlagen: {{response}}",
+        "no_devices": "Noch keine Geräte registriert. Bitte verbinde dein Gerät mit diesem Konto, um zu beginnen.",
         "connect_error_text": "Verbindung zu Gerät {{charger_id}} ist mit dem code {{status}} fehlgeschlagen: {{response}}",
         "remove_error_text": "Entfernen des Gerätes {{charger_id}} ist mit dem code {{status}} fehlgeschlagen: {{response}}",
         "delete_modal_heading": "Gerät {{name}} entfernen",

frontend/src/locales/en.ts

@@ -59,6 +59,7 @@ export const en = {
         "all_keys_in_use": "Currently all remote connections are in use",
         "no_keys": "You need to register this device again.",
         "loading_devices_failed": "Loading devices failed with status code {{status}}: {{response}}",
+        "no_devices": "No devices registered yet. Please connect your device to this account to get started.",
         "connect_error_text": "Connecting to device {{charger_id}} failed with status code {{status}}: {{response}}",
         "remove_error_text": "Removing device {{charger_id}} failed with status code {{status}}: {{response}}",
         "delete_modal_heading": "Remove device {{name}}",

frontend/src/pages/devices.tsx

@@ -351,6 +351,16 @@ export class DeviceList extends Component<{}, DeviceListState> {
                 return ret * -1;
             }
         })
+
+        // Show empty state message if no devices
+        if (devices.length === 0) {
+            return <Container fluid className="text-center mt-5">
+                <div className="text-muted">
+                    <h5>{t("no_devices")}</h5>
+                </div>
+            </Container>;
+        }
+
         this.state.devices.forEach((charger, index) => {
             const [expand, setExpand] = useState(false);
             const trimmed_note = charger.note.trim();

frontend/tests/basic.spec.ts

@@ -159,7 +159,7 @@ test('charger lifecycle', async ({ page }) => {
   await page.getByRole('button', { name: 'Reboot' }).click();
   await page.waitForTimeout(6000);
   await page.goto(testDomain);
-  await expect(page.getByText('NameDevice-IDNoteSortAscending')).toBeVisible();
+  await expect(page.getByText('No devices registered yet. Please connect your device to this account to get started.')).toBeVisible();
 });
 
 test('add charger with auth token', async ({page}) => {
@@ -269,5 +269,5 @@ test('remove charger', async ({page}) => {
   await page.getByRole('button', { name: 'Reboot' }).click();
   await page.waitForTimeout(6000);
   await login(page, testUser2Email, testPassword2);
-  await expect(page.getByText('NameDevice-IDNoteSortAscending')).toBeVisible();
+  await expect(page.getByText('No devices registered yet. Please connect your device to this account to get started.')).toBeVisible();
 });