webapp: Beautify and unify form footers

webapp/src/components/FormFooter.vue

@@ -0,0 +1,7 @@
+<template>
+    <hr class="border border-3 opacity-75">
+    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <button type="button" class="btn btn-secondary" @click="$emit('reload')">{{ $t('base.Cancel') }}</button>
+        <button type="submit" class="btn btn-primary">{{ $t('base.Save') }}</button>
+    </div>
+</template>

webapp/src/locales/de.json

@@ -24,7 +24,9 @@
     },
     "base": {
         "Loading": "Lade...",
-        "Reload": "Aktualisieren"
+        "Reload": "Aktualisieren",
+        "Cancel": "Abbrechen",
+        "Save": "Speichern"
     },
     "localeswitcher": {
         "Dark": "Dunkel",
@@ -330,7 +332,7 @@
         "DeviceReboot": "Gerät neu starten",
         "PerformReboot": "Neustart durchführen",
         "Reboot": "Neustarten!",
-        "Cancel": "Abbrechen",
+        "Cancel": "@:base.Cancel",
         "RebootOpenDTU": "OpenDTU neustarten",
         "RebootQuestion": "Möchten Sie das Gerät wirklich neu starten?",
         "RebootHint": "<b>Hinweis:</b> Ein manueller Neustart muss normalerweise nicht durchgeführt werden. OpenDTU führt jeden erforderlichen Neustart (z. B. nach einem Firmware-Update) automatisch durch. Einstellungen werden auch ohne Neustart übernommen. Wenn Sie aufgrund eines Fehlers einen Neustart durchführen müssen, denken Sie bitte daran, diesen unter <a href=\"https://github.com/tbnobody/OpenDTU/issues\" class=\"alert-link\" target=\"_blank\">https://github.com/tbnobody/OpenDTU/issues</a> zu melden."
@@ -351,7 +353,6 @@
         "CmtFrequencyWarning": "Die ausgewählte Frequenz befindet außerhalb des in der EU zugelassenen Bereiches. Vergewissere dich, dass mit dieser Auswahl keine lokalen Regularien verletzt werden.",
         "MHz": "{mhz} MHz",
         "dBm": "{dbm} dBm",
-        "Save": "Speichern",
         "Min": "Minimum ({db} dBm)",
         "Low": "Niedrig ({db} dBm)",
         "High": "Hoch ({db} dBm)",
@@ -364,8 +365,7 @@
         "RepeatPassword": "Passwort wiederholen:",
         "PasswordHint": "<b>Hinweis:</b> Das Administrator-Passwort wird für den Zugriff auf die Webschnittstelle (Benutzer 'admin'), aber auch für die Verbindung mit dem Gerät im AP-Modus verwendet. Es muss zwischen 8 und 64 Zeichen lang sein.",
         "Permissions": "Berechtigungen",
-        "ReadOnly": "Nur-Lese-Zugriff auf die Weboberfläche ohne Passwort zulassen",
+        "ReadOnly": "Nur-Lese-Zugriff auf die Weboberfläche ohne Passwort zulassen"
-        "Save": "@:dtuadmin.Save"
     },
     "ntpadmin": {
         "NtpSettings": "NTP-Einstellungen",
@@ -383,7 +383,6 @@
         "NAUTICAL": "Nautische Dämmerung (102°)",
         "CIVIL": "Bürgerliche Dämmerung (96°)",
         "ASTONOMICAL": "Astronomische Dämmerung (108°)",
-        "Save": "@:dtuadmin.Save",
         "ManualTimeSynchronization": "Manuelle Zeitsynchronization",
         "CurrentOpenDtuTime": "Aktuelle OpenDTU-Zeit:",
         "CurrentLocalTime": "Aktuelle lokale Zeit:",
@@ -407,7 +406,6 @@
         "ApTimeout": "AccessPoint Zeitlimit:",
         "ApTimeoutHint": "Zeit die der AccessPoint offen gehalten wird. Ein Wert von 0 bedeutet unendlich.",
         "Minutes": "Minuten",
-        "Save": "@:dtuadmin.Save",
         "EnableMdns": "mDNS aktivieren",
         "MdnsSettings": "mDNS-Einstellungen"
     },
@@ -451,8 +449,7 @@
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Retain Flag aktivieren",
         "HassExpire": "Ablauffunktion aktivieren",
-        "HassIndividual": "Einzelne Paneele",
+        "HassIndividual": "Einzelne Paneele"
-        "Save": "@:dtuadmin.Save"
     },
     "inverteradmin": {
         "InverterSettings": "Wechselrichter Einstellungen",
@@ -495,8 +492,8 @@
         "ZeroRuntimeHint": "Nulle Laufzeit Daten (keine Ertragsdaten), wenn der Wechselrichter nicht erreichbar ist.",
         "ZeroDay": "Nulle Tagesertrag um Mitternacht",
         "ZeroDayHint": "Das funktioniert nur wenn der Wechselrichter nicht erreichbar ist. Wenn Daten aus dem Wechselrichter gelesen werden, werden deren Werte verwendet. (Ein Reset erfolgt nur beim Neustarten)",
-        "Cancel": "@:maintenancereboot.Cancel",
+        "Cancel": "@:base.Cancel",
-        "Save": "@:dtuadmin.Save",
+        "Save": "@:base.Save",
         "DeleteMsg": "Soll der Wechselrichter \"{name}\" mit der Seriennummer {serial} wirklich gelöscht werden?",
         "Delete": "Löschen",
         "YieldDayCorrection": "Tagesertragskorrektur",
@@ -519,7 +516,7 @@
         "FactoryReset": "Werksreset",
         "ResetMsg": "Sind Sie sicher, dass Sie die aktuelle Konfiguration löschen und alle Einstellungen auf die Werkseinstellungen zurücksetzen möchten?",
         "ResetConfirm": "Werksreset!",
-        "Cancel": "@:maintenancereboot.Cancel"
+        "Cancel": "@:base.Cancel"
     },
     "login": {
         "Login": "Anmeldung",
@@ -586,8 +583,7 @@
         "fr": "Französisch",
         "Leds": "LEDs",
         "EqualBrightness": "Gleiche Helligkeit:",
-        "LedBrightness": "LED {led} Helligkeit ({brightness}):",
+        "LedBrightness": "LED {led} Helligkeit ({brightness}):"
-        "Save": "@:dtuadmin.Save"
     },
     "pininfo": {
         "PinOverview": "Anschlussübersicht",

webapp/src/locales/en.json

@@ -24,7 +24,9 @@
     },
     "base": {
         "Loading": "Loading...",
-        "Reload": "Reload"
+        "Reload": "Reload",
+        "Cancel": "Cancel",
+        "Save": "Save"
     },
     "localeswitcher": {
         "Dark": "Dark",
@@ -330,7 +332,7 @@
         "DeviceReboot": "Device Reboot",
         "PerformReboot": "Perform Reboot",
         "Reboot": "Reboot!",
-        "Cancel": "Cancel",
+        "Cancel": "@:base.Cancel",
         "RebootOpenDTU": "Reboot OpenDTU",
         "RebootQuestion": "Do you really want to reboot the device?",
         "RebootHint": "<b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU performs any required reboot (e.g. after a firmware update) automatically. Settings are also adopted without rebooting. If you need to reboot due to an error, please consider reporting it at <a href=\"https://github.com/tbnobody/OpenDTU/issues\" class=\"alert-link\" target=\"_blank\">https://github.com/tbnobody/OpenDTU/issues</a>."
@@ -351,7 +353,6 @@
         "CmtFrequencyWarning": "The selected frequency is outside the range allowed in the EU. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
         "dBm": "{dbm} dBm",
-        "Save": "Save",
         "Min": "Minimum ({db} dBm)",
         "Low": "Low ({db} dBm)",
         "High": "High ({db} dBm)",
@@ -364,8 +365,7 @@
         "RepeatPassword": "Repeat Password:",
         "PasswordHint": "<b>Hint:</b> The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode. It must be 8..64 characters.",
         "Permissions": "Permissions",
-        "ReadOnly": "Allow readonly access to web interface without password",
+        "ReadOnly": "Allow readonly access to web interface without password"
-        "Save": "@:dtuadmin.Save"
     },
     "ntpadmin": {
         "NtpSettings": "NTP Settings",
@@ -383,7 +383,6 @@
         "NAUTICAL": "Nautical dawn (102°)",
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
-        "Save": "@:dtuadmin.Save",
         "ManualTimeSynchronization": "Manual Time Synchronization",
         "CurrentOpenDtuTime": "Current OpenDTU Time:",
         "CurrentLocalTime": "Current Local Time:",
@@ -407,7 +406,6 @@
         "ApTimeout": "AccessPoint Timeout:",
         "ApTimeoutHint": "Time which the AccessPoint is kept open. A value of 0 means infinite.",
         "Minutes": "minutes",
-        "Save": "@:dtuadmin.Save",
         "EnableMdns": "Enable mDNS",
         "MdnsSettings": "mDNS Settings"
     },
@@ -451,8 +449,7 @@
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Enable Retain Flag",
         "HassExpire": "Enable Expiration",
-        "HassIndividual": "Individual Panels",
+        "HassIndividual": "Individual Panels"
-        "Save": "@:dtuadmin.Save"
     },
     "inverteradmin": {
         "InverterSettings": "Inverter Settings",
@@ -495,8 +492,8 @@
         "ZeroRuntimeHint": "Zero runtime data (no yield data) if inverter becomes unreachable.",
         "ZeroDay": "Zero daily yield at midnight",
         "ZeroDayHint": "This only works if the inverter is unreachable. If data is read from the inverter, it's values will be used. (Reset only occours on power cycle)",
-        "Cancel": "@:maintenancereboot.Cancel",
+        "Cancel": "@:base.Cancel",
-        "Save": "@:dtuadmin.Save",
+        "Save": "@:base.Save",
         "DeleteMsg": "Are you sure you want to delete the inverter \"{name}\" with serial number {serial}?",
         "Delete": "Delete",
         "YieldDayCorrection": "Yield Day Correction",
@@ -519,7 +516,7 @@
         "FactoryReset": "Factory Reset",
         "ResetMsg": "Are you sure you want to delete the current configuration and reset all settings to their factory defaults?",
         "ResetConfirm": "Factory Reset!",
-        "Cancel": "@:maintenancereboot.Cancel"
+        "Cancel": "@:base.Cancel"
     },
     "login": {
         "Login": "Login",
@@ -586,8 +583,7 @@
         "fr": "French",
         "Leds": "LEDs",
         "EqualBrightness": "Equal brightness:",
-        "LedBrightness": "LED {led} brightness ({brightness}):",
+        "LedBrightness": "LED {led} brightness ({brightness}):"
-        "Save": "@:dtuadmin.Save"
     },
     "pininfo": {
         "PinOverview": "Connection overview",

webapp/src/locales/fr.json

@@ -24,7 +24,9 @@
     },
     "base": {
         "Loading": "Chargement...",
-        "Reload": "Reload"
+        "Reload": "Reload",
+        "Cancel": "Annuler",
+        "Save": "Sauvegarder"
     },
     "localeswitcher": {
         "Dark": "Sombre",
@@ -330,7 +332,7 @@
         "DeviceReboot": "Redémarrage de l'appareil",
         "PerformReboot": "Effectuer un redémarrage",
         "Reboot": "Redémarrer !",
-        "Cancel": "Annuler",
+        "Cancel": "@:base.Cancel",
         "RebootOpenDTU": "Redémarrer OpenDTU",
         "RebootQuestion": "Voulez-vous vraiment redémarrer l'appareil ?",
         "RebootHint": "<b>Astuce :</b> Normalement, il n'est pas nécessaire de procéder à un redémarrage manuel. OpenDTU effectue automatiquement tout redémarrage nécessaire (par exemple, après une mise à jour du firmware). Les paramètres sont également adoptés sans redémarrage. Si vous devez redémarrer en raison d'une erreur, veuillez envisager de la signaler à l'adresse suivante <a href=\"https://github.com/tbnobody/OpenDTU/issues\" class=\"alert-link\" target=\"_blank\">https://github.com/tbnobody/OpenDTU/issues</a>."
@@ -351,7 +353,6 @@
         "CmtFrequencyWarning": "The selected frequency is outside the range allowed in the EU. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
         "dBm": "{dbm} dBm",
-        "Save": "Sauvegarder",
         "Min": "Minimum ({db} dBm)",
         "Low": "Bas ({db} dBm)",
         "High": "Haut ({db} dBm)",
@@ -364,8 +365,7 @@
         "RepeatPassword": "Répéter le mot de passe",
         "PasswordHint": "<b>Astuce :</b> Le mot de passe administrateur est utilisé pour accéder à cette interface web (utilisateur 'admin'), mais aussi pour se connecter à l'appareil en mode AP. Il doit comporter de 8 à 64 caractères.",
         "Permissions": "Autorisations",
-        "ReadOnly": "Autoriser l'accès en lecture seule à l'interface web sans mot de passe",
+        "ReadOnly": "Autoriser l'accès en lecture seule à l'interface web sans mot de passe"
-        "Save": "@:dtuadmin.Save"
     },
     "ntpadmin": {
         "NtpSettings": "Paramètres NTP",
@@ -383,7 +383,6 @@
         "NAUTICAL": "Nautical dawn (102°)",
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
-        "Save": "@:dtuadmin.Save",
         "ManualTimeSynchronization": "Synchronisation manuelle de l'heure",
         "CurrentOpenDtuTime": "Heure actuelle de l'OpenDTU",
         "CurrentLocalTime": "Heure locale actuelle",
@@ -495,8 +494,8 @@
         "ZeroRuntimeHint": "Zero runtime data (no yield data) if inverter becomes unreachable.",
         "ZeroDay": "Zero daily yield at midnight",
         "ZeroDayHint": "This only works if the inverter is unreachable. If data is read from the inverter, it's values will be used. (Reset only occours on power cycle)",
-        "Cancel": "@:maintenancereboot.Cancel",
+        "Cancel": "@:base.Cancel",
-        "Save": "@:dtuadmin.Save",
+        "Save": "@:base.Save",
         "DeleteMsg": "Êtes-vous sûr de vouloir supprimer l'onduleur \"{name}\" avec le numéro de série \"{serial}\" ?",
         "Delete": "Supprimer",
         "YieldDayCorrection": "Yield Day Correction",
@@ -519,7 +518,7 @@
         "FactoryReset": "Remise à zéro",
         "ResetMsg": "Êtes-vous sûr de vouloir supprimer la configuration actuelle et réinitialiser tous les paramètres à leurs valeurs par défaut ?",
         "ResetConfirm": "Remise à zéro !",
-        "Cancel": "@:maintenancereboot.Cancel"
+        "Cancel": "@:base.Cancel"
     },
     "login": {
         "Login": "Connexion",
@@ -586,8 +585,7 @@
         "fr": "Français",
         "Leds": "LEDs",
         "EqualBrightness": "Même luminosité:",
-        "LedBrightness": "LED {led} luminosité ({brightness}):",
+        "LedBrightness": "LED {led} luminosité ({brightness}):"
-        "Save": "@:dtuadmin.Save"
     },
     "pininfo": {
         "PinOverview": "Vue d'ensemble des connexions",

webapp/src/views/DeviceAdminView.vue

@@ -123,7 +123,7 @@
                 </div>
             </div>
 
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
+            <FormFooter @reload="getDeviceConfig"/>
 
         </form>
     </BasePage>
@@ -132,6 +132,7 @@
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import PinInfo from '@/components/PinInfo.vue';
 import type { DeviceConfig, Led } from "@/types/DeviceConfig";
@@ -143,6 +144,7 @@ export default defineComponent({
     components: {
         BasePage,
         BootstrapAlert,
+        FormFooter,
         InputElement,
         PinInfo,
     },

webapp/src/views/DtuAdminView.vue

@@ -66,7 +66,7 @@
                 </div>
 
             </CardElement>
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('dtuadmin.Save') }}</button>
+            <FormFooter @reload="getDtuConfig"/>
         </form>
     </BasePage>
 </template>
@@ -75,6 +75,7 @@
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
+import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import type { DtuConfig } from "@/types/DtuConfig";
 import { authHeader, handleResponse } from '@/utils/authentication';
@@ -86,6 +87,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
+        FormFooter,
         InputElement,
         BIconInfoCircle,
     },

webapp/src/views/MqttAdminView.vue

@@ -134,7 +134,7 @@
                               type="checkbox"/>
             </CardElement>
 
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('mqttadmin.Save') }}</button>
+            <FormFooter @reload="getMqttConfig"/>
         </form>
     </BasePage>
 </template>
@@ -143,6 +143,7 @@
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
+import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import type { MqttConfig } from "@/types/MqttConfig";
 import { authHeader, handleResponse } from '@/utils/authentication';
@@ -153,6 +154,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
+        FormFooter,
         InputElement,
     },
     data() {

webapp/src/views/NetworkAdminView.vue

@@ -63,7 +63,7 @@
                               :postfix="$t('networkadmin.Minutes')"
                               :tooltip="$t('networkadmin.ApTimeoutHint')"/>
             </CardElement>
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
+            <FormFooter @reload="getNetworkConfig"/>
         </form>
     </BasePage>
 </template>
@@ -72,6 +72,7 @@
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
+import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import type { NetworkConfig } from "@/types/NetworkConfig";
 import { authHeader, handleResponse } from '@/utils/authentication';
@@ -82,6 +83,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
+        FormFooter,
         InputElement,
     },
     data() {

webapp/src/views/NtpAdminView.vue

@@ -52,7 +52,7 @@
                     </div>
                 </div>
             </CardElement>
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
+            <FormFooter @reload="getNtpConfig"/>
         </form>
 
         <CardElement :text="$t('ntpadmin.ManualTimeSynchronization')" textVariant="text-bg-primary" add-space>
@@ -79,6 +79,7 @@ import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
 import InputElement from '@/components/InputElement.vue';
+import FormFooter from '@/components/FormFooter.vue';
 import type { NtpConfig } from "@/types/NtpConfig";
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -89,6 +90,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
+        FormFooter,
         InputElement,
         BIconInfoCircle,
     },

webapp/src/views/SecurityAdminView.vue

@@ -23,7 +23,7 @@
                               type="checkbox" wide/>
             </CardElement>
 
-            <button type="submit" class="btn btn-primary mb-3">{{ $t('securityadmin.Save') }}</button>
+            <FormFooter @reload="getPasswordConfig"/>
         </form>
     </BasePage>
 </template>
@@ -32,6 +32,7 @@
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
+import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import type { SecurityConfig } from '@/types/SecurityConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
@@ -42,6 +43,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
+        FormFooter,
         InputElement,
     },
     data() {