Reorganize assets

assets/assets_common/web/password.html

@@ -0,0 +1,133 @@
+<div id="app" class="container">
+  <h1 class="my-4">Password Change</h1>
+  <form @submit.prevent="save">
+    <div class="card d-flex p-4 flex-row">
+      <div class="col-md-6 px-4">
+        <h4>Current Credentials</h4>
+        <div class="mb-3">
+          <label for="currentUsername" class="form-label">Username</label>
+          <input
+            required
+            type="text"
+            class="form-control"
+            id="currentUsername"
+            v-model="passwordData.currentUsername"
+          />
+          <div class="form-text">&nbsp;</div>
+        </div>
+        <div class="mb-3">
+          <label for="currentPassword" class="form-label">Password</label>
+          <input
+            autocomplete="current-password"
+            type="password"
+            class="form-control"
+            id="currentPassword"
+            v-model="passwordData.currentPassword"
+          />
+        </div>
+      </div>
+      <div class="col-md-6 px-4">
+        <h4>New Credentials</h4>
+        <div class="mb-3">
+          <label for="newUsername" class="form-label">New Username</label>
+          <input
+            type="text"
+            class="form-control"
+            id="newUsername"
+            v-model="passwordData.newUsername"
+          />
+          <div class="form-text">
+            If not specified, the username will not change
+          </div>
+        </div>
+        <div class="mb-3">
+          <label for="newPassword" class="form-label">Password</label>
+          <input
+            autocomplete="new-password"
+            required
+            type="password"
+            class="form-control"
+            id="newPassword"
+            v-model="passwordData.newPassword"
+          />
+        </div>
+        <div class="mb-3">
+          <label for="confirmNewPassword" class="form-label"
+            >Confirm Password</label
+          >
+          <input
+            autocomplete="new-password"
+            required
+            type="password"
+            class="form-control"
+            id="confirmNewPassword"
+            v-model="passwordData.confirmNewPassword"
+          />
+        </div>
+      </div>
+    </div>
+    <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>
+    <div class="mb-3 buttons">
+      <button class="btn btn-primary">Save</button>
+    </div>
+  </form>
+</div>
+
+<script>
+  new Vue({
+    el: "#app",
+    data() {
+      return {
+        error: null,
+        success: false,
+        passwordData: {
+          currentUsername: "",
+          currentPassword: "",
+          newUsername: "",
+          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>
+
+<style>
+  .config-page {
+    padding: 1em;
+    border: 1px solid #dee2e6;
+    border-top: none;
+  }
+
+  .buttons {
+    padding: 1em 0;
+  }
+</style>