chore: improve invitation flow, update project dependencies and documentation for Next.js 16 (#408)

* chore: update project dependencies and documentation for Next.js 16

- Upgraded Next.js from version 15 to 16 across various documentation files and components.
- Updated references to Next.js 16 in AGENTS.md and CLAUDE.md for consistency.
- Incremented application version to 2.21.0 in package.json.
- Refactored identity setup components to improve user experience and added confirmation dialogs for authentication methods.
- Enhanced invitation flow with new logic for handling user redirection and token generation.

* refactor: streamline invitation flow in e2e tests

- Simplified the invitation flow test by using a predefined email instead of generating a random one.
- Removed unnecessary steps such as clearing cookies and reloading the page before user sign-up.
- Enhanced clarity by eliminating commented-out code related to identity verification and user membership checks.

* refactor: improve code readability in IdentitiesPage and UpdatePasswordForm components

- Enhanced formatting of JSX elements in IdentitiesPage and UpdatePasswordForm for better readability.
- Adjusted indentation and line breaks to maintain consistent coding style across components.

* refactor: enhance LinkAccountsList component with user redirection logic

- Updated the LinkAccountsList component to include a redirectToPath option in the useLinkIdentityWithProvider hook for improved user experience.
- Removed redundant user hook declaration to streamline the code structure.

* refactor: update account setup logic in JoinTeamAccountPage

- Introduced a check for email-only authentication support to streamline account setup requirements.
- Adjusted the conditions for determining if a new account should set up additional authentication methods, enhancing user experience for new users.

packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx

@@ -55,12 +55,18 @@ interface LinkAccountsListProps {
   showEmailOption?: boolean;
   enabled?: boolean;
   redirectTo?: string;
+  onPasswordSet?: () => void;
+  onProviderLinked?: () => void;
 }
 
 export function LinkAccountsList(props: LinkAccountsListProps) {
   const unlinkMutation = useUnlinkUserIdentity();
-  const linkMutation = useLinkIdentityWithProvider();
   const pathname = usePathname();
+  const user = useUser();
+
+  const linkMutation = useLinkIdentityWithProvider({
+    redirectToPath: props.redirectTo,
+  });
 
   const {
     identities,
@@ -81,7 +87,6 @@ export function LinkAccountsList(props: LinkAccountsListProps) {
     ? props.providers.filter((provider) => !isProviderConnected(provider))
     : [];
 
-  const user = useUser();
   const amr = user.data ? user.data.amr : [];
 
   const isConnectedWithPassword = amr.some(
@@ -118,7 +123,10 @@ export function LinkAccountsList(props: LinkAccountsListProps) {
    * @param provider
    */
   const handleLinkAccount = (provider: Provider) => {
-    const promise = linkMutation.mutateAsync(provider);
+    const promise = linkMutation.mutateAsync(provider).then((result) => {
+      props.onProviderLinked?.();
+      return result;
+    });
 
     toast.promise(promise, {
       loading: <Trans i18nKey={'account:linkingAccount'} />,
@@ -252,6 +260,7 @@ export function LinkAccountsList(props: LinkAccountsListProps) {
               <UpdatePasswordDialog
                 userEmail={userEmail}
                 redirectTo={props.redirectTo || '/home'}
+                onPasswordSet={props.onPasswordSet}
               />
             </If>
 
@@ -358,12 +367,13 @@ function UpdateEmailDialog(props: { redirectTo: string }) {
 function UpdatePasswordDialog(props: {
   redirectTo: string;
   userEmail: string;
+  onPasswordSet?: () => void;
 }) {
   const [open, setOpen] = useState(false);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
+      <DialogTrigger asChild data-test="open-password-dialog-trigger">
         <Item variant="outline" role="button" className="hover:bg-muted/50">
           <ItemMedia>
             <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
@@ -406,6 +416,7 @@ function UpdatePasswordDialog(props: {
             email={props.userEmail}
             onSuccess={() => {
               setOpen(false);
+              props.onPasswordSet?.();
             }}
           />
         </Suspense>

packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx

@@ -98,7 +98,7 @@ export const UpdatePasswordForm = ({
   return (
     <Form {...form}>
       <form
-        data-test={'account-password-form'}
+        data-test="identity-form"
         onSubmit={form.handleSubmit(updatePasswordCallback)}
       >
         <div className={'flex flex-col space-y-4'}>
@@ -178,7 +178,10 @@ export const UpdatePasswordForm = ({
           </div>
 
           <div>
-            <Button disabled={updateUserMutation.isPending}>
+            <Button
+              disabled={updateUserMutation.isPending}
+              data-test="identity-form-submit"
+            >
               <Trans i18nKey={'account:updatePasswordSubmitLabel'} />
             </Button>
           </div>