From 815cc1e1c17057d6343f4fb2c6d60cf2f0f3ed3d Mon Sep 17 00:00:00 2001
From: Matthieu Fesselier <matthieu@startinblox.com>
Date: Wed, 2 Mar 2022 15:16:17 +0100
Subject: [PATCH] feature: allow anonymous browsing
---
README.md | 17 ++++++++++-
src/index.pug | 2 +-
src/scripts/login-element-visibility.js | 39 ++++++++++++++++---------
src/views/partials/header.pug | 2 ++
4 files changed, 45 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index 3e51f02d..0f0867ad 100644
--- a/README.md
+++ b/README.md
@@ -668,7 +668,7 @@ Module declaration, on `config.json`:
{
"type": "registering",
"parameters": {
- "dataSrc": "server://open-communities/",
+ "dataSrc": "server://open-communities/",
"authority": "http://server.url/",
"authorityName": "your-authority-indentifier"
}
@@ -680,6 +680,21 @@ Where:
* `authority` is the OpenID Provider. Usually, if you use `djangoldp_account` it's the same as your djangoldp server.
* `authorityName` is a visual name of your OpenID Provider
+If you add the `allowAnonymous` parameter, it will disable the automatic redirection to login page, and allow your users to navigate the app without being logged in. Activate it like this:
+
+Module declaration, on `config.json`:
+
+```json
+ {
+ "type": "registering",
+ "parameters": {
+ "authority": "http://server.url/",
+ "authorityName": "your-authority-indentifier",
+ "allowAnonymous": true
+ }
+ }
+```
+
### Theme checker
The [Orbit theme manager](https://cdn.startinblox.com/hubl/theme/) is very handy for customer to easily customize the main colors they want to use.
diff --git a/src/index.pug b/src/index.pug
index 7d9df654..aa86d3ba 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -52,7 +52,7 @@ html(lang="en")
if component.type == "registering"
if component.parameters
if component.parameters.authority
- sib-auth(style='display:none!important')
+ sib-auth(style='display:none!important' allow-anonymous=component.parameters.allowAnonymous)
sib-auth-provider(
data-authority=`${component.parameters.authority}`
data-id=`${component.parameters.authorityName || "authority"}`
diff --git a/src/scripts/login-element-visibility.js b/src/scripts/login-element-visibility.js
index f7e6eb2a..49dad7a3 100644
--- a/src/scripts/login-element-visibility.js
+++ b/src/scripts/login-element-visibility.js
@@ -19,6 +19,13 @@ document.addEventListener("DOMContentLoaded", function () {
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "none"));
+ } else if (sibAuth.hasAttribute("allow-anonymous")) {
+ document
+ .querySelectorAll(".notLoggedIn")
+ .forEach(el => (el.style.visibility = "visible"));
+ document
+ .querySelectorAll(".loggedIn-loader")
+ .forEach(el => (el.style.display = "none"));
} else {
window.requestLogin = true;
window.dispatchEvent(
@@ -47,19 +54,25 @@ window.addEventListener("navigate", e => {
);
}
});
+
+const goToLoginHandler = () => {
+ document
+ .querySelectorAll(".loggedIn")
+ .forEach(el => (el.style.display = "none"));
+ document
+ .querySelectorAll(".loggedIn-loader")
+ .forEach(el => (el.style.display = "flex"));
+ setTimeout(() => {
+ document.querySelector('#something-goes-wrong').removeAttribute('hidden');
+ }, 5000);
+ if (!(new URLSearchParams(window.location.search)).get('code'))
+ document.querySelector('sib-auth').login();
+};
const loginButton = document.querySelector('#loginButton');
if (loginButton) {
- loginButton.addEventListener('click', () => {
- document
- .querySelectorAll(".loggedIn")
- .forEach(el => (el.style.display = "none"));
- document
- .querySelectorAll(".loggedIn-loader")
- .forEach(el => (el.style.display = "flex"));
- setTimeout(() => {
- document.querySelector('#something-goes-wrong').removeAttribute('hidden');
- }, 5000);
- if(!(new URLSearchParams(window.location.search)).get('code'))
- document.querySelector('sib-auth').login();
- });
+ loginButton.addEventListener('click', goToLoginHandler);
+}
+const loginButtonHeader = document.querySelector('#loginButtonHeader');
+if (loginButtonHeader) {
+ loginButtonHeader.addEventListener('click', goToLoginHandler);
}
\ No newline at end of file
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 1d3e7bc4..31a9a74e 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -114,4 +114,6 @@ div
li
button.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+ if componentSet.has("registering") && getComponent("registering").parameters.allowAnonymous
+ button#loginButtonHeader.loggedIn.segment.padding-small.text-hover(next="login" data-trans='header.logIn')
--
GitLab