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

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

@@ -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.');
 	},
 }

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

@@ -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>
+		<Alert.Description>Changing your password will log you out of all devices.</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} />
+				<Input
-				<Toggle aria-label={`${hiddenCurrentPassword ? 'Show' : 'Hide' } Current Password}`} onPressedChange={() => hiddenCurrentPassword = !hiddenCurrentPassword}>{#if hiddenCurrentPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
+					{...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} />
+				<Input
-				<Toggle aria-label={`${hiddenPassword ? 'Show' : 'Hide' } Password}`} onPressedChange={() => hiddenPassword = !hiddenPassword}>{#if hiddenPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
+					{...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} />
+				<Input
-				<Toggle aria-label={`${hiddenConfirmPassword ? 'Show' : 'Hide' } Confirm Password}`} onPressedChange={() => hiddenConfirmPassword = !hiddenConfirmPassword}>{#if hiddenConfirmPassword}<EyeIcon />{:else}<EyeOff />{/if}</Toggle>
+					{...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>