BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updating password change toggle to use derived and fixing server code to correctly check errors on verify password.

Browse source
This commit is contained in:
Bradley Shellnut 2024-09-10 17:40:26 -07:00
parent 3b33880166
commit bdbfe7dcf5
2 changed files with 52 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/routes/(app)/(protected)/settings/security/change/password/+page.server.ts
View file

@ -48,24 +48,26 @@ export const actions: Actions = {
})
}
const currentPasswordVerified = await locals.api.me.verify.password
const { error: verifyPasswordError } = await locals.api.me.verify.password
.$post({
json: { password: form.data.current_password },
})
.then(locals.parseApiResponse)
if (!currentPasswordVerified) {
console.log('verifyPasswordError', verifyPasswordError)
if (verifyPasswordError) {
console.error(verifyPasswordError)
return setError(form, 'current_password', 'Your password is incorrect')
}
if (authedUser?.username) {
let sessionCookie: Cookie
try {
if (form.data.password !== form.data.confirm_password) {
return setError(form, 'Password and confirm password do not match')
}
await locals.api.me.change.password.$put({
await locals.api.me.update.password.$put({
json: { password: form.data.password, confirm_password: form.data.confirm_password },
}).then(locals.parseApiResponse)
})
} catch (e) {
console.error(e)
form.data.password = ''
@ -73,11 +75,6 @@ export const actions: Actions = {
form.data.current_password = ''
return setError(form, 'current_password', 'Your password is incorrect.')
}
event.cookies.set(sessionCookie.name, sessionCookie.value, {
path: '.',
...sessionCookie.attributes,
})
const message = {
type: 'success',
message: 'Password Updated. Please sign in.',
@ -85,10 +82,5 @@ export const actions: Actions = {
redirect(302, '/login', message, event)
}
return setError(form, 'Error occurred. Please try again or contact support if you need further help.')
// TODO: Add toast instead?
// form.data.password = '';
// form.data.confirm_password = '';
// form.data.current_password = '';
// return message(form, 'Profile updated successfully.');
},
}

55
src/routes/(app)/(protected)/settings/security/change/password/+page.svelte
View file

@ -20,6 +20,11 @@ const form = superForm(data.form, {
let hiddenCurrentPassword = $state(true)
let hiddenPassword = $state(true)
let hiddenConfirmPassword = $state(true)
let currentPasswordInput = $derived(hiddenCurrentPassword ? 'password' : 'text')
let passwordInput = $derived(hiddenPassword ? 'password' : 'text')
let confirmPasswordInput = $derived(hiddenConfirmPassword ? 'password' : 'text')
// $inspect(hiddenCurrentPassword, hiddenPassword, hiddenConfirmPassword)
const { form: formData, enhance } = form
</script>
@ -27,19 +32,29 @@ const { form: formData, enhance } = form
<form method="POST" use:enhance>
<h3>Change Password</h3>
<hr class="!border-t-2 mt-2 mb-6" />
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="username" aria-hidden="true" class="hidden" autocomplete="username">
<Alert.Root variant="destructive" class="mb-4">
<AlertTriangle class="h-4 w-4" />
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
Changing your password will log you out of all devices.
</Alert.Description>
<Alert.Description>Changing your password will log you out of all devices.</Alert.Description>
</Alert.Root>
<Form.Field {form} name="current_password">
<Form.Control let:attrs>
<Form.Label for="current_password">Current Password</Form.Label>
<span class="flex gap-1">
<Input {...attrs} autocomplete="password" type={hiddenCurrentPassword ? 'password' : 'text'} bind:value={$formData.current_password} />
<Toggle aria-label={`${hiddenCurrentPassword ? 'Show' : 'Hide' } Current Password}`} onPressedChange={() => hiddenCurrentPassword = !hiddenCurrentPassword}>{#if hiddenCurrentPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
<Input
{...attrs}
autocomplete="password"
type={currentPasswordInput}
bind:value={$formData.current_password}
/>
<Toggle
aria-label={`${hiddenCurrentPassword ? 'Show' : 'Hide'} Current Password}`}
onPressedChange={() => (hiddenCurrentPassword = !hiddenCurrentPassword)}
>
{#if hiddenCurrentPassword}<EyeOff />{:else}<EyeIcon />{/if}
</Toggle>
</span>
</Form.Control>
<Form.FieldErrors />
@ -48,8 +63,18 @@ const { form: formData, enhance } = form
<Form.Control let:attrs>
<Form.Label for="password">New Password</Form.Label>
<span class="flex gap-1">
<Input {...attrs} autocomplete="new-password" type={hiddenPassword ? 'password' : 'text'} bind:value={$formData.password} />
<Toggle aria-label={`${hiddenPassword ? 'Show' : 'Hide' } Password}`} onPressedChange={() => hiddenPassword = !hiddenPassword}>{#if hiddenPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
<Input
{...attrs}
autocomplete="new-password"
type={passwordInput}
bind:value={$formData.password}
/>
<Toggle
aria-label={`${hiddenPassword ? 'Show' : 'Hide'} Password}`}
onPressedChange={() => (hiddenPassword = !hiddenPassword)}
>
{#if hiddenPassword}<EyeOff />{:else}<EyeIcon />{/if}
</Toggle>
</span>
</Form.Control>
<Form.FieldErrors />
@ -58,8 +83,18 @@ const { form: formData, enhance } = form
<Form.Control let:attrs>
<Form.Label for="confirm_password">Confirm New Password</Form.Label>
<span class="flex gap-1">
<Input {...attrs} autocomplete="new-password" type={hiddenConfirmPassword ? 'password' : 'text'} bind:value={$formData.confirm_password} />
<Toggle aria-label={`${hiddenConfirmPassword ? 'Show' : 'Hide' } Confirm Password}`} onPressedChange={() => hiddenConfirmPassword = !hiddenConfirmPassword}>{#if hiddenConfirmPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
<Input
{...attrs}
autocomplete="new-password"
type={confirmPasswordInput}
bind:value={$formData.confirm_password}
/>
<Toggle
aria-label={`${hiddenConfirmPassword ? 'Show' : 'Hide'} Confirm Password}`}
onPressedChange={() => (hiddenConfirmPassword = !hiddenConfirmPassword)}
>
{#if hiddenConfirmPassword}<EyeOff />{:else}<EyeIcon />{/if}
</Toggle>
</span>
</Form.Control>
<Form.FieldErrors />
@ -71,4 +106,4 @@ const { form: formData, enhance } = form
form {
max-width: 20rem;
}
</style>
</style>