Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

Improve the UX of the login fallback when using SSO #7152

Merged
merged 8 commits into from
Mar 27, 2020
Merged

Improve the UX of the login fallback when using SSO #7152

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bfb939a
Improve the UX of the login fallback when using SSO
babolivier Mar 26, 2020
1c02f20
Changelog
babolivier Mar 26, 2020
adb38c0
Fix title updates
babolivier Mar 27, 2020
45409c2
Incorporate review
babolivier Mar 27, 2020
706e426
Drop CAS entirely
babolivier Mar 27, 2020
74e22d0
Incorporate review
babolivier Mar 27, 2020
71f21c2
Incorporate review
babolivier Mar 27, 2020
781f104
Typo
babolivier Mar 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog.d/7152.feature
View file
Open in desktop
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
View file
Open in desktop
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
49 changes: 31 additions & 18 deletions synapse/static/client/login/js/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
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);
};
Expand All @@ -46,23 +48,36 @@ var setFeedbackString = function(text) {
};

var show_login = function() {
$("#loading").hide();

var this_page = window.location.origin + window.location.pathname;
$("#sso_redirect_url").val(this_page);

if (matrixLogin.serverAcceptsPassword) {
$("#password_flow").show();
if (matrixLogin.serverAcceptsSso) {
if (try_token() || matrixLogin.serverAcceptsPassword) {
babolivier marked this conversation as resolved.
Show resolved Hide resolved
// Show the SSO form if there's a login token in the query. That's because,
// if there is a token, and this function is run, it means an error happened,
// and in this case it's nicer to show the form with an error rather than
// redirect immediately to the SSO portal.
// Also show the form if the server is accepting password login as well.
$("#sso_form").show();
} else {
// Submit the SSO form instead of displaying it. The reason behind this
// behaviour is that the user will likely arrive here after clicking on a
// button, in the client, with a label such as "Continue with SSO", so
// clicking on another button with the same semantics is a bit pointless.
$("#sso_form").submit();
return;
}
babolivier marked this conversation as resolved.
Show resolved Hide resolved
}

if (matrixLogin.serverAcceptsSso) {
$("#sso_flow").show();
} else if (matrixLogin.serverAcceptsCas) {
$("#sso_form").attr("action", "/_matrix/client/r0/login/cas/redirect");
$("#sso_flow").show();
set_title(title_pre_auth);
babolivier marked this conversation as resolved.
Show resolved Hide resolved

$("#loading").hide();
babolivier marked this conversation as resolved.
Show resolved Hide resolved

if (matrixLogin.serverAcceptsPassword) {
$("#password_flow").show();
}

if (!matrixLogin.serverAcceptsPassword && !matrixLogin.serverAcceptsCas && !matrixLogin.serverAcceptsSso) {
if (!matrixLogin.serverAcceptsPassword && !matrixLogin.serverAcceptsSso) {
$("#no_login_types").show();
}
};
Expand All @@ -74,17 +89,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 Down