crostini: installer should not show an error for empty username

... but empty username should still cause the install button to be
disabled.

Bug: 1016195
Change-Id: I14685367b280c833e389a777b6e1960bbf3fb978
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2054023
Auto-Submit: Jason Lin <lxj@google.com>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Commit-Queue: Jason Lin <lxj@google.com>
Cr-Commit-Position: refs/heads/master@{#741358}

chrome/browser/resources/chromeos/crostini_installer/app.html

@@ -149,7 +149,7 @@
     <cr-button id="install" class="action-button"
         on-click="onInstallButtonClick_" aria-describedby="title"
         aria-details="prompt-message" hidden="[[!showInstallButton_(state_)]]"
-        disabled="[[disableInstallButton_(state_, usernameError_)]]">
+        disabled="[[disableInstallButton_(state_, username_, usernameError_)]]">
       [[getInstallButtonLabel_(state_)]]
     </cr-button>
   </div>

chrome/browser/resources/chromeos/crostini_installer/app.js

@@ -302,12 +302,16 @@ Polymer({
 
   /**
    * @param {State} state
+   * @param {string} username
    * @param {string} usernameError
    * @returns {boolean}
    * @private
    */
-  disableInstallButton_(state, usernameError) {
-    return state === State.CONFIGURE && usernameError !== '';
+  disableInstallButton_(state, username, usernameError) {
+    if (state === State.CONFIGURE) {
+      return !username || !!usernameError;
+    }
+    return false;
   },
 
   /**
@@ -485,7 +489,9 @@ Polymer({
 
   /** @private */
   onUsernameChanged_(username, oldUsername) {
-    if (UNAVAILABLE_USERNAMES.includes(username)) {
+    if (!username) {
+      this.usernameError_ = '';
+    } else if (UNAVAILABLE_USERNAMES.includes(username)) {
       this.usernameError_ =
           loadTimeData.getStringF('usernameNotAvailableError', username);
     } else if (!/^[a-z_]/.test(username)) {

chrome/test/data/webui/chromeos/crostini_installer_app_test.js

@@ -138,6 +138,7 @@ suite('<crostini-installer-app>', () => {
         app.$.username.value,
         loadTimeData.getString('defaultContainerUsername'));
 
+    // Test invalid usernames
     const invalidUsernames = [
       'root',   // Unavailable.
       '0abcd',  // Invalid first character.
@@ -153,6 +154,15 @@ suite('<crostini-installer-app>', () => {
       expectTrue(app.$.install.disabled);
     }
 
+    // Test the empty username. The username field should not show an error, but
+    // we want the install button to be disabled.
+    app.$.username.value = '';
+    await flushTasks();
+    expectFalse(app.$.username.invalid);
+    expectFalse(!!app.$.username.errorMessage);
+    expectTrue(app.$.install.disabled);
+
+    // Test a valid username
     const validUsername = 'totally-valid_username';
     app.$.username.value = validUsername;
     await flushTasks();