[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/cypress/tests/integration/channels/account_settings/profile/email_spec.ts

@@ -81,11 +81,11 @@ describe('Profile > Profile Settings > Email', () => {
         // # Click "Edit" to the right of "Email"
         cy.get('#emailEdit').should('be.visible').click();
 
-        // # Save the settings
-        cy.uiSave().wait(TIMEOUTS.HALF_SEC);
+        // # Click on the input and blur it
+        cy.get('#primaryEmail').should('be.visible').click().blur();
 
         // * Check that the correct error message is shown.
-        cy.get('#clientError').should('be.visible').should('have.text', 'Please enter a valid email address');
+        cy.get('#error_primaryEmail').should('be.visible').should('have.text', 'Please enter a valid email address');
     });
 
     it('MM-T2067 email address already taken error', () => {
@@ -113,11 +113,8 @@ describe('Profile > Profile Settings > Email', () => {
         cy.get('#confirmEmail').should('be.visible').clear();
         cy.get('#currentPassword').should('be.visible').type('randompass');
 
-        // # Save the settings
-        cy.uiSave().wait(TIMEOUTS.HALF_SEC);
-
         // * Check that the correct error message is shown.
-        cy.get('#clientError').should('be.visible').should('have.text', 'The new emails you entered do not match.');
+        cy.get('#error_confirmEmail').should('be.visible').should('have.text', 'The new emails you entered do not match.');
     });
 
     // This test is a combination of 4 sub-tests because they are sub-parts of the same test.

e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts

@@ -47,11 +47,10 @@ describe('Settings > Sidebar > General > Edit', () => {
     it('MM-T2050 Username cannot be blank', () => {
         // # Clear the username textfield contents
         cy.get('#usernameEdit').click();
-        cy.get('#username').clear();
-        cy.uiSave();
+        cy.get('#username').click().clear().blur();
 
         // * Check if element is present and contains expected text values
-        cy.get('#clientError').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
+        cy.get('#error_username').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
 
         // # Click "x" button to close Profile modal
         cy.uiClose();
@@ -62,11 +61,10 @@ describe('Settings > Sidebar > General > Edit', () => {
         cy.get('#usernameEdit').click();
 
         // # Add the username to textfield contents
-        cy.get('#username').clear().type('te');
-        cy.uiSave();
+        cy.get('#username').clear().type('te').blur();
 
         // * Check if element is present and contains expected text values
-        cy.get('#clientError').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
+        cy.get('#error_username').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
 
         // # Click "x" button to close Profile modal
         cy.uiClose();
@@ -151,11 +149,10 @@ describe('Settings > Sidebar > General > Edit', () => {
 
         for (const prefix of prefixes) {
             // # Add  username to textfield contents
-            cy.get('#username').clear().type(prefix).type('{backspace}.').type(otherUser.username);
-            cy.uiSave();
+            cy.get('#username').clear().type(prefix).type('{backspace}.').type(otherUser.username).blur();
 
             // * Check if element is present and contains expected text values
-            cy.get('#clientError').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
+            cy.get('#error_username').should('be.visible').should('contain', 'Username must begin with a letter, and contain between 3 to 22 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\', and \'_\'.');
         }
 
         // # Click "x" button to close Profile modal
@@ -175,11 +172,10 @@ describe('Settings > Sidebar > General > Edit', () => {
 
         for (const username of usernames) {
             // # Add  username to textfield contents
-            cy.get('#username').clear().type(username);
-            cy.uiSave();
+            cy.get('#username').clear().type(username).blur();
 
             // * Check if element is present and contains expected text values
-            cy.get('#clientError').should('be.visible').should('contain', 'This username is reserved, please choose a new one.');
+            cy.get('#error_username').should('be.visible').should('contain', 'This username is reserved, please choose a new one.');
         }
 
         // # Click "x" button to close Profile modal