efim/go-ssr-pocketbase-oauth-attempt-github-mirror
1
0
Fork 0
mirror of https://github.com/efim/go-ssr-pocketbase-oauth-attempt.git synced 2025-12-12 20:03:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: adding base template for header & nav

Browse Source
This commit is contained in:
efim
2023-10-06 13:39:36 +00:00
parent 2676b87d5b
commit ffd74c4222
5 changed files with 220 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
pages/templates/base.gohtml Normal file
View File

@@ -0,0 +1,100 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>{{ template "title" . }}</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<script
defer
src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"
></script>
<script defer src="/static/static/public/htmx.min.js"></script>
</head>
<body hx-get="/" hx-trigger="auth-change-event">
<!--[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.
<![endif]-->
<nav>
<p>Using SSR and oauth with pocketbase as Go framework</p>
{{ if .NavInfo.IsGuest }}
<button id="openAuth">Authenticate</button>
<dialog id="authDialog">
<button id="closeAuth">[X]</button>
<p>Greetings, one and all!</p>
{{ range .NavInfo.EnabledOauthProviders }}
<button onClick="callOauth('{{ . }}')">Login with {{ . }}</button>
{{ else }}
<p>Please configure at least one oauth provider</p>
{{ end }}
</dialog>
<script defer type="text/javascript">
async function callOauth(providerName) {
const pb = new PocketBase("http://127.0.0.1:8090");
// This method initializes a one-off realtime subscription and will
// open a popup window with the OAuth2 vendor page to authenticate.
//
// Once the external OAuth2 sign-in/sign-up flow is completed, the popup
// window will be automatically closed and the OAuth2 data sent back
// to the user through the previously established realtime connection.
const authData = await pb
.collection("users")
.authWithOAuth2({ provider: providerName });
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
// "logout" the last authenticated model
pb.authStore.clear();
document.body.dispatchEvent(new Event("auth-change-event"));
}
</script>
<script defer type="text/javascript">
function initAuthDialog() {
const dialog = document.querySelector("#authDialog");
const showButton = document.querySelector("#openAuth");
// const closeButton = document.querySelector("#closeAuth");
// Select all buttons that are direct children of the dialog
var buttons = authDialog.querySelectorAll("button");
if (!dialog || !showButton) {
console.log("some auth elements are not present");
return;
}
console.log("setting up script for buttons");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
buttons.forEach(function (button) {
button.addEventListener("click", function () {
authDialog.close();
});
});
}
initAuthDialog();
// "DOMContentLoaded" doesn't work with htmx replacing body
// maybe i could use htmx related event, but ok to just do asap, i guess
// also - i bet hyperscript would work here
// document.addEventListener("DOMContentLoaded", initAuthDialog);
</script>
{{ else }}
<p>{{ .NavInfo.Username }}</p>
<button hx-get="/logout">Logout</button>
{{ end }}
</nav>
<main hx-boost="true">{{ template "content" . }}</main>
</body>
</html>

129
pages/templates/index.gohtml
View File

@@ -1,114 +1,17 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>index page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{{ define "title" }}
Index page
{{ end }}
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<script
defer
src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"
></script>
<script defer src="/static/static/public/htmx.min.js"></script>
<script defer type="text/javascript">
async function callOauth(providerName) {
const pb = new PocketBase("http://127.0.0.1:8090");
// This method initializes a one-off realtime subscription and will
// open a popup window with the OAuth2 vendor page to authenticate.
//
// Once the external OAuth2 sign-in/sign-up flow is completed, the popup
// window will be automatically closed and the OAuth2 data sent back
// to the user through the previously established realtime connection.
const authData = await pb
.collection("users")
.authWithOAuth2({ provider: providerName });
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
// "logout" the last authenticated model
pb.authStore.clear();
document.body.dispatchEvent(new Event("auth-change-event"))
}
</script>
</head>
<body
hx-get="/" hx-trigger="auth-change-event"
>
<!--[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>
<script defer type="text/javascript">
function initAuthDialog() {
const dialog = document.querySelector("#authDialog");
const showButton = document.querySelector("#openAuth");
// const closeButton = document.querySelector("#closeAuth");
// Select all buttons that are direct children of the dialog
var buttons = authDialog.querySelectorAll("button");
if (!dialog || !showButton) {
console.log("some auth elements are not present");
return;
}
console.log("setting up script for buttons");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
buttons.forEach(function (button) {
button.addEventListener("click", function () {
authDialog.close();
});
});
}
initAuthDialog();
// "DOMContentLoaded" doesn't work with htmx replacing body
// maybe i could use htmx related event, but ok to just do asap, i guess
// also - i bet hyperscript would work here
// document.addEventListener("DOMContentLoaded", initAuthDialog);
</script>
{{ else }}
<p>{{ .Username }}</p>
<button hx-get="/logout">Logout</button>
{{ 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>
</html>
{{ define "content" }}
<h1>Welcome to index page</h1>
{{ if not .NavInfo.IsGuest }}
<p>This is content only for authenticated users! Congratulations!</p>
<ul>
<li>
<a href="/somepage">Link to page only for logged in users</a>
</li>
</ul>
{{ else }}
<p>There will be some content only for authorized users</p>
{{ end }}
{{ end }}

14
pages/templates/somepage.gohtml Normal file
View File

@@ -0,0 +1,14 @@
{{ define "title" }}
Some page with content
{{ end }}
{{ define "content" }}
<h1>This is another page</h1>
<p>Will be rendered on server</p>
<p>and locked under apis.RequireAdminOrRecordAuth default middleware</p>
<p>here are some random numbers</p>
<ul>
<li>{{ .RandomNumber }}</li>
<li>{{ .RandomString }}</li>
</ul>
{{ end }}