fix: bug pressing enter not working in reset password

.github/workflows/turbo-ci.yml

@@ -55,7 +55,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: buildjet/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '22.4.1'
           cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - run: pnpm turbo build --cache-dir=.turbo

apps/extension/src/routes/page/onboarding/set-password.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, MouseEvent, useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import { Button } from '@repo/ui/components/ui/button';
 import {
@@ -20,7 +20,7 @@ export const SetPassword = () => {
   const [password, setPassword] = useState('');
   const [confirmation, setConfirmation] = useState('');
 
-  const handleSubmit = (event: FormEvent | MouseEvent) => {
+  const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
 
     void (async () => {
@@ -32,7 +32,7 @@ export const SetPassword = () => {
   return (
     <FadeTransition>
       <BackIcon className='float-left mb-4' onClick={() => navigate(-1)} />
-      <Card className='w-[400px]' gradient>
+      <Card className='flex w-[400px] flex-col gap-6' gradient>
         <CardHeader className='items-center'>
           <CardTitle>Create a password</CardTitle>
           <CardDescription className='text-center'>
@@ -41,7 +41,7 @@ export const SetPassword = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form className='mt-6 grid gap-4' onSubmit={handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleSubmit}>
             <PasswordInput
               passwordValue={password}
               label='New password'
@@ -63,7 +63,7 @@ export const SetPassword = () => {
               variant='gradient'
               className='mt-2'
               disabled={password !== confirmation}
-              onClick={handleSubmit}
+              type='submit'
             >
               Next
             </Button>

apps/extension/src/routes/page/restore-password/set-password.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { Button } from '@repo/ui/components/ui/button';
 import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import {
@@ -20,48 +20,53 @@ export const SetPassword = () => {
   const [password, setPassword] = useState('');
   const [confirmation, setConfirmation] = useState('');
 
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    void (async function () {
+      await finalOnboardingSave(password);
+      navigate(PagePath.ONBOARDING_SUCCESS);
+    })();
+  };
+
   return (
     <FadeTransition>
       <BackIcon className='float-left mb-4' onClick={() => navigate(-1)} />
-      <Card className='w-[400px]' gradient>
+      <Card className='flex w-[400px] flex-col gap-6' gradient>
         <CardHeader className='items-center'>
           <CardTitle>Create a password</CardTitle>
           <CardDescription className='text-center'>
             We will use this password to encrypt your data and you&apos;ll need it to unlock your
             wallet.
           </CardDescription>
         </CardHeader>
-        <CardContent className='mt-6 grid gap-4'>
-          <PasswordInput
-            passwordValue={password}
-            label='New password'
-            onChange={({ target: { value } }) => setPassword(value)}
-          />
-          <PasswordInput
-            passwordValue={confirmation}
-            label='Confirm password'
-            onChange={({ target: { value } }) => setConfirmation(value)}
-            validations={[
-              {
-                type: 'warn',
-                issue: "passwords don't match",
-                checkFn: (txt: string) => password !== txt,
-              },
-            ]}
-          />
-          <Button
-            variant='gradient'
-            className='mt-2'
-            disabled={password !== confirmation}
-            onClick={() => {
-              void (async function () {
-                await finalOnboardingSave(password);
-                navigate(PagePath.ONBOARDING_SUCCESS);
-              })();
-            }}
-          >
-            Next
-          </Button>
+        <CardContent>
+          <form className='flex flex-col gap-4' onSubmit={handleSubmit}>
+            <PasswordInput
+              passwordValue={password}
+              label='New password'
+              onChange={({ target: { value } }) => setPassword(value)}
+            />
+            <PasswordInput
+              passwordValue={confirmation}
+              label='Confirm password'
+              onChange={({ target: { value } }) => setConfirmation(value)}
+              validations={[
+                {
+                  type: 'warn',
+                  issue: "passwords don't match",
+                  checkFn: (txt: string) => password !== txt,
+                },
+              ]}
+            />
+            <Button
+              variant='gradient'
+              className='mt-2'
+              disabled={password !== confirmation}
+              type='submit'
+            >
+              Next
+            </Button>
+          </form>
         </CardContent>
       </Card>
     </FadeTransition>