<script>
	import { changePassword } from '$lib/apiServer.js';

	import Invite from '$lib/components/Invite.svelte';

	let currentPassword, newPassword, confirmPassword, passwordForm;
	let pending = false;
	$: valid = (newPassword === confirmPassword) && (newPassword !== currentPassword);
	$: disabled = pending || !valid;

	async function onPasswordChange() {
		pending = true;
		let response = await changePassword(currentPassword, newPassword);
		switch (response.status) {
			case 200:
				passwordForm.reset();
				break;
		}
		pending = false;
	}
</script>

<form on:submit|preventDefault={onPasswordChange} bind:this={passwordForm} >
	<label>current password
		<input class="input" name="currentPassword" type="password" placeholder="password" bind:value={currentPassword}>
	</label>

	<label>new password
		<input class="input" name="newPassword" type="password" placeholder="password" bind:value={newPassword}>
	</label>

	<label>confirm new password
		<input class="input" name="confirmPassword" type="password" placeholder="password" bind:value={confirmPassword}>
	</label>

	<button class="btn variant-filled" type="submit" disabled={disabled}>
		change password
	</button>
</form>

<Invite />
