From 20083ecba5ef0d32312ff2d3582d7309a85ec1d1 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sat, 24 Dec 2022 11:15:47 +0100
Subject: [PATCH] webapp: introduced InputElement and replace inputs with it

Thanks to @noicet
---
 webapp/src/components/InputElement.vue | 112 +++++++++++
 webapp/src/views/DtuAdminView.vue      |  35 ++--
 webapp/src/views/MqttAdminView.vue     | 259 +++++++------------------
 webapp/src/views/NetworkAdminView.vue  | 116 ++++-------
 webapp/src/views/NtpAdminView.vue      |  55 ++----
 webapp/src/views/SecurityAdminView.vue |  43 ++--
 6 files changed, 257 insertions(+), 363 deletions(-)
 create mode 100644 webapp/src/components/InputElement.vue

diff --git a/webapp/src/components/InputElement.vue b/webapp/src/components/InputElement.vue
new file mode 100644
index 00000000..84ac1704
--- /dev/null
+++ b/webapp/src/components/InputElement.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="row mb-3">
+        <label
+            :for="inputId"
+            :class="[ wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label' ]"
+        >
+            {{ label }}
+            <BIconInfoCircle v-if="tooltip !== undefined" v-tooltip :title="tooltip" />
+        </label>
+        <div :class="[ wide ? 'col-sm-8' : 'col-sm-10' ]">
+            <div v-if="!isTextarea"
+                 :class="{'form-check form-switch': isCheckbox,
+                          'input-group': postfix || prefix }"
+            >
+                 <span v-if="prefix"
+                       class="input-group-text"
+                       :id="descriptionId"
+                 >
+                    {{ prefix }}
+                </span>
+                <input
+                    v-model="model"
+                    :class="[ isCheckbox ? 'form-check-input' : 'form-control' ]"
+                    :id="inputId"
+                    :placeholder="placeholder"
+                    :type="type"
+                    :maxlength="maxlength"
+                    :min="min"
+                    :max="max"
+                    :disabled="disabled"
+                    :aria-describedby="descriptionId"
+                />
+                <span v-if="postfix"
+                      class="input-group-text"
+                      :id="descriptionId"
+                >
+                    {{ postfix }}
+                </span>
+                <slot/>
+            </div>
+            <div v-else>
+                <textarea
+                    v-model="model"
+                    class="form-control"
+                    :id="inputId"
+                    :maxlength="maxlength"
+                    :rows="rows"
+                    :disabled="disabled"
+                    :placeholder="placeholder"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import {BIconInfoCircle} from 'bootstrap-icons-vue';
+export default defineComponent({
+    components: {
+        BIconInfoCircle,
+    },
+    props: {
+        'modelValue': [String, Number, Boolean, Date],
+        'label': String,
+        'placeholder': String,
+        'type': String,
+        'maxlength': String,
+        'min': String,
+        'max': String,
+        'rows': String,
+        'disabled': Boolean,
+        'postfix': String,
+        'prefix': String,
+        'wide': Boolean,
+        'tooltip': String,
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        model: {
+            get(): any {
+                if (this.type === 'checkbox') return !!this.modelValue;
+                return this.modelValue;
+            },
+            set(value: any) {
+                this.$emit('update:modelValue', value);
+            },
+        },
+        uniqueLabel() {
+            // normally, the label is sufficient to build a unique id
+            // if two inputs with the same label text on one page is required,
+            // use a unique placeholder even if it is a checkbox
+            return this.label?.replace(/[^A-Za-z0-9]/g, '') +
+                (this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '');
+        },
+        inputId() {
+            return 'input' + this.uniqueLabel
+        },
+        descriptionId() {
+            return 'desc' + this.uniqueLabel;
+        },
+        isTextarea() {
+            return this.type === 'textarea';
+        },
+        isCheckbox() {
+            return this.type === 'checkbox';
+        }
+    },
+});
+</script>
\ No newline at end of file
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index bba4ab96..f87f9e78 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -8,31 +8,16 @@
             <div class="card">
                 <div class="card-header text-bg-primary">{{ $t('dtuadmin.DtuConfiguration') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputDtuSerial" class="col-sm-2 col-form-label">{{ $t('dtuadmin.Serial') }}
-                            <BIconInfoCircle v-tooltip :title="$t('dtuadmin.SerialHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="number" class="form-control" id="inputDtuSerial" min="1" max="199999999999"
-                                v-model="dtuConfigList.dtu_serial" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputPollInterval" class="col-sm-2 col-form-label">
-                            {{ $t('dtuadmin.PollInterval') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
-                                    v-model="dtuConfigList.dtu_pollinterval"
-                                    aria-describedby="pollIntervalDescription" />
-                                <span class="input-group-text" id="pollIntervalDescription">
-                                    {{ $t('dtuadmin.Seconds') }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('dtuadmin.Serial')"
+                                  v-model="dtuConfigList.dtu_serial"
+                                  type="number" min="1" max="199999999999"
+                                  :tooltip="$t('dtuadmin.SerialHint')"/>
+
+                    <InputElement :label="$t('dtuadmin.PollInterval')"
+                                  v-model="dtuConfigList.dtu_pollinterval"
+                                  type="number" min="1" max="86400"
+                                  :postfix="$t('dtuadmin.Seconds')"/>
 
                     <div class="row mb-3">
                         <label for="inputTimezone" class="col-sm-2 col-form-label">
@@ -58,6 +43,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import { handleResponse, authHeader } from '@/utils/authentication';
 import type { DtuConfig } from "@/types/DtuConfig";
 import {
@@ -69,6 +55,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         BIconInfoCircle,
+        InputElement,
     },
     data() {
         return {
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 3af3d10f..ffb01a7c 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -8,29 +8,15 @@
             <div class="card">
                 <div class="card-header text-bg-primary">{{ $t('mqttadmin.MqttConfiguration') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label class="col-sm-4 form-check-label" for="inputMqtt">
-                            {{ $t('mqttadmin.EnableMqtt') }}
-                        </label>
-                        <div class="col-sm-8">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputMqtt"
-                                    v-model="mqttConfigList.mqtt_enabled" />
-                            </div>
-                        </div>
-                    </div>
 
-                    <div class="row mb-3" v-show="mqttConfigList.mqtt_enabled">
-                        <label class="col-sm-4 form-check-label" for="inputMqttHass">
-                            {{ $t('mqttadmin.EnableHass') }}
-                        </label>
-                        <div class="col-sm-8">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputMqttHass"
-                                    v-model="mqttConfigList.mqtt_hass_enabled" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.EnableMqtt')"
+                                  v-model="mqttConfigList.mqtt_enabled"
+                                  type="checkbox" wide/>
+
+                    <InputElement v-show="mqttConfigList.mqtt_enabled"
+                                  :label="$t('mqttadmin.EnableHass')"
+                                  v-model="mqttConfigList.mqtt_hass_enabled"
+                                  type="checkbox" wide/>
                 </div>
             </div>
 
@@ -39,201 +25,92 @@
                     {{ $t('mqttadmin.MqttBrokerParameter') }}
                 </div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputHostname" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.Hostname') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputHostname" maxlength="128"
-                                :placeholder="$t('mqttadmin.HostnameHint')" v-model="mqttConfigList.mqtt_hostname" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputPort" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.Port') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="number" class="form-control" id="inputPort" min="1" max="65535"
-                                v-model="mqttConfigList.mqtt_port" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.Hostname')"
+                                    v-model="mqttConfigList.mqtt_hostname"
+                                    type="text" maxlength="128"
+                                    :placeholder="$t('mqttadmin.HostnameHint')"/>
 
-                    <div class="row mb-3">
-                        <label for="inputUsername" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.Username') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputUsername" maxlength="64"
-                                :placeholder="$t('mqttadmin.UsernameHint')" v-model="mqttConfigList.mqtt_username" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.Port')"
+                                  v-model="mqttConfigList.mqtt_port"
+                                  type="number" min="1" max="65535"/>
 
-                    <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.Password') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="password" class="form-control" id="inputPassword" maxlength="64"
-                                :placeholder="$t('mqttadmin.PasswordHint')" v-model="mqttConfigList.mqtt_password" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.Username')"
+                                  v-model="mqttConfigList.mqtt_username"
+                                  type="text" maxlength="64"
+                                  :placeholder="$t('mqttadmin.UsernameHint')"/>
 
-                    <div class="row mb-3">
-                        <label for="inputTopic" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.BaseTopic') }}</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputTopic" maxlength="32"
-                                :placeholder="$t('mqttadmin.BaseTopicHint')" v-model="mqttConfigList.mqtt_topic" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.Password')"
+                                  v-model="mqttConfigList.mqtt_password"
+                                  type="password" maxlength="64"
+                                  :placeholder="$t('mqttadmin.PasswordHint')"/>
 
-                    <div class="row mb-3">
-                        <label for="inputPublishInterval" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.PublishInterval') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
-                                    placeholder="Publish Interval in Seconds"
-                                    v-model="mqttConfigList.mqtt_publish_interval"
-                                    aria-describedby="publishIntervalDescription" />
-                                <span class="input-group-text" id="publishIntervalDescription">
-                                    {{ $t('mqttadmin.Seconds') }}</span>
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.BaseTopic')"
+                                  v-model="mqttConfigList.mqtt_topic"
+                                  type="text" maxlength="32"
+                                  :placeholder="$t('mqttadmin.BaseTopicHint')"/>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputRetain">
-                            {{ $t('mqttadmin.EnableRetain') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputRetain"
-                                    v-model="mqttConfigList.mqtt_retain" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.PublishInterval')"
+                                  v-model="mqttConfigList.mqtt_publish_interval"
+                                  type="number" min="5" max="86400"
+                                  :postfix="$t('mqttadmin.Seconds')"/>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputTls">
-                            {{ $t('mqttadmin.EnableTls') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputTls"
-                                    v-model="mqttConfigList.mqtt_tls" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.EnableRetain')"
+                                  v-model="mqttConfigList.mqtt_retain"
+                                  type="checkbox"/>
 
-                    <div class="row mb-3" v-show="mqttConfigList.mqtt_tls">
-                        <label for="inputCert" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.RootCa') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <textarea class="form-control" id="inputCert" maxlength="2048" rows="10"
-                                v-model="mqttConfigList.mqtt_root_ca_cert">
-                            </textarea>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.EnableTls')"
+                                  v-model="mqttConfigList.mqtt_tls"
+                                  type="checkbox"/>
 
+                    <InputElement v-show="mqttConfigList.mqtt_tls"
+                                  :label="$t('mqttadmin.RootCa')"
+                                  v-model="mqttConfigList.mqtt_root_ca_cert"
+                                  type="textarea" maxlength="2048" rows="10"/>
                 </div>
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
                 <div class="card-header text-bg-primary">{{ $t('mqttadmin.LwtParameters') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputLwtTopic" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.LwtTopic') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <span class="input-group-text" id="basic-addon3">
-                                    {{ mqttConfigList.mqtt_topic }}
-                                </span>
-                                <input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
-                                    :placeholder="$t('mqttadmin.LwtTopicHint')" aria-describedby="basic-addon3"
-                                    v-model="mqttConfigList.mqtt_lwt_topic" />
-                            </div>
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputLwtOnline" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.LwtOnline') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
-                                :placeholder="$t('mqttadmin.LwtOnlineHint')" v-model="mqttConfigList.mqtt_lwt_online" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.LwtTopic')"
+                                  v-model="mqttConfigList.mqtt_lwt_topic"
+                                  type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic"
+                                  :placeholder="$t('mqttadmin.LwtTopicHint')"/>
 
-                    <div class="row mb-3">
-                        <label for="inputLwtOffline" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.LwtOffline') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
-                                :placeholder="$t('mqttadmin.LwtOfflineHint')"
-                                v-model="mqttConfigList.mqtt_lwt_offline" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.LwtOnline')"
+                                  v-model="mqttConfigList.mqtt_lwt_online"
+                                  type="text" maxlength="20"
+                                  :placeholder="$t('mqttadmin.LwtOnlineHint')"/>
+
+                    <InputElement :label="$t('mqttadmin.LwtOffline')"
+                                  v-model="mqttConfigList.mqtt_lwt_offline"
+                                  type="text" maxlength="20"
+                                  :placeholder="$t('mqttadmin.LwtOfflineHint')"/>
                 </div>
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
                 <div class="card-header text-bg-primary">{{ $t('mqttadmin.HassParameters') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputHassTopic" class="col-sm-2 col-form-label">
-                            {{ $t('mqttadmin.HassPrefixTopic') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputHassTopic" maxlength="32"
-                                :placeholder="$t('mqttadmin.HassPrefixTopicHint')"
-                                v-model="mqttConfigList.mqtt_hass_topic" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputHassRetain">
-                            {{ $t('mqttadmin.HassRetain') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputHassRetain"
-                                    v-model="mqttConfigList.mqtt_hass_retain" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.HassPrefixTopic')"
+                                  v-model="mqttConfigList.mqtt_hass_topic"
+                                  type="text" maxlength="32"
+                                  :placeholder="$t('mqttadmin.HassPrefixTopicHint')"/>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputHassExpire">
-                            {{ $t('mqttadmin.HassExpire') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputHassExpire"
-                                    v-model="mqttConfigList.mqtt_hass_expire" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.HassRetain')"
+                                  v-model="mqttConfigList.mqtt_hass_retain"
+                                  type="checkbox"/>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputIndividualPanels">
-                            {{ $t('mqttadmin.HassIndividual') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputIndividualPanels"
-                                    v-model="mqttConfigList.mqtt_hass_individualpanels" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('mqttadmin.HassExpire')"
+                                  v-model="mqttConfigList.mqtt_hass_expire"
+                                  type="checkbox"/>
 
+                    <InputElement :label="$t('mqttadmin.HassIndividual')"
+                                  v-model="mqttConfigList.mqtt_hass_individualpanels"
+                                  type="checkbox"/>
                 </div>
             </div>
 
@@ -246,6 +123,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import { handleResponse, authHeader } from '@/utils/authentication';
 import type { MqttConfig } from "@/types/MqttConfig";
 
@@ -253,6 +131,7 @@ export default defineComponent({
     components: {
         BasePage,
         BootstrapAlert,
+        InputElement,
     },
     data() {
         return {
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 5293adb2..e0a7465e 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -8,50 +8,25 @@
             <div class="card">
                 <div class="card-header text-bg-primary">{{ $t('networkadmin.WifiConfiguration') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputSSID" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.WifiSsid') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputSSID" maxlength="32"
-                                v-model="networkConfigList.ssid" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.WifiPassword') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="password" class="form-control" id="inputPassword" maxlength="64"
-                                v-model="networkConfigList.password" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.WifiSsid')"
+                                  v-model="networkConfigList.ssid"
+                                  type="text" maxlength="32"/>
 
-                    <div class="row mb-3">
-                        <label for="inputHostname" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.Hostname') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputHostname" maxlength="32"
-                                v-model="networkConfigList.hostname" />
+                    <InputElement :label="$t('networkadmin.WifiPassword')"
+                                  v-model="networkConfigList.password"
+                                  type="password" maxlength="64"/>
 
-                            <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')">
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.Hostname')"
+                                  v-model="networkConfigList.hostname"
+                                  type="text" maxlength="32"
+                    >
+                        <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
+                    </InputElement>
 
-                    <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputDHCP">
-                            {{ $t('networkadmin.EnableDhcp') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputDHCP"
-                                    v-model="networkConfigList.dhcp" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.EnableDhcp')"
+                                  v-model="networkConfigList.dhcp"
+                                  type="checkbox"/>
                 </div>
             </div>
 
@@ -60,53 +35,26 @@
                     {{ $t('networkadmin.StaticIpConfiguration') }}
                 </div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputIP" class="col-sm-2 col-form-label">{{ $t('networkadmin.IpAddress') }}</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputIP" maxlength="32"
-                                v-model="networkConfigList.ipaddress" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputNetmask" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.Netmask') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputNetmask" maxlength="32"
-                                v-model="networkConfigList.netmask" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.IpAddress')"
+                                  v-model="networkConfigList.ipaddress"
+                                  type="text" maxlength="32"/>
 
-                    <div class="row mb-3">
-                        <label for="inputGateway" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.DefaultGateway') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputGateway" maxlength="32"
-                                v-model="networkConfigList.gateway" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.Netmask')"
+                                  v-model="networkConfigList.netmask"
+                                  type="text" maxlength="32"/>
 
-                    <div class="row mb-3">
-                        <label for="inputDNS1" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.Dns', { num: 1 }) }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputDNS1" maxlength="32"
-                                v-model="networkConfigList.dns1" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.DefaultGateway')"
+                                  v-model="networkConfigList.gateway"
+                                  type="text" maxlength="32"/>
 
-                    <div class="row mb-3">
-                        <label for="inputDNS2" class="col-sm-2 col-form-label">
-                            {{ $t('networkadmin.Dns', { num: 2 }) }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputDNS2" maxlength="32"
-                                v-model="networkConfigList.dns2" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('networkadmin.Dns', { num: 1 })"
+                                  v-model="networkConfigList.dns1"
+                                  type="text" maxlength="32"/>
+
+                    <InputElement :label="$t('networkadmin.Dns', { num: 2 })"
+                                  v-model="networkConfigList.dns2"
+                                  type="text" maxlength="32"/>
                 </div>
             </div>
             <button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
@@ -118,6 +66,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import { handleResponse, authHeader } from '@/utils/authentication';
 import type { NetworkConfig } from "@/types/NetworkkConfig";
 
@@ -125,6 +74,7 @@ export default defineComponent({
     components: {
         BasePage,
         BootstrapAlert,
+        InputElement,
     },
     data() {
         return {
diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue
index dbde68ce..85e599ef 100644
--- a/webapp/src/views/NtpAdminView.vue
+++ b/webapp/src/views/NtpAdminView.vue
@@ -8,16 +8,11 @@
             <div class="card">
                 <div class="card-header text-bg-primary">{{ $t('ntpadmin.NtpConfiguration') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputNtpServer" class="col-sm-2 col-form-label">
-                            {{ $t('ntpadmin.TimeServer') }}
-                            <BIconInfoCircle v-tooltip :title="$t('ntpadmin.TimeServerHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
-                                placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
-                        </div>
-                    </div>
+
+                    <InputElement :label="$t('ntpadmin.TimeServer')"
+                                  v-model="ntpConfigList.ntp_server"
+                                  type="text" maxlength="32"
+                                  :tooltip="$t('ntpadmin.TimeServerHint')"/>
 
                     <div class="row mb-3">
                         <label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.Timezone') }}</label>
@@ -31,15 +26,9 @@
                         </div>
                     </div>
 
-                    <div class="row mb-3">
-                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">
-                            {{ $t('ntpadmin.TimezoneConfig') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
-                                placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('ntpadmin.TimezoneConfig')"
+                                  v-model="ntpConfigList.ntp_timezone"
+                                  type="text" maxlength="32" disabled/>
                 </div>
             </div>
             <button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
@@ -48,29 +37,21 @@
         <div class="card">
             <div class="card-header text-bg-primary">{{ $t('ntpadmin.ManualTimeSynchronization') }}</div>
             <div class="card-body">
-                <div class="row mb-3">
-                    <label for="currentMcuTime" class="col-sm-2 col-form-label">
-                        {{ $t('ntpadmin.CurrentOpenDtuTime') }}
-                    </label>
-                    <div class="col-sm-10">
-                        <input type="text" class="form-control" id="currentMcuTime" v-model="mcuTime" disabled />
-                    </div>
-                </div>
-                <div class="row mb-3">
-                    <label for="currentLocalTime" class="col-sm-2 col-form-label">
-                        {{ $t('ntpadmin.CurrentLocalTime') }}
-                    </label>
-                    <div class="col-sm-10">
-                        <input type="text" class="form-control" id="currentLocalTime" v-model="localTime" disabled />
-                    </div>
-                </div>
+
+                <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')"
+                              v-model="mcuTime"
+                              type="text" disabled/>
+
+                <InputElement :label="$t('ntpadmin.CurrentLocalTime')"
+                              v-model="localTime"
+                              type="text" disabled/>
+
                 <div class="text-center mb-3">
                     <button type="button" class="btn btn-danger" @click="setCurrentTime()">
                         {{ $t('ntpadmin.SynchronizeTime') }}
                     </button>
                 </div>
                 <div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div>
-
             </div>
         </div>
     </BasePage>
@@ -80,6 +61,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import { handleResponse, authHeader } from '@/utils/authentication';
 import type { NtpConfig } from "@/types/NtpConfig";
 import {
@@ -91,6 +73,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         BIconInfoCircle,
+        InputElement,
     },
     data() {
         return {
diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue
index 9ae0dc71..d106d03c 100644
--- a/webapp/src/views/SecurityAdminView.vue
+++ b/webapp/src/views/SecurityAdminView.vue
@@ -8,45 +8,26 @@
             <div class="card">
                 <div class="card-header text-bg-primary">{{ $t('securityadmin.AdminPassword') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">
-                            {{ $t('securityadmin.Password') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="password" class="form-control" id="inputPassword" maxlength="64"
-                                placeholder="Password" v-model="securityConfigList.password" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputPasswordRepeat" class="col-sm-2 col-form-label">
-                            {{ $t('securityadmin.RepeatPassword') }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input type="password" class="form-control" id="inputPasswordRepeat" maxlength="64"
-                                placeholder="Password" v-model="passwordRepeat" />
-                        </div>
-                    </div>
+                    <InputElement :label="$t('securityadmin.Password')"
+                                  v-model="securityConfigList.password"
+                                  type="password" maxlength="64"/>
+
+                    <InputElement :label="$t('securityadmin.RepeatPassword')"
+                                  v-model="passwordRepeat"
+                                  type="password" maxlength="64"/>
 
                     <div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
-
                 </div>
             </div>
 
             <div class="card mt-5">
                 <div class="card-header text-bg-primary">{{ $t('securityadmin.Permissions') }}</div>
                 <div class="card-body">
-                    <div class="row mb-3">
-                        <label class="col-sm-6 form-check-label" for="inputReadonly">
-                            {{ $t('securityadmin.ReadOnly') }}
-                        </label>
-                        <div class="col-sm-6">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="inputReadonly"
-                                    v-model="securityConfigList.allow_readonly" />
-                            </div>
-                        </div>
-                    </div>
+
+                    <InputElement :label="$t('securityadmin.ReadOnly')"
+                                  v-model="securityConfigList.allow_readonly"
+                                  type="checkbox" wide/>
                 </div>
             </div>
 
@@ -59,6 +40,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import { handleResponse, authHeader } from '@/utils/authentication';
 import type { SecurityConfig } from '@/types/SecurityConfig';
 
@@ -66,6 +48,7 @@ export default defineComponent({
     components: {
         BasePage,
         BootstrapAlert,
+        InputElement,
     },
     data() {
         return {