109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<form class="flex flex-col gap-2" @submit.prevent="change">
|
|
<div class="-space-y-px">
|
|
<div>
|
|
<input
|
|
id="current"
|
|
name="current"
|
|
type="password"
|
|
required
|
|
placeholder="aktuelles Passwort"
|
|
autocomplete="current-password"
|
|
class="rounded-b-none!"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
id="new"
|
|
name="new"
|
|
type="password"
|
|
required
|
|
placeholder="neues Passwort"
|
|
autocomplete="new-password"
|
|
class="rounded-none!"
|
|
:class="notMatching ? 'border-red-600!' : ''"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
id="new_rep"
|
|
name="new_rep"
|
|
type="password"
|
|
required
|
|
placeholder="neues Passwort wiederholen"
|
|
autocomplete="new-password"
|
|
class="rounded-t-none!"
|
|
:class="notMatching ? 'border-red-600!' : ''"
|
|
/>
|
|
</div>
|
|
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2">
|
|
<button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
|
|
Passwort ändern
|
|
</button>
|
|
<Spinner v-if="changeStatus == 'loading'" class="my-auto" />
|
|
<SuccessCheckmark v-else-if="changeStatus == 'success'" />
|
|
<FailureXMark v-else-if="changeStatus == 'failed'" />
|
|
</div>
|
|
<p v-if="changeError" class="text-center">{{ changeError }}</p>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapActions, mapState } from "pinia";
|
|
import MainTemplate from "@/templates/Main.vue";
|
|
import Spinner from "@/components/Spinner.vue";
|
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
|
import FailureXMark from "@/components/FailureXMark.vue";
|
|
import { hashString } from "../../helpers/crypto";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
verification: "loading" as "success" | "loading" | "failed",
|
|
changeStatus: undefined as undefined | "loading" | "success" | "failed",
|
|
changeError: "" as string,
|
|
notMatching: false as boolean,
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
async change(e: any) {
|
|
let formData = e.target.elements;
|
|
|
|
let new_pw = await hashString(formData.new.value);
|
|
let new_rep = await hashString(formData.new_rep.value);
|
|
if (new_pw != new_rep) {
|
|
this.notMatching = true;
|
|
return;
|
|
}
|
|
this.notMatching = false;
|
|
|
|
this.changeStatus = "loading";
|
|
this.changeError = "";
|
|
this.$http
|
|
.post(`/user/changepw`, {
|
|
current: await hashString(formData.current.value),
|
|
newpassword: await hashString(formData.new.value),
|
|
})
|
|
.then((result) => {
|
|
this.changeStatus = "success";
|
|
})
|
|
.catch((err) => {
|
|
this.changeStatus = "failed";
|
|
this.changeError = err.response.data;
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
this.changeStatus = undefined;
|
|
}, 2000);
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|