feat: logout route and login dialog

pages/pageRoutes.go

@@ -18,7 +18,6 @@ var templatesFS embed.FS
 
 func AddPageRoutes(app *pocketbase.PocketBase) {
 	app.OnBeforeServe().Add(getIndexPageRoute(app))
-	app.OnBeforeServe().Add(getAuthPageRoute(app))
 }
 
 // render and return index page
@@ -75,22 +74,3 @@ func getIndexPageRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error
 		return nil
 	}
 }
-
-// render and return login page with configured oauth providers
-func getAuthPageRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error {
-	return func (e *core.ServeEvent) error {
-		e.Router.GET("/login", func(c echo.Context) error {
-
-			templateName := "templates/login.gohtml"
-			tmpl := template.Must(template.ParseFS(templatesFS, templateName))
-			var instantiatedTemplate bytes.Buffer
-			if err := tmpl.Execute(&instantiatedTemplate, nil); err != nil {
-				return c.JSON(http.StatusInternalServerError, map[string]string{"message": "error parsing template"})
-			}
-
-			return c.HTML(http.StatusOK, instantiatedTemplate.String())
-		})
-		return nil
-	}
-}
-

pages/templates/index.gohtml

@@ -53,9 +53,31 @@
 >
     <![endif]-->
     <p>{{ .Username }}</p>
-    <dialog open>
+    <button id="openAuth">Authenticate</button>
+    <dialog id="authDialog">
+      <button id="closeAuth">[X]</button>
       <p>Greetings, one and all!</p>
-      <button onClick="callOauth('github')">OK!</button>
+      {{ range .EnabledOauthProviders }}
+      <button onClick="callOauth('{{ . }}')">Login with {{ . }}</button>
+      {{ else }}
+      <p>Please configure at least one oauth provider</p>
+      {{ end }}
     </dialog>
+    <script defer type="text/javascript">
+      const dialog = document.querySelector("#authDialog");
+      const showButton = document.querySelector("#openAuth");
+      const closeButton = document.querySelector("#closeAuth");
+      console.log("setting up script for buttons");
+
+      // "Show the dialog" button opens the dialog modally
+      showButton.addEventListener("click", () => {
+        dialog.showModal();
+      });
+
+      // "Close" button closes the dialog
+      closeButton.addEventListener("click", () => {
+        dialog.close();
+      });
+    </script>
   </body>
 </html>