<template>
    <div class="content-l">
        <h2>Account</h2>
        <div class="content-m tile-l">
            <h3>Passwort ändern</h3>
            <div class="col-2">
                <UiInput label="Passwort">
                    <input type="password" v-model="password">
                </UiInput>
                 <UiInput label="Passwort wiederholen">
                    <input type="password" v-model="passwordRepeat">
                </UiInput>
            </div>
            <div class="center">
                <UiButton :onclick="() => change()" :disabled="password.length === 0 || password !== passwordRepeat">Passwort Ändern</UiButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { changePassword } from '~/requests/user';

const password = ref("");
const passwordRepeat = ref("");

function change()
{
    if(password.value !== passwordRepeat.value)
    {
        throw new Error("[Method: AccountTab.change] passwords do not match.");
    }
    changePassword(requireUser().username, password.value, () => {
        resetFields();
    });
}

function resetFields()
{
    password.value = "";
    passwordRepeat.value = "";
}
</script>