Merge pull request #5041 from cloudron-io/login-layout-code-cleanup

Login layout code cleanup

client/components/main/layouts.css

@@ -559,14 +559,14 @@ a:not(.disabled).is-active i.fa {
   top: 45px;
   left: 10px;
 }
-#isSettingDatabaseCallDone {
-  display: none;
-}
 .at-link {
   color: #17683a;
   text-decoration: underline;
   text-decoration-color: #17683a;
 }
+.at-pwd-form, .at-sep, .at-oauth {
+  display: none;
+}
 @-moz-keyframes fadeIn {
   from {
     opacity: 0;
@@ -639,7 +639,3 @@ a:not(.disabled).is-active i.fa {
     transform: rotate(360deg);
   }
 }
-
-.at-pwd-form {
-  display: none;
-}

client/components/main/layouts.jade

@@ -34,10 +34,9 @@ template(name="userFormsLayout")
         unless currentSetting.customLoginLogoLinkUrl
           img(src="{{currentSetting.customLoginLogoImageUrl}}" width="300" height="auto")
           br
-      unless currentSetting.customLoginLogoImageUrl
-        div#isSettingDatabaseCallDone
-          img(src="{{pathFor '/wekan-logo.svg'}}" alt="" width="300" height="auto")
-          br
+      else
+        img(src="{{pathFor '/wekan-logo.svg'}}" alt="" width="300" height="auto")
+        br
       if currentSetting.textBelowCustomLoginLogo
         +viewer
           | {{currentSetting.textBelowCustomLoginLogo}}

client/components/main/layouts.js

@@ -20,37 +20,11 @@ const validator = {
   },
 };
 
-// let isSettingDatabaseFctCallDone = false;
-
 Template.userFormsLayout.onCreated(function () {
   const templateInstance = this;
   templateInstance.currentSetting = new ReactiveVar();
   templateInstance.isLoading = new ReactiveVar(false);
 
-  Meteor.subscribe('setting', {
-    onReady() {
-      templateInstance.currentSetting.set(ReactiveCache.getCurrentSetting());
-      let currSetting = templateInstance.currentSetting.curValue;
-      let oidcBtnElt = $("#at-oidc");
-      if(currSetting && currSetting !== undefined && currSetting.oidcBtnText !== undefined && oidcBtnElt != null && oidcBtnElt != undefined){
-        let htmlvalue = "<i class='fa fa-oidc'></i>" + currSetting.oidcBtnText;
-        oidcBtnElt.html(htmlvalue);
-      }
-
-      // isSettingDatabaseFctCallDone = true;
-      if (currSetting && currSetting !== undefined && currSetting.customLoginLogoImageUrl !== undefined)
-        document.getElementById("isSettingDatabaseCallDone").style.display = 'none';
-      else
-        document.getElementById("isSettingDatabaseCallDone").style.display = 'block';
-      return this.stop();
-    },
-  });
-  Meteor.call('isPasswordLoginEnabled', (_, result) => {
-    if (result) {
-      $('.at-pwd-form').show();
-    }
-  });
-
   if (!ReactiveCache.getCurrentUser()?.profile) {
       Meteor.call('isOidcRedirectionEnabled', (_, result) => {
         if (result) {
@@ -60,9 +34,9 @@ Template.userFormsLayout.onCreated(function () {
           };
           Meteor.loginWithOidc(options);
         }
-        //else console.log("oidc redirect not set");
       });
   }
+
   Meteor.call('isDisableRegistration', (_, result) => {
     if (result) {
       $('.at-signup-link').hide();
@@ -74,7 +48,6 @@ Template.userFormsLayout.onCreated(function () {
       $('.at-pwd-link').hide();
     }
   });
-
 });
 
 Template.userFormsLayout.onRendered(() => {
@@ -86,10 +59,6 @@ Template.userFormsLayout.onRendered(() => {
 });
 
 Template.userFormsLayout.helpers({
-  // isSettingDatabaseCallDone(){
-  //   return isSettingDatabaseFctCallDone;
-  // },
-
   isLegalNoticeLinkExist() {
     const currSet = Template.instance().currentSetting.get();
     if (currSet && currSet !== undefined && currSet != null) {

client/components/settings/connectionMethod.js

@@ -16,11 +16,27 @@ Template.connectionMethod.onCreated(function() {
 
     // If only the default authentication available, hides the select boxe
     const content = $('.at-form-authentication');
-    if (!(this.authenticationMethods.get().length > 1)) {
-      content.hide();
-    } else {
+    // OAuth method is a separate button, so ignore it in the count
+    const formAuthenticationMethods = this.authenticationMethods.get().filter((method) => method.value !== 'oauth2');
+    if (formAuthenticationMethods > 1) {
       content.show();
+    } else {
+      content.hide();
     }
+
+    if (this.authenticationMethods.get().some((method) => method.value === 'oauth2')) {
+      $('.at-oauth').show();
+    }
+
+    Meteor.call('isPasswordLoginEnabled', (_, result) => {
+      if (result) {
+        $('.at-pwd-form').show();
+      }
+
+      if (result && this.authenticationMethods.get().length > 1) {
+        $('.at-sep').show();
+      }
+    });
   });
 });