diff --git a/polyculeconnect/static/scripts/approval.js b/polyculeconnect/static/scripts/approval.js new file mode 100644 index 0000000..e87367e --- /dev/null +++ b/polyculeconnect/static/scripts/approval.js @@ -0,0 +1,5 @@ +let approvalForm = document.getElementById("approvalform"); + +approvalForm.addEventListener("submit", (e) => { + handleSuccess(); +}); diff --git a/polyculeconnect/static/scripts/appstate.js b/polyculeconnect/static/scripts/appstate.js new file mode 100644 index 0000000..4df0eb8 --- /dev/null +++ b/polyculeconnect/static/scripts/appstate.js @@ -0,0 +1,17 @@ +const STATE_SUCCESS = "SUCCESS"; +const STATE_IN_PROGRESS = "IN PROGRESS" +const STATE_EMPTY = "NO STATE" + +const stateKey = "appState" + +function getState() { + state = localStorage.getItem(stateKey); + if (state === null) { + return STATE_EMPTY; + } + return state; +} + +function setState(value) { + localStorage.setItem(stateKey, value); +} diff --git a/polyculeconnect/static/scripts/error.js b/polyculeconnect/static/scripts/error.js new file mode 100644 index 0000000..cdbd9db --- /dev/null +++ b/polyculeconnect/static/scripts/error.js @@ -0,0 +1,6 @@ +let backButton = document.getElementById("error-back"); + +backButton.addEventListener("click", (e) => { + e.preventDefault(); + goBackToLogin(); +}); diff --git a/polyculeconnect/static/scripts/form.js b/polyculeconnect/static/scripts/form.js new file mode 100644 index 0000000..6ba2d2f --- /dev/null +++ b/polyculeconnect/static/scripts/form.js @@ -0,0 +1,11 @@ +let connectorForm = document.getElementById("connectorform"); + +connectorForm.addEventListener("submit", (e) => { + e.preventDefault(); + let connectorName = document.getElementById("cname").value; + let rememberMe = document.getElementById("remember-me").checked; + if (rememberMe === true) { + localStorage.setItem(connectorNameKey, connectorName); + } + chooseConnector(connectorName); +}); diff --git a/polyculeconnect/static/scripts/index.js b/polyculeconnect/static/scripts/index.js index d9f7b6b..1fdc2f3 100644 --- a/polyculeconnect/static/scripts/index.js +++ b/polyculeconnect/static/scripts/index.js @@ -1,11 +1,47 @@ -let connectorForm = document.getElementById("connectorform"); +const connectorNameKey = "connectorName"; +const connectorIDParam = "connector_id"; -connectorForm.addEventListener("submit", (e) => { - e.preventDefault(); +const urlParams = new URLSearchParams(window.location.search); +function chooseConnector(connectorName) { let nextURL = new URL(window.location.href); - let connectorName = document.getElementById("cname").value; - nextURL.searchParams.append("connector_id", connectorName) - + nextURL.searchParams.append(connectorIDParam, connectorName); + setState(STATE_IN_PROGRESS); window.location.href = nextURL; -}); +} + +// Clean the cache in case previous authentication didn't succeed +// in order not to get stuck in a login loop +function handleFailedState() { + if (getState() !== STATE_SUCCESS) { + localStorage.removeItem(connectorNameKey); + } +} + +// Add the connector name to local storage in case the auth succeeded +// and the remember-me box was checked +function handleSuccess(connectorName) { + setState(STATE_SUCCESS); + if (localStorage.getItem(rememberMeKey)) { + localStorage.removeItem(rememberMeKey); + localStorage.setItem(connectorNameKey, connectorName); + } +} + +function handleLoginPage() { + handleFailedState(); + let connectorName = localStorage.getItem(connectorNameKey); + if (getState() === STATE_SUCCESS && connectorName != null) { + chooseConnector(connectorName); + } +} + +function goBackToLogin() { + let nextURL = new URL(window.location.href); + nextURL.searchParams.delete(connectorIDParam); + window.location.href = nextURL; +} + +if (window.location.pathname === "/auth" && !urlParams.has(connectorIDParam)) { + handleLoginPage(); +} diff --git a/polyculeconnect/static/style/index.css b/polyculeconnect/static/style/index.css index feb6197..65dcdff 100644 --- a/polyculeconnect/static/style/index.css +++ b/polyculeconnect/static/style/index.css @@ -76,6 +76,15 @@ body { color: var(--subtext-1); } +.form-checkbox { + cursor: pointer; +} + +.form-checkbox-label { + color: var(--subtext-0); + font-size: small; +} + .button { border: none; color: var(--mantle); diff --git a/polyculeconnect/templates/approval.html b/polyculeconnect/templates/approval.html index f0097ad..f9080d8 100644 --- a/polyculeconnect/templates/approval.html +++ b/polyculeconnect/templates/approval.html @@ -1,5 +1,7 @@ {{ template "header.html" . }} + +
{{ if .Scopes }} @@ -14,7 +16,7 @@ {{ end }}
-
+
diff --git a/polyculeconnect/templates/error.html b/polyculeconnect/templates/error.html index db78f4a..529d670 100644 --- a/polyculeconnect/templates/error.html +++ b/polyculeconnect/templates/error.html @@ -1,7 +1,10 @@ {{ template "header.html" . }} + +
+

{{ .ErrType }}

{{ .ErrMsg }}

diff --git a/polyculeconnect/templates/header.html b/polyculeconnect/templates/header.html index a1b9f04..6ad06fd 100644 --- a/polyculeconnect/templates/header.html +++ b/polyculeconnect/templates/header.html @@ -16,6 +16,9 @@ + + + diff --git a/polyculeconnect/templates/login.html b/polyculeconnect/templates/login.html index 094f7b2..ddc0ed1 100644 --- a/polyculeconnect/templates/login.html +++ b/polyculeconnect/templates/login.html @@ -1,6 +1,6 @@ {{ template "header.html" . }} - +
@@ -12,6 +12,10 @@
+
+ + +