Re-fix settings; fix settings props on setup page.

frontend/vue/components/Admin/Settings.vue

@@ -51,7 +51,7 @@
             <div class="card-body">
                 <button
                     type="submit"
-                    class="btn"
+                    class="btn btn-lg"
                     :class="(v$.$invalid) ? 'btn-danger' : 'btn-primary'"
                 >
                     <slot name="submitButtonName">
@@ -74,25 +74,10 @@ import {useNotify} from "~/functions/useNotify";
 import {useTranslate} from "~/vendor/gettext";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import Loading from "~/components/Common/Loading.vue";
+import settingsProps from "~/components/Admin/settingsProps";
 
 const props = defineProps({
-    apiUrl: {
-        type: String,
-        required: true,
-    },
-    testMessageUrl: {
-        type: String,
-        required: true
-    },
-    acmeUrl: {
-        type: String,
-        required: true
-    },
-    releaseChannel: {
-        type: String,
-        default: 'rolling',
-        required: false
-    }
+    ...settingsProps
 });
 
 const emit = defineEmits(['saved']);
@@ -105,6 +90,7 @@ const error = ref(null);
 const {axios} = useAxios();
 
 const populateForm = (data) => {
+    resetForm();
     form.value = mergeExisting(form.value, data);
 };
 

frontend/vue/components/Admin/settingsProps.js

@@ -0,0 +1,19 @@
+export default {
+    apiUrl: {
+        type: String,
+        required: true,
+    },
+    testMessageUrl: {
+        type: String,
+        required: true
+    },
+    acmeUrl: {
+        type: String,
+        required: true
+    },
+    releaseChannel: {
+        type: String,
+        default: 'rolling',
+        required: false
+    }
+};

frontend/vue/components/Common/Loading.vue

@@ -28,7 +28,7 @@ const props = defineProps({
     },
     lazy: {
         type: Boolean,
-        default: true
+        default: false
     }
 });
 </script>

frontend/vue/components/Setup/Settings.vue

@@ -1,8 +1,6 @@
 <template>
-    <!-- TODO Fix property injection here to match other settings forms -->
     <admin-settings
-        :api-url="apiUrl"
-        :release-channel="releaseChannel"
+        v-bind="props"
         @saved="onSaved"
     >
         <template #preCard>
@@ -28,21 +26,10 @@
 import AdminSettings from "~/components/Admin/Settings";
 import SetupStep from "./SetupStep";
 import InfoCard from "~/components/Common/InfoCard";
+import settingsProps from "~/components/Admin/settingsProps";
 
 const props = defineProps({
-    apiUrl: {
-        type: String,
-        required: true
-    },
-    releaseChannel: {
-        type: String,
-        default: 'rolling',
-        required: false
-    },
-    continueUrl: {
-        type: String,
-        required: true
-    }
+    ...settingsProps
 });
 
 const onSaved = () => {

frontend/vue/functions/useVuelidateOnForm.js

@@ -37,8 +37,8 @@ export function useVuelidateOnForm(validations = {}, blankForm = {}, options = {
     const v$ = useVuelidate(parsedValidations, form, options);
 
     const resetForm = () => {
-        v$.value.$reset();
         reset();
+        v$.value.$reset();
     }
 
     const isValid = computed(() => {

src/Controller/Admin/SettingsAction.php

@@ -5,16 +5,15 @@ declare(strict_types=1);
 namespace App\Controller\Admin;
 
 use App\Controller\SingleActionInterface;
-use App\Entity\Settings;
 use App\Http\Response;
 use App\Http\ServerRequest;
-use App\Version;
+use App\VueComponent\SettingsComponent;
 use Psr\Http\Message\ResponseInterface;
 
 final class SettingsAction implements SingleActionInterface
 {
     public function __construct(
-        private readonly Version $version,
+        private readonly SettingsComponent $settingsComponent
     ) {
     }
 
@@ -23,21 +22,12 @@ final class SettingsAction implements SingleActionInterface
         Response $response,
         array $params
     ): ResponseInterface {
-        $router = $request->getRouter();
-
         return $request->getView()->renderVuePage(
             response: $response,
             component: 'Vue_AdminSettings',
             id: 'admin-settings',
             title: __('System Settings'),
-            props: [
-                'apiUrl' => $router->named('api:admin:settings', [
-                    'group' => Settings::GROUP_GENERAL,
-                ]),
-                'testMessageUrl' => $router->named('api:admin:send-test-message'),
-                'acmeUrl' => $router->named('api:admin:acme'),
-                'releaseChannel' => $this->version->getReleaseChannelEnum()->value,
-            ],
+            props: $this->settingsComponent->getProps($request),
         );
     }
 }

src/Controller/Frontend/SetupController.php

@@ -8,13 +8,12 @@ use App\Container\EntityManagerAwareTrait;
 use App\Container\EnvironmentAwareTrait;
 use App\Container\SettingsAwareTrait;
 use App\Entity\Repository\RolePermissionRepository;
-use App\Entity\Settings;
 use App\Entity\User;
 use App\Exception\NotLoggedInException;
 use App\Exception\ValidationException;
 use App\Http\Response;
 use App\Http\ServerRequest;
-use App\Version;
+use App\VueComponent\SettingsComponent;
 use App\VueComponent\StationFormComponent;
 use InvalidArgumentException;
 use Psr\Http\Message\ResponseInterface;
@@ -31,7 +30,7 @@ final class SetupController
         private readonly RolePermissionRepository $permissionRepo,
         private readonly ValidatorInterface $validator,
         private readonly StationFormComponent $stationFormComponent,
-        private readonly Version $version
+        private readonly SettingsComponent $settingsComponent
     ) {
     }
 
@@ -171,13 +170,7 @@ final class SetupController
             component: 'Vue_SetupSettings',
             id: 'setup-settings',
             title: __('System Settings'),
-            props: [
-                'apiUrl' => $router->named('api:admin:settings', [
-                    'group' => Settings::GROUP_GENERAL,
-                ]),
-                'releaseChannel' => $this->version->getReleaseChannelEnum()->value,
-                'continueUrl' => $router->named('dashboard'),
-            ],
+            props: $this->settingsComponent->getProps($request),
         );
     }
 

src/VueComponent/SettingsComponent.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\VueComponent;
+
+use App\Entity\Settings;
+use App\Http\ServerRequest;
+use App\Version;
+
+final class SettingsComponent implements VueComponentInterface
+{
+    public function __construct(
+        private readonly Version $version,
+    ) {
+    }
+
+    public function getProps(ServerRequest $request): array
+    {
+        $router = $request->getRouter();
+
+        return [
+            'apiUrl' => $router->named('api:admin:settings', [
+                'group' => Settings::GROUP_GENERAL,
+            ]),
+            'testMessageUrl' => $router->named('api:admin:send-test-message'),
+            'acmeUrl' => $router->named('api:admin:acme'),
+            'releaseChannel' => $this->version->getReleaseChannelEnum()->value,
+        ];
+    }
+}