english translation done, german started

frontend/src/components/InterfaceEditModal.vue

@@ -414,86 +414,86 @@ async function del() {
           <fieldset>
             <legend class="mt-4">{{ $t('modals.interface-edit.header-network') }}</legend>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.endpoint') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.endpoint.label') }}</label>
-              <input v-model="formData.PeerDefEndpoint" class="form-control" placeholder="Endpoint Addresses" type="text">
+              <input v-model="formData.PeerDefEndpoint" class="form-control" :placeholder="$t('modals.interface-edit.defaults.endpoint.placeholder')" type="text">
-              <small class="form-text text-muted">The endpoint address that peers will connect to.</small>
+              <small class="form-text text-muted">{{ $t('modals.interface-edit.defaults.endpoint.description') }}</small>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.networks') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.networks.label') }}</label>
               <vue3-tags-input class="form-control" :tags="formData.PeerDefNetwork"
-                               placeholder="Network Addresses"
+                               :placeholder="$t('modals.interface-edit.defaults.networks.placeholder')"
                                :add-tag-on-keys="[13, 188, 32, 9]"
                                :validate="validateCIDR"
                                @on-tags-changed="handleChangePeerDefNetwork"/>
-              <small class="form-text text-muted">Peers will get IP addresses from those subnets.</small>
+              <small class="form-text text-muted">{{ $t('modals.interface-edit.defaults.networks.description') }}</small>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.allowedips') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.allowed-ip.label') }}</label>
               <vue3-tags-input class="form-control" :tags="formData.PeerDefAllowedIPs"
-                               placeholder="Default Allowed IP Addresses"
+                               :placeholder="$t('modals.interface-edit.defaults.allowed-ip.placeholder')"
                                :add-tag-on-keys="[13, 188, 32, 9]"
                                :validate="validateCIDR"
                                @on-tags-changed="handleChangePeerDefAllowedIPs"/>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.dns') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns.label') }}</label>
               <vue3-tags-input class="form-control" :tags="formData.PeerDefDns"
-                               placeholder="DNS Servers"
+                               :placeholder="$t('modals.interface-edit.dns.placeholder')"
                                :add-tag-on-keys="[13, 188, 32, 9]"
                                :validate="validateIP"
                                @on-tags-changed="handleChangePeerDefDns"/>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.dnssearch') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns-search.label') }}</label>
               <vue3-tags-input class="form-control" :tags="formData.PeerDefDnsSearch"
-                               placeholder="DNS Search prefix"
+                               :placeholder="$t('modals.interface-edit.dns-search.placeholder')"
                                :add-tag-on-keys="[13, 188, 32, 9]"
                                :validate="validateDomain"
                                @on-tags-changed="handleChangePeerDefDnsSearch"/>
             </div>
             <div class="row">
               <div class="form-group col-md-6">
-                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.mtu') }}</label>
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.mtu.label') }}</label>
-                <input v-model="formData.PeerDefMtu" class="form-control" placeholder="Client MTU (0 = default)" type="number">
+                <input v-model="formData.PeerDefMtu" class="form-control" :placeholder="$t('modals.interface-edit.defaults.mtu.placeholder')" type="number">
               </div>
               <div class="form-group col-md-6">
-                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.firewallmark') }}</label>
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.firewall-mark.label') }}</label>
-                <input v-model="formData.PeerDefFirewallMark" class="form-control" placeholder="Firewall Mark (0 = default)" type="number">
+                <input v-model="formData.PeerDefFirewallMark" class="form-control" :placeholder="$t('modals.interface-edit.firewall-mark.placeholder')" type="number">
               </div>
             </div>
             <div class="row">
               <div class="form-group col-md-6">
-                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.routingtable') }}</label>
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.routing-table.label') }}</label>
-                <input v-model="formData.PeerDefRoutingTable" class="form-control" placeholder="Routing Table (0 = default)" type="number">
+                <input v-model="formData.PeerDefRoutingTable" class="form-control" :placeholder="$t('modals.interface-edit.routing-table.placeholder')" type="number">
               </div>
               <div class="form-group col-md-6">
-                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.keepalive') }}</label>
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.keep-alive.label') }}</label>
-                <input v-model="formData.PeerDefPersistentKeepalive" class="form-control" placeholder="Persistent Keepalive (0 = default)" type="number">
+                <input v-model="formData.PeerDefPersistentKeepalive" class="form-control" :placeholder="$t('modals.interface-edit.defaults.keep-alive.placeholder')" type="number">
               </div>
             </div>
           </fieldset>
           <fieldset>
             <legend class="mt-4">{{ $t('modals.interface-edit.header-peer-hooks') }}</legend>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.preup') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-up.label') }}</label>
-              <textarea v-model="formData.PeerDefPreUp" class="form-control" rows="2"></textarea>
+              <textarea v-model="formData.PeerDefPreUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-up.placeholder')"></textarea>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.postup') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-up.label') }}</label>
-              <textarea v-model="formData.PeerDefPostUp" class="form-control" rows="2"></textarea>
+              <textarea v-model="formData.PeerDefPostUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-up.placeholder')"></textarea>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.predown') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-down.label') }}</label>
-              <textarea v-model="formData.PeerDefPreDown" class="form-control" rows="2"></textarea>
+              <textarea v-model="formData.PeerDefPreDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-down.placeholder')"></textarea>
             </div>
             <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.postdown') }}</label>
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-down.label') }}</label>
-              <textarea v-model="formData.PeerDefPostDown" class="form-control" rows="2"></textarea>
+              <textarea v-model="formData.PeerDefPostDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-down.placeholder')"></textarea>
             </div>
           </fieldset>
           <fieldset v-if="props.interfaceId!=='#NEW#'" class="text-end">
             <hr class="mt-4">
-            <button class="btn btn-primary me-1" type="button" @click.prevent="applyPeerDefaults">Apply Peer Defaults</button>
+            <button class="btn btn-primary me-1" type="button" @click.prevent="applyPeerDefaults">{{ $t('modals.interface-edit.button-apply-defaults') }}</button>
           </fieldset>
         </div>
       </div>

frontend/src/components/PeerEditModal.vue

@@ -43,14 +43,14 @@ const title = computed(() => {
   }
   if (selectedInterface.value.Mode === "server") {
     if (selectedPeer.value) {
-      return t("interfaces.peer.edit") + ": " + selectedPeer.value.Name
+      return t("modals.peer-edit.headline-edit-peer") + " " + selectedPeer.value.Identifier
     }
-    return t("interfaces.peer.new")
+    return t("modals.peer-edit.headline-new-peer")
   } else {
     if (selectedPeer.value) {
-      return t("interfaces.endpoint.edit") + ": " + selectedPeer.value.Name
+      return t("modals.peer-edit.headline-edit-endpoint") + " " + selectedPeer.value.Identifier
     }
-    return t("interfaces.endpoint.new")
+    return t("modals.peer-edit.headline-new-endpoint")
   }
 })
 
@@ -291,107 +291,127 @@ async function del() {
   <Modal :title="title" :visible="visible" @close="close">
     <template #default>
       <fieldset>
-        <legend class="mt-4">General</legend>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-general') }}</legend>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.displayname') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.display-name.label') }}</label>
-          <input type="text" class="form-control" placeholder="A descriptive name of the peer" v-model="formData.DisplayName">
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.display-name.placeholder')" v-model="formData.DisplayName">
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.linkeduser') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.linked-user.label') }}</label>
-          <input type="text" class="form-control" placeholder="Linked user" v-model="formData.UserIdentifier">
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.linked-user.placeholder')" v-model="formData.UserIdentifier">
         </div>
       </fieldset>
       <fieldset>
-        <legend class="mt-4">Cryptography</legend>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-crypto') }}</legend>
         <div class="form-group" v-if="selectedInterface.Mode==='server'">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.privatekey') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.private-key.label') }}</label>
-          <input type="email" class="form-control" placeholder="The private key" required v-model="formData.PrivateKey">
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.private-key.placeholder')" required v-model="formData.PrivateKey">
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.publickey') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.public-key.label') }}</label>
-          <input type="email" class="form-control" placeholder="The public key" required v-model="formData.PublicKey">
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.public-key.placeholder')" required v-model="formData.PublicKey">
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.presharedkey') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.preshared-key.label') }}</label>
-          <input type="email" class="form-control" placeholder="Optional pre-shared key" v-model="formData.PresharedKey">
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.preshared-key.placeholder')" v-model="formData.PresharedKey">
         </div>
         <div class="form-group" v-if="formData.Mode==='client'">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.endpointpublickey') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.endpoint-public-key.label') }}</label>
-          <input type="text" class="form-control" placeholder="Endpoint Public Key" v-model="formData.EndpointPublicKey.Value">
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.endpoint-public-key.placeholder')" v-model="formData.EndpointPublicKey.Value">
         </div>
       </fieldset>
       <fieldset>
-        <legend class="mt-4">Networking</legend>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-network') }}</legend>
         <div class="form-group" v-if="selectedInterface.Mode==='client'">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.endpoint') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.endpoint.label') }}</label>
-          <input type="text" class="form-control" placeholder="Endpoint Address" v-model="formData.Endpoint.Value">
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.endpoint.placeholder')" v-model="formData.Endpoint.Value">
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.ips') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.ip.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.Addresses"
-                           placeholder="IP Addresses (CIDR format)"
+                           :placeholder="$t('modals.peer-edit.ip.placeholder')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            :validate="validateCIDR"
                            @on-tags-changed="handleChangeAddresses"/>
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.allowedips') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.allowed-ip.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.AllowedIPs.Value"
-                           placeholder="Allowed IP Addresses (CIDR format)"
+                           :placeholder="$t('modals.peer-edit.allowed-ip.placeholder')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            :validate="validateCIDR"
                            @on-tags-changed="handleChangeAllowedIPs"/>
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.extraallowedips') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.extra-allowed-ip.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.ExtraAllowedIPs"
-                           placeholder="Extra allowed IP's (Server Sided)"
+                           :placeholder="$t('modals.peer-edit.extra-allowed-ip.placeholder')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            :validate="validateCIDR"
                            @on-tags-changed="handleChangeExtraAllowedIPs"/>
+          <small class="form-text text-muted">{{ $t('modals.peer-edit.extra-allowed-ip.description') }}</small>
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.dns') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.dns.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.Dns.Value"
-                           placeholder="DNS Servers"
+                           :placeholder="$t('modals.peer-edit.dns.placeholder')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            :validate="validateIP"
                            @on-tags-changed="handleChangeDns"/>
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peeredit.dnssearch') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.dns-search.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.DnsSearch.Value"
-                           placeholder="DNS Search prefixes"
+                           :placeholder="$t('modals.peer-edit.dns-search.label')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            :validate="validateDomain"
                            @on-tags-changed="handleChangeDnsSearch"/>
         </div>
         <div class="row">
           <div class="form-group col-md-6">
-            <label class="form-label mt-4">{{ $t('modals.peeredit.persistendkeepalive') }}</label>
+            <label class="form-label mt-4">{{ $t('modals.peer-edit.keep-alive.label') }}</label>
-            <input type="number" class="form-control" placeholder="Persistent Keepalive (0 = off)" v-model="formData.PersistentKeepalive.Value">
+            <input type="number" class="form-control" :placeholder="$t('modals.peer-edit.keep-alive.label')" v-model="formData.PersistentKeepalive.Value">
           </div>
           <div class="form-group col-md-6">
-            <label class="form-label mt-4">{{ $t('modals.peeredit.mtu') }}</label>
+            <label class="form-label mt-4">{{ $t('modals.peer-edit.mtu.label') }}</label>
-            <input type="number" class="form-control" placeholder="Client MTU (0 = default)" v-model="formData.Mtu.Value">
+            <input type="number" class="form-control" :placeholder="$t('modals.peer-edit.mtu.label')" v-model="formData.Mtu.Value">
           </div>
         </div>
       </fieldset>
       <fieldset>
-        <legend class="mt-4">State</legend>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-hooks') }}</legend>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.pre-up.label') }}</label>
+          <textarea v-model="formData.PreUp.Value" class="form-control" rows="2" :placeholder="$t('modals.peer-edit.pre-up.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.post-up.label') }}</label>
+          <textarea v-model="formData.PostUp.Value" class="form-control" rows="2" :placeholder="$t('modals.peer-edit.post-up.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.pre-down.label') }}</label>
+          <textarea v-model="formData.PreDown.Value" class="form-control" rows="2" :placeholder="$t('modals.peer-edit.pre-down.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.post-down.label') }}</label>
+          <textarea v-model="formData.PostDown.Value" class="form-control" rows="2" :placeholder="$t('modals.peer-edit.post-down.placeholder')"></textarea>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-state') }}</legend>
         <div class="row">
           <div class="form-group col-md-6">
             <div class="form-check form-switch">
               <input class="form-check-input" type="checkbox" v-model="formData.Disabled">
-              <label class="form-check-label" >Disabled</label>
+              <label class="form-check-label" >{{ $t('modals.peer-edit.disabled.label') }}</label>
             </div>
             <div class="form-check form-switch">
               <input class="form-check-input" type="checkbox" v-model="formData.IgnoreGlobalSettings">
-              <label class="form-check-label">Ignore global settings</label>
+              <label class="form-check-label">{{ $t('modals.peer-edit.ignore-global.label') }}</label>
             </div>
           </div>
           <div class="form-group col-md-6">
-            <label class="form-label">{{ $t('modals.peeredit.expiresat') }}</label>
+            <label class="form-label">{{ $t('modals.peer-edit.expires-at.label') }}</label>
             <input type="date" pattern="\d{4}-\d{2}-\d{2}" class="form-control" min="2023-01-01" v-model="formData.ExpiresAt">
           </div>
         </div>
@@ -399,16 +419,13 @@ async function del() {
     </template>
     <template #footer>
       <div class="flex-fill text-start">
-        <button v-if="props.peerId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">Delete</button>
+        <button v-if="props.peerId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">Save</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
-      <button class="btn btn-secondary" type="button" @click.prevent="close">Discard</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>
 </template>
 
 <style>
-.config-qr-img {
-  max-width: 100%;
-}
 </style>

frontend/src/components/PeerMultiCreateModal.vue

@@ -38,6 +38,17 @@ function freshForm() {
 
 const formData = ref(freshForm())
 
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  if (selectedInterface.value.Mode === "server") {
+    return t("modals.peer-multi-create.headline-peer")
+  } else {
+    return t("modals.peer-multi-create.headline-endpoint")
+  }
+})
+
 function close() {
   formData.value = freshForm()
   emit('close')
@@ -73,25 +84,27 @@ async function save() {
 </script>
 
 <template>
-  <Modal :title="t('modals.peerscreate.title')" :visible="visible" @close="close">
+  <Modal :title="title" :visible="visible" @close="close">
     <template #default>
       <fieldset>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peerscreate.identifiers') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-multi-create.identifiers.label') }}</label>
           <vue3-tags-input class="form-control" :tags="formData.Identifiers"
-                           :placeholder="t('modals.peerscreate.identifiers.placeholder')"
+                           :placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
                            :add-tag-on-keys="[13, 188, 32, 9]"
                            @on-tags-changed="handleChangeUserIdentifiers"/>
+          <small class="form-text text-muted">{{ $t('modals.peer-multi-create.identifiers.description') }}</small>
         </div>
         <div class="form-group">
-          <label class="form-label mt-4">{{ $t('modals.peerscreate.peernamesuffix') }}</label>
+          <label class="form-label mt-4">{{ $t('modals.peer-multi-create.prefix.label') }}</label>
-          <input type="text" class="form-control" :placeholder="t('modals.peerscreate.peernamesuffix.placeholder')" v-model="formData.Suffix">
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-multi-create.prefix.placeholder')" v-model="formData.Suffix">
+          <small class="form-text text-muted">{{ $t('modals.peer-multi-create.prefix.description') }}</small>
         </div>
       </fieldset>
     </template>
     <template #footer>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">Create</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
-      <button class="btn btn-secondary" type="button" @click.prevent="close">Cancel</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>
 </template>

frontend/src/lang/translations/de.json

@@ -1,98 +1,489 @@
 {
-  "hello": "Hallo Welt!",
+  "general": {
+    "pagination": {
+      "size": "Anzahl an Elementen",
+      "all": "Alle (langsam)"
+    },
+    "search": {
+      "placeholder": "Suche...",
+      "button": "Suchen"
+    },
+    "select-all": "Alle auswählen",
+    "yes": "Ja",
+    "no": "Nein",
+    "cancel": "Abbrechen",
+    "close": "Schließen",
+    "save": "Speichern",
+    "delete": "Löschen"
+  },
+  "login": {
+    "headline": "Bitte melden Sie sich an",
+    "username": {
+      "label": "Benutzername",
+      "placeholder": "Bitte geben Sie Ihren Benutzernamen ein"
+    },
+    "password": {
+      "label": "Kennwort",
+      "placeholder": "Bitte geben Sie Ihr Passwort ein"
+    },
+    "button": "Anmelden"
+  },
   "menu": {
     "home": "Home",
     "interfaces": "Schnittstellen",
-    "firstname": "Vorname",
+    "users": "Benutzer",
-    "surname": "Nachname",
+    "lang": "Sprache ändern",
+    "profile": "Mein Profil",
     "login": "Anmelden",
-    "logout": "Abmelden",
+    "logout": "Abmelden"
-    "admin": "Verwaltung",
-    "user": "Nutzer",
-    "profile": "Profil",
-    "lang": "Sprache umschalten"
   },
   "home": {
-    "h1": "WireGuard® VPN Portal",
+    "headline": "WireGuard® VPN Portal",
+    "info-headline": "Mehr Informationen",
     "abstract": "WireGuard® ist ein extrem einfaches, aber dennoch schnelles und modernes VPN, das modernste Kryptographie nutzt. Es zielt darauf ab, schneller, einfacher, schlanker und nützlicher als IPsec zu sein, während es die massiven Kopfschmerzen vermeidet. Es soll wesentlich leistungsfähiger sein als OpenVPN.",
-    "info": "Informationen",
     "installation": {
-      "h1": "VPN Installation",
+      "box-header": "WireGuard Installation",
-      "h2": "Installation",
+      "headline": "Installation",
-      "instruct": "Die Installationsanweisungen für die Client-Software finden Sie auf der offiziellen WireGuard-Website.",
+      "content": "Die Installationsanweisungen für die Client-Software finden Sie auf der offiziellen WireGuard-Website.",
       "btn": "Anleitung öffnen"
     },
     "about-wg": {
-      "instruct": "WireGuard® ist ein extrem einfaches, aber schnelles und modernes VPN, das modernste Kryptographie verwendet.",
+      "box-header": "Über WireGuard",
-      "h1": "Über WireGuard",
+      "headline": "Über",
-      "h2": "Über",
+      "content": "WireGuard® ist ein extrem einfaches, aber schnelles und modernes VPN, das modernste Kryptographie verwendet.",
-      "btn": "Details"
+      "button": "Details"
     },
     "about-portal": {
-      "instruct": "WireGuard Portal ist ein einfaches, webbasiertes Konfigurationsportal für WireGuard.",
+      "box-header": "Über WireGuard Portal",
-      "h1": "Über WireGuard Portal",
+      "headline": "WireGuard Portal",
-      "h2": "WireGuard-Portal",
+      "content": "WireGuard Portal ist ein einfaches, webbasiertes Konfigurationsportal für WireGuard.",
-      "btn": "Details"
+      "button": "Details"
     },
     "profiles": {
-      "h1": "VPN Profile",
+      "headline": "VPN Profile",
       "abstract": "Über Ihr Benutzerprofil können Sie auf Ihre persönlichen VPN-Konfigurationen zugreifen und diese herunterladen.",
-      "instruct": "Um alle Ihre konfigurierten Profile zu finden, klicken Sie auf die Schaltfläche unten.",
+      "content": "Um alle Ihre konfigurierten Profile zu finden, klicken Sie auf die Schaltfläche unten.",
-      "btn": "Mein Profil öffnen"
+      "button": "Mein Profil öffnen"
     },
     "admin": {
-      "h1": "Verwaltungsbereich",
+      "headline": "Verwaltungsbereich",
       "abstract": "Im Administrationsbereich können Sie VPN-Zugänge und die Serverschnittstelle sowie die Benutzer, die sich am VPN-Portal anmelden dürfen, verwalten.",
-      "instruct": "Um alle Ihre konfigurierten Profile zu finden, klicken Sie auf die Schaltfläche unten.",
+      "content": "",
-      "btn-1": "Serververwaltung öffnen",
+      "button-admin": "Schnittstellenverwaltung",
-      "btn-2": "Benutzerverwaltung öffnen"
+      "button-user": "Benutzerverwaltung"
     }
   },
   "interfaces": {
-    "h1": "Schnittstellenverwaltung",
+    "headline": "Schnittstellenverwaltung",
-    "h2": "Aktuelle VPN-Geräte",
+    "headline-peers": "Current VPN Peers",
-    "h2-client": "Aktuelle Endpunkte",
+    "headline-endpoints": "Current Endpoints",
-    "tableHeadings": [
+    "no-interface": {
-      "Name",
+      "default-selection": "No Interface available",
-      "Benutzer",
+      "headline": "No interfaces found...",
-      "IP's",
+      "abstract": "Click the plus button above to create a new WireGuard interface."
-      "Endpunkt",
-      "Handschlag"
-    ],
-    "noInterface": {
-      "h1": "Keine Schnittstellen gefunden...",
-      "message": "Klicken Sie auf die Plus-Schaltfläche oben, um eine neue WireGuard-Schnittstelle zu erstellen."
     },
-    "notAvailable": "Keine Schnittstelle verfügbar",
+    "no-peer": {
-    "statusBox": {
+      "headline": "No peers available",
-      "h1": "Schnittstellenstatus für",
+      "abstract": "Currently, there are no peers available for the selected WireGuard interface."
-      "key": "Öffentlicher Schlüssel",
-      "mode": "Modus",
-      "endpoint": "Öffentlicher Endpunkt",
-      "port": "Lauschender Port",
-      "peers": "Aktivierte Zugänge",
-      "totalPeers": "Alle Zugänge",
-      "ip": "IP-Adresse",
-      "allowedIP": "Standardmäßig erlaubte IPs",
-      "dnsServers": "DNS-Server",
-      "mtu": "Vorgegebene MTU",
-      "intervall": "Standard-Keepalive-Intervall"
     },
-    "noPeerSelect": {
+    "table-heading": {
-      "h4": "Keine Zugänge für die ausgewählte Schnittstelle...",
+      "name": "Name",
-      "message": "Klicken Sie auf die Plus-Schaltfläche oben, um eine neue VPN-Schnittstelle zu erstellen."
+      "user": "User",
+      "ip": "IP's",
+      "endpoint": "Endpoint",
+      "status": "Status"
     },
-    "pagination": {
+    "interface": {
-      "size": "Anzahl",
+      "headline": "Interface status for",
-      "all": "Alle (langsam)"
+      "mode": "mode",
-    }
+      "key": "Public Key",
+      "endpoint": "Public Endpoint",
+      "port": "Listening Port",
+      "peers": "Enabled Peers",
+      "total-peers": "Total Peers",
+      "endpoints": "Enabled Endpoints",
+      "total-endpoints": "Total Endpoints",
+      "ip": "IP Address",
+      "default-allowed-ip": "Default allowed IPs",
+      "dns": "DNS Servers",
+      "mtu": "MTU",
+      "default-keep-alive": "Default Keepalive Interval",
+      "button-show-config": "Show configuration",
+      "button-download-config": "Download configuration",
+      "button-store-config": "Store configuration for wg-quick",
+      "button-edit": "Edit interface"
+    },
+    "button-add-interface": "Add Interface",
+    "button-add-peer": "Add Peer",
+    "button-add-peers": "Add Multiple Peers",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer",
+    "peer-disabled": "Peer is disabled, reason:",
+    "peer-expiring": "Peer is expiring at",
+    "peer-connected": "Connected",
+    "peer-not-connected": "Not Connected",
+    "peer-handshake": "Last handshake:"
   },
-  "login": {
+  "users": {
-    "please": "Bitte melden Sie sich an",
+    "headline": "Benutzerverwaltung",
-    "username": "Benutzername",
+    "table-heading": {
-    "userMessage": "Bitte geben Sie Ihren Benutzernamen ein",
+      "id": "ID",
-    "pass": "Kennwort",
+      "email": "E-Mail",
-    "passMessage": "Bitte geben Sie Ihr Passwort ein",
+      "firstname": "Firstname",
-    "btn": "Sign in"
+      "lastname": "Lastname",
+      "source": "Source",
+      "peers": "Peers",
+      "admin": "Admin"
+    },
+    "no-user": {
+      "headline": "No users available",
+      "abstract": "Currently, there are no users registered with WireGuard Portal."
+    },
+    "button-add-user": "Add User",
+    "button-show-user": "Show User",
+    "button-edit-user": "Edit User",
+    "user-disabled": "User is disabled, reason:",
+    "user-locked": "Account is locked, reason:",
+    "admin": "User has administrator privileges",
+    "no-admin": "User has no administrator privileges"
+  },
+  "profile": {
+    "headline": "Meine VPN-Konfigurationen",
+    "table-heading": {
+      "name": "Name",
+      "ip": "IP's",
+      "stats": "Status",
+      "interface": "Server Interface"
+    },
+    "no-peer": {
+      "headline": "No peers available",
+      "abstract": "Currently, there are no peers associated with your user profile."
+    },
+    "peer-connected": "Connected",
+    "button-add-peer": "Add Peer",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer"
+  },
+  "modals": {
+    "user-view": {
+      "headline": "User Account:",
+      "tab-user": "Information",
+      "tab-peers": "Peers",
+      "headline-info": "User Information:",
+      "headline-notes": "Notes:",
+      "email": "E-Mail",
+      "firstname": "Firstname",
+      "lastname": "Lastname",
+      "phone": "Phone number",
+      "department": "Department",
+      "disabled": "Account Disabled",
+      "locked": "Account Locked",
+      "no-peers": "User has no associated peers.",
+      "peers": {
+        "name": "Name",
+        "interface": "Interface",
+        "ip": "IP's"
+      }
+    },
+    "user-edit": {
+      "headline-edit": "Edit user:",
+      "headline-new": "New user",
+      "header-general": "General",
+      "header-personal": "User Information",
+      "header-notes": "Notes",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique user identifier"
+      },
+      "source": {
+        "label": "Source",
+        "placeholder": "The user source"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "A super secret password",
+        "description": "Leave this field blank to keep current password."
+      },
+      "email": {
+        "label": "Email",
+        "placeholder": "The email address"
+      },
+      "phone": {
+        "label": "Phone",
+        "placeholder": "The phone number"
+      },
+      "department": {
+        "label": "Department",
+        "placeholder": "The department"
+      },
+      "firstname": {
+        "label": "Firstname",
+        "placeholder": "Firstname"
+      },
+      "lastname": {
+        "label": "Lastname",
+        "placeholder": "Lastname"
+      },
+      "notes": {
+        "label": "Notes",
+        "placeholder": ""
+      },
+      "disabled": {
+        "label": "Disabled (no WireGuard connection and no login possible)"
+      },
+      "locked": {
+        "label": "Locked (no login possible, WireGuard connections still work)"
+      },
+      "admin": {
+        "label": "Is Admin"
+      }
+    },
+    "interface-view": {
+      "headline": "Config for Interface:"
+    },
+    "interface-edit": {
+      "headline-edit": "Edit Interface:",
+      "headline-new": "New Interface",
+      "tab-interface": "Interface",
+      "tab-peerdef": "Peer Defaults",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Interface Hooks",
+      "header-peer-hooks": "Hooks",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique interface identifier"
+      },
+      "mode": {
+        "label": "Interface Mode",
+        "server": "Server Mode",
+        "client": "Client Mode",
+        "any": "Unknown Mode"
+      },
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the interface"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "listen-port": {
+        "label": "Listen Port",
+        "placeholder": "The listening port"
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The interface MTU (0 = keep default)"
+      },
+      "firewall-mark": {
+        "label": "Firewall Mark",
+        "placeholder": "Firewall mark that is applied to outgoing traffic. (0 = automatic)"
+      },
+      "routing-table": {
+        "label": "Routing Table",
+        "placeholder": "The routing table ID",
+        "description": "Special cases: off = do not manage routes, 0 = automatic"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Interface Disabled"
+      },
+      "save-config": {
+        "label": "Automatically save wg-quick config"
+      },
+      "defaults": {
+        "endpoint": {
+          "label": "Endpoint Address",
+          "placeholder": "Endpoint Address",
+          "description": "The endpoint address that peers will connect to."
+        },
+        "networks": {
+          "label": "IP Networks",
+          "placeholder": "Network Addresses",
+          "description": "Peers will get IP addresses from those subnets."
+        },
+        "allowed-ip": {
+          "label": "Allowed IP Addresses",
+          "placeholder": "Default Allowed IP Addresses"
+        },
+        "mtu": {
+          "label": "MTU",
+          "placeholder": "The client MTU (0 = keep default)"
+        },
+        "keep-alive": {
+          "label": "Keep Alive Interval",
+          "placeholder": "Persistent Keepalive (0 = default)"
+        }
+      },
+
+      "button-apply-defaults": "Apply Peer Defaults"
+    },
+    "peer-view": {
+      "headline-peer": "Peer:",
+      "headline-endpoint": "Endpoint:",
+      "section-info": "Peer Information",
+      "section-status": "Current Status",
+      "section-config": "Configuration",
+      "identifier": "Identifier",
+      "ip": "IP Addresses",
+      "user": "Associated User",
+      "notes": "Notes",
+      "expiry-status": "Expires At",
+      "disabled-status": "Disabled At",
+      "traffic": "Traffic",
+      "connection-status": "Connection Stats",
+      "upload": "Uploaded Bytes (from Server to Peer)",
+      "download": "Downloaded Bytes (from Peer to Server)",
+      "pingable": "Is Pingable",
+      "handshake": "Last Handshake",
+      "connected-since": "Connected since",
+      "endpoint": "Endpoint",
+      "button-download": "Download configuration",
+      "button-email": "Send configuration via E-Mail"
+    },
+    "peer-edit": {
+      "headline-edit-peer": "Edit peer:",
+      "headline-edit-endpoint": "Edit endpoint:",
+      "headline-new-peer": "Create peer",
+      "headline-new-endpoint": "Create endpoint",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Hooks (Executed on Peer)",
+      "header-state": "State",
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the peer"
+      },
+      "linked-user": {
+        "label": "Linked User",
+        "placeholder": "The user account which owns this peer"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "preshared-key": {
+        "label": "Preshared Key",
+        "placeholder": "Optional pre-shared key"
+      },
+      "endpoint-public-key": {
+        "label": "Endpoint public Key",
+        "placeholder": "The public key of the remote endpoint"
+      },
+      "endpoint": {
+        "label": "Endpoint Address",
+        "placeholder": "The address of the remote endpoint"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "allowed-ip": {
+        "label": "Allowed IP Addresses",
+        "placeholder": "Allowed IP Addresses (CIDR format)"
+      },
+      "extra-allowed-ip": {
+        "label": "Extra allowed IP Addresses",
+        "placeholder": "Extra allowed IP's (Server Sided)",
+        "description": "Those IP's will be added on the remote WireGuard interface as allowed IP's."
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "keep-alive": {
+        "label": "Keep Alive Interval",
+        "placeholder": "Persistent Keepalive (0 = default)"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The client MTU (0 = keep default)"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Peer Disabled"
+      },
+      "ignore-global": {
+        "label": "Ignore global settings"
+      },
+      "expires-at": {
+        "label": "Expiry date"
+      }
+    },
+    "peer-multi-create": {
+      "headline-peer": "Create multiple peers",
+      "headline-endpoint": "Create multiple endpoints",
+      "identifiers": {
+        "label": "User Identifiers",
+        "placeholder": "User Identifiers",
+        "description": "A user identifier (the username) for which a peer should be created."
+      },
+      "prefix": {
+        "headline-peer": "Peer:",
+        "headline-endpoint": "Endpoint:",
+        "label": "Display Name Prefix",
+        "placeholder": "The prefix",
+        "description": "A prefix that is added to the peers display name."
+      }
+    }
   }
-}
+}

frontend/src/lang/translations/en.json

@@ -68,7 +68,7 @@
     "admin": {
       "headline": "Administration Area",
       "abstract": "In the administration area you can manage WireGuard peers and the server interface as well as users that are allowed to log in to the WireGuard Portal.",
-      "content": "To find all your configured profiles click on the button below.",
+      "content": "",
       "button-admin": "Open Server Administration",
       "button-user": "Open User Administration"
     }
@@ -306,26 +306,52 @@
       },
       "pre-up": {
         "label": "Pre-Up",
-        "placeholder": "One or multiple bash commands"
+        "placeholder": "One or multiple bash commands separated by ;"
       },
       "post-up": {
         "label": "Post-Up",
-        "placeholder": "One or multiple bash commands"
+        "placeholder": "One or multiple bash commands separated by ;"
       },
       "pre-down": {
         "label": "Pre-Down",
-        "placeholder": "One or multiple bash commands"
+        "placeholder": "One or multiple bash commands separated by ;"
       },
       "post-down": {
         "label": "Post-Down",
-        "placeholder": "One or multiple bash commands"
+        "placeholder": "One or multiple bash commands separated by ;"
       },
       "disabled": {
         "label": "Interface Disabled"
       },
       "save-config": {
         "label": "Automatically save wg-quick config"
-      }
+      },
+      "defaults": {
+        "endpoint": {
+          "label": "Endpoint Address",
+          "placeholder": "Endpoint Address",
+          "description": "The endpoint address that peers will connect to."
+        },
+        "networks": {
+          "label": "IP Networks",
+          "placeholder": "Network Addresses",
+          "description": "Peers will get IP addresses from those subnets."
+        },
+        "allowed-ip": {
+          "label": "Allowed IP Addresses",
+          "placeholder": "Default Allowed IP Addresses"
+        },
+        "mtu": {
+          "label": "MTU",
+          "placeholder": "The client MTU (0 = keep default)"
+        },
+        "keep-alive": {
+          "label": "Keep Alive Interval",
+          "placeholder": "Persistent Keepalive (0 = default)"
+        }
+      },
+
+      "button-apply-defaults": "Apply Peer Defaults"
     },
     "peer-view": {
       "headline-peer": "Peer:",
@@ -351,10 +377,113 @@
       "button-email": "Send configuration via E-Mail"
     },
     "peer-edit": {
-      "privatekey": "Private Key"
+      "headline-edit-peer": "Edit peer:",
+      "headline-edit-endpoint": "Edit endpoint:",
+      "headline-new-peer": "Create peer",
+      "headline-new-endpoint": "Create endpoint",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Hooks (Executed on Peer)",
+      "header-state": "State",
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the peer"
+      },
+      "linked-user": {
+        "label": "Linked User",
+        "placeholder": "The user account which owns this peer"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "preshared-key": {
+        "label": "Preshared Key",
+        "placeholder": "Optional pre-shared key"
+      },
+      "endpoint-public-key": {
+        "label": "Endpoint public Key",
+        "placeholder": "The public key of the remote endpoint"
+      },
+      "endpoint": {
+        "label": "Endpoint Address",
+        "placeholder": "The address of the remote endpoint"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "allowed-ip": {
+        "label": "Allowed IP Addresses",
+        "placeholder": "Allowed IP Addresses (CIDR format)"
+      },
+      "extra-allowed-ip": {
+        "label": "Extra allowed IP Addresses",
+        "placeholder": "Extra allowed IP's (Server Sided)",
+        "description": "Those IP's will be added on the remote WireGuard interface as allowed IP's."
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "keep-alive": {
+        "label": "Keep Alive Interval",
+        "placeholder": "Persistent Keepalive (0 = default)"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The client MTU (0 = keep default)"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Peer Disabled"
+      },
+      "ignore-global": {
+        "label": "Ignore global settings"
+      },
+      "expires-at": {
+        "label": "Expiry date"
+      }
     },
     "peer-multi-create": {
-      "privatekey": "Private Key"
+      "headline-peer": "Create multiple peers",
+      "headline-endpoint": "Create multiple endpoints",
+      "identifiers": {
+        "label": "User Identifiers",
+        "placeholder": "User Identifiers",
+        "description": "A user identifier (the username) for which a peer should be created."
+      },
+      "prefix": {
+        "headline-peer": "Peer:",
+        "headline-endpoint": "Endpoint:",
+        "label": "Display Name Prefix",
+        "placeholder": "The prefix",
+        "description": "A prefix that is added to the peers display name."
+      }
     }
   }
 }

internal/app/api/core/frontend-dist/index.html

@@ -14,7 +14,7 @@
       let WGPORTAL_SITE_COMPANY_NAME="WireGuard Portal";
     </script>
     <script src="/api/v0/config/frontend.js"></script>
-    <script type="module" crossorigin src="/app/assets/index-4c1df829.js"></script>
+    <script type="module" crossorigin src="/app/assets/index-86f5a28a.js"></script>
     <link rel="stylesheet" href="/app/assets/index-7144f109.css">
   </head>
   <body class="d-flex flex-column min-vh-100">