wrap remote access preconditions in UnraidSettingsLayout

pujitm · pujitm · commit 138355150a51 · 2025-06-18T12:24:37.000-04:00
diff --git a/packages/unraid-api-plugin-connect/src/service/connect-settings.service.ts b/packages/unraid-api-plugin-connect/src/service/connect-settings.service.ts
@@ -294,22 +294,31 @@ export class ConnectSettingsService {
         /** shown when preconditions are not met */
         const requirements: UIElement[] = [
             {
-                type: 'Label',
-                text: 'Allow Remote Access',
-                options: {
-                    format: 'preconditions',
-                    description: 'Remote Access is disabled. To enable, please make sure:',
-                    items: [
-                        {
-                            text: 'You are signed in to Unraid Connect',
-                            status: isSignedIn,
-                        },
-                        {
-                            text: 'You have provisioned a valid SSL certificate',
-                            status: isSSLCertProvisioned,
+                type: 'UnraidSettingsLayout',
+                elements: [
+                    {
+                        type: 'Label',
+                        text: 'Allow Remote Access',
+                    },
+                    {
+                        type: 'Label',
+                        text: 'Allow Remote Access',
+                        options: {
+                            format: 'preconditions',
+                            description: 'Remote Access is disabled. To enable, please make sure:',
+                            items: [
+                                {
+                                    text: 'You are signed in to Unraid Connect',
+                                    status: isSignedIn,
+                                },
+                                {
+                                    text: 'You have provisioned a valid SSL certificate',
+                                    status: isSSLCertProvisioned,
+                                },
+                            ],
                         },
-                    ],
-                },
+                    },
+                ],
             },
         ];
 
diff --git a/unraid-ui/src/forms/PreconditionsLabel.vue b/unraid-ui/src/forms/PreconditionsLabel.vue
@@ -28,12 +28,14 @@ const description = computed(() => props.uischema.options?.description);
 
 <template>
   <!-- Render each precondition as a list item with an icon bullet -->
-  <p v-if="description" class="mb-2">{{ description }}</p>
-  <ul class="list-none space-y-1">
-    <li v-for="(item, index) in items" :key="index" class="flex items-center">
-      <span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
-      <span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
-      <span>{{ item.text }}</span>
-    </li>
-  </ul>
+  <div>
+    <p v-if="description" class="mb-2">{{ description }}</p>
+    <ul class="list-none space-y-1">
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+        <span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
+        <span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
+        <span>{{ item.text }}</span>
+      </li>
+    </ul>
+  </div>
 </template>
