Merge pull request #613 from Nikemare/issue-429-hide-default-login-fo…

…rm-when-oidc-available Hide default login form when OIDC available
DependencyTrack · Oct 16, 2023 · a2e5d65 · a2e5d65
2 parents 6355635 + 4b64ac5
commit a2e5d65
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -5,6 +5,7 @@
     "login_desc": "Sign In to your account",
     "login_unauthorized": "Invalid username or password",
     "login_forbidden": "This account is inactive or has been suspended",
+    "login_more_options": "More options",
     "password_force_change": "Update Password",
     "password_force_change_desc": "You need to change your password",
     "password_change": "Change password",

diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
@@ -21,6 +21,7 @@
                       v-model="input.username"
                       autofocus="true"
                       lazy="true"
+                      v-show="showLoginForm"
                     />
                     <b-validated-input-group-form-input
                       name="password"
@@ -32,22 +33,27 @@
                       autcomplete="currentpassword"
                       v-model="input.password"
                       lazy="true"
+                      v-show="showLoginForm"
                     />
-                    <b-row>
-                      <b-col cols="6">
+                    <b-row style="margin-bottom: 1rem;">
+                      <b-col cols="6" v-show="showLoginForm">
                         <b-button
                           variant="primary"
                           type="submit"
                           class="px-4"
                         >{{ $t('message.login') }}</b-button>
                       </b-col>
                       <b-col cols="6" v-show="oidcAvailable">
-                        <b-button style="float: right" v-on:click="oidcLogin()">
+                        <b-button :style="{ float: showLoginForm ? 'right' : 'none' }" v-on:click="oidcLogin()">
                           <span v-if="oidcCheckLoginButtonTextSetted()">{{ oidcLoginButtonText() }}</span>
                           <img alt="OpenID Logo" src="@/assets/img/openid-logo.svg" width="60px" v-else />
                         </b-button>
                       </b-col>
                     </b-row>
+                    <b-link
+                      v-show="oidcAvailable && !showLoginForm" 
+                      v-on:click="showLoginForm=true"
+                    >{{ $t('message.login_more_options') }}</b-link>
                   </b-form>
                 </validation-observer>
               </b-card-body>
@@ -102,7 +108,8 @@ export default {
         response_type: this.$oidc.FLOW === "implicit" ? "token id_token" : "code",
         scope: this.$oidc.SCOPE,
         loadUserInfo: false
-      })
+      }),
+      showLoginForm: false
     };
   },
   methods: {
@@ -187,6 +194,7 @@ export default {
     this.checkOidcAvailability()
       .then(oidcAvailable => {
         this.oidcAvailable = oidcAvailable;
+        this.showLoginForm = !oidcAvailable;
 
         if (!oidcAvailable) {
           return;
@@ -235,6 +243,8 @@ export default {
         });
       })
       .catch(err => {
+        // automatic fallback to login form when oidc availability check failed
+        this.showLoginForm = true;
         this.$toastr.e(this.$t("message.oidc_availability_check_failed"));
       });
   }