128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<template>
|
|
<div class="settings">
|
|
<div class="section">
|
|
<h1>Wallpaper</h1>
|
|
<h2>Upload a background wallpaper</h2>
|
|
<input ref="bg_file" type="file"/>
|
|
<div class="actions">
|
|
<btn label="Update" @click="uploadBg" />
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h1>Theme</h1>
|
|
<h2>Select light or dark mode to match the wallpaper</h2>
|
|
<switch-field v-model="darkMode" label="Darkmode" />
|
|
<div class="actions">
|
|
<btn label="Update" @click="updateMode" />
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h1>Password</h1>
|
|
<h2>Change password</h2>
|
|
<text-field v-model="password" password placeholder="password" />
|
|
<text-field v-model="confirmPassword" password placeholder="confirm password" />
|
|
<div class="actions">
|
|
<btn :disabled="password !== confirmPassword || !password.length" label="Change Password" @click="updatePassword" />
|
|
</div>
|
|
</div>
|
|
<div class="control-buttons">
|
|
<btn danger label="Logout" @click="logout" />
|
|
<btn primary label="Back to Dashboard" @click="backClicked" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Btn from "../components/Button.vue";
|
|
import SwitchField from "../components/Switch.vue";
|
|
import axios from "axios";
|
|
import TextField from '../components/TextField.vue';
|
|
|
|
export default {
|
|
components: { Btn, SwitchField, TextField },
|
|
data() {
|
|
return {
|
|
file: "",
|
|
darkMode: true,
|
|
password: "",
|
|
confirmPassword: "",
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.darkMode = ((await axios.get("/api/settings/theme/mode")).data.mode || "dark") === "dark";
|
|
},
|
|
methods: {
|
|
async uploadBg() {
|
|
let formData = new FormData();
|
|
formData.append("file", this.$refs.bg_file.files[0]);
|
|
await axios.post("/api/upload/bg", formData, {
|
|
headers: {'content-type': 'multipart/form-data'}
|
|
});
|
|
},
|
|
async updateMode() {
|
|
await axios.put("/api/settings/theme/mode", {
|
|
mode: this.darkMode ? "dark" : "light"
|
|
});
|
|
},
|
|
async updatePassword() {
|
|
const res = await axios.put("/api/password", {
|
|
password: this.password,
|
|
});
|
|
if (res.status === 200) {
|
|
this.$router.push("/login");
|
|
}
|
|
},
|
|
backClicked() {
|
|
this.$router.push("/");
|
|
},
|
|
logout() {
|
|
localStorage.removeItem("token");
|
|
this.$router.push("/login");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.settings {
|
|
padding-top: 100px;
|
|
min-height: calc(100vh - 100px);
|
|
background: #222;
|
|
}
|
|
.section {
|
|
width: 800px;
|
|
margin: auto auto;
|
|
border-radius: 5px;
|
|
background: #121212;
|
|
padding: 15px;
|
|
}
|
|
.section + .section {
|
|
margin-top: 25px;
|
|
}
|
|
.section h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 24px;
|
|
margin: 0;
|
|
}
|
|
.section h2 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-top: 5px;
|
|
margin-bottom: 35px;
|
|
}
|
|
.actions {
|
|
margin-top: 15px;
|
|
text-align: right;
|
|
}
|
|
.control-buttons {
|
|
width: 800px;
|
|
margin: auto auto;
|
|
margin-top: 15px;
|
|
text-align: right;
|
|
}
|
|
.control-buttons button + button {
|
|
margin-left: 15px;
|
|
}
|
|
</style>
|