nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert views/settings/Profile.vue to composition api + ts

Browse Source
This commit is contained in:
Joep 2023-09-10 17:43:28 +02:00
parent 8bd72bffa4
commit 245da0ffdc
1 changed files with 111 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
frontend/src/views/settings/Profile.vue
View File

@ -3,23 +3,23 @@
<div class="column"> <div class="column">
<form class="card" @submit="updateSettings"> <form class="card" @submit="updateSettings">
<div class="card-title"> <div class="card-title">
<h2>{{ $t("settings.profileSettings") }}</h2> <h2>{{ t("settings.profileSettings") }}</h2>
</div> </div>
<div class="card-content"> <div class="card-content">
<p> <p>
<input type="checkbox" v-model="hideDotfiles" /> <input type="checkbox" v-model="hideDotfiles" />
{{ $t("settings.hideDotfiles") }} {{ t("settings.hideDotfiles") }}
</p> </p>
<p> <p>
<input type="checkbox" v-model="singleClick" /> <input type="checkbox" v-model="singleClick" />
{{ $t("settings.singleClick") }} {{ t("settings.singleClick") }}
</p> </p>
<p> <p>
<input type="checkbox" v-model="dateFormat" /> <input type="checkbox" v-model="dateFormat" />
{{ $t("settings.setDateFormat") }} {{ t("settings.setDateFormat") }}
</p> </p>
<h3>{{ $t("settings.language") }}</h3> <h3>{{ t("settings.language") }}</h3>
<languages <languages
class="input input--block" class="input input--block"
v-model:locale="locale" v-model:locale="locale"
@ -30,30 +30,34 @@
<input <input
class="button button--flat" class="button button--flat"
type="submit" type="submit"
:value="$t('buttons.update')" :value="t('buttons.update')"
/> />
</div> </div>
</form> </form>
</div> </div>
<div class="column"> <div class="column">
<form class="card" v-if="!user.lockPassword" @submit="updatePassword"> <form
class="card"
v-if="!authStore.user?.lockPassword"
@submit="updatePassword"
>
<div class="card-title"> <div class="card-title">
<h2>{{ $t("settings.changePassword") }}</h2> <h2>{{ t("settings.changePassword") }}</h2>
</div> </div>
<div class="card-content"> <div class="card-content">
<input <input
:class="passwordClass" :class="passwordClass"
type="password" type="password"
:placeholder="$t('settings.newPassword')" :placeholder="t('settings.newPassword')"
v-model="password" v-model="password"
name="password" name="password"
/> />
<input <input
:class="passwordClass" :class="passwordClass"
type="password" type="password"
:placeholder="$t('settings.newPasswordConfirm')" :placeholder="t('settings.newPasswordConfirm')"
v-model="passwordConf" v-model="passwordConf"
name="password" name="password"
/> />
@ -63,7 +67,7 @@
<input <input
class="button button--flat" class="button button--flat"
type="submit" type="submit"
:value="$t('buttons.update')" :value="t('buttons.update')"
/> />
</div> </div>
</form> </form>
@ -71,102 +75,107 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { mapActions, mapState, mapWritableState } from "pinia";
import { useAuthStore } from "@/stores/auth"; import { useAuthStore } from "@/stores/auth";
import { useLayoutStore } from "@/stores/layout"; import { useLayoutStore } from "@/stores/layout";
import { users as api } from "@/api"; import { users as api } from "@/api";
import Languages from "@/components/settings/Languages.vue"; import Languages from "@/components/settings/Languages.vue";
import i18n, { rtlLanguages } from "@/i18n"; // import i18n, { rtlLanguages } from "@/i18n";
import { inject, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
export default { const layoutStore = useLayoutStore();
name: "settings", const authStore = useAuthStore();
components: { const { t } = useI18n();
Languages,
}, const $showError = inject("$showError") as TToast;
data: function () { const $showSuccess = inject("$showSuccess") as TToast;
return {
password: "", const password = ref<string>("");
passwordConf: "", const passwordConf = ref<string>("");
hideDotfiles: false, const hideDotfiles = ref<boolean>(false);
singleClick: false, const singleClick = ref<boolean>(false);
dateFormat: false, const dateFormat = ref<boolean>(false);
locale: "", const locale = ref<string>("");
};
}, // ...mapState(useAuthStore, ["user"]),
inject: ["$showError", "$showSuccess"], // ...mapWritableState(useLayoutStore, ["loading"]),
computed: { //...mapActions(useAuthStore, ["updateUser"]),
...mapState(useAuthStore, ["user"]),
...mapWritableState(useLayoutStore, ["loading"]), const passwordClass = () => {
passwordClass() {
const baseClass = "input input--block"; const baseClass = "input input--block";
if (this.password === "" && this.passwordConf === "") { if (password.value === "" && passwordConf.value === "") {
return baseClass; return baseClass;
} }
if (this.password === this.passwordConf) { if (password.value === passwordConf.value) {
return `${baseClass} input--green`; return `${baseClass} input--green`;
} }
return `${baseClass} input--red`; return `${baseClass} input--red`;
}, };
},
created() { onMounted(() => {
this.loading = true; layoutStore.loading = true;
this.locale = this.user.locale; if (authStore.user === null) return false;
this.hideDotfiles = this.user.hideDotfiles; locale.value = authStore.user.locale;
this.singleClick = this.user.singleClick; hideDotfiles.value = authStore.user.hideDotfiles;
this.dateFormat = this.user.dateFormat; singleClick.value = authStore.user.singleClick;
this.loading = false; dateFormat.value = authStore.user.dateFormat;
}, layoutStore.loading = false;
methods: { });
...mapActions(useAuthStore, ["updateUser"]),
async updatePassword(event) { const updatePassword = async (event: Event) => {
event.preventDefault(); event.preventDefault();
if (this.password !== this.passwordConf || this.password === "") { if (
password.value !== passwordConf.value ||
password.value === "" ||
authStore.user === null
) {
return; return;
} }
try { try {
const data = { id: this.user.id, password: this.password }; const data = { id: authStore.user.id, password: password.value };
await api.update(data, ["password"]); await api.update(data, ["password"]);
this.updateUser(data); authStore.updateUser(data);
this.$showSuccess(this.$t("settings.passwordUpdated")); $showSuccess(t("settings.passwordUpdated"));
} catch (e) { } catch (e: any) {
this.$showError(e); $showError(e);
} }
}, };
async updateSettings(event) { const updateSettings = async (event: Event) => {
event.preventDefault(); event.preventDefault();
try { try {
if (authStore.user === null) throw "User is not set";
const data = { const data = {
id: this.user.id, id: authStore.user.id,
locale: this.locale, locale: locale.value,
hideDotfiles: this.hideDotfiles, hideDotfiles: hideDotfiles.value,
singleClick: this.singleClick, singleClick: singleClick.value,
dateFormat: this.dateFormat, dateFormat: dateFormat.value,
}; };
const shouldReload = // TODO don't know what this is doing
rtlLanguages.includes(data.locale) !== const shouldReload = false;
rtlLanguages.includes(i18n.locale); // rtlLanguages.includes(data.locale) !==
// rtlLanguages.includes(i18n.locale);
await api.update(data, [ await api.update(data, [
"locale", "locale",
"hideDotfiles", "hideDotfiles",
"singleClick", "singleClick",
"dateFormat", "dateFormat",
]); ]);
this.updateUser(data); authStore.updateUser(data);
if (shouldReload) { if (shouldReload) {
location.reload(); location.reload();
} }
this.$showSuccess(this.$t("settings.settingsUpdated")); $showSuccess(t("settings.settingsUpdated"));
} catch (e) { } catch (e: any) {
this.$showError(e); $showError(e);
} }
},
},
}; };
</script> </script>