<template>
  <div class="content-l">
    <h2>Change Password</h2>
    <UiPompt :prompt="prompt" @close="prompt = undefined"></UiPompt>
    <div class="col-2 tile-l">
      <UiInput label="New Password" required>
        <input type="password" v-model="password">
      </UiInput>
      <UiInput label="Repeat Password" required>
        <input type="password" v-model="repeatPassword">
      </UiInput>
    </div>
    <div class="center">
      <UiButton class="width-6rem" icon="change_circle" reverse @click="() => change()">Change</UiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Prompt, PromptType } from '~/components/ui/Prompt';
import { changePassword } from '~/requests/user';
import UiPompt from '~/components/ui/UiPompt.vue';

const password = ref('');
const repeatPassword = ref('');

const prompt: Ref<Prompt | undefined> = ref(undefined);
function change()
{
  if (password.value && password.value === repeatPassword.value)
  {
    changePassword(requireUser().username, password.value, () => {
      password.value = '';
      repeatPassword.value = '';
      prompt.value = new Prompt("Password changed successfully.", PromptType.SUCCESS);
    });
  }
  else 
  {
    prompt.value = new Prompt("Passwords don't match.", PromptType.ERROR);
    throw new Error("Passwords don't match.");
  }
}
</script>

<style scoped>

</style>