Allow remembering the backend choice (#7) #16
10 changed files with 105 additions and 9 deletions
5
polyculeconnect/static/scripts/approval.js
Normal file
5
polyculeconnect/static/scripts/approval.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
let approvalForm = document.getElementById("approvalform");
|
||||
|
||||
approvalForm.addEventListener("submit", (e) => {
|
||||
handleSuccess();
|
||||
});
|
17
polyculeconnect/static/scripts/appstate.js
Normal file
17
polyculeconnect/static/scripts/appstate.js
Normal file
|
@ -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);
|
||||
}
|
6
polyculeconnect/static/scripts/error.js
Normal file
6
polyculeconnect/static/scripts/error.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
let backButton = document.getElementById("error-back");
|
||||
|
||||
backButton.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
goBackToLogin();
|
||||
});
|
11
polyculeconnect/static/scripts/form.js
Normal file
11
polyculeconnect/static/scripts/form.js
Normal file
|
@ -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);
|
||||
});
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<script src="/static/scripts/approval.js" defer></script>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-content">
|
||||
{{ if .Scopes }}
|
||||
|
@ -14,7 +16,7 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="form-buttons">
|
||||
<div class="form-buttons" id="approvalform">
|
||||
<form method="post" class="container-form">
|
||||
<input type="hidden" name="req" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="approval" value="approve">
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<script src="/static/scripts/error.js" defer></script>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-content">
|
||||
<button id="error-back" class="button button-cancel">Back</button>
|
||||
<h2>{{ .ErrType }}</h2>
|
||||
<p>{{ .ErrMsg }}</p>
|
||||
</div>
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#9f00a7">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<script src="/static/scripts/appstate.js"></script>
|
||||
<script src="/static/scripts/index.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<script src="/static/scripts/index.js" defer></script>
|
||||
<script src="/static/scripts/form.js" defer></script>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-content">
|
||||
|
@ -12,6 +12,10 @@
|
|||
<div class="form-elements">
|
||||
<input type="text" id="cname" name="connector_id" placeholder="Service name" required
|
||||
class="form-input">
|
||||
<div>
|
||||
<input type="checkbox" id="remember-me" name="remember_me" class="form-checkbox">
|
||||
<label for="remember-me" class="form-checkbox-label">Remember my choice</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-buttons">
|
||||
<input type="submit" class="button button-accept" value="Continue">
|
||||
|
|
Loading…
Reference in a new issue