Password Change UI

assets/web/password.html

@@ -0,0 +1,97 @@
+<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>