Revert "Revert "Improve the UX of the login fallback when using SSO (#7152)""

This reverts commit 8d4cbdea.

Revert "Revert "Improve the UX of the login fallback when using SSO (#7152)""
14a8e712 · Richard van der Hoff · 883ac4b1 · 14a8e712 · 14a8e712 · 14a8e712
Commit 14a8e712 authored 5 years ago by Richard van der Hoff
--- a/changelog.d/7152.feature
+++ b/changelog.d/7152.feature
+Improve the support for SSO authentication on the login fallback page.
--- a/synapse/static/client/login/index.html
+++ b/synapse/static/client/login/index.html
@@ -9,7 +9,7 @@
 <body onload="matrixLogin.onLoad()">
    <center>
        <br/>
-        <h1>Log in with one of the following methods</h1>
+        <h1 id="title"></h1>

        <span id="feedback" style="color: #f00"></span>


--- a/synapse/static/client/login/js/login.js
+++ b/synapse/static/client/login/js/login.js
 window.matrixLogin = {
    endpoint: location.origin + "/_matrix/client/r0/login",
    serverAcceptsPassword: false,
-    serverAcceptsCas: false,
    serverAcceptsSso: false,
 };

+var title_pre_auth = "Log in with one of the following methods";
+var title_post_auth = "Logging in...";
+
 var submitPassword = function(user, pwd) {
    console.log("Logging in with password...");
+    set_title(title_post_auth);
    var data = {
        type: "m.login.password",
        user: user,
        password: pwd,
    };
    $.post(matrixLogin.endpoint, JSON.stringify(data), function(response) {
-        show_login();
        matrixLogin.onLogin(response);
    }).error(errorFunc);
 };

 var submitToken = function(loginToken) {
    console.log("Logging in with login token...");
+    set_title(title_post_auth);
    var data = {
        type: "m.login.token",
        token: loginToken
    };
    $.post(matrixLogin.endpoint, JSON.stringify(data), function(response) {
-        show_login();
        matrixLogin.onLogin(response);
    }).error(errorFunc);
 };

 var errorFunc = function(err) {
-    show_login();
+    // We want to show the error to the user rather than redirecting immediately to the
+    // SSO portal (if SSO is the only login option), so we inhibit the redirect.
+    show_login(true);

    if (err.responseJSON && err.responseJSON.error) {
        setFeedbackString(err.responseJSON.error + " (" + err.responseJSON.errcode + ")");
@@ -45,26 +49,33 @@ var setFeedbackString = function(text) {
    $("#feedback").text(text);
 };

-var show_login = function() {
-    $("#loading").hide();
-
+var show_login = function(inhibit_redirect) {
    var this_page = window.location.origin + window.location.pathname;
    $("#sso_redirect_url").val(this_page);

-    if (matrixLogin.serverAcceptsPassword) {
-        $("#password_flow").show();
+    // If inhibit_redirect is false, and SSO is the only supported login method, we can
+    // redirect straight to the SSO page
+    if (matrixLogin.serverAcceptsSso) {
+        if (!inhibit_redirect && !matrixLogin.serverAcceptsPassword) {
+            $("#sso_form").submit();
+            return;
+        }
+
+        // Otherwise, show the SSO form
+        $("#sso_form").show();
    }

-    if (matrixLogin.serverAcceptsSso) {
-        $("#sso_flow").show();
-    } else if (matrixLogin.serverAcceptsCas) {
-        $("#sso_form").attr("action", "/_matrix/client/r0/login/cas/redirect");
-        $("#sso_flow").show();
+    if (matrixLogin.serverAcceptsPassword) {
+        $("#password_flow").show();
    }

-    if (!matrixLogin.serverAcceptsPassword && !matrixLogin.serverAcceptsCas && !matrixLogin.serverAcceptsSso) {
+    if (!matrixLogin.serverAcceptsPassword && !matrixLogin.serverAcceptsSso) {
        $("#no_login_types").show();
    }
+
+    set_title(title_pre_auth);
+
+    $("#loading").hide();
 };

 var show_spinner = function() {
@@ -74,17 +85,15 @@ var show_spinner = function() {
    $("#loading").show();
 };

+var set_title = function(title) {
+    $("#title").text(title);
+};

 var fetch_info = function(cb) {
    $.get(matrixLogin.endpoint, function(response) {
        var serverAcceptsPassword = false;
-        var serverAcceptsCas = false;
        for (var i=0; i<response.flows.length; i++) {
            var flow = response.flows[i];
-            if ("m.login.cas" === flow.type) {
-                matrixLogin.serverAcceptsCas = true;
-                console.log("Server accepts CAS");
-            }
            if ("m.login.sso" === flow.type) {
                matrixLogin.serverAcceptsSso = true;
                console.log("Server accepts SSO");
@@ -102,7 +111,7 @@ var fetch_info = function(cb) {
 matrixLogin.onLoad = function() {
    fetch_info(function() {
        if (!try_token()) {
-            show_login();
+            show_login(false);
        }
    });
 };