feat #7: allow saving the selected backend choice

README.md

@@ -1,6 +1,7 @@
 # PolyculeConnect
 
 [![status-badge](https://ci-polycule-connect.chapoline.me/api/badges/1/status.svg)](https://ci-polycule-connect.chapoline.me/repos/1)
+[![status-badge](https://ci-server.internal.faercol.me/api/badges/2/status.svg)](https://ci-server.internal.faercol.me/repos/2)
 
 ![Project logo](./polyculeconnect/static/img/logo-text.png)
 

polyculeconnect/cmd/app/add.go

@@ -90,8 +90,9 @@ func init() {
 	appCmd.AddCommand(appAddCmd)
 
 	appAddCmd.Flags().StringVarP(&appName, "name", "n", "", "Name to represent the app")
-	appAddCmd.Flags().StringVarP(&appClientID, "id", "i", "", "ID to identify the app in the storage")
+	appAddCmd.Flags().StringVarP(&appID, "id", "i", "", "ID to identify the app in the storage")
-	appAddCmd.Flags().StringVarP(&appClientSecret, "secret", "s", "", "OpenIDConnect client secret")
+	appAddCmd.Flags().StringVarP(&appClientID, "client-id", "", "", "OpenIDConnect client secret")
+	appAddCmd.Flags().StringVarP(&appClientSecret, "client-secret", "", "", "OpenIDConnect client secret")
 	appAddCmd.Flags().StringSliceVarP(&appRedirectURIs, "redirect-uri", "r", []string{}, "Allowed redirect URI")
 
 	appAddCmd.Flags().BoolVar(&appInteractive, "interactive", false, "Set the client ID and secret in an interactive way")

polyculeconnect/cmd/serve/serve.go

@@ -43,7 +43,7 @@ func serve() {
 	logger.L.Infof("Initialized storage backend %q", conf.StorageType)
 	dexConf := dex_server.Config{
 		Web: dex_server.WebConfig{
-			Dir:   "./",
+			Dir:   conf.StaticDir,
 			Theme: "default",
 		},
 		Storage:                storageType,

polyculeconnect/config/config.go

@@ -17,10 +17,11 @@ type envVar string
 const (
 	varLogLevel envVar = "LOG_LEVEL"
 
-	varServerMode   envVar = "SERVER_MODE"
+	varServerMode      envVar = "SERVER_MODE"
-	varServerHost   envVar = "SERVER_HOST"
+	varServerHost      envVar = "SERVER_HOST"
-	varServerPort   envVar = "SERVER_PORT"
+	varServerPort      envVar = "SERVER_PORT"
-	varServerSocket envVar = "SERVER_SOCK_PATH"
+	varServerSocket    envVar = "SERVER_SOCK_PATH"
+	varServerStaticDir envVar = "SERVER_STATIC_DIR"
 
 	varIssuer envVar = "ISSUER"
 
@@ -52,12 +53,13 @@ const (
 const (
 	defaultLogLevel = logrus.InfoLevel
 
-	defaultServerMode   = ModeNet
+	defaultServerMode      = ModeNet
-	defaultServerHost   = "0.0.0.0"
+	defaultServerHost      = "0.0.0.0"
-	defaultServerPort   = 5000
+	defaultServerPort      = 5000
-	defaultServerSocket = ""
+	defaultServerSocket    = ""
+	defaultServerStaticDir = "./"
 
-	defaultIssuer = "locahost"
+	defaultIssuer = "http://localhost:5000"
 
 	defaultStorageType      = Memory
 	defaultStorageFile      = "./polyculeconnect.db"
@@ -112,6 +114,7 @@ type AppConfig struct {
 	StorageType       string
 	StorageConfig     *StorageConfig
 	OpenConnectConfig *OpenConnectConfig
+	StaticDir         string
 }
 
 func parseLevel(lvlStr string) logrus.Level {
@@ -142,6 +145,7 @@ func (ac *AppConfig) getConfFromEnv() {
 	ac.Host = getStringFromEnv(varServerHost, defaultServerHost)
 	ac.Port = getIntFromEnv(varServerPort, defaultServerPort)
 	ac.SockPath = getStringFromEnv(varServerSocket, defaultServerSocket)
+	ac.StaticDir = getStringFromEnv(varServerStaticDir, defaultServerStaticDir)
 
 	ac.StorageType = getStringFromEnv(varStorageType, string(defaultStorageType))
 	ac.StorageConfig.Database = getStringFromEnv(varStorageDB, defaultStorageDB)

polyculeconnect/config/config_test.go

@@ -17,6 +17,7 @@ var defaultConfig = AppConfig{
 	Port:        defaultServerPort,
 	SockPath:    defaultServerSocket,
 	StorageType: string(defaultStorageType),
+	StaticDir:   "./",
 	StorageConfig: &StorageConfig{
 		File:     defaultStorageFile,
 		Host:     defaultStorageHost,

polyculeconnect/controller/ui/static.go

@@ -15,22 +15,31 @@ import (
 const StaticRoute = "/static/"
 
 type StaticController struct {
+	baseDir string
+}
+
+func NewStaticController(baseDir string) *StaticController {
+	return &StaticController{
+		baseDir: baseDir,
+	}
 }
 
 func (sc *StaticController) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	fs := http.FileServer(http.Dir("./static"))
+	fs := http.FileServer(http.Dir(sc.baseDir + "/static"))
 	http.StripPrefix(StaticRoute, fs).ServeHTTP(w, r)
 }
 
 type IndexController struct {
 	l                     *logrus.Logger
 	downstreamConstroller http.Handler
+	baseDir               string
 }
 
-func NewIndexController(l *logrus.Logger, downstream http.Handler) *IndexController {
+func NewIndexController(l *logrus.Logger, downstream http.Handler, baseDir string) *IndexController {
 	return &IndexController{
 		l:                     l,
 		downstreamConstroller: downstream,
+		baseDir:               baseDir,
 	}
 }
 
@@ -39,9 +48,9 @@ func (ic IndexController) serveUI(w http.ResponseWriter, r *http.Request) (int,
 		"issuer": func() string { return "toto" },
 	}
 
-	lp := filepath.Join("templates", "index.html")
+	lp := filepath.Join(ic.baseDir, "templates", "index.html")
-	hdrTpl := filepath.Join("templates", "header.html")
+	hdrTpl := filepath.Join(ic.baseDir, "templates", "header.html")
-	footTpl := filepath.Join("templates", "footer.html")
+	footTpl := filepath.Join(ic.baseDir, "templates", "footer.html")
 	tmpl, err := template.New("index.html").Funcs(funcs).ParseFiles(hdrTpl, footTpl, lp)
 	if err != nil {
 		return http.StatusInternalServerError, -1, fmt.Errorf("failed to init template: %w", err)

polyculeconnect/server/server.go

@@ -64,8 +64,8 @@ func New(appConf *config.AppConfig, dexSrv *dex_server.Server, logger *logrus.Lo
 	}
 
 	controllers := map[string]http.Handler{
-		ui.StaticRoute: middlewares.WithLogger(&ui.StaticController{}, logger),
+		ui.StaticRoute: middlewares.WithLogger(ui.NewStaticController(appConf.StaticDir), logger),
-		"/":            middlewares.WithLogger(ui.NewIndexController(logger, dexSrv), logger),
+		"/":            middlewares.WithLogger(ui.NewIndexController(logger, dexSrv, appConf.StaticDir), logger),
 	}
 
 	m := http.NewServeMux()

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