ff-admin/src/components/account/ChangeToPassword.vue

<template>
  <form class="flex flex-col gap-2" @submit.prevent="change">
    <div class="-space-y-px">
      <div>
        <input
          id="new"
          name="new"
          type="password"
          required
          placeholder="neues Passwort"
          autocomplete="new-password"
          class="rounded-b-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'">
        zu Passwort wechseln
      </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 TextCopy from "@/components/TextCopy.vue";
import { hashString } from "../../helpers/crypto";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    currentRoutine: {
      type: String,
      default: "",
    },
  },
  emits: ["updateCurrent"],
  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/changeToPW`, {
          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;
            this.$emit("updateCurrent");
          }, 2000);
        });
    },
  },
});
</script>