chore(web): migration svelte 5 syntax (#13883)

web/src/lib/components/forms/change-password-form.svelte

@@ -4,17 +4,21 @@
   import { updateMyUser } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
-  export let onSuccess: () => void;
+  interface Props {
+    onSuccess: () => void;
+  }
 
-  let errorMessage: string;
+  let { onSuccess }: Props = $props();
+
+  let errorMessage: string = $state('');
   let success: string;
 
-  let password = '';
-  let passwordConfirm = '';
+  let password = $state('');
+  let passwordConfirm = $state('');
 
-  let valid = false;
+  let valid = $state(false);
 
-  $: {
+  $effect(() => {
     if (password !== passwordConfirm && passwordConfirm.length > 0) {
       errorMessage = $t('password_does_not_match');
       valid = false;
@@ -22,7 +26,7 @@
       errorMessage = '';
       valid = true;
     }
-  }
+  });
 
   async function changePassword() {
     if (valid) {
@@ -33,9 +37,14 @@
       onSuccess();
     }
   }
+
+  const onsubmit = async (event: Event) => {
+    event.preventDefault();
+    await changePassword();
+  };
 </script>
 
-<form on:submit|preventDefault={changePassword} method="post" class="mt-5 flex flex-col gap-5">
+<form {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" />