cosmetic update

src/views/DE/account/newInformation.pug

@@ -8,8 +8,9 @@ html(lang="de")
     link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
     link(rel="stylesheet", type="text/css", href="/css/m4lab-mobile.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    script(src="https://unpkg.com/vue@3")
   body
-    div(class="container")
+    div(id="app" class="container")
         div(class="row min-vh-100 flex-column flex-md-row")
             aside(class="col-12 col-md-3 p-0 flex-shrink-1")
                 nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
@@ -67,8 +68,10 @@ html(lang="de")
                         div(class='form-group row')
                             label(for="name", class="col-sm-2") Name
                             div(class="col-sm-8")
-                                input#name(name="name", type="text", class="form-control", placeholder="Name", maxlength="75" required)
-                                p(id="nameInfo" class="font-italic font-weight-light") <small>Ihre Webseite wird unter folgender URL veröffentlicht: <strong>https://transfer.hft-stuttgart.de/pages/#{gitlabUsername}/<span id="websiteName"></span></strong></small>
+                                input#name(name="name", type="text", :value="websiteName", @input="onInput", class="form-control", placeholder="Name", maxlength="75" required)
+                                p(v-if="websiteName" class="font-italic font-weight-light")
+                                    <small>Ihre Webseite wird unter folgender URL veröffentlicht: <strong>https://transfer.hft-stuttgart.de/pages/#{gitlabUsername}/{{ websiteURL }}/home</strong></small>
+                                p(v-else)
                         div(class="form-group row")
                             label(for="description", class="col-sm-2") Beschreibung
                             div(class="col-sm-8")
@@ -102,22 +105,22 @@ html(lang="de")
     script(src="/js/headfoot.js")
     script(src="/js/mobile.js")
     script.
-        // website URL
-        function showWebsiteURL() {
-            if ($("#name").val()) {
-                $("#nameInfo").show()
-                let webName = $("#name").val().toLowerCase().replace(/\s/g, '-')
-                document.getElementById("websiteName").innerText = webName+"/home/"
-            }
-            else {
-                $("#nameInfo").hide()
-            }
-        }
-        $('#name').on('input',function(e){
-            showWebsiteURL()
-        })
-        showWebsiteURL()
-
         $("form").submit(function(){
             $.LoadingOverlay("show")
         });
+    script.
+        const { createApp } = Vue
+        createApp({
+            data() {
+                return {
+                    websiteName: '',
+                    websiteURL: ''
+                }
+            },
+            methods: {
+                onInput(e) {
+                    this.websiteName = e.target.value
+                    this.websiteURL = this.websiteName.toLowerCase().replace(/\s/g, '-')
+                }
+            }
+        }).mount('#app')
\ No newline at end of file