Sunshine/assets/web/password.html

<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>