uptime-kuma/src/pages/Settings.vue

<template>
    <h1 class="mb-3">Settings</h1>

    <div class="shadow-box">
        <div class="row">

            <div class="col-md-6">
                <h2>General</h2>
                <form class="mb-3">
                    <div class="mb-3">
                        <label for="timezone" class="form-label">Timezone</label>
                        <select class="form-select" aria-label="Default select example" id="timezone">
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>

                    <div>
                        <button class="btn btn-primary" type="submit">Save</button>
                    </div>
                </form>

                <h2>Change Password</h2>
                <form class="mb-3" @submit.prevent="savePassword">
                    <div class="mb-3">
                        <label for="current-password" class="form-label">Current Password</label>
                        <input type="password" class="form-control" id="current-password" required v-model="password.currentPassword">
                    </div>

                    <div class="mb-3">
                        <label for="new-password" class="form-label">New Password</label>
                        <input type="password" class="form-control" id="new-password" required v-model="password.newPassword">
                    </div>

                    <div class="mb-3">
                        <label for="repeat-new-password" class="form-label">Repeat New Password</label>
                        <input type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" id="repeat-new-password" required v-model="password.repeatNewPassword">
                        <div class="invalid-feedback">
                            The repeat password is not match.
                        </div>
                    </div>

                    <div>
                        <button class="btn btn-primary" type="submit">Update Password</button>
                    </div>
                </form>

                <div>
                    <button class="btn btn-danger" @click="$root.logout">Logout</button>
                </div>
            </div>

            <div class="col-md-6">
                <h2>Notifications</h2>
                <p>Empty</p>
                <button class="btn btn-primary" type="submit">Add Notification</button>
            </div>

        </div>
    </div>


</template>

<script>


export default {
    components: {

    },
    data() {
        return {
            invalidPassword: false,
            password: {
                currentPassword: "",
                newPassword: "",
                repeatNewPassword: "",
            }
        }
    },
    methods: {
        savePassword() {
            if (this.password.newPassword !== this.password.repeatNewPassword) {
                this.invalidPassword = true;
            } else {
                this.$root.getSocket().emit("changePassword", this.password, (res) => {
                    this.$root.toastRes(res)
                    if (res.ok) {
                        this.password.currentPassword = ""
                        this.password.newPassword = ""
                        this.password.repeatNewPassword = ""
                    }
                })
            }
        },
    },
    watch: {
        "password.repeatNewPassword"() {
            this.invalidPassword = false;
        }
    }
}
</script>

<style scoped>
    .shadow-box {
        padding: 20px;
    }
</style>