Next.js 16, React 19.2, Identities page, Invitations identities step, PNPM Catalogs (#381)

* Upgraded to Next.js 16
* Refactored code to comply with React 19.2 ESLint rules
* Refactored some useEffect usages with the new useEffectEvent
* Added Identities page and added second step to set up an identity after accepting an invitation
* Updated all dependencies
* Introduced PNPM catalogs for some frequently updated dependencies
* Bugs fixing and improvements

packages/features/auth/src/components/update-password-form.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { ArrowRightIcon } from 'lucide-react';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import type { z } from 'zod';
 
 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
@@ -26,8 +26,13 @@ import { Trans } from '@kit/ui/trans';
 
 import { PasswordResetSchema } from '../schemas/password-reset.schema';
 
-export function UpdatePasswordForm(params: { redirectTo: string }) {
+export function UpdatePasswordForm(params: {
+  redirectTo: string;
+  heading?: React.ReactNode;
+}) {
   const updateUser = useUpdateUser();
+  const router = useRouter();
+  const { t } = useTranslation();
 
   const form = useForm<z.infer<typeof PasswordResetSchema>>({
     resolver: zodResolver(PasswordResetSchema),
@@ -43,26 +48,28 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
     return <ErrorState error={error} onRetry={() => updateUser.reset()} />;
   }
 
-  if (updateUser.data && !updateUser.isPending) {
-    return <SuccessState redirectTo={params.redirectTo} />;
-  }
-
   return (
     <div className={'flex w-full flex-col space-y-6'}>
       <div className={'flex justify-center'}>
-        <Heading level={5} className={'tracking-tight'}>
-          <Trans i18nKey={'auth:passwordResetLabel'} />
-        </Heading>
+        {params.heading && (
+          <Heading className={'text-center'} level={4}>
+            {params.heading}
+          </Heading>
+        )}
       </div>
 
       <Form {...form}>
         <form
           className={'flex w-full flex-1 flex-col'}
-          onSubmit={form.handleSubmit(({ password }) => {
-            return updateUser.mutateAsync({
+          onSubmit={form.handleSubmit(async ({ password }) => {
+            await updateUser.mutateAsync({
               password,
               redirectTo: params.redirectTo,
             });
+
+            router.replace(params.redirectTo);
+
+            toast.success(t('account:updatePasswordSuccessMessage'));
           })}
         >
           <div className={'flex-col space-y-4'}>
@@ -75,7 +82,12 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
                   </FormLabel>
 
                   <FormControl>
-                    <Input required type="password" {...field} />
+                    <Input
+                      required
+                      type="password"
+                      autoComplete={'new-password'}
+                      {...field}
+                    />
                   </FormControl>
 
                   <FormMessage />
@@ -114,34 +126,6 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
   );
 }
 
-function SuccessState(props: { redirectTo: string }) {
-  return (
-    <div className={'flex flex-col space-y-4'}>
-      <Alert variant={'success'}>
-        <CheckIcon className={'s-6'} />
-
-        <AlertTitle>
-          <Trans i18nKey={'account:updatePasswordSuccess'} />
-        </AlertTitle>
-
-        <AlertDescription>
-          <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
-        </AlertDescription>
-      </Alert>
-
-      <Link href={props.redirectTo}>
-        <Button variant={'outline'} className={'w-full'}>
-          <span>
-            <Trans i18nKey={'common:backToHomePage'} />
-          </span>
-
-          <ArrowRightIcon className={'ml-2 h-4'} />
-        </Button>
-      </Link>
-    </div>
-  );
-}
-
 function ErrorState(props: {
   onRetry: () => void;
   error: {