Allow remembering the backend choice (#7) #16

Merged
faercol merged 3 commits from feat/7-remember-backend into main 2024-08-10 13:22:05 +00:00
10 changed files with 105 additions and 9 deletions
Showing only changes of commit 51f9be1486 - Show all commits

View file

@ -0,0 +1,5 @@
let approvalForm = document.getElementById("approvalform");
approvalForm.addEventListener("submit", (e) => {
handleSuccess();
});

View 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);
}

View file

@ -0,0 +1,6 @@
let backButton = document.getElementById("error-back");
backButton.addEventListener("click", (e) => {
e.preventDefault();
goBackToLogin();
});

View 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);
});

View file

@ -1,11 +1,47 @@
let connectorForm = document.getElementById("connectorform"); const connectorNameKey = "connectorName";
const connectorIDParam = "connector_id";
connectorForm.addEventListener("submit", (e) => { const urlParams = new URLSearchParams(window.location.search);
e.preventDefault();
function chooseConnector(connectorName) {
let nextURL = new URL(window.location.href); let nextURL = new URL(window.location.href);
let connectorName = document.getElementById("cname").value; nextURL.searchParams.append(connectorIDParam, connectorName);
nextURL.searchParams.append("connector_id", connectorName) setState(STATE_IN_PROGRESS);
window.location.href = nextURL; 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();
}

View file

@ -76,6 +76,15 @@ body {
color: var(--subtext-1); color: var(--subtext-1);
} }
.form-checkbox {
cursor: pointer;
}
.form-checkbox-label {
color: var(--subtext-0);
font-size: small;
}
.button { .button {
border: none; border: none;
color: var(--mantle); color: var(--mantle);

View file

@ -1,5 +1,7 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<script src="/static/scripts/approval.js" defer></script>
<div class="container"> <div class="container">
<div class="container-content"> <div class="container-content">
{{ if .Scopes }} {{ if .Scopes }}
@ -14,7 +16,7 @@
{{ end }} {{ end }}
</div> </div>
<div class="form-buttons"> <div class="form-buttons" id="approvalform">
<form method="post" class="container-form"> <form method="post" class="container-form">
<input type="hidden" name="req" value="{{ .AuthReqID }}" /> <input type="hidden" name="req" value="{{ .AuthReqID }}" />
<input type="hidden" name="approval" value="approve"> <input type="hidden" name="approval" value="approve">

View file

@ -1,7 +1,10 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<script src="/static/scripts/error.js" defer></script>
<div class="container"> <div class="container">
<div class="container-content"> <div class="container-content">
<button id="error-back" class="button button-cancel">Back</button>
<h2>{{ .ErrType }}</h2> <h2>{{ .ErrType }}</h2>
<p>{{ .ErrMsg }}</p> <p>{{ .ErrMsg }}</p>
</div> </div>

View file

@ -16,6 +16,9 @@
<link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#9f00a7"> <meta name="msapplication-TileColor" content="#9f00a7">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<script src="/static/scripts/appstate.js"></script>
<script src="/static/scripts/index.js"></script>
</head> </head>
<body> <body>

View file

@ -1,6 +1,6 @@
{{ template "header.html" . }} {{ 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">
<div class="container-content"> <div class="container-content">
@ -12,6 +12,10 @@
<div class="form-elements"> <div class="form-elements">
<input type="text" id="cname" name="connector_id" placeholder="Service name" required <input type="text" id="cname" name="connector_id" placeholder="Service name" required
class="form-input"> 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>
<div class="form-buttons"> <div class="form-buttons">
<input type="submit" class="button button-accept" value="Continue"> <input type="submit" class="button button-accept" value="Continue">