DEV: Don't render login modal when redirecting to external auth (#24418)

Move external login logic from the **Login Modal** -> **Login Service**. This is advantageous as we can utilize the external login logic from both within and outside of the login modal.

A downside of having the external login logic within the login modal is that there is a brief "flash" of the login modal being rendered and then us automatically redirecting to the external login method. This PR will clean up the visual side affects.

app/assets/javascripts/discourse/app/components/modal/create-account.js

@@ -7,7 +7,6 @@ import { isEmpty } from "@ember/utils";
 import { observes } from "@ember-decorators/object";
 import $ from "jquery";
 import { Promise } from "rsvp";
-import LoginModal from "discourse/components/modal/login";
 import { ajax } from "discourse/lib/ajax";
 import { setting } from "discourse/lib/computed";
 import cookie, { removeCookie } from "discourse/lib/cookie";
@@ -30,9 +29,9 @@ export default class CreateAccount extends Component.extend(
   NameValidation,
   UserFieldsValidation
 ) {
-  @service modal;
   @service site;
   @service siteSettings;
+  @service login;
 
   accountChallenge = 0;
   accountHoneypot = 0;
@@ -477,13 +476,7 @@ export default class CreateAccount extends Component.extend(
   @action
   externalLogin(provider) {
     // we will automatically redirect to the external auth service
-    this.modal.show(LoginModal, {
-      model: {
-        isExternalLogin: true,
-        externalLoginMethod: provider,
-        signup: true,
-      },
-    });
+    this.login.externalLogin(provider, { signup: true });
   }
 
   @action

app/assets/javascripts/discourse/app/components/modal/login.js

@@ -46,16 +46,6 @@ export default class Login extends Component {
   @tracked securityKeyAllowedCredentialIds;
   @tracked secondFactorToken;
 
-  constructor() {
-    super(...arguments);
-
-    if (this.args.model.isExternalLogin) {
-      this.externalLogin(this.args.model.externalLoginMethod, {
-        signup: this.args.model.signup,
-      });
-    }
-  }
-
   get awaitingApproval() {
     return (
       this.args.model.awaitingApproval &&
@@ -321,23 +311,15 @@ export default class Login extends Component {
     }
   }
 
-  async externalLogin(loginMethod, { signup }) {
-    try {
-      this.loggingIn = true;
-      await loginMethod.doLogin({ signup });
-      this.args.closeModal();
-    } catch {
-      this.loggingIn = false;
-    }
-  }
-
   @action
   async externalLoginAction(loginMethod) {
     if (this.loginDisabled) {
       return;
     }
-
-    await this.externalLogin(loginMethod, { signup: false });
+    this.login.externalLogin(loginMethod, {
+      signup: false,
+      setLoggingIn: (value) => (this.loggingIn = value),
+    });
   }
 
   @action

app/assets/javascripts/discourse/app/routes/application.js

@@ -41,8 +41,9 @@ const ApplicationRoute = DiscourseRoute.extend({
   router: service(),
   siteSettings: service(),
   clientErrorHandler: service(),
+  login: service(),
 
-  get includeExternalLoginMethods() {
+  get isOnlyOneExternalLoginMethod() {
     return (
       !this.siteSettings.enable_local_logins &&
       this.externalLoginMethods.length === 1
@@ -240,17 +241,17 @@ const ApplicationRoute = DiscourseRoute.extend({
         : encodeURIComponent(window.location.pathname);
       window.location = getURL("/session/sso?return_path=" + returnPath);
     } else {
-      this.modal.show(LoginModal, {
-        model: {
-          ...(this.includeExternalLoginMethods && {
-            isExternalLogin: true,
-            externalLoginMethod: this.externalLoginMethods[0],
-          }),
-          showNotActivated: (props) => this.send("showNotActivated", props),
-          showCreateAccount: (props) => this.send("showCreateAccount", props),
-          canSignUp: this.controller.canSignUp,
-        },
-      });
+      if (this.isOnlyOneExternalLoginMethod) {
+        this.login.externalLogin(this.externalLoginMethods[0]);
+      } else {
+        this.modal.show(LoginModal, {
+          model: {
+            showNotActivated: (props) => this.send("showNotActivated", props),
+            showCreateAccount: (props) => this.send("showCreateAccount", props),
+            canSignUp: this.controller.canSignUp,
+          },
+        });
+      }
     }
   },
 
@@ -259,14 +260,10 @@ const ApplicationRoute = DiscourseRoute.extend({
       const returnPath = encodeURIComponent(window.location.pathname);
       window.location = getURL("/session/sso?return_path=" + returnPath);
     } else {
-      if (this.includeExternalLoginMethods) {
+      if (this.isOnlyOneExternalLoginMethod) {
         // we will automatically redirect to the external auth service
-        this.modal.show(LoginModal, {
-          model: {
-            isExternalLogin: true,
-            externalLoginMethod: this.externalLoginMethods[0],
-            signup: true,
-          },
+        this.login.externalLogin(this.externalLoginMethods[0], {
+          signup: true,
         });
       } else {
         this.modal.show(CreateAccount, { model: createAccountProps });

app/assets/javascripts/discourse/app/services/login.js

@@ -0,0 +1,19 @@
+import { action } from "@ember/object";
+import Service from "@ember/service";
+import { disableImplicitInjections } from "discourse/lib/implicit-injections";
+
+@disableImplicitInjections
+export default class LoginService extends Service {
+  @action
+  async externalLogin(
+    loginMethod,
+    { signup = false, setLoggingIn = null } = {}
+  ) {
+    try {
+      setLoggingIn?.(true);
+      await loginMethod.doLogin({ signup });
+    } catch {
+      setLoggingIn?.(false);
+    }
+  }
+}