Set default login mode to first authentication-mode option (#4921)

* Set default login mode to first authentication-mode option

authentication-mode options specified in backend, i.e. `token` (default),
`basic` or both, are retrieved from frontend, and login mode selections
are set in order of the options specified.

But `Kubeconfig` is set as default in frontend for now.

This commit enables to set default selection by operator's specification
of authentication-mode.

* Simplify logic

* Fix test
Co-authored-by: NSebastian Florek <s.florek91@gmail.com>

docs/common/dashboard-arguments.md

@@ -23,7 +23,7 @@ Dashboard container accepts multiple arguments that can be used to customize it
 | kubeconfig    | -             | Path to kubeconfig file with authorization and master location information. |
 | namespace     | kube-system   | When non-default namespace is used, create encryption key in the specified namespace. |
 | token-ttl     | 900           | Expiration time (in seconds) of JWE tokens generated by dashboard. '0' never expires.
-| authentication-mode | token   | Enables authentication options that will be reflected on login screen. Supported values: token, basic. Note that basic option should only be used if apiserver has '--authorization-mode=ABAC' and '--basic-auth-file' flags set. |
+| authentication-mode | token   | Enables authentication options that will be reflected on the login screen in the same order as provided. Multiple options can be used at once. Supported values: token, basic. Note that basic option should only be used if apiserver has '--authorization-mode=ABAC' and '--basic-auth-file' flags set. |
 | enable-insecure-login | false | When enabled, Dashboard login view will also be shown when Dashboard is not served over HTTPS. |
 | enable-skip-login | false | When enabled, the skip button on the login page will be shown. |
 | disable-settings-authorizer | false | When enabled, Dashboard settings page will not require user to be logged in and authorized to access settings page. |

src/app/frontend/login/component.spec.ts

@@ -138,7 +138,7 @@ describe('LoginComponent', () => {
       const req = httpTestingController.expectOne('api/v1/login/modes');
       req.flush(mockEnabledAuthenticationModes);
       fixture.detectChanges();
-      expect(fixture.debugElement.queryAll(By.css('mat-radio-button')).length).toEqual(5);
+      expect(fixture.debugElement.queryAll(By.css('mat-radio-button')).length).toEqual(6);
     });
 
     it('renders skip button if login is skippable', () => {

src/app/frontend/login/component.ts

@@ -65,6 +65,8 @@ export class LoginComponent implements OnInit {
       .get<EnabledAuthenticationModes>('api/v1/login/modes')
       .subscribe((enabledModes: EnabledAuthenticationModes) => {
         this.enabledAuthenticationModes_ = enabledModes.modes;
+        this.enabledAuthenticationModes_.push(LoginModes.Kubeconfig);
+        this.selectedAuthenticationMode = this.enabledAuthenticationModes_[0] as LoginModes;
       });
 
     this.http_
@@ -81,14 +83,6 @@ export class LoginComponent implements OnInit {
   }
 
   getEnabledAuthenticationModes(): AuthenticationMode[] {
-    if (
-      this.enabledAuthenticationModes_.length > 0 &&
-      this.enabledAuthenticationModes_.indexOf(LoginModes.Kubeconfig) < 0
-    ) {
-      // Push this option to the beginning of the list
-      this.enabledAuthenticationModes_.splice(0, 0, LoginModes.Kubeconfig);
-    }
-
     return this.enabledAuthenticationModes_;
   }