FUI - Bug fixes for User pages (#2781)

Author: jsorohova

src/components/users/change-password/react/runtime/ChangePasswordRuntime.tsx

@@ -49,7 +49,10 @@ export class ChangePasswordRuntime extends React.Component<ChangePasswordRuntime
 
         const validationGroup = {
             password: ValidationMessages.passwordRequired,
-            newPassword: { required: ValidationMessages.newPasswordRequired, eval: (val) => val.length < 8 && "New password is too short." }, // TODO: password requirements should come from Management API.
+            newPassword: {
+                required: ValidationMessages.newPasswordRequired,
+                eval: (val) => (val.length < 8 && "New password should be at least 8 characters long.") || (val === password && ValidationMessages.newPasswordMustBeDifferent)
+            }, // TODO for self-hosted: password requirements should come from Management API.
             passwordConfirmation: { eval: (val) => val !== newPassword && ValidationMessages.passwordConfirmationMustMatch },
         }
 

src/components/users/confirm-password/react/runtime/ConfirmPasswordRuntime.tsx

@@ -78,7 +78,7 @@ export class ConfirmPasswordRuntime extends React.Component<{}, ConfirmPasswordR
         }
 
         const validationGroup = {
-            password: { required: ValidationMessages.passwordRequired, eval: (val) => val.length < 8 && "Password is too short." }, // TODO: password requirements should come from Management API.
+            password: { required: ValidationMessages.passwordRequired, eval: (val) => val.length < 8 && "Password should be at least 8 characters long." }, // TODO for self-hosted: password requirements should come from Management API.
             passwordConfirmation: { eval: (val) => val !== password && ValidationMessages.passwordConfirmationMustMatch },
         }
 

src/components/users/profile/react/runtime/ProfileTable.tsx

@@ -78,8 +78,8 @@ export const ProfileTable = ({ user, save, changePassword, deleteAccount, delega
 
                 <TableBody>
                     <TableRow>
-                        <TableCell>{user.email}</TableCell>
-                        <TableCell>
+                        <TableCell className="text-truncate">{user.email}</TableCell>
+                        <TableCell className="text-truncate">
                             <ValueOrField
                                 enableSave={false}
                                 isEdit={isEdit}
@@ -90,7 +90,7 @@ export const ProfileTable = ({ user, save, changePassword, deleteAccount, delega
                                 {user.firstName}
                             </ValueOrField>
                         </TableCell>
-                        <TableCell>
+                        <TableCell className="text-truncate">
                             <ValueOrField
                                 enableSave={false}
                                 isEdit={isEdit}

src/components/users/signup/react/runtime/SignUpRuntime.tsx

@@ -115,7 +115,7 @@ export class SignUpRuntime extends React.Component<SignUpRuntimeProps> {
 
         const validationGroup = {
             email: ValidationMessages.emailRequired,
-            password: { required: ValidationMessages.passwordRequired, eval: (val) => val.length < 8 && "Password is too short." }, // TODO: password requirements should come from Management API.
+            password: { required: ValidationMessages.passwordRequired, eval: (val) => val.length < 8 && "Password should be at least 8 characters long." }, // TODO for self-hosted: password requirements should come from Management API.
             passwordConfirmation: { eval: (val) => val !== password && ValidationMessages.passwordConfirmationMustMatch },
             firstName: ValidationMessages.firstNameRequired,
             lastName: ValidationMessages.lastNameRequired,

src/components/users/validation-summary/utils.ts

@@ -8,14 +8,14 @@ import { eventTypes } from "../../../logging/clientLogger";
 export function parseAndDispatchError(
     eventManager: EventManager,
     source: ErrorSources,
-    error: Error,
+    error: MapiError,
     logger: Logger,
     defaultMessage?: string,
     errorDetailsMap: (detail: any) => string = detail => `${detail.message}`
 ): string[] {
     let errorDetails: string[];
 
-    if (error instanceof MapiError && error.code === "ValidationError" && error.details?.length > 0) {
+    if (error.code === "ValidationError" && error.details?.length > 0) {
         errorDetails = error.details.map(errorDetailsMap); // Prioritize errors from the error.details object.
     } else if (error.message) {
         errorDetails = [defaultMessage ?? error.message];