feat #7: allow saving the selected backend choice

polyculeconnect/static/scripts/approval.js

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

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

polyculeconnect/static/scripts/error.js

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

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

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) => {
+const urlParams = new URLSearchParams(window.location.search);
-  e.preventDefault();
 
+function chooseConnector(connectorName) {
   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;
-});
+}
+
+// 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();
+}

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

polyculeconnect/templates/approval.html

@@ -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">

polyculeconnect/templates/error.html

@@ -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>

polyculeconnect/templates/header.html

@@ -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>

polyculeconnect/templates/login.html

@@ -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">