Avoid further UI flickering on load and show/hide OR in login screen if more than one is active

Fixes #5028

client/components/main/layouts.css

@@ -564,6 +564,9 @@ a:not(.disabled).is-active i.fa {
   text-decoration: underline;
   text-decoration-color: #17683a;
 }
+.at-pwd-form, .at-sep, .at-oauth {
+  display: none;
+}
 @-moz-keyframes fadeIn {
   from {
     opacity: 0;
@@ -636,7 +639,3 @@ a:not(.disabled).is-active i.fa {
     transform: rotate(360deg);
   }
 }
-
-.at-pwd-form {
-  display: none;
-}

client/components/main/layouts.js

@@ -25,12 +25,6 @@ Template.userFormsLayout.onCreated(function () {
   templateInstance.currentSetting = new ReactiveVar();
   templateInstance.isLoading = new ReactiveVar(false);
 
-  Meteor.call('isPasswordLoginEnabled', (_, result) => {
-    if (result) {
-      $('.at-pwd-form').show();
-    }
-  });
-
   if (!ReactiveCache.getCurrentUser()?.profile) {
       Meteor.call('isOidcRedirectionEnabled', (_, result) => {
         if (result) {
@@ -42,6 +36,7 @@ Template.userFormsLayout.onCreated(function () {
         }
       });
   }
+
   Meteor.call('isDisableRegistration', (_, result) => {
     if (result) {
       $('.at-signup-link').hide();
@@ -53,7 +48,6 @@ Template.userFormsLayout.onCreated(function () {
       $('.at-pwd-link').hide();
     }
   });
-
 });
 
 Template.userFormsLayout.onRendered(() => {

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();
+      }
+    });
   });
 });