feat: [UIE-8819] - IAM RBAC: User Email validation (linode#12395)

* feat: [UIE-8819] - IAM RBAC: User Email validation

* Added changeset: IAM RBAC: email validation

Author: mpolotsk-akamai

packages/manager/src/features/IAM/Users/UserDetails/UserEmailPanel.test.tsx

@@ -1,12 +1,29 @@
 import { profileFactory } from '@linode/utilities';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { accountUserFactory } from 'src/factories';
 import { http, HttpResponse, server } from 'src/mocks/testServer';
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import {
+  renderWithTheme,
+  renderWithThemeAndRouter,
+} from 'src/utilities/testHelpers';
 
 import { UserEmailPanel } from './UserEmailPanel';
 
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+}));
+
+// Mock useProfile
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
 describe('UserEmailPanel', () => {
   it("initializes the form with the user's email", async () => {
     const user = accountUserFactory.build();
@@ -69,4 +86,26 @@ describe('UserEmailPanel', () => {
     // Verify save button is disabled
     expect(getByText('Save').closest('button')).toBeDisabled();
   });
+
+  it('shows validation error for invalid email address', async () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ username: 'user-1' }),
+    });
+    const user = accountUserFactory.build({
+      username: 'user-1',
+    });
+
+    await renderWithThemeAndRouter(<UserEmailPanel user={user} />);
+
+    const emailInput = screen.getByLabelText('Email');
+
+    await userEvent.clear(emailInput);
+    await userEvent.type(emailInput, 'user#@example.com');
+
+    const saveButton = screen.getByText('Save').closest('button');
+    await userEvent.click(saveButton!);
+
+    const errorText = screen.getByText(/invalid email address/i);
+    expect(errorText).toBeInTheDocument();
+  });
 });

packages/validation/.changeset/pr-12395-added-1750167713273.md

@@ -0,0 +1,5 @@
+---
+"@linode/validation": Added
+---
+
+IAM RBAC: email validation ([#12395](https://github.com/linode/manager/pull/12395))

packages/validation/src/profile.schema.ts

@@ -1,6 +1,12 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
 import { array, boolean, number, object, string } from 'yup';
 
+// Using the same regex as the API to ensure consistent email validation across UI and backend.
+const EMAIL_VALIDATION_REGEX = new RegExp(
+  // eslint-disable-next-line sonarjs/regex-complexity
+  /^(?!-.*|.*(\.{2}|@-))[a-zA-Z0-9_.+"-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]*[a-zA-Z0-9]$/,
+);
+
 export const createPersonalAccessTokenSchema = object({
   scopes: string(),
   expiry: string(),
@@ -27,7 +33,9 @@ export const updateSSHKeySchema = object({
 });
 
 export const updateProfileSchema = object({
-  email: string().email(),
+  email: string()
+    .email()
+    .matches(EMAIL_VALIDATION_REGEX, `Invalid email address. `),
   timezone: string(),
   email_notifications: boolean(),
   authorized_keys: array().of(string()),