From c7a922a1d04f30dd8ddb97bba724b93eaf8e876d Mon Sep 17 00:00:00 2001
From: jona159 <raabejonas@yahoo.de>
Date: Mon, 9 Mar 2026 12:43:42 +0100
Subject: [PATCH 1/2] fix: device creation translations and prevent to submit
 form twice

---
 app/components/device/new/advanced-info.tsx   | 11 +++++---
 app/components/device/new/device-info.tsx     |  4 ++-
 app/components/device/new/general-info.tsx    |  8 +++---
 .../device/new/new-device-stepper.tsx         | 10 ++++---
 app/components/device/new/sensors-info.tsx    |  3 +--
 app/components/device/new/summary-info.tsx    | 23 +++++++++-------
 public/locales/de/newdevice.json              | 26 ++++++++++++-------
 public/locales/en/newdevice.json              | 10 ++++++-
 8 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/app/components/device/new/advanced-info.tsx b/app/components/device/new/advanced-info.tsx
index 6a45bc6b..618d6b09 100644
--- a/app/components/device/new/advanced-info.tsx
+++ b/app/components/device/new/advanced-info.tsx
@@ -1,7 +1,9 @@
 import Form from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
-import { useEffect, useState } from "react";
+import { T } from "node_modules/vitest/dist/chunks/traces.d.402V_yFI";
+import { useState } from "react";
 import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { ArrayFieldTemplate } from "~/components/rjsf/arrayFieldTemplate";
 import { CheckboxWidget } from "~/components/rjsf/checkboxWidget";
 import { FieldTemplate } from "~/components/rjsf/fieldTemplate";
@@ -27,6 +29,7 @@ export function AdvancedStep({ integrations }: AdvancedStepProps) {
   const { watch, setValue, resetField } = useFormContext();
   const [schemas, setSchemas] = useState<Record<string, { schema: any; uiSchema: any }>>({});
   const [loading, setLoading] = useState<Record<string, boolean>>({});
+  const { t } = useTranslation('newdevice')
 
 
   const loadSchema = async (slug: string) => {
@@ -68,7 +71,7 @@ export function AdvancedStep({ integrations }: AdvancedStepProps) {
         return (
           <Card key={intg.id} className="w-full mb-6">
             <CardHeader>
-              <CardTitle>{intg.name} Configuration</CardTitle>
+              <CardTitle>{intg.name} {t('configuration')}</CardTitle>
               {intg.description && (
                 <CardDescription>{intg.description}</CardDescription>
               )}
@@ -77,7 +80,7 @@ export function AdvancedStep({ integrations }: AdvancedStepProps) {
             <CardContent className="space-y-4">
               <div className="flex items-center justify-between">
                 <Label htmlFor={`${intg.slug}Enabled`} className="text-base font-semibold">
-                  Enable {intg.name}
+                  {t('enable')} {intg.name}
                 </Label>
                 <Switch
                   id={`${intg.slug}Enabled`}
@@ -90,7 +93,7 @@ export function AdvancedStep({ integrations }: AdvancedStepProps) {
                 <>
                   {isLoading && (
                     <p className="text-sm text-muted-foreground">
-                      Loading {intg.name} configuration…
+                      {t('loading')} {intg.name} {t('configuration')}...
                     </p>
                   )}
 
diff --git a/app/components/device/new/device-info.tsx b/app/components/device/new/device-info.tsx
index 9a217d9c..4056939d 100644
--- a/app/components/device/new/device-info.tsx
+++ b/app/components/device/new/device-info.tsx
@@ -1,6 +1,7 @@
 import { X } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { Button } from '~/components/ui/button'
 import { Card, CardContent } from '~/components/ui/card'
 import { Label } from '~/components/ui/label'
@@ -35,6 +36,7 @@ const connectionTypes = ['Wifi', 'Lora', 'Ethernet']
 
 export function DeviceSelectionStep() {
 	const { setValue, watch } = useFormContext()
+	const { t } = useTranslation('newdevice')
 
 	// Watch the existing values from the form state
 	const model = watch('model')
@@ -154,7 +156,7 @@ export function DeviceSelectionStep() {
 											<Separator className="my-2" />
 											<div className="w-full max-w-xs">
 												<h4 className="mb-2 text-sm font-medium">
-													Connection Type:
+													{t('connection_type')}
 												</h4>
 												<RadioGroup
 													value={selectedConnectionType}
diff --git a/app/components/device/new/general-info.tsx b/app/components/device/new/general-info.tsx
index 65f52fc8..c89d05ae 100644
--- a/app/components/device/new/general-info.tsx
+++ b/app/components/device/new/general-info.tsx
@@ -65,17 +65,17 @@ export function GeneralInfoStep() {
 		icon: React.ReactNode
 		label: string
 	}[] = [
-		{ value: 'outdoor', icon: <Cloud className="h-6 w-6" />, label: 'Outdoor' },
-		{ value: 'indoor', icon: <Home className="h-6 w-6" />, label: 'Indoor' },
+		{ value: 'outdoor', icon: <Cloud className="h-6 w-6" />, label: t('outdoor') },
+		{ value: 'indoor', icon: <Home className="h-6 w-6" />, label: t('indoor') },
 		{
 			value: 'mobile',
 			icon: <Bike className="h-6 w-6" />,
-			label: 'Mobile',
+			label: t('mobile'),
 		},
 		{
 			value: 'unknown',
 			icon: <HelpCircle className="h-6 w-6" />,
-			label: 'Unknown',
+			label: t('unknown'),
 		},
 	]
 
diff --git a/app/components/device/new/new-device-stepper.tsx b/app/components/device/new/new-device-stepper.tsx
index 5ed8b0b9..391a8d62 100644
--- a/app/components/device/new/new-device-stepper.tsx
+++ b/app/components/device/new/new-device-stepper.tsx
@@ -4,7 +4,7 @@ import { Info, Slash } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { type FieldErrors, FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { Form, useLoaderData, useSubmit } from 'react-router'
+import { Form, useLoaderData, useSubmit, useNavigation } from 'react-router'
 import { z } from 'zod'
 import { AdvancedStep } from './advanced-info'
 import { DeviceSelectionStep } from './device-info'
@@ -159,6 +159,8 @@ export default function NewDeviceStepper() {
 	const { toast } = useToast()
 	const { t } = useTranslation('newdevice')
 	const [isFirst, setIsFirst] = useState(false)
+	const navigation = useNavigation()
+	const isSubmitting = navigation.state === 'submitting'
 
 	useEffect(() => {
 		setIsFirst(stepper.isFirst)
@@ -286,12 +288,12 @@ export default function NewDeviceStepper() {
 							type="button"
 							variant="secondary"
 							onClick={stepper.prev}
-							disabled={isFirst}
+							disabled={isFirst || isSubmitting}
 						>
 							{t('back')}
 						</Button>
-						<Button type="submit">
-							{stepper.isLast ? t('complete') : t('next')}
+						<Button type="submit" disabled={isSubmitting}>
+							{isSubmitting ? t('submitting') : stepper.isLast ? t('complete') : t('next')}
 						</Button>
 					</div>
 				</Form>
diff --git a/app/components/device/new/sensors-info.tsx b/app/components/device/new/sensors-info.tsx
index c0e17167..478b987d 100644
--- a/app/components/device/new/sensors-info.tsx
+++ b/app/components/device/new/sensors-info.tsx
@@ -149,8 +149,7 @@ export function SensorSelectionStep() {
 		<div className="flex h-full flex-col">
 			<div className="mb-4 flex items-center justify-between">
 				<p className="text-sm text-muted-foreground">
-					{selectedSensors.length} {t('sensor')}
-					{selectedSensors.length !== 1 ? 's' : ''} {t('selected')}
+					{t('selectedSensors', { count: selectedSensors.length })}
 				</p>
 				{selectedSensors.length > 0 && (
 					<button
diff --git a/app/components/device/new/summary-info.tsx b/app/components/device/new/summary-info.tsx
index bd2d1651..567f1769 100644
--- a/app/components/device/new/summary-info.tsx
+++ b/app/components/device/new/summary-info.tsx
@@ -63,21 +63,26 @@ export function SummaryInfo() {
 		<div className="space-y-6">
 			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 				{sections.map((section, index) => (
-					<Card key={index} className="overflow-hidden">
+					<Card key={index} className="overflow-hidden border border-border bg-card shadow-sm">
 						<CardContent className="p-0">
-							<div className="to-purple-500 flex items-center space-x-2 bg-gradient-to-r from-blue-500 p-4">
-								{section.icon}
-								<h4 className="text-lg font-semibold text-white">
+							<div className="flex items-center gap-3 border-b bg-muted/40 px-4 py-3">
+								<div className="flex h-9 w-9 items-center justify-center rounded-md bg-background text-muted-foreground shadow-sm">
+									{section.icon}
+								</div>
+								<h4 className="text-sm font-semibold tracking-tight text-foreground">
 									{t(section.title)}
 								</h4>
 							</div>
+
 							<div className="space-y-2 p-4">
 								{section.data.map((item: any, idx: any) => (
-									<div key={idx} className="flex items-center justify-between">
-										<span className="text-sm text-gray-500">{t(item.label)}:</span>
-										<Badge variant="secondary" className="font-mono">
-											{t(item.value)}
-										</Badge>
+									<div key={idx} className="flex items-start justify-between gap-4">
+										<span className="text-sm text-muted-foreground">
+											{t(item.label)}:
+										</span>
+										<span className="max-w-[60%] text-right text-sm font-medium text-foreground">
+											{item.value}
+										</span>
 									</div>
 								))}
 							</div>
diff --git a/public/locales/de/newdevice.json b/public/locales/de/newdevice.json
index 5c088d24..722a7e07 100644
--- a/public/locales/de/newdevice.json
+++ b/public/locales/de/newdevice.json
@@ -3,10 +3,11 @@
 	"prev": "Zurück",
 	"next": "Weiter",
 	"submit": "Abschicken",
+	"submitting": "Abschicken...",
 	"step": "Schritt",
 	"of": "von",
 	"back": "Zurück",
-	"Complete": "Abschließen",
+	"complete": "Abschließen",
 
 	"select_device": "Gerät auswählen",
 	"Device": "Gerät",
@@ -27,18 +28,22 @@
 	"selected": "Ausgewählt",
 	"select_all_phenomenons": "Alle Phänomene auswählen",
 	"exposure_explaination": "Der Standort deiner Station.",
-	"indoor": "drinnen",
-	"outdoor": "draußen",
-	"mobile": "mobil",
-	"unknown": "unbekannt",
-	"temporary": "temporär Gerät",
-	"temporary_info_text": "temporäre Geräte werden automatisch nach maximal einem Monat gelöscht.",
+	"indoor": "Drinnen",
+	"outdoor": "Draußen",
+	"mobile": "Mobil",
+	"unknown": "Unbekannt",
+	"temporary": "Temporäres Gerät",
+	"temporary_info_text": "Temporäre Geräte werden automatisch nach maximal einem Monat gelöscht.",
 	"expiration_date": "Ablaufdatum:",
 	"add_tag": "Tag hinzufügen",
 	"optional": "optional",
 
+	"connection_type": "Verbindungstyp",
+
 	"select_sensors": "Sensoren auswählen",
 	"sensor_selection": "Sensorauswahl",
+	"selectedSensors_one": "{{count}} Sensor ausgewählt",
+  	"selectedSensors_other": "{{count}} Sensoren ausgewählt",
 	"add_sensor": "Sensor hinzufügen",
 	"sensor_selection_info_text": "Wähle die Sensoren für dein Gerät aus, indem du vordefinierte Gruppen oder einzelne Sensoren basierend auf deinem Gerätemodell auswählst. Wenn du ein benutzerdefiniertes Gerät verwendest, konfiguriere die Sensoren manuell.",
 	"select_sensors_text": "Wähle die Sensoren aus die du benutzen willst. Du kannst einen Sensor mehrfach hinzufügen.",
@@ -57,9 +62,11 @@
 	"includes": "Enthält",
 	"delete": "Löschen",
 	"title": "Titel",
+	"clear_all": "Alles zurücksetzen",
 
-	"advanced": "Advanced",
+	"advanced": "Fortgeschritten",
 	"advanced_text": "Erweiterte Konnektivitätseinstellungen für dein Gerät. Du kannst nur eine Option auswählen.",
+	"configuration": "Konfiguration",
 	"mqtt_configuration": "MQTT Konfiguration",
 	"mqtt_config_text": "Konfiguriere deine MQTT Einstellungen für den Datenstream",
 	"enable_mqtt": "MQTT aktivieren",
@@ -79,7 +86,8 @@
 	"mqtt_message_format_info": "Das Format, in dem die MQTT-Nachrichten vorliegen.",
 	"mqtt_decode_options_info": "Eine json-kodierte Zeichenkette mit Optionen zur Dekodierung der Nachricht. `jsonPath` für `json`",
 	"mqtt_connect_options_info": "Eine json-kodierte Zeichenkette mit Optionen, die an den MQTT-Client übergeben werden",
-
+	"loading": "Lade",
+	
 	"location": "Standort",
 	"location_info_text": "Wähle den Standort des Geräts aus, indem du auf die Karte klickst oder die Breiten- und Längengradkoordinaten manuell eingibst. Ziehe den Marker auf der Karte, um den Standort bei Bedarf anzupassen.",
 	"location_text": "Klicke in die Karte, um einen Standort für dein Gerät auszuwählen. Du kannst auch Koordinaten manuell eingeben oder die Geosuche benutzen.",
diff --git a/public/locales/en/newdevice.json b/public/locales/en/newdevice.json
index 49352670..27230033 100644
--- a/public/locales/en/newdevice.json
+++ b/public/locales/en/newdevice.json
@@ -3,10 +3,11 @@
 	"prev": "Previous",
 	"next": "Next",
 	"submit": "Submit",
+	"submitting": "Submitting...",
 	"step": "Step",
 	"of": "of",
 	"back": "Back",
-	"Complete": "Complete",
+	"complete": "Complete",
 
 	"select_device": "Select Device",
 	"Device": "Device",
@@ -37,8 +38,12 @@
 	"add_tag": "Add a tag",
 	"optional": "optional",
 
+	"connection_type": "Connection type",
+
 	"select_sensors": "Select sensors",
 	"sensor_selection": "Sensor selection",
+    "selectedSensors_one": "{{count}} sensor selected",
+	"selectedSensors_other": "{{count}} sensors selected",
 	"add_sensor": "Add Sensor",
 	"sensor_selection_info_text": "Select sensors for your device by choosing from predefined groups or individual sensors based on your device model. If using a custom device, configure sensors manually.",
 	"select_sensors_text": "Select the sensors you want to use by clicking on the cards. You can add the same sensor multiple times.",
@@ -57,10 +62,12 @@
 	"includes": "Includes",
 	"delete": "Delete",
 	"title": "Title",
+	"clear_all": "Clear all",
 
 	"advanced": "Advanced",
 	"advanced_text": "Advanced connectivity settings for your device. You can only choose one option.",
 	"ttn_info_text": "The openSenseMap offers an integration with <0>TheThingsNetwork</0>. Documentation for the parameters is provided on <1>GitHub</1>",
+	"configuration": "Configuration",
 	"mqtt_configuration": "MQTT Configuration",
 	"mqtt_config_text": "Configure your MQTT settings for data streaming",
 	"enable_mqtt": "Enable MQTT",
@@ -79,6 +86,7 @@
 	"mqtt_message_format_info": "The format the MQTT messages are in.",
 	"mqtt_decode_options_info": "A json encoded string with options for decoding the message. `jsonPath` for `json`.",
 	"mqtt_connect_options_info": "A json encoded string with options to supply to the MQTT client",
+	"loading": "Loading",
 
 	"location": "Location",
 	"location_info_text": "Select the device's location by clicking on the map or entering latitude and longitude coordinates manually. Drag the marker on the map to adjust the location if needed.",

From bd20b1ef538dcfd8e1c752b3076f5a3c06b14826 Mon Sep 17 00:00:00 2001
From: David Scheidt <david.scheidt@opensenselab.org>
Date: Tue, 10 Mar 2026 14:15:49 +0100
Subject: [PATCH 2/2] feat: added fallback for when no integrations are
 available

---
 app/components/device/new/advanced-info.tsx | 238 +++++++++++---------
 public/locales/de/newdevice.json            |  12 +-
 public/locales/en/newdevice.json            |  12 +-
 3 files changed, 136 insertions(+), 126 deletions(-)

diff --git a/app/components/device/new/advanced-info.tsx b/app/components/device/new/advanced-info.tsx
index 618d6b09..2bbbe3f9 100644
--- a/app/components/device/new/advanced-info.tsx
+++ b/app/components/device/new/advanced-info.tsx
@@ -1,127 +1,149 @@
-import Form from "@rjsf/core";
-import validator from "@rjsf/validator-ajv8";
-import { T } from "node_modules/vitest/dist/chunks/traces.d.402V_yFI";
-import { useState } from "react";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ArrayFieldTemplate } from "~/components/rjsf/arrayFieldTemplate";
-import { CheckboxWidget } from "~/components/rjsf/checkboxWidget";
-import { FieldTemplate } from "~/components/rjsf/fieldTemplate";
-import { BaseInputTemplate } from "~/components/rjsf/inputTemplate";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Label } from "~/components/ui/label";
-import { Switch } from "~/components/ui/switch";
+import Form from '@rjsf/core'
+import validator from '@rjsf/validator-ajv8'
+import { T } from 'node_modules/vitest/dist/chunks/traces.d.402V_yFI'
+import { useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { ArrayFieldTemplate } from '~/components/rjsf/arrayFieldTemplate'
+import { CheckboxWidget } from '~/components/rjsf/checkboxWidget'
+import { FieldTemplate } from '~/components/rjsf/fieldTemplate'
+import { BaseInputTemplate } from '~/components/rjsf/inputTemplate'
+import { Callout } from '~/components/ui/alert'
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from '~/components/ui/card'
+import { Label } from '~/components/ui/label'
+import { Switch } from '~/components/ui/switch'
 
 interface Integration {
-  id: string;
-  name: string;
-  slug: string;
-  icon?: string | null;
-  description?: string | null;
-  order: number;
+	id: string
+	name: string
+	slug: string
+	icon?: string | null
+	description?: string | null
+	order: number
 }
 
 interface AdvancedStepProps {
-  integrations: Integration[];
+	integrations: Integration[]
 }
 
 export function AdvancedStep({ integrations }: AdvancedStepProps) {
-  const { watch, setValue, resetField } = useFormContext();
-  const [schemas, setSchemas] = useState<Record<string, { schema: any; uiSchema: any }>>({});
-  const [loading, setLoading] = useState<Record<string, boolean>>({});
-  const { t } = useTranslation('newdevice')
+	const { watch, setValue, resetField } = useFormContext()
+	const [schemas, setSchemas] = useState<
+		Record<string, { schema: any; uiSchema: any }>
+	>({})
+	const [loading, setLoading] = useState<Record<string, boolean>>({})
+	const { t } = useTranslation('newdevice')
 
+	const loadSchema = async (slug: string) => {
+		if (schemas[slug]) return
 
-  const loadSchema = async (slug: string) => {
-    if (schemas[slug]) return;
+		setLoading((prev) => ({ ...prev, [slug]: true }))
 
-    setLoading((prev) => ({ ...prev, [slug]: true }));
+		try {
+			const res = await fetch(`/api/integrations/schema/${slug}`)
+			if (!res.ok) throw new Error(`Failed to fetch ${slug} schema`)
 
-    try {
-      const res = await fetch(`/api/integrations/schema/${slug}`);
-      if (!res.ok) throw new Error(`Failed to fetch ${slug} schema`);
+			const data = await res.json()
+			setSchemas((prev) => ({ ...prev, [slug]: data }))
+		} catch (err) {
+			console.error(`Failed to load ${slug} schema`, err)
+		} finally {
+			setLoading((prev) => ({ ...prev, [slug]: false }))
+		}
+	}
 
-        const data = await res.json();
-        setSchemas((prev) => ({ ...prev, [slug]: data }));
-      } catch (err) {
-        console.error(`Failed to load ${slug} schema`, err);
-      } finally {
-        setLoading((prev) => ({ ...prev, [slug]: false }));
-      }
-  }
+	const handleToggle = (slug: string, checked: boolean) => {
+		setValue(`${slug}Enabled`, checked)
 
-  const handleToggle = (slug: string, checked: boolean) => {
-    setValue(`${slug}Enabled`, checked);
+		if (checked) {
+			void loadSchema(slug)
+		} else {
+			resetField(`${slug}Config`)
+		}
+	}
 
-    if (checked) {
-      void loadSchema(slug);
-    } else {
-      resetField(`${slug}Config`);
-    }
-  };
+	return (
+		<>
+			{integrations.map((intg) => {
+				const enabled = watch(`${intg.slug}Enabled`) ?? false
+				const config = watch(`${intg.slug}Config`) ?? {}
+				const isLoading = loading[intg.slug] ?? false
+				const schema = schemas[intg.slug]
 
-  return (
-    <>
-      {integrations.map((intg) => {
-        const enabled = watch(`${intg.slug}Enabled`) ?? false;
-        const config = watch(`${intg.slug}Config`) ?? {};
-        const isLoading = loading[intg.slug] ?? false;
-        const schema = schemas[intg.slug];
+				return (
+					<Card key={intg.id} className="mb-6 w-full">
+						<CardHeader>
+							<CardTitle>
+								{intg.name} {t('configuration')}
+							</CardTitle>
+							{intg.description && (
+								<CardDescription>{intg.description}</CardDescription>
+							)}
+						</CardHeader>
 
-        return (
-          <Card key={intg.id} className="w-full mb-6">
-            <CardHeader>
-              <CardTitle>{intg.name} {t('configuration')}</CardTitle>
-              {intg.description && (
-                <CardDescription>{intg.description}</CardDescription>
-              )}
-            </CardHeader>
+						<CardContent className="space-y-4">
+							<div className="flex items-center justify-between">
+								<Label
+									htmlFor={`${intg.slug}Enabled`}
+									className="text-base font-semibold"
+								>
+									{t('enable')} {intg.name}
+								</Label>
+								<Switch
+									id={`${intg.slug}Enabled`}
+									checked={enabled}
+									onCheckedChange={(checked) =>
+										handleToggle(intg.slug, checked)
+									}
+								/>
+							</div>
 
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <Label htmlFor={`${intg.slug}Enabled`} className="text-base font-semibold">
-                  {t('enable')} {intg.name}
-                </Label>
-                <Switch
-                  id={`${intg.slug}Enabled`}
-                  checked={enabled}
-                  onCheckedChange={(checked) => handleToggle(intg.slug, checked)}
-                />
-              </div>
+							{enabled && (
+								<>
+									{isLoading && (
+										<p className="text-sm text-muted-foreground">
+											{t('loading')} {intg.name} {t('configuration')}...
+										</p>
+									)}
 
-              {enabled && (
-                <>
-                  {isLoading && (
-                    <p className="text-sm text-muted-foreground">
-                      {t('loading')} {intg.name} {t('configuration')}...
-                    </p>
-                  )}
-
-                  {schema && (
-                    <Form
-                      widgets={{ CheckboxWidget }}
-                      templates={{ FieldTemplate, ArrayFieldTemplate, BaseInputTemplate }}
-                      schema={schema.schema}
-                      uiSchema={schema.uiSchema}
-                      validator={validator}
-                      formData={config}
-                      onChange={(e) => {
-                        setValue(`${intg.slug}Config`, e.formData, {
-                          shouldDirty: true,
-                          shouldValidate: true,
-                        });
-                      }}
-                      onSubmit={() => {}}
-                    >
-                      <></>
-                    </Form>
-                  )}
-                </>
-              )}
-            </CardContent>
-          </Card>
-        );
-      })}
-    </>
-  );
-}
\ No newline at end of file
+									{schema && (
+										<Form
+											widgets={{ CheckboxWidget }}
+											templates={{
+												FieldTemplate,
+												ArrayFieldTemplate,
+												BaseInputTemplate,
+											}}
+											schema={schema.schema}
+											uiSchema={schema.uiSchema}
+											validator={validator}
+											formData={config}
+											onChange={(e) => {
+												setValue(`${intg.slug}Config`, e.formData, {
+													shouldDirty: true,
+													shouldValidate: true,
+												})
+											}}
+											onSubmit={() => {}}
+										>
+											<></>
+										</Form>
+									)}
+								</>
+							)}
+						</CardContent>
+					</Card>
+				)
+			})}
+			{integrations.length === 0 && (
+				<Callout variant="note">{t('no_integrations_available')}</Callout>
+			)}
+		</>
+	)
+}
diff --git a/public/locales/de/newdevice.json b/public/locales/de/newdevice.json
index 722a7e07..7c981f76 100644
--- a/public/locales/de/newdevice.json
+++ b/public/locales/de/newdevice.json
@@ -8,7 +8,6 @@
 	"of": "von",
 	"back": "Zurück",
 	"complete": "Abschließen",
-
 	"select_device": "Gerät auswählen",
 	"Device": "Gerät",
 	"device_selection": "Geräteauswahl",
@@ -17,7 +16,6 @@
 	"device_selection_info_text": "Wähle ein Gerätemodell aus den verfügbaren Optionen aus",
 	"own_device": "Eigenes Gerät",
 	"select_device_info_text": "Dein Gerät is nicht in der Liste? Füge es im <0>sensorWiki</0> hinzu, um es auf der openSenseMap zu benutzen.",
-
 	"general": "Allgemein",
 	"general_info": "Allgemeine Informationen",
 	"general_text": "Bitte trage zusätzliche Informationen zu deinem Gerät ein.",
@@ -37,13 +35,11 @@
 	"expiration_date": "Ablaufdatum:",
 	"add_tag": "Tag hinzufügen",
 	"optional": "optional",
-
 	"connection_type": "Verbindungstyp",
-
 	"select_sensors": "Sensoren auswählen",
 	"sensor_selection": "Sensorauswahl",
 	"selectedSensors_one": "{{count}} Sensor ausgewählt",
-  	"selectedSensors_other": "{{count}} Sensoren ausgewählt",
+	"selectedSensors_other": "{{count}} Sensoren ausgewählt",
 	"add_sensor": "Sensor hinzufügen",
 	"sensor_selection_info_text": "Wähle die Sensoren für dein Gerät aus, indem du vordefinierte Gruppen oder einzelne Sensoren basierend auf deinem Gerätemodell auswählst. Wenn du ein benutzerdefiniertes Gerät verwendest, konfiguriere die Sensoren manuell.",
 	"select_sensors_text": "Wähle die Sensoren aus die du benutzen willst. Du kannst einen Sensor mehrfach hinzufügen.",
@@ -63,7 +59,6 @@
 	"delete": "Löschen",
 	"title": "Titel",
 	"clear_all": "Alles zurücksetzen",
-
 	"advanced": "Fortgeschritten",
 	"advanced_text": "Erweiterte Konnektivitätseinstellungen für dein Gerät. Du kannst nur eine Option auswählen.",
 	"configuration": "Konfiguration",
@@ -87,7 +82,6 @@
 	"mqtt_decode_options_info": "Eine json-kodierte Zeichenkette mit Optionen zur Dekodierung der Nachricht. `jsonPath` für `json`",
 	"mqtt_connect_options_info": "Eine json-kodierte Zeichenkette mit Optionen, die an den MQTT-Client übergeben werden",
 	"loading": "Lade",
-	
 	"location": "Standort",
 	"location_info_text": "Wähle den Standort des Geräts aus, indem du auf die Karte klickst oder die Breiten- und Längengradkoordinaten manuell eingibst. Ziehe den Marker auf der Karte, um den Standort bei Bedarf anzupassen.",
 	"location_text": "Klicke in die Karte, um einen Standort für dein Gerät auszuwählen. Du kannst auch Koordinaten manuell eingeben oder die Geosuche benutzen.",
@@ -98,9 +92,9 @@
 	"enter longitude": "Längengrad eingeben (-180 bis 180)",
 	"height": "Höhe",
 	"height_info_text": "Höhe über dem Meeresspiegel des von Dir gewählten Standorts in Metern. Wenn Du dein Gerät deutlich über der Höhe des Erdbodens aufgestellt hast (z.B. hohes Gebäude), sollten Du diese Höhe zu der abgeleiteten Höhe hinzuaddieren. Die Höhe ist vor allem dann wichtig, wenn Du einen Sensor angeschlossen hast, der den Luftdruck misst, um diese Messungen vergleichbar zu machen.",
-
 	"summary": "Dein Gerät in der Übersicht",
 	"summary_text": "Bitte prüfe ob alle Einstellungen richtig sind.",
 	"summary_general": "Deine allgemeinen Informationen",
-	"summary_sensors": "Deine Sensoren"
+	"summary_sensors": "Deine Sensoren",
+	"no_integrations_available": "Derzeit sind keine Integrationen verfügbar. Bitte versuche es später erneut. Integrationen können jederzeit nach der Erstellung des Geräts über die Geräteeinstellungen hinzugefügt werden."
 }
diff --git a/public/locales/en/newdevice.json b/public/locales/en/newdevice.json
index 27230033..2f7d4415 100644
--- a/public/locales/en/newdevice.json
+++ b/public/locales/en/newdevice.json
@@ -8,7 +8,6 @@
 	"of": "of",
 	"back": "Back",
 	"complete": "Complete",
-
 	"select_device": "Select Device",
 	"Device": "Device",
 	"device_selection": "Device Selection",
@@ -17,7 +16,6 @@
 	"device_selection_info_text": "Select a device model from the available options",
 	"own_device": "Custom Device",
 	"select_device_info_text": "Your device is not in the list? Add it to the <0>sensorWiki</0> to use it on the openSenseMap.",
-
 	"general": "General",
 	"general_info": "General Information",
 	"general_text": "Please submit additional information about your device.",
@@ -37,12 +35,10 @@
 	"expiration_date": "Expiration Date:",
 	"add_tag": "Add a tag",
 	"optional": "optional",
-
 	"connection_type": "Connection type",
-
 	"select_sensors": "Select sensors",
 	"sensor_selection": "Sensor selection",
-    "selectedSensors_one": "{{count}} sensor selected",
+	"selectedSensors_one": "{{count}} sensor selected",
 	"selectedSensors_other": "{{count}} sensors selected",
 	"add_sensor": "Add Sensor",
 	"sensor_selection_info_text": "Select sensors for your device by choosing from predefined groups or individual sensors based on your device model. If using a custom device, configure sensors manually.",
@@ -63,7 +59,6 @@
 	"delete": "Delete",
 	"title": "Title",
 	"clear_all": "Clear all",
-
 	"advanced": "Advanced",
 	"advanced_text": "Advanced connectivity settings for your device. You can only choose one option.",
 	"ttn_info_text": "The openSenseMap offers an integration with <0>TheThingsNetwork</0>. Documentation for the parameters is provided on <1>GitHub</1>",
@@ -87,7 +82,6 @@
 	"mqtt_decode_options_info": "A json encoded string with options for decoding the message. `jsonPath` for `json`.",
 	"mqtt_connect_options_info": "A json encoded string with options to supply to the MQTT client",
 	"loading": "Loading",
-
 	"location": "Location",
 	"location_info_text": "Select the device's location by clicking on the map or entering latitude and longitude coordinates manually. Drag the marker on the map to adjust the location if needed.",
 	"location_text": "Click on the map to choose a location for your device. You can also enter your coordinates manually or use the geosearch.",
@@ -98,9 +92,9 @@
 	"enter longitude": "Enter longitude (-180 to 180)",
 	"height": "Height",
 	"height_info_text": "Height above sea level of your selected location in meters. If you have set up your device above ground level (e.g. high building), you should add this to the derived height. The height is espacially important if you have connected a sensor that meassures air pressure to make this meassurements compareable.",
-
 	"summary": "Your device summary",
 	"summary_text": "Please check if everything is setup correctly.",
 	"summary_general": "Your general Information",
-	"summary_sensors": "Your sensors"
+	"summary_sensors": "Your sensors",
+	"no_integrations_available": "There are currently no integrations available. Please try again later. You may add integrations from the device settings at any time after the device has been created."
 }