diff --git a/README.md b/README.md index 52f7723..7d12f54 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ On `config.json`: "authority": "http://localhost:8000/", "endpoints": { "get": { + "communities": "http://server.url/open-communities/", "skills": "http://server.url/skills/", "users": "http://server.url/users/" }, @@ -126,6 +127,7 @@ Where: * `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. * `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.*.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) @@ -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. +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 On `config.json`: diff --git a/config.sample.json b/config.sample.json index a3368b7..295b9c6 100644 --- a/config.sample.json +++ b/config.sample.json @@ -5,10 +5,12 @@ "authority": "http://localhost:8000/", "endpoints": { "get": { + "communities": "http://localhost:8000/open-communities/", "skills": "http://localhost:8000/skills/", "users": "http://localhost:8000/users/" }, "post": { + "communities": "http://localhost:8000/communities/", "users": "http://localhost:8000/users/", "upload": "http://localhost:8000/upload/" } diff --git a/package-lock.json b/package-lock.json index 50fd2d0..dd775bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,9 +1159,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.6.tgz", - "integrity": "sha512-2SWeVC3bd6jkc+cwgV1vh359ntYqAaWWqgDBCvfadgSCxVIdrNf6tuEdI2H9jpIBDDJXikKt9E20qCL13WxtKQ==" + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.8.tgz", + "integrity": "sha512-SKVRUV95f45qIGSgpIMvgbQaZ6mPNNCXQY+6LlU18lGMvq0vwQ3AmOuTkp4VbfUWvSLYXTUE1N61YmIFikMIfw==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index 3107385..2eaf66c 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@startinblox/hubl-styling-framework": "^1.8.6", + "@startinblox/hubl-styling-framework": "^1.8.8", "cross-env": "^7.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", diff --git a/src/components/hubl-auto-login.js b/src/components/hubl-auto-login.js new file mode 100644 index 0000000..8fa2ac9 --- /dev/null +++ b/src/components/hubl-auto-login.js @@ -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); \ No newline at end of file diff --git a/src/dependencies.pug b/src/dependencies.pug index 08b9d09..6a36d99 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -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 diff --git a/src/index.pug b/src/index.pug index fde12e7..08187c8 100644 --- a/src/index.pug +++ b/src/index.pug @@ -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 != "" ? `
` : ""} + solid-widget(name='hubl-index-community-text') + template + .community-button-flexed-large.whitespace-normal + span(data-trans="communities.index.createAccount") + span   + 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   + a(data-trans='errors.reload' href='/') div( id="swal-content-text" diff --git a/src/locales/en.json b/src/locales/en.json index 0717a0e..d0eb2a1 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -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" + } +} \ No newline at end of file diff --git a/src/locales/es.json b/src/locales/es.json index 9b444c8..e5c79aa 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -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" + } +} \ No newline at end of file diff --git a/src/locales/fr.json b/src/locales/fr.json index 39dc938..b4ed9de 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -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" + } +} \ No newline at end of file diff --git a/src/scripts/login-element-visibility.js b/src/scripts/login-element-visibility.js index 876065e..af9dcc9 100644 --- a/src/scripts/login-element-visibility.js +++ b/src/scripts/login-element-visibility.js @@ -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")); } }); }); \ No newline at end of file diff --git a/src/scripts/timeout-goeswrong.js b/src/scripts/timeout-goeswrong.js new file mode 100644 index 0000000..7b46d04 --- /dev/null +++ b/src/scripts/timeout-goeswrong.js @@ -0,0 +1,5 @@ +setTimeout(() => { + if(document.querySelector('.loggedIn').style.display != 'none') { + document.querySelector('#something-goes-wrong').removeAttribute('hidden') + } +}, 5000); \ No newline at end of file diff --git a/src/scripts/user-creation-form.js b/src/scripts/user-creation-form.js new file mode 100644 index 0000000..930a812 --- /dev/null +++ b/src/scripts/user-creation-form.js @@ -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(); + } + }); +}); \ No newline at end of file diff --git a/src/styles/communities/_index.scss b/src/styles/communities/_index.scss new file mode 100644 index 0000000..2cb70cc --- /dev/null +++ b/src/styles/communities/_index.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 16e4b59..3f167ca 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -42,6 +42,7 @@ solid-display>div { @import 'job-offers'; @import 'chat'; @import 'forms'; +@import 'communities'; nav#main__menu { @media (min-width: 768.01px) { diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index 9b0eb97..cea78f0 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -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 diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index bfa2803..79f4053 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -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)