From 4b64ac55af08590b8bb07c68db91a91a11f83ab4 Mon Sep 17 00:00:00 2001
From: Nikemare <102925451+Nikemare@users.noreply.github.com>
Date: Sun, 15 Oct 2023 22:22:40 +0200
Subject: [PATCH] Hide default login form when OIDC available

Resolve #429

Signed-off-by: Nikemare <102925451+Nikemare@users.noreply.github.com>
---
 src/i18n/locales/en.json  |  1 +
 src/views/pages/Login.vue | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1713486c0..cc4a21c49 100644
--- 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
index c66473142..2b3662914 100644
--- 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,9 +33,10 @@
                       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"
@@ -42,12 +44,16 @@
                         >{{ $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"));
       });
   }