2019-02-18 04:18:32 -05:00
|
|
|
<template>
|
2019-08-03 15:03:45 -04:00
|
|
|
<div id="settings" class="window" role="tabpanel" aria-label="Settings">
|
2019-02-18 04:18:32 -05:00
|
|
|
<div class="header">
|
2019-04-13 16:44:04 -04:00
|
|
|
<SidebarToggle />
|
2019-02-18 04:18:32 -05:00
|
|
|
</div>
|
2022-02-21 16:24:29 -05:00
|
|
|
<Navigation />
|
2022-02-19 20:05:09 -05:00
|
|
|
|
2022-02-18 19:45:25 -05:00
|
|
|
<div class="container">
|
|
|
|
<form ref="settingsForm" autocomplete="off" @change="onChange" @submit.prevent>
|
2022-06-18 20:25:21 -04:00
|
|
|
<router-view :settings-form="settingsForm"></router-view>
|
2022-02-18 19:45:25 -05:00
|
|
|
</form>
|
|
|
|
</div>
|
2019-02-18 04:18:32 -05:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
<script lang="ts">
|
|
|
|
import {defineComponent, ref} from "vue";
|
2019-04-13 16:44:04 -04:00
|
|
|
import SidebarToggle from "../SidebarToggle.vue";
|
2022-02-18 19:45:25 -05:00
|
|
|
import Navigation from "../Settings/Navigation.vue";
|
2022-06-18 20:25:21 -04:00
|
|
|
import {useStore} from "../../js/store";
|
2019-11-15 14:13:26 -05:00
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
export default defineComponent({
|
2019-02-18 04:18:32 -05:00
|
|
|
name: "Settings",
|
|
|
|
components: {
|
2019-04-13 16:44:04 -04:00
|
|
|
SidebarToggle,
|
2022-02-18 19:45:25 -05:00
|
|
|
Navigation,
|
2019-03-03 10:19:48 -05:00
|
|
|
},
|
2022-06-18 20:25:21 -04:00
|
|
|
setup() {
|
|
|
|
const store = useStore();
|
|
|
|
const settingsForm = ref<HTMLFormElement>();
|
|
|
|
|
|
|
|
const onChange = (event: Event) => {
|
2019-08-03 15:03:45 -04:00
|
|
|
const ignore = ["old_password", "new_password", "verify_password"];
|
2019-02-18 04:18:32 -05:00
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
const name = (event.target as HTMLInputElement).name;
|
2019-02-18 04:18:32 -05:00
|
|
|
|
2019-03-03 10:19:48 -05:00
|
|
|
if (ignore.includes(name)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
let value: boolean | string;
|
2019-03-03 10:19:48 -05:00
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
if ((event.target as HTMLInputElement).type === "checkbox") {
|
|
|
|
value = (event.target as HTMLInputElement).checked;
|
2019-03-03 10:19:48 -05:00
|
|
|
} else {
|
2022-06-18 20:25:21 -04:00
|
|
|
value = (event.target as HTMLInputElement).value;
|
2019-03-03 10:19:48 -05:00
|
|
|
}
|
|
|
|
|
2022-06-18 20:25:21 -04:00
|
|
|
void store.dispatch("settings/update", {name, value, sync: true});
|
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
|
|
|
onChange,
|
|
|
|
settingsForm,
|
|
|
|
};
|
2019-02-18 04:18:32 -05:00
|
|
|
},
|
2022-06-18 20:25:21 -04:00
|
|
|
});
|
2019-02-18 04:18:32 -05:00
|
|
|
</script>
|