[MM-63041] Convert many inputs to the Input component, replace clientError with more correct client-side validation that conforms to the input (#31279)

* [MM-63041] Convert many inputs to the Input component, replace clientError with more correct client-side validation that conforms to the input

* Fix line length

* PR feedback

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/lib/src/ui/components/channels/profile_modal.ts

@@ -16,8 +16,6 @@ export default class ProfileModal {
     readonly saveButton;
     readonly cancelButton;
 
-    readonly errorText;
-
     constructor(container: Locator) {
         this.container = container;
 
@@ -30,8 +28,6 @@ export default class ProfileModal {
         this.closeButton = container.getByRole('button', {name: 'Close'});
         this.saveButton = container.locator('button:has-text("Save")');
         this.cancelButton = container.locator('button:has-text("Cancel")');
-
-        this.errorText = container.locator('#clientError');
     }
 
     async toBeVisible() {

e2e-tests/playwright/specs/functional/channels/custom_profile_attributes/user_settings.spec.ts

@@ -346,13 +346,13 @@ test('MM-T5772 URL Validation in Custom Profile Attributes @custom_profile_attri
     await profileModal.container.locator(`#customAttribute_${fieldId}`).scrollIntoViewIfNeeded();
     await profileModal.container.locator(`#customAttribute_${fieldId}`).clear();
     await profileModal.container.locator(`#customAttribute_${fieldId}`).fill(TEST_INVALID_URL);
-
-    // 4. Try to save the changes
-    await profileModal.saveButton.click();
+    await profileModal.container.locator(`#customAttribute_${fieldId}`).blur();
 
     // * Save button doesn't complete the operation with invalid URL
-    await expect(profileModal.errorText).toBeVisible();
-    await expect(profileModal.errorText).toHaveText('Please enter a valid url.');
+    await expect(profileModal.container.locator(`#error_customAttribute_${fieldId}`)).toBeVisible();
+    await expect(profileModal.container.locator(`#error_customAttribute_${fieldId}`)).toHaveText(
+        'Please enter a valid url.',
+    );
 
     // 5. Edit Website field and enter a valid URL
     await profileModal.container.locator(`#customAttribute_${fieldId}`).clear();
@@ -362,6 +362,6 @@ test('MM-T5772 URL Validation in Custom Profile Attributes @custom_profile_attri
     await profileModal.saveButton.click();
 
     // * Valid URL saves successfully with no error message
-    await expect(profileModal.errorText).not.toBeVisible();
+    await expect(profileModal.container.locator(`#error_customAttribute_${fieldId}`)).not.toBeVisible();
     await expect(profileModal.container).toContainText(TEST_VALID_URL);
 });