Skip to content

Commit

Permalink
Improve the UX of the login fallback when using SSO (matrix-org#7152)
Browse files Browse the repository at this point in the history
* Don't show the login forms if we're currently logging in with a
  password or a token.
* Submit directly the SSO login form, showing only a spinner to the
  user, in order to eliminate from the clunkiness of SSO through this
  fallback.
  • Loading branch information
babolivier authored Mar 27, 2020
1 parent 319c41f commit 9024634
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 22 deletions.
1 change: 1 addition & 0 deletions changelog.d/7152.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Improve the support for SSO authentication on the login fallback page.
2 changes: 1 addition & 1 deletion synapse/static/client/login/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
51 changes: 30 additions & 21 deletions synapse/static/client/login/js/login.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,41 @@
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 + ")");
Expand All @@ -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() {
Expand All @@ -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");
Expand All @@ -102,7 +111,7 @@ var fetch_info = function(cb) {
matrixLogin.onLoad = function() {
fetch_info(function() {
if (!try_token()) {
show_login();
show_login(false);
}
});
};
Expand Down

0 comments on commit 9024634

Please sign in to comment.