gr-registration-dialog: Hide username field if it is not editable

Bug: Issue 14501
Change-Id: I7ded84e7ad2a5c9d67740869666e97fbb8663d15
diff --git a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
index 738abc0..3763fbf 100644
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
@@ -72,7 +72,7 @@
   _serverConfig?: ServerInfo;
 
   @property({
-    computed: '_computeUsernameMutable(_serverConfig, _account.username)',
+    computed: '_computeUsernameMutable(_account.username)',
     type: Boolean,
   })
   _usernameMutable = false;
@@ -121,17 +121,14 @@
       (this._account.username || '') !== (this._username || '');
   }
 
-  _computeUsernameMutable(config?: ServerInfo, username?: string) {
-    // Polymer 2: check for undefined
-    if (config === undefined) {
-      return false;
-    }
-
+  _computeUsernameMutable(username?: string) {
     // Username may not be changed once it is set.
-    return (
-      config.auth.editable_account_fields.includes(
-        EditableAccountField.USER_NAME
-      ) && !username
+    return !username;
+  }
+
+  _computeUsernameEditable(config?: ServerInfo) {
+    return !!config?.auth.editable_account_fields.includes(
+      EditableAccountField.USER_NAME
     );
   }
 
diff --git a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_html.ts b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_html.ts
index 0e31bc9..4b86709 100644
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_html.ts
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_html.ts
@@ -84,20 +84,24 @@
           </iron-input>
         </span>
       </section>
-      <section>
-        <span class="title">Username</span>
-        <span hidden$="[[_usernameMutable]]" class="value">[[_username]]</span>
-        <span hidden$="[[!_usernameMutable]]" class="value">
-          <iron-input bind-value="{{_username}}">
-            <input
-              is="iron-input"
-              id="username"
-              bind-value="{{_username}}"
-              disabled="[[_saving]]"
-            />
-          </iron-input>
-        </span>
-      </section>
+      <template is="dom-if" if="[[_computeUsernameEditable(_serverConfig)]]">
+        <section>
+          <span class="title">Username</span>
+          <span hidden$="[[_usernameMutable]]" class="value"
+            >[[_username]]</span
+          >
+          <span hidden$="[[!_usernameMutable]]" class="value">
+            <iron-input bind-value="{{_username}}">
+              <input
+                is="iron-input"
+                id="username"
+                bind-value="{{_username}}"
+                disabled="[[_saving]]"
+              />
+            </iron-input>
+          </span>
+        </section>
+      </template>
       <hr />
       <p>
         More configuration options for Gerrit may be found in the
diff --git a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_test.ts b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_test.ts
index 22f21e1..6c21e58 100644
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_test.ts
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog_test.ts
@@ -137,53 +137,28 @@
   });
 
   test('_computeUsernameMutable', () => {
+    assert.isTrue(element._computeUsernameMutable(undefined));
+    assert.isFalse(element._computeUsernameMutable('abc'));
+  });
+
+  test('_computeUsernameEditable', () => {
     assert.isTrue(
-      element._computeUsernameMutable(
-        {
-          ...createServerInfo(),
-          auth: {
-            auth_type: AuthType.HTTP,
-            editable_account_fields: [EditableAccountField.USER_NAME],
-          },
+      element._computeUsernameEditable({
+        ...createServerInfo(),
+        auth: {
+          auth_type: AuthType.HTTP,
+          editable_account_fields: [EditableAccountField.USER_NAME],
         },
-        undefined
-      )
+      })
     );
     assert.isFalse(
-      element._computeUsernameMutable(
-        {
-          ...createServerInfo(),
-          auth: {
-            auth_type: AuthType.HTTP,
-            editable_account_fields: [EditableAccountField.USER_NAME],
-          },
+      element._computeUsernameEditable({
+        ...createServerInfo(),
+        auth: {
+          auth_type: AuthType.HTTP,
+          editable_account_fields: [],
         },
-        'abc'
-      )
-    );
-    assert.isFalse(
-      element._computeUsernameMutable(
-        {
-          ...createServerInfo(),
-          auth: {
-            auth_type: AuthType.HTTP,
-            editable_account_fields: [],
-          },
-        },
-        undefined
-      )
-    );
-    assert.isFalse(
-      element._computeUsernameMutable(
-        {
-          ...createServerInfo(),
-          auth: {
-            auth_type: AuthType.HTTP,
-            editable_account_fields: [],
-          },
-        },
-        'abc'
-      )
+      })
     );
   });
 });