refactor: auth pages (#15328)

web/src/routes/auth/change-password/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
-  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
   import { AppRoute } from '$lib/constants';
   import { resetSavedUser, user } from '$lib/stores/user.store';
-  import { logout } from '@immich/sdk';
-  import type { PageData } from './$types';
+  import { logout, updateMyUser } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -14,14 +15,26 @@
 
   let { data }: Props = $props();
 
-  const onSuccess = async () => {
+  let password = $state('');
+  let passwordConfirm = $state('');
+  const valid = $derived(password === passwordConfirm && passwordConfirm.length > 0);
+  const errorMessage = $derived(passwordConfirm.length === 0 || valid ? '' : $t('password_does_not_match'));
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    if (!valid) {
+      return;
+    }
+
+    await updateMyUser({ userUpdateMeDto: { password: String(password) } });
     await goto(AppRoute.AUTH_LOGIN);
     resetSavedUser();
     await logout();
   };
 </script>
 
-<FullscreenContainer title={data.meta.title}>
+<AuthPageLayout title={data.meta.title}>
   {#snippet message()}
     <p>
       {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
@@ -31,5 +44,23 @@
     </p>
   {/snippet}
 
-  <ChangePasswordForm {onSuccess} />
-</FullscreenContainer>
+  <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="password">{$t('new_password')}</label>
+      <PasswordField id="password" bind:password autocomplete="new-password" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="confirmPassword">{$t('confirm_password')}</label>
+      <PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
+    </div>
+
+    {#if errorMessage}
+      <p class="text-sm text-red-400">{errorMessage}</p>
+    {/if}
+
+    <div class="my-5 flex w-full">
+      <Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('to_change_password')}</Button>
+    </div>
+  </form>
+</AuthPageLayout>