efim
/
go-ssr-pocketbase-oauth-attempt-github-mirror
mirror of https://github.com/efim/go-ssr-pocketbase-oauth-attempt.git
1
0
Fork 0
Code Issues 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?

69
pages/templates/index.gohtml
View File

@ -36,34 +36,8 @@
pb.authStore.clear(); pb.authStore.clear();
} }
</script> </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
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</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>
{{ else }}
<p>Please configure at least one oauth provider</p>
{{ end }}
</dialog>
<script defer type="text/javascript"> <script defer type="text/javascript">
function initAuthDialog() {
const dialog = document.querySelector("#authDialog"); const dialog = document.querySelector("#authDialog");
const showButton = document.querySelector("#openAuth"); const showButton = document.querySelector("#openAuth");
const closeButton = document.querySelector("#closeAuth"); const closeButton = document.querySelector("#closeAuth");
@ -78,6 +52,47 @@
closeButton.addEventListener("click", () => { closeButton.addEventListener("click", () => {
dialog.close(); dialog.close();
}); });
}
document.addEventListener("DOMContentLoaded", initAuthDialog);
</script> </script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
>
<![endif]-->
<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>{{ .Username }}</p>
<a href="/logout">Logout</a>
{{ end }}
</nav>
<main>
<h1>Welcome to index page</h1>
{{ if not .IsGuest }}
<p>This is content only for authenticated users! Congratulations!</p>
{{ end }}
</main>
</body> </body>
</html> </html>