efim
/
go-ssr-pocketbase-oauth-attempt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: moving dialog script to head 

this way htmx page switch would keep it.
and calling on event DOM loaded means elements should be found
This commit is contained in:
efim 2023-10-06 09:40:28 +00:00
parent e1346e2f96
commit a9fce1bcbf
2 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
auth-notes.org
View File

@ -4,9 +4,9 @@ https://pocketbase.io/docs/go-overview/
* plan * plan
** DONE start pocketbase ** DONE start pocketbase
** DONE add middlewares for cookie session ** DONE add middlewares for cookie session
** TODO add index page, that will have either "current user" or 'login' link ** DONE add index page, that will have either "current user" or 'login' link
*** TODO let's add some content that only opens up when person is authed *** DONE let's add some content that only opens up when person is authed
*** TODO also, how do i logout? *** DONE also, how do i logout?
separate route that deleted the cookie i guess. separate route that deleted the cookie i guess.
since auth is a jwt which would expire on its own since auth is a jwt which would expire on its own
and htmx get thingy, and reload i guess? and htmx get thingy, and reload i guess?

67
pages/templates/index.gohtml
View File

@ -36,9 +36,27 @@
pb.authStore.clear(); pb.authStore.clear();
} }
</script> </script>
<script defer type="text/javascript">
function initAuthDialog() {
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();
});
}
document.addEventListener("DOMContentLoaded", initAuthDialog);
</script>
</head> </head>
<body> <body>
<h1>Welcome to index page</h1>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -52,32 +70,29 @@
</dialog> </dialog>
> >
<![endif]--> <![endif]-->
<p>{{ .Username }}</p> <nav>
<button id="openAuth">Authenticate</button> <p>Using SSR and oauth with pocketbase as Go framework</p>
<dialog id="authDialog"> {{ if .IsGuest }}
<button id="closeAuth">[X]</button> <button id="openAuth">Authenticate</button>
<p>Greetings, one and all!</p> <dialog id="authDialog">
{{ range .EnabledOauthProviders }} <button id="closeAuth">[X]</button>
<button onClick="callOauth('{{ . }}')">Login with {{ . }}</button> <p>Greetings, one and all!</p>
{{ range .EnabledOauthProviders }}
<button onClick="callOauth('{{ . }}')">Login with {{ . }}</button>
{{ else }}
<p>Please configure at least one oauth provider</p>
{{ end }}
</dialog>
{{ else }} {{ else }}
<p>Please configure at least one oauth provider</p> <p>{{ .Username }}</p>
<a href="/logout">Logout</a>
{{ end }} {{ end }}
</dialog> </nav>
<script defer type="text/javascript"> <main>
const dialog = document.querySelector("#authDialog"); <h1>Welcome to index page</h1>
const showButton = document.querySelector("#openAuth"); {{ if not .IsGuest }}
const closeButton = document.querySelector("#closeAuth"); <p>This is content only for authenticated users! Congratulations!</p>
console.log("setting up script for buttons"); {{ end }}
</main>
// "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> </body>
</html> </html>