Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-03 07:46:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added update password in settings

Browse Source
This commit is contained in:
Donald Zou
2025-06-20 16:00:19 +08:00
parent 7e9cfc2872
commit c43b3926b8
6 changed files with 176 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/static/client/src/components/Settings/profile.vue
View File

@@ -1,69 +1,26 @@
<script setup>
import {clientStore} from "@/stores/clientStore.js";
import {reactive} from "vue";
const store = clientStore()
const ProfileLabels = {
Firstname: "First Name",
Lastname: "Last Name"
}
const Password = reactive({
CurrentPassword: "",
NewPassword: "",
RepeatNewPassword: ""
})
const ResetPasswordFields = () => {
Password.CurrentPassword = ""
Password.NewPassword = ""
Password.RepeatNewPassword = ""
}
</script>
<template>
<div class="d-flex flex-column gap-4 p-3">
<div>
<h5>
Profile
</h5>
<div class="row g-2">
<div class="col-sm-6" v-for="(val, key) in store.clientProfile.Profile">
<label :for="key" class="text-muted form-label">
<small>{{ ProfileLabels[key] }}</small>
</label>
<input :id="key" class="form-control rounded-3" v-model="store.clientProfile.Profile[key]">
</div>
<div class="p-3">
<h5>
Profile
</h5>
<div class="row g-2">
<div class="col-sm-6" v-for="(val, key) in store.clientProfile.Profile">
<label :for="key" class="text-muted form-label">
<small>{{ ProfileLabels[key] }}</small>
</label>
<input :id="key" class="form-control rounded-3" v-model="store.clientProfile.Profile[key]">
</div>
</div>
<form @submit="undefined" @reset="ResetPasswordFields()">
<h5>
Update Password
</h5>
<div class="row g-2 mb-3">
<div class="col-sm-12">
<label class="text-muted form-label" for="CurrentPassword">
<small>Current Password</small>
</label>
<input class="form-control rounded-3" type="password" autocomplete="current-password" id="CurrentPassword" v-model="Password.CurrentPassword">
</div>
<div class="col-sm-6">
<label class="text-muted form-label" for="NewPassword">
<small>New Password</small>
</label>
<input class="form-control rounded-3" type="password" id="NewPassword" autocomplete="new-password" v-model="Password.NewPassword">
</div>
<div class="col-sm-6">
<label class="text-muted form-label" for="RepeatNewPassword">
<small>Repeat New Password</small>
</label>
<input class="form-control rounded-3" type="password" id="RepeatNewPassword" autocomplete="new-password" v-model="Password.RepeatNewPassword">
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-sm btn-secondary rounded-3 ms-auto" type="reset">Clear</button>
<button class="btn btn-sm btn-danger rounded-3" type="submit">Update</button>
</div>
</form>
</div>
</template>

102
src/static/client/src/components/Settings/updatePassword.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup>
import {reactive, ref} from "vue";
import {axiosPost} from "@/utilities/request.js";
import {clientStore} from "@/stores/clientStore.js";
const Password = reactive({
CurrentPassword: "",
NewPassword: "",
ConfirmNewPassword: ""
})
const ResetPasswordFields = () => {
Password.CurrentPassword = ""
Password.NewPassword = ""
Password.ConfirmNewPassword = ""
}
const store = clientStore()
const UpdatePassword = async (e) => {
e.preventDefault();
document.querySelectorAll("#updatePasswordForm input").forEach(x => x.blur())
const data = await axiosPost('/api/settings/updatePassword', Password)
if(data){
if (!data.status){
formInvalid.value = true;
formInvalidMessage.value = data.message;
}else{
formInvalid.value = false
store.newNotification("Password updated!", "success")
ResetPasswordFields()
}
}else{
formInvalid.value = true;
formInvalidMessage.value = "Error occurred"
}
}
const showPassword = ref(false)
const formInvalid = ref(false)
const formInvalidMessage = ref("")
</script>
<template>
<form @submit="(e) => UpdatePassword(e)"
id="updatePasswordForm"
@reset="ResetPasswordFields()" class="p-3">
<div class="d-flex align-items-start">
<h5>
Update Password
</h5>
<a role="button"
@click="showPassword = !showPassword"
class="text-muted ms-auto text-decoration-none">
<small>
<i
:class="[showPassword ? 'bi-eye-slash-fill':'bi-eye-fill']"
class="bi me-2"></i>{{ showPassword ? 'Hide':'Show'}} Password
</small>
</a>
</div>
<div class="alert alert-danger rounded-3 mt-3" v-if="formInvalid">
{{ formInvalidMessage }}
</div>
<div class="row g-2 mb-3">
<div class="col-sm-12">
<label
class="text-muted form-label" for="CurrentPassword">
<small>Current Password</small>
</label>
<input class="form-control rounded-3" :class="{'is-invalid': formInvalid}" required
:type="showPassword ? 'text':'password'" autocomplete="current-password" id="CurrentPassword" v-model="Password.CurrentPassword">
</div>
<div class="col-sm-6">
<label class="text-muted form-label" for="NewPassword">
<small>New Password</small>
</label>
<input class="form-control rounded-3"
required
:class="{'is-invalid': formInvalid}"
:type="showPassword ? 'text':'password'"
id="NewPassword" autocomplete="new-password" v-model="Password.NewPassword">
</div>
<div class="col-sm-6">
<label class="text-muted form-label" for="ConfirmNewPassword">
<small>Confirm New Password</small>
</label>
<input class="form-control rounded-3"
required
:class="{'is-invalid': formInvalid}"
:type="showPassword ? 'text':'password'"
id="ConfirmNewPassword" autocomplete="new-password" v-model="Password.ConfirmNewPassword">
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-sm btn-secondary rounded-3 ms-auto" type="reset">Clear</button>
<button class="btn btn-sm btn-danger rounded-3" type="submit">Update</button>
</div>
</form>
</template>
<style scoped>
</style>

8
src/static/client/src/views/index.vue
View File

@@ -6,18 +6,12 @@ import Configuration from "@/components/Configuration/configuration.vue";
const store = clientStore()
const loading = ref(true)
const loadConfigurations = async () => {
await store.getConfigurations()
}
const configurations = computed(() => {
return store.configurations
});
onMounted(async () => {
await loadConfigurations();
await store.getConfigurations()
loading.value = false;
})
</script>

2
src/static/client/src/views/settings.vue
View File

@@ -1,6 +1,7 @@
<script setup async>
import {clientStore} from "@/stores/clientStore.js";
import Profile from "@/components/Settings/profile.vue";
import UpdatePassword from "@/components/Settings/updatePassword.vue";
const store = clientStore()
await store.getClientProfile();
@@ -16,6 +17,7 @@ await store.getClientProfile();
<strong class="ms-auto">Settings</strong>
</div>
<Profile></Profile>
<UpdatePassword></UpdatePassword>
</div>
</template>