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