welcome now puts credentials instead of generating

assets/web/welcome.html

@@ -6,25 +6,64 @@
       </div>
     </div>
     <div class="alert alert-warning">These Credentials down below are needed to access the rest of the application.<br> Keep them safe, since <b>you will never see them again!</b></div>
-    <div class="card p-4" style="width: 100%;">
+    <form @submit.prevent="save" class="card p-4" style="width: 100%;">
         <div class="mb-2">
           <label for="" class="form-label">Username: </label>
-          <input type="text" class="form-control" disabled id="username">
+          <input type="text" class="form-control" v-model="passwordData.newUsername">
         </div>
         <div class="mb-2">
           <label for="" class="form-label">Password: </label>
-          <input type="text" class="form-control" disabled id="password">
+          <input type="password" class="form-control" v-model="passwordData.newPassword">
         </div>
-        <a href="/" class="mb-2 btn btn-primary" style="margin: 1em auto;">Login</a>
-    </div>
+        <div class="mb-2">
+          <label for="" class="form-label">Password: </label>
+          <input type="password" class="form-control" v-model="passwordData.confirmNewPassword">
+        </div>
+        <button class="mb-2 btn btn-primary" style="margin: 1em auto;">Login</button>
+        <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
+        <div class="alert alert-success" v-if="success"><b>Success! </b>This page will reload soon, your browser will ask you for the new credentials</div>
+      </form>
 </div>
 </main>
 
 <script>
-  fetch("/api/setup/password").then(r => r.json()).then(r => {
-    if(r.status === "true"){
-      document.querySelector("#username").value = r.username;
-      document.querySelector("#password").value = r.password;
-    }
+  new Vue({
+      el: '#app',
+      data() {
+          return {
+              error: null,
+              success: false,
+              passwordData: {
+                  newUsername: 'sunshine',
+                  newPassword: '',
+                  confirmNewPassword: ''
+              }
+          }
+      },
+      methods: {
+          save() {
+              this.error = null;
+              fetch("/api/password", {
+                  method: "POST",
+                  body: JSON.stringify(this.passwordData)
+              }).then((r) => {
+                  if (r.status == 200){
+                      r.json().then((rj) => {
+                          if(rj.status.toString() === "true"){
+                              this.success = true;
+                              setTimeout(()=>{
+                                  document.location.reload();
+                              },5000);
+                          } else {
+                              this.error = rj.error;
+                          }
+                      })
+                  }
+                  else  {
+                      this.error = "Internal Server Error"
+                  }
+              });
+          }
+      }
   })
 </script>