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
** DONE start pocketbase
** DONE add middlewares for cookie session
** TODO 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
*** TODO also, how do i logout?
** DONE add index page, that will have either "current user" or 'login' link
*** DONE let's add some content that only opens up when person is authed
*** DONE also, how do i logout?
separate route that deleted the cookie i guess.
since auth is a jwt which would expire on its own
and htmx get thingy, and reload i guess?

67
pages/templates/index.gohtml
View File

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