minor: startinblox-feature-requests#9

This commit is contained in:
Jean-Baptiste Pasquier 2021-02-17 18:40:12 +01:00
parent 202cc52027
commit 1fb9c6bc8f
17 changed files with 338 additions and 44 deletions

View File

@ -110,6 +110,7 @@ On `config.json`:
"authority": "http://localhost:8000/", "authority": "http://localhost:8000/",
"endpoints": { "endpoints": {
"get": { "get": {
"communities": "http://server.url/open-communities/",
"skills": "http://server.url/skills/", "skills": "http://server.url/skills/",
"users": "http://server.url/users/" "users": "http://server.url/users/"
}, },
@ -126,6 +127,7 @@ Where:
* `clientLogo` is an URL to an image file * `clientLogo` is an URL to an image file
* `xmppWebsocket` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on. * `xmppWebsocket` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
* `authority` is the OpenID Provider. Usually, if you use `djangoldp-account` it's the same as your djangoldp server. * `authority` is the OpenID Provider. Usually, if you use `djangoldp-account` it's the same as your djangoldp server.
* `endpoints.*.communities` is the API endpoints for Open Communities on your djangoldp server. (djangoldp-community)
* `endpoints.*.users` is the API endpoints for Users on your djangoldp server. (djangoldp-account) * `endpoints.*.users` is the API endpoints for Users on your djangoldp server. (djangoldp-account)
* `endpoints.*.skills` is the API endpoints for Skills on your djangoldp server. (djangoldp-skill) * `endpoints.*.skills` is the API endpoints for Skills on your djangoldp server. (djangoldp-skill)
* `endpoints.*.uploads` is the API endpoints for Uploads on your djangoldp server. (djangoldp-upload) * `endpoints.*.uploads` is the API endpoints for Uploads on your djangoldp server. (djangoldp-upload)
@ -140,6 +142,8 @@ Communities are mandatory to have an Hubl. If you're upgrading an existion Hubl,
Don't forget to set some users as admin from the Django Admin if you want to allow them to create new users from app. Don't forget to set some users as admin from the Django Admin if you want to allow them to create new users from app.
If you set `allow_self_registration` on your community, it'll disable the auto-login feature of Hubl and allow your users to self register on your application.
### Optional personalisation ### Optional personalisation
On `config.json`: On `config.json`:

View File

@ -5,10 +5,12 @@
"authority": "http://localhost:8000/", "authority": "http://localhost:8000/",
"endpoints": { "endpoints": {
"get": { "get": {
"communities": "http://localhost:8000/open-communities/",
"skills": "http://localhost:8000/skills/", "skills": "http://localhost:8000/skills/",
"users": "http://localhost:8000/users/" "users": "http://localhost:8000/users/"
}, },
"post": { "post": {
"communities": "http://localhost:8000/communities/",
"users": "http://localhost:8000/users/", "users": "http://localhost:8000/users/",
"upload": "http://localhost:8000/upload/" "upload": "http://localhost:8000/upload/"
} }

6
package-lock.json generated
View File

@ -1159,9 +1159,9 @@
} }
}, },
"@startinblox/hubl-styling-framework": { "@startinblox/hubl-styling-framework": {
"version": "1.8.6", "version": "1.8.8",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.6.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.8.tgz",
"integrity": "sha512-2SWeVC3bd6jkc+cwgV1vh359ntYqAaWWqgDBCvfadgSCxVIdrNf6tuEdI2H9jpIBDDJXikKt9E20qCL13WxtKQ==" "integrity": "sha512-SKVRUV95f45qIGSgpIMvgbQaZ6mPNNCXQY+6LlU18lGMvq0vwQ3AmOuTkp4VbfUWvSLYXTUE1N61YmIFikMIfw=="
}, },
"@types/q": { "@types/q": {
"version": "1.5.4", "version": "1.5.4",

View File

@ -45,7 +45,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.8.6", "@startinblox/hubl-styling-framework": "^1.8.8",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

View File

@ -0,0 +1,20 @@
import { Sib } from 'https://cdn.skypack.dev/@startinblox/core@0.15';
export const HublAutoLogin = {
name: 'hubl-auto-login',
created() {
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "flex"));
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "dashboard"
}
}),
);
document.querySelector("sib-auth").login();
}
}
Sib.register(HublAutoLogin);

View File

@ -37,7 +37,7 @@ if endpoints.get
//- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer) //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
if endpoints.get.users if endpoints.get.users
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@4.0" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@4.1" defer)
//- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer) //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
//- Disabled - Not in core@0.15 //- Disabled - Not in core@0.15

View File

@ -26,6 +26,7 @@ html(lang="en")
script(src="https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js" defer) script(src="https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js" defer)
script(type="module" src="/components/sentry.js" defer) script(type="module" src="/components/sentry.js" defer)
script(type="module" src="/components/hubl-auto-login.js" defer)
script(type="module" src="/components/hubl-search-users.js" defer) script(type="module" src="/components/hubl-search-users.js" defer)
script(type="module" src="/components/hubl-status.js" defer) script(type="module" src="/components/hubl-status.js" defer)
script(type="module" src="/components/hubl-reactivity.js" defer) script(type="module" src="/components/hubl-reactivity.js" defer)
@ -41,7 +42,7 @@ html(lang="en")
body.bg-color-grey body.bg-color-grey
if endpoints.get && endpoints.post if endpoints.get && endpoints.post
.notLoggedIn(style='visibility:hidden;') .notLoggedIn(style='visibility:hidden;')
sib-auth(style='display:none!important', auto-login) sib-auth(style='display:none!important')
sib-auth-provider( sib-auth-provider(
data-authority=`${authority}` data-authority=`${authority}`
data-id=`${authorityName || "authority"}` data-id=`${authorityName || "authority"}`
@ -77,9 +78,9 @@ html(lang="en")
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) hubl-reactivity(data-src=`${endpoints.get.projects}joinable/` target-src=`${endpoints.get.projects}`)
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.get.projects}`)
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.get.projects}joinable/`)
include views/page-project.pug include views/page-project.pug
if endpoints.get.circles if endpoints.get.circles
@ -90,9 +91,9 @@ html(lang="en")
hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) hubl-reactivity(data-src=`${endpoints.get.circles}joinable/` target-src=`${endpoints.get.circles}`)
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.get.circles}`)
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.get.circles}joinable/`)
include views/page-circle.pug include views/page-circle.pug
if endpoints.get.users if endpoints.get.users
@ -127,20 +128,134 @@ html(lang="en")
hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) hubl-reactivity(data-src=`${endpoints.get.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) hubl-reactivity(data-src=`${endpoints.get.joboffers}current/` target-src=`${endpoints.get.joboffers}expired/`)
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) hubl-reactivity(data-src=`${endpoints.get.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}expired/`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}current/`)
include views/page-job-offers.pug include views/page-job-offers.pug
.loggedIn(style='position:absolute;top:calc(50% - 10px);left:calc(50% - 40px);') #login(data-view="login", hidden).segment.full.bg-color-secondary.text-center.index-community
.segment.half.sm-full.bg-color-white.text-center
.segment.half.sm-full
div.community-logo
img(src=clientLogo style='max-width:100%;max-height:100%;')
p.text-xlarge.text-semibold.margin-top-xxlarge.line-xlarge(data-trans="communities.index.youKnow")
button.segment.full.sm-three-quarter.button.text-xsmall.text-bold.text-uppercase.color-secondary.bordered.padding-bottom.xlarge.padding-top.xlarge.community-button(
onclick="document.querySelector('sib-auth').login();"
data-trans="communities.index.login"
)
p.text-xlarge.text-semibold.margin-top-xxlarge.line-xlarge(data-trans="communities.index.newUser")
solid-widget(name='hubl-index-community-logo')
template ${value != "" ? `<div class="community-button-flexed"><img src="${value}" style="max-width:100%;max-height:80px" class="padding-xsmall" /></div>` : ""}
solid-widget(name='hubl-index-community-text')
template
.community-button-flexed-large.whitespace-normal
span(data-trans="communities.index.createAccount")
span &nbsp;
span ${value}
solid-widget(name='hubl-index-select-community')
template
solid-link.segment.full.sm-three-quarter.button.text-xsmall.text-bold.text-uppercase.color-secondary.bordered.padding-bottom.xlarge.padding-top.xlarge.margin-top-xsmall.community-button.community-button-flex-container(
next='join-community'
data-src='${src}'
)
solid-display(
data-src='${src}'
fields='logo, name'
widget-logo='hubl-index-community-logo'
widget-name='hubl-index-community-text'
)
div.loader#hubl-index-community-selector-loader
div
div
div
div
solid-display.community-flex-container(
data-src=`${endpoints.get.communities}`
fields='action'
action-action='action'
widget-action='hubl-index-select-community'
loader-id='hubl-index-community-selector-loader'
order-asc='name'
empty-widget='hubl-auto-login'
id='hubl-index-community-selector'
)
#join-community(data-view="join-community", hidden, no-render).segment.full.bg-color-secondary.text-center.index-community
.segment.half.sm-full.bg-color-white.text-center
.segment.half.sm-full
solid-widget(name="hubl-index-community-join-logo")
template
img(src="${value}" style="max-width:100%;max-height:100%;")
solid-display(
bind-resources
fields="logo"
widget-logo="hubl-index-community-join-logo"
class-logo='community-logo'
default-logo=clientLogo
)
solid-widget(name='hubl-input-type-password')
template
label ${label}
input(
type="password"
name="user.password"
required
data-holder
)
solid-widget(name='hubl-input-type-email')
template
label ${label}
input(
type="email"
name="user.email"
required
data-holder
)
solid-form.segment.full.padding-top-xlarge.padding-very-xxlarge.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal.form(
bind-resources
nested-field='members'
fields='user.first_name, user.last_name, user.email, user.username, user.password'
label-user.first_name='Prénom*'
label-user.last_name='Nom*'
label-user.email='E-mail*'
label-user.password='Mot de passe*'
data-trans='label-user.password=communities.index.password;label-user.email=communities.index.email;label-user.last_name=communities.index.last_name;label-user.first_name=communities.index.first_name;submit-button=communities.index.formCreateAccount'
widget-user.first_name='solid-form-text-label'
widget-user.last_name='solid-form-text-label'
widget-user.email='hubl-input-type-email'
widget-user.password='hubl-input-type-password'
widget-user.username='solid-form-hidden'
class-user.first_name='segment margin-bottom-medium full padding-left-small sm-padding-none text-large text-left'
class-user.last_name='segment margin-bottom-medium full padding-left-small sm-padding-none text-large text-left'
class-user.email='segment margin-bottom-medium full padding-left-small sm-padding-none text-large text-left'
class-user.password='segment margin-bottom-medium full padding-left-small sm-padding-none text-large text-left'
required-user.first_name
required-user.last_name
required-user.email
required-user.password
pattern-user.first_name='.+'
pattern-user.last_name='.+'
value-user.username='generate-an-username'
submit-button=''
id='user-creation-form'
next='dashboard'
)
.loggedIn.bg-color-grey(style='position:fixed;width:100%;height:100%;;z-index:999999;top:0;left:0;display:flex;align-items:center;justify-content:center;')
div
div.loader div.loader
div div
div div
div div
div div
div#something-goes-wrong(hidden)
br
span(data-trans="errors.somethingGoesWrong")
span &nbsp;
a(data-trans='errors.reload' href='/')
div( div(
id="swal-content-text" id="swal-content-text"

View File

@ -128,7 +128,18 @@
"subTitle": "Communities", "subTitle": "Communities",
"tableHeader1": "Name", "tableHeader1": "Name",
"tableHeader2": "Action", "tableHeader2": "Action",
"searchBy": "Find a community by name" "searchBy": "Find a community by name",
"index": {
"youKnow": "Do you know the place?",
"newUser": "Are you new around here?",
"createAccount": "Create an account on",
"login": "Connect to my account",
"first_name": "First name*",
"last_name": "Last name*",
"email": "Email*",
"password": "Password*",
"formCreateAccount": "Create an account"
}
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -176,7 +187,7 @@
"tableHeader3": "Captains", "tableHeader3": "Captains",
"tableHeader4": "Join", "tableHeader4": "Join",
"buttonQuit": "Leave", "buttonQuit": "Leave",
"buttonJoin":"Join", "buttonJoin": "Join",
"searchBy": "Find a project by name" "searchBy": "Find a project by name"
}, },
"left": { "left": {
@ -224,5 +235,9 @@
"private": "Private", "private": "Private",
"public": "Public" "public": "Public"
}, },
"success": "Success!" "success": "Success!",
"errors": {
"somethingGoesWrong": "Something goes wrong, try to",
"reload": "reload"
}
} }

View File

@ -128,7 +128,18 @@
"subTitle": "Comunidades", "subTitle": "Comunidades",
"tableHeader1": "Nombre", "tableHeader1": "Nombre",
"tableHeader2": "Acción", "tableHeader2": "Acción",
"searchBy": "Encuentra una comunidad por nombre " "searchBy": "Encuentra una comunidad por nombre ",
"index": {
"youKnow": "¿Conoce el lugar?",
"newUser": "¿Eres nuevo por aquí?",
"createAccount": "Crea una cuenta en",
"login": "Conectar a mi cuenta",
"first_name": "Nombre*",
"last_name": "Apellido*",
"email": "Correo electrónico*",
"password": "Contraseña*",
"formCreateAccount": "Crear una cuenta"
}
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -224,5 +235,9 @@
"private": "Privado", "private": "Privado",
"public": "Público" "public": "Público"
}, },
"success": "¡Éxito!" "success": "¡Éxito!",
"errors": {
"somethingGoesWrong": "Algo sale mal, intenta",
"reload": "recargar"
}
} }

View File

@ -129,7 +129,18 @@
"subTitle": "Communautés", "subTitle": "Communautés",
"tableHeader1": "Nom", "tableHeader1": "Nom",
"tableHeader2": "Action", "tableHeader2": "Action",
"searchBy": "Rechercher une communauté par nom" "searchBy": "Rechercher une communauté par nom",
"index": {
"youKnow": "Tu connais la maison ?",
"newUser": "Tu es nouveau par ici ?",
"createAccount": "Créer un compte sur",
"login": "Se connecter à mon compte",
"first_name": "Prénom*",
"last_name": "Nom*",
"email": "E-mail*",
"password": "Mot de passe*",
"formCreateAccount": "Créer un compte"
}
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -177,7 +188,7 @@
"tableHeader3": "Capitaines", "tableHeader3": "Capitaines",
"tableHeader4": "Rejoindre", "tableHeader4": "Rejoindre",
"buttonQuit": "Quitter", "buttonQuit": "Quitter",
"buttonJoin":"Rejoindre", "buttonJoin": "Rejoindre",
"searchBy": "Rechercher un projet par nom" "searchBy": "Rechercher un projet par nom"
}, },
"left": { "left": {
@ -225,5 +236,9 @@
"private": "Privé", "private": "Privé",
"public": "Public" "public": "Public"
}, },
"success": "Succès!" "success": "Succès!",
"errors": {
"somethingGoesWrong": "Quelque chose ne va pas, essayez de",
"reload": "recharger"
}
} }

View File

@ -10,6 +10,17 @@ document.addEventListener("DOMContentLoaded", function () {
document document
.querySelectorAll(".loggedIn") .querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none")); .forEach(el => (el.style.display = "none"));
} else {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "login"
}
}),
);
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none"));
} }
}); });
}); });

View File

@ -0,0 +1,5 @@
setTimeout(() => {
if(document.querySelector('.loggedIn').style.display != 'none') {
document.querySelector('#something-goes-wrong').removeAttribute('hidden')
}
}, 5000);

View File

@ -0,0 +1,14 @@
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#user-creation-form').addEventListener('save', event => {
if(event.originalTarget.id == 'user-creation-form') {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "dashboard"
}
}),
);
document.querySelector("sib-auth").login();
}
});
});

View File

@ -0,0 +1,82 @@
.index-community {
position: absolute;
top: 0;
left: 0;
height: 100%;
>div {
min-height: 75%;
margin-top: 100px;
padding-bottom: 70px;
@media (max-width: 768px) {
margin: 0;
min-height: 100%;
}
.community-logo {
max-width: 100%;
height: 100px;
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.community-button {
height: 80px;
border-radius: 5px;
}
.community-button-flexed {
flex-basis: 33%;
flex-grow: 1;
flex-shrink: 1;
}
.community-button-flexed-large {
flex-basis: 66%;
flex-grow: 1;
flex-shrink: 1;
}
.community-flex-container {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
>div>solid-display {
display: contents;
>div>hubl-index-select-community {
display: contents;
}
}
}
.community-button-flex-container {
display: flex;
align-items: center;
justify-content: center;
>solid-display,
hubl-index-community-logo,
hubl-index-community-text {
display: contents;
}
}
}
solid-form-text-label,
hubl-input-type-password,
hubl-input-type-email {
color: #5D7393;
}
label {
text-align: left;
}
input[type="submit"] {
float: initial !important;
}
}

View File

@ -42,6 +42,7 @@ solid-display>div {
@import 'job-offers'; @import 'job-offers';
@import 'chat'; @import 'chat';
@import 'forms'; @import 'forms';
@import 'communities';
nav#main__menu { nav#main__menu {
@media (min-width: 768.01px) { @media (min-width: 768.01px) {

View File

@ -65,13 +65,6 @@ div
button.segment.lg-hidden.icon-menu#toggleMainMenu button.segment.lg-hidden.icon-menu#toggleMainMenu
sib-auth(style='display:none!important', auto-login)
sib-auth-provider(
data-authority=`${authority}`
data-id=`${authorityName || "authority"}`
data-client-name=`${clientName || "Hubl"}`
)
//- User menu visible on small screens //- User menu visible on small screens
details.user-menu.segment.lg-hidden.user-controls details.user-menu.segment.lg-hidden.user-controls
summary summary

View File

@ -228,3 +228,5 @@ solid-router#navbar-router(default-route='dashboard')
solid-route.menu(name='profile', hidden) solid-route.menu(name='profile', hidden)
solid-route(name='about', hidden) solid-route(name='about', hidden)
solid-route(name='join-community', use-id, hidden)
solid-route(name='login', hidden)