autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

minor: startinblox-feature-requests#9

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/hubl-auto-login.js Normal file
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);

2
src/dependencies.pug
View File

@ -37,7 +37,7 @@ if endpoints.get
//- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
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)
//- Disabled - Not in core@0.15

153
src/index.pug
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(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-status.js" defer)
script(type="module" src="/components/hubl-reactivity.js" defer)
@ -41,7 +42,7 @@ html(lang="en")
body.bg-color-grey
if endpoints.get && endpoints.post
.notLoggedIn(style='visibility:hidden;')
sib-auth(style='display:none!important', auto-login)
sib-auth(style='display:none!important')
sib-auth-provider(
data-authority=`${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(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(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || 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.projects || endpoints.get.projects}joinable/`)
hubl-reactivity(data-src=`${endpoints.get.projects}joinable/` target-src=`${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.get.projects}joinable/`)
include views/page-project.pug
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(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(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || 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.circles || endpoints.get.circles}joinable/`)
hubl-reactivity(data-src=`${endpoints.get.circles}joinable/` target-src=`${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.get.circles}joinable/`)
include views/page-circle.pug
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}expired/` 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.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || 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.joboffers || endpoints.get.joboffers}`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
hubl-reactivity(data-src=`${endpoints.get.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(data-src=`${endpoints.get.joboffers}current/` target-src=`${endpoints.get.joboffers}expired/`)
hubl-reactivity(data-src=`${endpoints.get.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}expired/`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}`)
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}current/`)
include views/page-job-offers.pug
.loggedIn(style='position:absolute;top:calc(50% - 10px);left:calc(50% - 40px);')
div.loader
div
div
div
div
#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
div
div
div
div#something-goes-wrong(hidden)
br
span(data-trans="errors.somethingGoesWrong")
span &nbsp;
a(data-trans='errors.reload' href='/')
div(
id="swal-content-text"

23
src/locales/en.json
View File

@ -128,7 +128,18 @@
"subTitle": "Communities",
"tableHeader1": "Name",
"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": {
"menuRight": {
@ -176,7 +187,7 @@
"tableHeader3": "Captains",
"tableHeader4": "Join",
"buttonQuit": "Leave",
"buttonJoin":"Join",
"buttonJoin": "Join",
"searchBy": "Find a project by name"
},
"left": {
@ -224,5 +235,9 @@
"private": "Private",
"public": "Public"
},
"success": "Success!"
}
"success": "Success!",
"errors": {
"somethingGoesWrong": "Something goes wrong, try to",
"reload": "reload"
}
}

23
src/locales/es.json
View File

@ -6,7 +6,7 @@
"about": "Acerca de",
"logOut": "Cerrar sesión",
"logIn": "Iniciar sesión"
},
},
"menuLeft": {
"emptyCircleProject": {
"notPartOf": "No eres parte de ninguno",
@ -128,7 +128,18 @@
"subTitle": "Comunidades",
"tableHeader1": "Nombre",
"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": {
"menuRight": {
@ -224,5 +235,9 @@
"private": "Privado",
"public": "Público"
},
"success": "¡Éxito!"
}
"success": "¡Éxito!",
"errors": {
"somethingGoesWrong": "Algo sale mal, intenta",
"reload": "recargar"
}
}

25
src/locales/fr.json
View File

@ -6,7 +6,7 @@
"about": "A propos",
"logOut": "Se déconnecter",
"logIn": "Se connecter"
},
},
"menuLeft": {
"emptyCircleProject": {
"notPartOf": "Tu ne fais partie d'aucun",
@ -129,7 +129,18 @@
"subTitle": "Communautés",
"tableHeader1": "Nom",
"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": {
"menuRight": {
@ -177,7 +188,7 @@
"tableHeader3": "Capitaines",
"tableHeader4": "Rejoindre",
"buttonQuit": "Quitter",
"buttonJoin":"Rejoindre",
"buttonJoin": "Rejoindre",
"searchBy": "Rechercher un projet par nom"
},
"left": {
@ -225,5 +236,9 @@
"private": "Privé",
"public": "Public"
},
"success": "Succès!"
}
"success": "Succès!",
"errors": {
"somethingGoesWrong": "Quelque chose ne va pas, essayez de",
"reload": "recharger"
}
}

11
src/scripts/login-element-visibility.js
View File

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

5
src/scripts/timeout-goeswrong.js Normal file
View File

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

14
src/scripts/user-creation-form.js Normal file
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();
}
});
});

82
src/styles/communities/_index.scss Normal file
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;
}
}

1
src/styles/index.scss
View File

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

7
src/views/partials/header.pug
View File

@ -65,13 +65,6 @@ div
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
details.user-menu.segment.lg-hidden.user-controls
summary

2
src/views/partials/menu-left.pug
View File

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