Enhance onboarding flow and improve user authentication handling

playwright.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig, devices } from '@playwright/test';
 
+// Set NODE_ENV to test for test environment
+process.env.NODE_ENV = 'test';
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv

src/common/schema.ts

@@ -1728,6 +1728,7 @@ export interface components {
        */
       authType: "legacy" | "cognito";
       onboarding_pending?: boolean;
+      invitation_token?: string;
     };
     /** UserPreference */
     UserPreference: {

src/features/api/index.ts

@@ -3302,6 +3302,7 @@ export type User = {
   unguess_wp_user_id: number;
   authType: 'legacy' | 'cognito';
   onboarding_pending?: boolean;
+  invitation_token?: string;
 };
 export type UserPreference = {
   name: string;

src/features/auth/context.tsx

@@ -9,6 +9,7 @@ import {
   resendSignUpCode,
   resetPassword,
   confirmResetPassword,
+  updatePassword,
   type SignInInput,
   type SignUpInput,
   type ConfirmSignUpInput,
@@ -24,6 +25,7 @@ interface LoginResult {
   isSignedIn: boolean;
   mfaChallenge?: MfaChallengeStep;
   requiresNewPassword?: boolean;
+  requiresSignUpConfirmation?: boolean;
 }
 
 interface ForgotPasswordResult {
@@ -38,6 +40,7 @@ interface AuthContextType {
   resendSignupCode: (email: string) => Promise<void>;
   confirmMfaSignIn: (code: string) => Promise<void>;
   setNewPassword: (newPassword: string) => Promise<void>;
+  changePassword: (oldPassword: string, newPassword: string) => Promise<void>;
   forgotPassword: (email: string) => Promise<ForgotPasswordResult>;
   confirmForgotPassword: (
     email: string,
@@ -87,6 +90,14 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
             requiresNewPassword: true,
           };
         }
+
+        // Utente registrato ma non ha confermato l'email
+        if (nextStep.signInStep === 'CONFIRM_SIGN_UP') {
+          return {
+            isSignedIn: false,
+            requiresSignUpConfirmation: true,
+          };
+        }
       }
 
       await syncWordpress();
@@ -129,6 +140,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   };
 
+  const changePassword = async (
+    oldPassword: string,
+    newPassword: string
+  ): Promise<void> => {
+    try {
+      await updatePassword({ oldPassword, newPassword });
+      await syncWordpress();
+    } catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.error('Change password error:', error);
+      throw new Error(error.message || 'Failed to change password');
+    }
+  };
+
   const signup = async (email: string, password: string, name: string) => {
     try {
       const signUpInput: SignUpInput = {
@@ -241,6 +266,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
       resendSignupCode,
       confirmMfaSignIn,
       setNewPassword,
+      changePassword,
       forgotPassword,
       confirmForgotPassword: confirmForgotPasswordFn,
       logout,

src/features/auth/syncWordpress.ts

@@ -2,16 +2,17 @@ import { fetchAuthSession } from 'aws-amplify/auth';
 import { isDev } from 'src/common/isDevEnvironment';
 
 export const syncWordpress = async (): Promise<void> => {
-  const session = await fetchAuthSession();
+  try {
+    const session = await fetchAuthSession();
 
-  const idToken = session.tokens?.idToken?.toString();
+    const idToken = session.tokens?.idToken?.toString();
+
+    if (!idToken) {
+      // eslint-disable-next-line no-console
+      console.error('SyncWP: No ID token available');
+      return;
+    }
 
-  if (!idToken) {
-    // eslint-disable-next-line no-console
-    console.error('SyncWP: No ID token available');
-    return;
-  }
-  try {
     const response = await fetch(
       `${process.env.REACT_APP_CROWD_WP_URL}/wp-json/cognito-sync/v1/login`,
       {
@@ -23,12 +24,11 @@ export const syncWordpress = async (): Promise<void> => {
     );
 
     const result = await response.json();
-
     if (isDev()) {
       // eslint-disable-next-line no-console
       console.log('🚀 ~ syncWordpress ~ result:', result);
     }
-  } catch (error: any) {
+  } catch (error) {
     // eslint-disable-next-line no-console
     console.error('SyncWP error:', error);
   }

src/features/navigation/Navigation/NavigationProfileModal.tsx

@@ -8,9 +8,8 @@
 import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { isDev } from 'src/common/isDevEnvironment';
 import { prepareGravatar } from 'src/common/utils';
-import WPAPI from 'src/common/wpapi';
-import { useGetUsersMeQuery, unguessApi } from 'src/features/api';
+import { useGetUsersMeQuery } from 'src/features/api';
 import { useAuth } from 'src/features/auth/context';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import { setProfileModalOpen } from '../navigationSlice';
 import { usePathWithoutLocale } from '../usePathWithoutLocale';
@@ -27,7 +26,6 @@
   const { t, i18n } = useTranslation();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const { logout: cognitoLogout } = useAuth();
 
   const pathWithoutLocale = usePathWithoutLocale();
 
@@ -102,23 +100,7 @@
       }
     },
     onLogout: async () => {
-      // TODO: rimuovere wp dopo migration completa
-      try {
-        // Se l'utente è autenticato con Cognito, esegui logout Cognito
-        if (user?.authType === 'cognito') {
-          await cognitoLogout();
-        }
-
-        // Logout legacy WP per utenti con cookie
-        await WPAPI.logout();
-
-        // Reset rtk query cache
-        dispatch(unguessApi.util.resetApiState());
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error('logout error:', err);
-        document.location.href = '/login';
-      }
+      navigate('/logout');
     },
     onCopyEmail: () => {
       addToast(

src/locales/en/translation.json

@@ -1631,10 +1631,13 @@
   "CONFIRM_EMAIL_DESCRIPTION": "We sent an email with your code to:",
   "CONFIRM_EMAIL_DIDNT_RECEIVE": "Didn't receive a code?",
   "CONFIRM_EMAIL_ERROR_GENERIC": "Something went wrong. Please try again.",
-  "CONFIRM_EMAIL_TITLE": "Verify your email",
+  "CONFIRM_EMAIL_TITLE": "All set! Just verify your email to begin",
   "CONFIRM_PASSWORD_LABEL": "Confirm password",
+  "CONFIRM_PASSWORD_MUST_MATCH": "Passwords must match",
   "CONFIRM_PASSWORD_PLACEHOLDER": "Confirm your password",
+  "CONFIRM_PASSWORD_REQUIRED": "Please confirm your password",
   "FORGOT_PASSWORD_BACK_TO_LOGIN": "Back to log in",
+  "FORGOT_PASSWORD_BACK_TO_PROFILE": "Back to profile",
   "FORGOT_PASSWORD_CHANGE_SUBTITLE": "Enter a new password for your account",
   "FORGOT_PASSWORD_CHANGE_TITLE": "Change your password",
   "FORGOT_PASSWORD_CHECK_EMAIL_SUBTITLE": "We sent a password reset link to <bold>{{email}}</bold>.",

src/locales/it/translation.json

@@ -1676,8 +1676,11 @@
   "CONFIRM_EMAIL_ERROR_GENERIC": "",
   "CONFIRM_EMAIL_TITLE": "",
   "CONFIRM_PASSWORD_LABEL": "",
+  "CONFIRM_PASSWORD_MUST_MATCH": "",
   "CONFIRM_PASSWORD_PLACEHOLDER": "",
+  "CONFIRM_PASSWORD_REQUIRED": "",
   "FORGOT_PASSWORD_BACK_TO_LOGIN": "",
+  "FORGOT_PASSWORD_BACK_TO_PROFILE": "",
   "FORGOT_PASSWORD_CHANGE_SUBTITLE": "",
   "FORGOT_PASSWORD_CHANGE_TITLE": "",
   "FORGOT_PASSWORD_CHECK_EMAIL_SUBTITLE": "",

src/pages/Auth/logout.tsx

@@ -1,13 +1,43 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useAppDispatch } from 'src/app/hooks';
 import { PageLoader } from 'src/common/components/PageLoader';
+import { unguessApi, useGetUsersMeQuery } from 'src/features/api';
+import { useAuth } from 'src/features/auth/context';
 
 export const LogoutPage = () => {
   const navigate = useNavigate();
+  const { data: user } = useGetUsersMeQuery();
+  const { logout: cognitoLogout } = useAuth();
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
-    navigate('/login');
-  }, [navigate]);
+    const performLogout = async () => {
+      try {
+        if (user?.authType === 'cognito') {
+          await cognitoLogout();
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error('Cognito logout error:', err);
+      }
+
+      try {
+        await fetch(
+          `${process.env.REACT_APP_CROWD_WP_URL}/wp-admin/admin-ajax.php?action=unguess_wp_logout`,
+          { method: 'GET', credentials: 'include' }
+        );
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error('WP logout error:', err);
+      }
+
+      dispatch(unguessApi.util.resetApiState());
+      navigate('/login');
+    };
+
+    performLogout();
+  }, [navigate, dispatch, user, cognitoLogout]);
 
   return <PageLoader />;
 };

src/pages/ForgotPasswordPage/CheckEmailStep.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import { Anchor, MD, Span, Title, XL } from '@appquality/unguess-design-system';
 import { appTheme } from 'src/app/theme';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
@@ -14,7 +15,10 @@ interface CheckEmailStepProps {
 
 export const CheckEmailStep = ({ email, onResend }: CheckEmailStepProps) => {
   const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const isFromProfile = searchParams.get('from') === 'profile';
   const loginRoute = useLocalizeRoute('login');
+  const profileRoute = useLocalizeRoute('profile');
   const [resendTimer, setResendTimer] = useState(0);
   const [isResending, setIsResending] = useState(false);
 
@@ -103,8 +107,13 @@ export const CheckEmailStep = ({ email, onResend }: CheckEmailStepProps) => {
       </MD>
 
       <div style={{ textAlign: 'center', marginTop: appTheme.space.lg }}>
-        <Anchor href={loginRoute} style={{ color: appTheme.palette.blue[600] }}>
-          {t('FORGOT_PASSWORD_BACK_TO_LOGIN')}
+        <Anchor
+          href={isFromProfile ? profileRoute : loginRoute}
+          style={{ color: appTheme.palette.blue[600] }}
+        >
+          {isFromProfile
+            ? t('FORGOT_PASSWORD_BACK_TO_PROFILE')
+            : t('FORGOT_PASSWORD_BACK_TO_LOGIN')}
         </Anchor>
       </div>
     </>

src/pages/ForgotPasswordPage/ForgotPasswordForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import {
   Button,
   FormField,
@@ -26,7 +27,10 @@ interface ForgotPasswordFormProps {
 
 export const ForgotPasswordForm = ({ onSubmit }: ForgotPasswordFormProps) => {
   const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const isFromProfile = searchParams.get('from') === 'profile';
   const loginRoute = useLocalizeRoute('login');
+  const profileRoute = useLocalizeRoute('profile');
   const [email, setEmail] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -106,13 +110,15 @@ export const ForgotPasswordForm = ({ onSubmit }: ForgotPasswordFormProps) => {
         <Button
           type="button"
           onClick={() => {
-            window.location.href = loginRoute;
+            window.location.href = isFromProfile ? profileRoute : loginRoute;
           }}
           isBasic
           isStretched
           style={{ marginTop: appTheme.space.xs }}
         >
-          {t('FORGOT_PASSWORD_BACK_TO_LOGIN')}
+          {isFromProfile
+            ? t('FORGOT_PASSWORD_BACK_TO_PROFILE')
+            : t('FORGOT_PASSWORD_BACK_TO_LOGIN')}
         </Button>
       </StyledForm>
     </>