Spaces:
Running
Running
File size: 3,083 Bytes
bc27e65 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<script lang="ts">
import { getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import { updateUserPassword } from '$lib/apis/auths';
const i18n = getContext('i18n');
let show = false;
let currentPassword = '';
let newPassword = '';
let newPasswordConfirm = '';
const updatePasswordHandler = async () => {
if (newPassword === newPasswordConfirm) {
const res = await updateUserPassword(localStorage.token, currentPassword, newPassword).catch(
(error) => {
toast.error(`${error}`);
return null;
}
);
if (res) {
toast.success($i18n.t('Successfully updated.'));
}
currentPassword = '';
newPassword = '';
newPasswordConfirm = '';
} else {
toast.error(
`The passwords you entered don't quite match. Please double-check and try again.`
);
newPassword = '';
newPasswordConfirm = '';
}
};
</script>
<form
class="flex flex-col text-sm"
on:submit|preventDefault={() => {
updatePasswordHandler();
}}
>
<div class="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('Change Password')}</div>
<button
class=" text-xs font-medium text-gray-500"
type="button"
on:click={() => {
show = !show;
}}>{show ? $i18n.t('Hide') : $i18n.t('Show')}</button
>
</div>
{#if show}
<div class=" py-2.5 space-y-1.5">
<div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div>
<div class="flex-1">
<input
class="w-full bg-transparent dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password"
bind:value={currentPassword}
placeholder={$i18n.t('Enter your current password')}
autocomplete="current-password"
required
/>
</div>
</div>
<div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
<div class="flex-1">
<input
class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password"
bind:value={newPassword}
placeholder={$i18n.t('Enter your new password')}
autocomplete="new-password"
required
/>
</div>
</div>
<div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div>
<div class="flex-1">
<input
class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password"
bind:value={newPasswordConfirm}
placeholder={$i18n.t('Confirm your new password')}
autocomplete="off"
required
/>
</div>
</div>
</div>
<div class="mt-3 flex justify-end">
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
>
{$i18n.t('Update password')}
</button>
</div>
{/if}
</form>
|