This is an automated email from the git hooks/post-receive script. New commit to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 57673fc3db12c2c0559c00dc8f861b34d886ee22 Author: Tony CHEMIT <dev@tchemit.fr> Date: Thu Jan 12 14:07:02 2017 +0100 debut formulaire de création de sondage (le squelette) + améliorations sur les écrans de connexion --- pollen-ui-riot-js/package.json | 3 - pollen-ui-riot-js/src/main/web/conf.js | 2 - pollen-ui-riot-js/src/main/web/conf.json | 14 +++ pollen-ui-riot-js/src/main/web/i18n.json | 51 ++++------ pollen-ui-riot-js/src/main/web/index.html | 2 - pollen-ui-riot-js/src/main/web/index.js | 9 +- pollen-ui-riot-js/src/main/web/js/FetchService.js | 2 +- pollen-ui-riot-js/src/main/web/js/I18nHelper.js | 8 ++ pollen-ui-riot-js/src/main/web/js/PollForm.js | 52 ++++++++++ pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag | 41 ++++++++ .../src/main/web/tag/CreatePollHeader.tag | 60 ++++++++++++ pollen-ui-riot-js/src/main/web/tag/Footer.tag | 3 +- pollen-ui-riot-js/src/main/web/tag/Header.tag | 7 +- pollen-ui-riot-js/src/main/web/tag/Home.tag | 7 +- .../src/main/web/tag/PollChoicesDate.tag | 35 +++++++ .../src/main/web/tag/PollChoicesImage.tag | 35 +++++++ .../src/main/web/tag/PollChoicesText.tag | 35 +++++++ .../src/main/web/tag/PollDescription.tag | 33 +++++++ .../src/main/web/tag/PollSettings.tag | 35 +++++++ pollen-ui-riot-js/src/main/web/tag/PollVoters.tag | 46 +++++++++ pollen-ui-riot-js/src/main/web/tag/Pollen.tag | 4 + pollen-ui-riot-js/src/main/web/tag/SignCheck.tag | 4 +- pollen-ui-riot-js/src/main/web/tag/SignIn.tag | 60 +++--------- pollen-ui-riot-js/src/main/web/tag/SignUp.tag | 93 +++--------------- .../{util/Popup.tag => popup/AccountCreated.tag} | 77 ++++++--------- .../tag/{util/Popup.tag => popup/NewPassword.tag} | 106 +++++++++++--------- .../{util/Popup.tag => popup/ResendValidation.tag} | 107 ++++++++++++--------- pollen-ui-riot-js/webpack.config.js | 6 -- 28 files changed, 611 insertions(+), 326 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index a15289e..e4e68f6 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -33,9 +33,6 @@ "fsevents": "^1.0.17" }, "dependencies": { - "brace": "^0.9.1", - "moment": "^2.16.0", - "remarkable": "^1.7.1", "riot": "^3.0.5", "riot-route": "^2.5.0", "font-awesome": "4.6.3" diff --git a/pollen-ui-riot-js/src/main/web/conf.js b/pollen-ui-riot-js/src/main/web/conf.js deleted file mode 100644 index 82c8686..0000000 --- a/pollen-ui-riot-js/src/main/web/conf.js +++ /dev/null @@ -1,2 +0,0 @@ -// window.API_URL = "https://demo.codelutin.com/pollen-bundle-latest"; -window.API_URL = "http://localhost:8084/pollen-rest-api"; diff --git a/pollen-ui-riot-js/src/main/web/conf.json b/pollen-ui-riot-js/src/main/web/conf.json new file mode 100644 index 0000000..eaace3f --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/conf.json @@ -0,0 +1,14 @@ +{ + "endPoint": "http://localhost:8084/pollen-rest-api", + "pollDefaultPageSize": 10, + "commentDefaultPageSize": 10, + "favoriteListDefaultPageSize": 15, + "favoriteListMemberDefaultPageSize": 30, + "defaultAlertTimeInfo": 10000, + "defaultAlertTimeSuccess": 2000, + "defaultAlertTimeWarning": 5000, + "defaultAlertTimeError": -1, + "defaultDateFormat": "shortDate", + "defaultTimeFormat": "shortTime", + "defaultDateTimeFormat": "short" +} \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 8eb83d3..afaac9b 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -7,18 +7,16 @@ "signup.name.placeholder": "Entrer votre nom d'utilisateur", "signup.validate": "Valider", "signup.resendValidation": "Déja inscrit, mais compte non validé ?", - "signup.resendValidation.title": "Renvoyer un courriel de validation de compte", - "signup.resendValidation.description": "Un nouveau courriel de validation va vous être envoyé.", - "signup.resendValidation.action": "Envoyer", - "signup.resendValidation.placeholder": "Entrer votre courriel", - "signup.resendValidation.sent": "Invitation envoyée", - "signup.resendValidation.error.emailNotFound": "Le courriel n'a pas été trouvé", - "signup.resendValidation.error.emailNotFilled": "Le courriel n'est pas renseigné", "signup.error": "Impossible d'enregister le compte.", "signup.error.email": "L'adresse email est déjà utilisé pour un autre compte.", "signup.createAccount.title": "Votre compte a bien été créé", "signup.createAccount.description": "Un courriel vous a été envoyé avec vos identifiants ainsi que l'url de validation de votre compte.", "signup.createAccount.validate": "Continuer", + "resendvalidation.title": "Renvoyer un courriel de validation de compte", + "resendvalidation.action": "Envoyer", + "resendvalidation.placeholder": "Entrer votre courriel", + "resendvalidation.sent": "Un nouveau courriel d'invitation a été envoyé", + "resendvalidation.error.emailNotFound": "Le courriel n'a pas été trouvé", "signin.title": "Déjà membre ?", "signin.login": "Email", "signin.login.placeholder": "Entrer l'email", @@ -26,15 +24,12 @@ "signin.password.placeholder": "Entrer le mot de passe", "signin.lostpassword": "Mot de passe perdu ?", "signin.connexion": "Se connecter", - "signin.newpassword.title": "Nouveau mot de passe", - "signin.newpassword.description": "Un nouveau mot de passe va vous être envoyer.", - "signin.newpassword.validate": "Valider", - "signin.newpassword.close": "Quit", - "signin.newPassword.placeholder": "Entrer votre courriel", - "signin.newpassword.error.emailNotFound": "Le courriel n'a pas été trouvé", - "signin.newpassword.error.emailNotFilled": "Le courriel n'est pas renseigné", - "signin.newpassword.sent": "Un nouveau mot de passe vient d'être envoyé par mail", "signin.error.signin": "Courriel ou de mot de passe invalide", + "newpassword.title": "Obtenir un nouveau mot de passe", + "newpassword.action": "Envoyer", + "newpassword.placeholder": "Entrer votre courriel", + "newpassword.error.emailNotFound": "Le courriel n'a pas été trouvé", + "newpassword.sent": "Un nouveau mot de passe vient d'être envoyé", "footer.doc": "Pollen 2.0", "footer.download": "Télécharger", "footer.contact": "Nous contacter", @@ -61,20 +56,17 @@ "signup.name": "User name", "signup.name.placeholder": "Entrer your user name", "signup.validate": "Create", - "signup.resend": "Send again", "signup.resendValidation": "Already member, but account never validated ?", - "signup.resendValidation.title": "Send another validation email", - "signup.resendValidation.description": "A new validation email will be sent to you.", - "signup.resendValidation.action": "Send again", - "signup.resendValidation.sent": "Invitation sent", - "signup.resendValidation.placeholder": "Fill your email", - "signup.resendValidation.error.emailNotFound": "Your email was not found", - "signup.resendValidation.error.emailNotFilled": "Email is not filled", "signup.error": "Could not register account.", "signup.error.email": "This email is already used.", "signup.createAccount.title": "Your account was created", "signup.createAccount.description": "We sent you an email with the account validation process and your authentication data.", "signup.createAccount.validate": "Continue", + "resendvalidation.title": "Send another validation email", + "resendvalidation.action": "Send again", + "resendvalidation.sent": "A new invitation email was sent", + "resendvalidation.placeholder": "Fill your email", + "resendvalidation.error.emailNotFound": "Your email was not found", "signin.title": "Already member?", "signin.login": "Email", "signin.login.placeholder": "Entrer your email", @@ -82,15 +74,12 @@ "signin.password.placeholder": "Entrer your password", "signin.lostpassword": "Lost password?", "signin.connexion": "Connect", - "signin.newPassword.placeholder": "Fill your email", - "signin.newpassword.title": "New password", - "signin.newpassword.description": "A new password will be sent to you.", - "signin.newpassword.validate": "Validate", - "signin.newpassword.close": "Quitter", - "signin.newpassword.error.emailNotFound": "Your email was not found", - "signin.newpassword.error.emailNotFilled": "Email is not filled", - "signin.newpassword.sent": "A new password was sent", "signin.error.signin": "Email or password invalid", + "newpassword.placeholder": "Fill your email", + "newpassword.title": "Get a new password", + "newpassword.action": "Send password", + "newpassword.error.emailNotFound": "Your email was not found", + "newpassword.sent": "A new password was sent", "footer.doc": "Pollen 2.0", "footer.download": "Télécharger", "footer.contact": "Nous contacter", diff --git a/pollen-ui-riot-js/src/main/web/index.html b/pollen-ui-riot-js/src/main/web/index.html index 982a1d0..3914dd4 100644 --- a/pollen-ui-riot-js/src/main/web/index.html +++ b/pollen-ui-riot-js/src/main/web/index.html @@ -3,13 +3,11 @@ <head> <meta charset="utf-8"> <title>Pollen</title> - <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet"> <link href="./css/font-awesome.css" rel="stylesheet"> </head> <body> <Pollen/> -<script src="./conf.js"></script> <script src="./pollen.js"></script> </body> </html> diff --git a/pollen-ui-riot-js/src/main/web/index.js b/pollen-ui-riot-js/src/main/web/index.js index dfc581e..430ec69 100644 --- a/pollen-ui-riot-js/src/main/web/index.js +++ b/pollen-ui-riot-js/src/main/web/index.js @@ -1,10 +1,13 @@ -let route = require("riot-route"); -require("./tag/Pollen.tag"); - let i18n = require("./js/I18nHelper"); i18n.bundles = require("./i18n.json"); riot.mixin(i18n); +let session = require("./js/Session"); +session.configuration = require("./conf.json"); + +require("./tag/Pollen.tag"); riot.mount("*"); + +let route = require("riot-route"); route.base("/"); route.start(true); diff --git a/pollen-ui-riot-js/src/main/web/js/FetchService.js b/pollen-ui-riot-js/src/main/web/js/FetchService.js index 00990c1..71c70fd 100644 --- a/pollen-ui-riot-js/src/main/web/js/FetchService.js +++ b/pollen-ui-riot-js/src/main/web/js/FetchService.js @@ -13,7 +13,7 @@ class FetchService { headers["X-Pollen-Session-Token"] = session.auth.permission; } return fetch( - window.API_URL + url, { + session.configuration.endPoint + url, { headers, method, credentials: "include", diff --git a/pollen-ui-riot-js/src/main/web/js/I18nHelper.js b/pollen-ui-riot-js/src/main/web/js/I18nHelper.js index fd9e2b2..a6de843 100644 --- a/pollen-ui-riot-js/src/main/web/js/I18nHelper.js +++ b/pollen-ui-riot-js/src/main/web/js/I18nHelper.js @@ -1,5 +1,13 @@ module.exports = { + installBundle(locale, value, emitter) { + this.generateBundle(locale, value); + emitter.onLocaleChanged((locale) => { + this.generateBundle(locale, value); + this.update(); + }); + }, + generateBundle(locale, value) { this.prefix = value; diff --git a/pollen-ui-riot-js/src/main/web/js/PollForm.js b/pollen-ui-riot-js/src/main/web/js/PollForm.js new file mode 100644 index 0000000..feafb5e --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -0,0 +1,52 @@ +let singleton = require("./Singleton"); +let session = require("./Session"); +let EventEmitter = require('events'); + +class PollForm { + + constructor() { + this.emitter = new EventEmitter(); + this.step = 0; + this.model = { + title: "", + description: "", + userName: "", + userEmail: "", + textChoices: [], + imageChoices: [], + dateChoices: [], + }; + } + + previousStep() { + this._setStep(this.step - 1); + } + + nextStep() { + this._setStep(this.step + 1); + } + + _init(configuration, user) { + console.info("init form"); + console.info(configuration); + console.info(user); + if (user) { + this.model.userEmail = user.email; + } + } + + onStepChanged(fn) { + this.emitter.on("stepChanged", fn); + } + + _setStep(step) { + this.step = step; + this._emitStepChanged(step); + } + + _emitStepChanged(step) { + this.emitter.emit("stepChanged", step); + } +} + +module.exports = singleton(PollForm); diff --git a/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag b/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag index 0ac76b7..5a943d8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag +++ b/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag @@ -1,4 +1,45 @@ +let route = require("riot-route"); +let authService = require("../js/AuthService"); +let session = require("../js/Session"); +let emitter = require("../js/EmitterService"); +let form = require("../js/PollForm"); + +require("./CreatePollHeader.tag"); +require("./PollDescription.tag"); +require("./PollChoicesText.tag"); +require("./PollChoicesImage.tag"); +require("./PollChoicesDate.tag"); +require("./PollSettings.tag"); +require("./PollVoters.tag"); + <CreatePoll> + <div> + <CreatePollHeader/> + <div> + <PollDescription if="{step == 0}"/> + <PollChoicesText if="{step == 1 && type == 'text'}"/> + <PollChoicesImage if="{step == 1 && type == 'image'}"/> + <PollChoicesDate if="{step == 1 && type == 'date'}"/> + <PollSettings if="{step == 2}"/> + <PollVoters if="{step == 3}"/> + </div> + </div> + + <script> + this.type = this.opts.type; + this.step = form.step; + form.onStepChanged(step => { + this.step = step; + try { + this.update() + } catch (e) { + //FIXME J'ai une erreur, mais je ne sais pas quoi en faire... + } + }); + </script> + <style> + + </style> </CreatePoll> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag b/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag new file mode 100644 index 0000000..7f12a18 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag @@ -0,0 +1,60 @@ +let form = require("../js/PollForm"); +<CreatePollHeader> + <div class="container"> + <div class="{step == 0 ? 'selectedTab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">1</strong> + </span> + Description du sondage + </div> + <div class="{step == 1 ? 'selectedTab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">2</strong> + </span> + Choix du sondage + </div> + <div class="{step == 2 ? 'selectedTab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">3</strong> + </span> + Options du sondage + </div> + <div class="{step == 3 ? 'selectedTab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">4</strong> + </span> + Participants au sondage + </div> + </div> + + <script> + this.step = form.step; + form.onStepChanged(step => { + this.step = step; + this.update() + }); + </script> + + <style> + .container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin-bottom: 30px; + border-bottom: 1px solid #b2c7d3; + } + + .body-container > div { + + } + + .selectedTab { + color: #13a2ff; + } + </style> +</CreatePollHeader> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/Footer.tag b/pollen-ui-riot-js/src/main/web/tag/Footer.tag index dd251989f..2a35b86 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Footer.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Footer.tag @@ -1,4 +1,5 @@ let session = require("../js/Session"); +let emitter = require("../js/EmitterService"); <footer> <div class="links"> <a href="https://pollen.chorem.org/v/latest/index.html">{__doc__}</a> @@ -9,7 +10,7 @@ let session = require("../js/Session"); <a href="http://www.codelutin.com/" target="_blank">Code Lutin</a> </div> <script> - this.generateBundle(session.locale, "footer"); + this.installBundle(session.locale, "footer", emitter); </script> <style> diff --git a/pollen-ui-riot-js/src/main/web/tag/Header.tag b/pollen-ui-riot-js/src/main/web/tag/Header.tag index a5c68ab..8fa6d00 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Header.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Header.tag @@ -26,7 +26,7 @@ require("./HeaderI18n.tag"); <div class="header-separator"></div> <HeaderI18n></HeaderI18n> <script> - this.generateBundle(session.locale, "header"); + this.installBundle(session.locale, "header", emitter); this.signOut = () => { let callback = () => { @@ -58,11 +58,6 @@ require("./HeaderI18n.tag"); this.update(); }); - emitter.onLocaleChanged((locale) => { - this.generateBundle(locale, "header"); - this.update(); - }); - </script> <style> diff --git a/pollen-ui-riot-js/src/main/web/tag/Home.tag b/pollen-ui-riot-js/src/main/web/tag/Home.tag index 4cee054..e007029 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Home.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Home.tag @@ -14,7 +14,7 @@ let route = require("riot-route"); </div> <script> - this.generateBundle(session.locale, "home"); + this.installBundle(session.locale, "home", emitter); this.createText = () => { route("/poll/new/text"); @@ -26,11 +26,6 @@ let route = require("riot-route"); route("/poll/new/date"); }; - emitter.onLocaleChanged((locale) => { - this.generateBundle(locale, "home"); - this.update(); - }); - </script> <style scoped> diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag new file mode 100644 index 0000000..7c8ff3f --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag @@ -0,0 +1,35 @@ +let form = require("../js/PollForm"); + +<PollChoicesDate> + <div> + Choix du sondage (type date) + </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">Précédent</a> + <a class="button" onclick="{nextStep}">Suivant</a> + </div> + + <script> + this.previousStep = (e) => { + form.previousStep(); + }; + this.nextStep = (e) => { + form.nextStep(); + }; + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + </style> +</PollChoicesDate> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag new file mode 100644 index 0000000..7b57660 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag @@ -0,0 +1,35 @@ +let form = require("../js/PollForm"); + +<PollChoicesImage> + <div> + Choix du sondage (type image) + </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">Précédent</a> + <a class="button" onclick="{nextStep}">Suivant</a> + </div> + + <script> + this.previousStep = (e) => { + form.previousStep(); + }; + this.nextStep = (e) => { + form.nextStep(); + }; + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + </style> +</PollChoicesImage> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag new file mode 100644 index 0000000..a4a76ff --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag @@ -0,0 +1,35 @@ +let form = require("../js/PollForm"); + +<PollChoicesText> + <div> + Choix du sondage (type texte) + </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">Précédent</a> + <a class="button" onclick="{nextStep}">Suivant</a> + </div> + + <script> + this.previousStep = (e) => { + form.previousStep(); + }; + this.nextStep = (e) => { + form.nextStep(); + }; + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + </style> +</PollChoicesText> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag b/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag new file mode 100644 index 0000000..34136b1 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag @@ -0,0 +1,33 @@ +let form = require("../js/PollForm"); +let route = require("riot-route"); + +<PollDescription> + <div> + Description du sondage + </div> + + <div class="actions"> + <a class="button" onclick="{cancel}">Annuler</a> + <a class="button" onclick="{nextStep}">Suivant</a> + </div> + + <script> + this.nextStep = (e) => { form.nextStep(); }; + this.cancel = (e) => { route("/", null, true); }; + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + </style> +</PollDescription> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag b/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag new file mode 100644 index 0000000..d8068fa --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag @@ -0,0 +1,35 @@ +let form = require("../js/PollForm"); + +<PollSettings> + <div> + Options du sondage + </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">Précédent</a> + <a class="button" onclick="{nextStep}">Suivant</a> + </div> + + <script> + this.previousStep = (e) => { + form.previousStep(); + }; + this.nextStep = (e) => { + form.nextStep(); + }; + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + </style> +</PollSettings> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollVoters.tag b/pollen-ui-riot-js/src/main/web/tag/PollVoters.tag new file mode 100644 index 0000000..364f742 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollVoters.tag @@ -0,0 +1,46 @@ +let form = require("../js/PollForm"); + +<PollVoters> + <div> + Participants au sondage + </div> + + <div class="actions"> + <a class="button" onclick="{previousStep}">Précédent</a> + <a class="button done" onclick="{validate}">Terminer</a> + </div> + + <script> + this.previousStep = (e) => { + form.previousStep(); + }; + + this.validate = (e) => { + form.save().then(poll => { + console.info("poll saved"); + console.info(poll); + }).catch(errors => { + console.info("Can't save poll"); + console.info(errors); + }); + } + </script> + <style> + .actions { + margin-top: 50px; + margin-right: 10px; + margin-left: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .actions > a { + margin: 5px; + } + .done { + background-color: #13a2ff; + } + </style> +</PollVoters> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag index 2a6bcc0..e8c2b2a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag @@ -4,6 +4,7 @@ require("./SignIn.tag"); require("./SignUp.tag"); require("./SignCheck.tag"); require("./Home.tag"); +require("./CreatePoll.tag"); let route = require("riot-route"); let emitter = require("../js/EmitterService"); @@ -42,6 +43,9 @@ let emitter = require("../js/EmitterService"); route("/user/favoriteList", () => { riot.mount(this.refs.content, "userfavoritelists"); }); + route("/poll/new/*", (type) => { + riot.mount(this.refs.content, "createpoll", {type: type}); + }); route(() => { riot.mount(this.refs.content, "home"); }); diff --git a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag index 29190ba..20e0b7a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag +++ b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag @@ -1,7 +1,7 @@ let authService = require("../js/AuthService"); let session = require("../js/Session"); +let emitter = require("../js/EmitterService"); let route = require("riot-route"); -require("./util/Popup.tag"); <SignCjeck> <div class="body-container"> @@ -10,7 +10,7 @@ require("./util/Popup.tag"); <script> - this.generateBundle(session.locale, "signcheck"); + this.installBundle(session.locale, "signcheck", emitter); </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag index 6547eee..1f5401e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag @@ -1,7 +1,7 @@ let authService = require("../js/AuthService"); let session = require("../js/Session"); let emitter = require("../js/EmitterService"); -require("./util/Popup.tag"); +require("./popup/NewPassword.tag"); let route = require("riot-route"); <SignIn> @@ -20,69 +20,33 @@ let route = require("riot-route"); <a onclick="{newPassword}">{__lostpassword__}</a> <br/> <input type="submit" class="button" value="{__connexion__}"> - <div>{signInMessage}</div> + <div>{message}</div> </div> </form> </div> - <Popup ref="popupNewPassword"> - <div class="popup-title">{parent.__newpassword.title__}</div> - <form class="popup-message-newPassword" onsubmit="{parent.validateNewPassword}"> - <p>{parent.__newpassword.description__}</p> - <input ref="email" type="text" value="{parent.email}" required - placeholder="{parent.__newPassword.placeholder__}"> - <div>{parent.messageNewPassword}</div> - <input type="submit" class="button" value="{parent.__newpassword.validate__}"> - </form> - </Popup> + <NewPassword ref="newPassword"/> <script> - this.generateBundle(session.locale, "signin"); - this.signInMessage = ""; - - emitter.onLocaleChanged((locale) => { - this.generateBundle(locale, "signin"); - this.update(); - }); + this.installBundle(session.locale, "signin", emitter); + this.message = ""; this.newPassword = () => { - this.email = this.refs.login.value || ''; - this.refs.popupNewPassword.open(); - }; - - this.validateNewPassword = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.messageNewPassword = ""; - let email = this.refs.popupNewPassword.refs.email.value; - if (email) { - authService.newPassword(email) - .then(() => { - this.messageNewPassword = this.t("newpassword.sent"); - this.update(); - }) - .catch(() => { - this.messageNewPassword = this.t("newpassword.error.emailNotFound"); - this.update(); - }); - } else { - this.messageNewPassword = this.t("newpassword.error.emailNotFilled"); - this.update(); - } + this.refs.newPassword.open(this.refs.login.value || ''); }; this.signIn = (e) => { e.preventDefault(); e.stopPropagation(); - this.signInMessage = ""; + this.message = ""; authService.signIn(this.refs.login.value, this.refs.password.value) .then(() => { route(this.opts.link || "/"); }) .catch((code) => { - this.signInMessage = this.t("error.signin"); + this.message = this.t("error.signin"); this.update(); }); }; @@ -94,6 +58,10 @@ let route = require("riot-route"); width: 320px; } + .button { + margin: 5px 0; + } + .signin { display: flex; justify-content: space-around; @@ -117,10 +85,6 @@ let route = require("riot-route"); font-size: 20px; } - .button { - margin: 5px 0; - } - .split { flex-grow: 1; display: flex; diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag index f99c1f0..0f88949 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag +++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag @@ -3,7 +3,8 @@ let session = require("../js/Session"); let emitter = require("../js/EmitterService"); let FormHelper = require("../js/FormHelper"); let route = require("riot-route"); -require("./util/Popup.tag"); +require("./popup/ResendValidation.tag"); +require("./popup/AccountCreated.tag"); <SignUp> <div class="body-container"> @@ -11,91 +12,43 @@ require("./util/Popup.tag"); <div class="split"> <div class="legend"><i class="fa fa-user-plus fa-2x"> </i>{__title__}</div> <label class="wide" for="name">{__name__}</label> - <div if="{signUpErrors.name}">{signUpErrors.name}</div> + <div if="{errors.name}">{errors.name}</div> <input class="wide" type="text" name="name" id="name" placeholder="{__name.placeholder__}" required> <label class="wide" for="email">{__email__}</label> - <div if="{signUpErrors.email}">{signUpErrors.email}</div> + <div if="{errors.email}">{errors.email}</div> <input class="wide" type="text" name="email" id="email" placeholder="{__email.placeholder__}" required> - <a onclick="{startResendValidation}">{__resendValidation__}</a> + <a onclick="{resendValidation}">{__resendValidation__}</a> <br/> <input type="submit" class="button" value="{__validate__}"> </div> </form> </div> - <Popup ref="popupRevalidate"> - <div class="popup-title">{parent.__resendValidation.title__}</div> - <form class="popup-message-resendValidation" onsubmit="{parent.resendValidation}"> - <p>{parent.__resendValidation.description__}</p> - <input ref="email" type="text" required placeholder="{parent.__resendValidation.placeholder__}"> - <div>{parent.messageResendValidation}</div> - <input type="submit" class="button" value="{parent.__resendValidation.action__}"> - </form> - </Popup> - - <Popup ref="popup"> - <div class="popup-title">{parent.__createAccount.title__}</div> - <div class="popup-message"> - <div>{parent.__createAccount.description__}</div> - <a class="button" onclick="{parent.closeConfirm}">Continuer</a> - </div> - </Popup> + <ResendValidation ref="resendValidation"/> + <AccountCreated ref="accountCreated"/> <script> - this.generateBundle(session.locale, "signup"); - this.signUpErrors = ""; + this.installBundle(session.locale, "signup", emitter); + this.errors = ""; - emitter.onLocaleChanged((locale) => { - this.generateBundle(locale, "signup"); - this.update(); - }); - - this.startResendValidation = () => { - this.refs.popupRevalidate.open(); - }; - - this.resendValidation = (e) => { - - e.preventDefault(); - e.stopPropagation(); - - this.messageResendValidation = ""; - let email = this.refs.popupRevalidate.refs.email.value; - if (email) { - authService.resendValidation(email) - .then(() => { - this.messageResendValidation = this.t("resendValidation.sent"); - this.update(); - }) - .catch(() => { - this.messageResendValidation = this.t("resendValidation.error.emailNotFound"); - this.update(); - }); - } else { - this.messageResendValidation = this.t("resendValidation.error.emailNotFilled"); - this.update(); - } - }; - - this.closeConfirm = () => { - this.refs.popup.close(); - route("/home", null, true); + this.resendValidation = () => { + this.refs.resendValidation.open(); }; this.signUp = (e) => { e.preventDefault(); e.stopPropagation(); - this.signUpErrors = ""; + this.errors = ""; let user = FormHelper.formToMap(this.refs.user); authService.signUp(user) .then(() => { - this.refs.popup.open(); + this.refs.accountCreated.open(); }) .catch((errors) => { - this.signUpErrors = errors; + this.errors = errors; this.update(); }); }; @@ -134,24 +87,6 @@ require("./util/Popup.tag"); margin-bottom: 30px; font-size: 20px; } - - /*.legend {*/ - /*align-self: flex-start;*/ - /*flex-grow: 2;*/ - /*display: flex;*/ - /*flex-direction: row;*/ - /*justify-content: center;*/ - /*align-items: center;*/ - /*color: black;*/ - /*width: 100%;*/ - /*background-color: white;*/ - /*height: 60px;*/ - /*line-height: 32px;*/ - /*font-size: 18px;*/ - /*margin-bottom: 20px;*/ - /*padding-left: 20px;*/ - /*}*/ - .split { flex-grow: 1; display: flex; diff --git a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag similarity index 62% copy from pollen-ui-riot-js/src/main/web/tag/util/Popup.tag copy to pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag index ff74792..783db23 100644 --- a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag +++ b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag @@ -1,37 +1,48 @@ -let EventEmitter = require("events"); +let session = require("../../js/Session"); +let emitter = require("../../js/EmitterService"); +let route = require("riot-route"); + +<AccountCreated class="close"> -<Popup class="close"> <div class="popup-background"></div> <div class="popup-content"> <div class="popup-close" onclick="{close}"> <i class="fa fa-times"></i> </div> - <yield/> + <div class="popup-title">{__title__}</div> + <div class="popup-message"> + <div>{__description__}</div> + <a class="button" onclick="{action}">Continuer</a> + </div> </div> <script> - this.emitter = new EventEmitter(); + + this.installBundle(session.locale, "signin.createAccount", emitter); this.oldParent = this.parent.root; - this.open = (data) => { - this.emitter.emit("open", data); + this.open = () => { document.body.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); }; - this.close = (data) => { - this.emitter.emit("close", data); + this.close = () => { this.oldParent.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); }; + this.action = () => { + this.close(); + route("/home", null, true); + }; + </script> <style> - popup { + accountcreated { justify-content: center; align-items: center; flex-direction: column; @@ -50,11 +61,11 @@ let EventEmitter = require("events"); top: 0; } - popup.close { + accountcreated.close { display: none; } - popup.open { + accountcreated.open { display: flex; } @@ -95,52 +106,18 @@ let EventEmitter = require("events"); .popup-message { display: flex; flex-direction: column; - width: 450px; - text-align: center; - } - - .popup-message-resendValidation { - display: flex; - flex-direction: column; - width: 550px; - text-align: left; - } - - .popup-message-resendValidation > p { - margin-left: 12px; - /*margin-top: 10px;*/ - margin-bottom: 5px; - } - - .popup-message-resendValidation > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; - } - - .popup-message-newPassword { - display: flex; - flex-direction: column; - width: 550px; + width: 420px; text-align: left; } - .popup-message-newPassword > p { - margin-left: 12px; - /*margin-top: 10px;*/ - margin-bottom: 5px; - } - - .popup-message-newPassword > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; + .popup-message > div { + margin-right: 22px; } - .popup-message > div { + .popup-message > a { padding: 0 20px; } </style> -</Popup> +</AccountCreated> diff --git a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag similarity index 52% copy from pollen-ui-riot-js/src/main/web/tag/util/Popup.tag copy to pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag index ff74792..6ff1515 100644 --- a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag +++ b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag @@ -1,37 +1,72 @@ -let EventEmitter = require("events"); +let session = require("../../js/Session"); +let emitter = require("../../js/EmitterService"); +let authService = require("../../js/AuthService"); + +<NewPassword class="close"> -<Popup class="close"> <div class="popup-background"></div> <div class="popup-content"> <div class="popup-close" onclick="{close}"> <i class="fa fa-times"></i> </div> - <yield/> + <div class="popup-title">{__title__}</div> + <form class="popup-message" onsubmit="{action}"> + <div class="popup-message-header"> + <div class="send" if="{sent}"><i class="fa fa-envelope"></i> {__sent__}</div> + <div if="{error}" class="error">{error}</div> + </div> + <input ref="email" type="text" required placeholder="{__placeholder__}"> + <input type="submit" class="button" value="{__action__}"> + </form> + </div> <script> - this.emitter = new EventEmitter(); + + this.installBundle(session.locale, "newpassword", emitter); + this.sent = false; + this.error = ""; this.oldParent = this.parent.root; - this.open = (data) => { - this.emitter.emit("open", data); + this.open = (email) => { + this.refs.email.value = email; + this.error = ""; + this.sent = false; document.body.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); }; - this.close = (data) => { - this.emitter.emit("close", data); + this.close = () => { this.oldParent.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); }; + + this.action = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.error = ""; + this.sent = false; + let email = this.refs.email.value; + if (email) { + authService.newPassword(email) + .then(() => { + this.sent = true; + this.update(); + }) + .catch(() => { + this.error = this.t("error.emailNotFound"); + this.update(); + }); + } + }; </script> <style> - popup { + newpassword { justify-content: center; align-items: center; flex-direction: column; @@ -50,11 +85,11 @@ let EventEmitter = require("events"); top: 0; } - popup.close { + newpassword.close { display: none; } - popup.open { + newpassword.open { display: flex; } @@ -95,52 +130,37 @@ let EventEmitter = require("events"); .popup-message { display: flex; flex-direction: column; - width: 450px; - text-align: center; - } - - .popup-message-resendValidation { - display: flex; - flex-direction: column; - width: 550px; + width: 420px; text-align: left; } - .popup-message-resendValidation > p { - margin-left: 12px; - /*margin-top: 10px;*/ - margin-bottom: 5px; - } - - .popup-message-resendValidation > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; + .popup-message > div { + margin-right: 22px; } - .popup-message-newPassword { + .popup-message-header { display: flex; - flex-direction: column; - width: 550px; - text-align: left; + flex-direction: row; + justify-content: flex-end; + height: 30px; } - .popup-message-newPassword > p { - margin-left: 12px; - /*margin-top: 10px;*/ + .popup-message > input { + width: 390px; + margin-top: 10px; margin-bottom: 5px; } - .popup-message-newPassword > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; + .send { + margin: 3px; + color: #13a2ff; } - .popup-message > div { - padding: 0 20px; + .error { + margin: 3px; + color: red; } </style> -</Popup> +</NewPassword> diff --git a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag similarity index 52% rename from pollen-ui-riot-js/src/main/web/tag/util/Popup.tag rename to pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag index ff74792..5174263 100644 --- a/pollen-ui-riot-js/src/main/web/tag/util/Popup.tag +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag @@ -1,37 +1,73 @@ -let EventEmitter = require("events"); +let session = require("../../js/Session"); +let emitter = require("../../js/EmitterService"); +let authService = require("../../js/AuthService"); + +<ResendValidation class="close"> -<Popup class="close"> <div class="popup-background"></div> <div class="popup-content"> <div class="popup-close" onclick="{close}"> <i class="fa fa-times"></i> </div> - <yield/> + <div class="popup-title">{__title__}</div> + <form class="popup-message" onsubmit="{action}"> + <div class="popup-message-header"> + <div class="send" if="{sent}"><i class="fa fa-envelope"></i> {__sent__}</div> + <div if="{error}" class="error">{error}</div> + </div> + <input ref="email" type="text" required placeholder="{__placeholder__}"> + <input type="submit" class="button" value="{__action__}"> + </form> + </div> <script> - this.emitter = new EventEmitter(); + + this.installBundle(session.locale, "resendvalidation", emitter); this.oldParent = this.parent.root; - this.open = (data) => { - this.emitter.emit("open", data); + this.open = () => { + this.refs.email.value = ""; + this.sent = false; + this.error = ""; document.body.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); + this.update(); }; - this.close = (data) => { - this.emitter.emit("close", data); + this.close = () => { this.oldParent.appendChild(this.root); this.root.classList.toggle("close"); this.root.classList.toggle("open"); }; + this.action = (e) => { + + e.preventDefault(); + e.stopPropagation(); + + this.error = ""; + this.sent = false; + let email = this.refs.email.value; + if (email) { + authService.resendValidation(email) + .then(() => { + this.sent = true; + this.update(); + }) + .catch(() => { + this.error = this.t("error.emailNotFound"); + this.update(); + }); + } + }; + </script> <style> - popup { + resendvalidation { justify-content: center; align-items: center; flex-direction: column; @@ -50,11 +86,11 @@ let EventEmitter = require("events"); top: 0; } - popup.close { + resendvalidation.close { display: none; } - popup.open { + resendvalidation.open { display: flex; } @@ -95,52 +131,37 @@ let EventEmitter = require("events"); .popup-message { display: flex; flex-direction: column; - width: 450px; - text-align: center; - } - - .popup-message-resendValidation { - display: flex; - flex-direction: column; - width: 550px; + width: 500px; text-align: left; } - .popup-message-resendValidation > p { - margin-left: 12px; - /*margin-top: 10px;*/ - margin-bottom: 5px; - } - - .popup-message-resendValidation > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; + .popup-message > div { + margin-right: 22px; } - .popup-message-newPassword { + .popup-message-header { display: flex; - flex-direction: column; - width: 550px; - text-align: left; + flex-direction: row; + justify-content: flex-end; + height: 30px; } - .popup-message-newPassword > p { - margin-left: 12px; - /*margin-top: 10px;*/ + .popup-message > input { + width: 470px; + margin-top: 10px; margin-bottom: 5px; } - .popup-message-newPassword > input { - width: 90%; - margin-top: 10px; - margin-bottom: 5px; + .send { + margin: 3px; + color: #13a2ff; } - .popup-message > div { - padding: 0 20px; + .error { + margin: 3px; + color: red; } </style> -</Popup> +</ResendValidation> diff --git a/pollen-ui-riot-js/webpack.config.js b/pollen-ui-riot-js/webpack.config.js index efc95b0..4082555 100644 --- a/pollen-ui-riot-js/webpack.config.js +++ b/pollen-ui-riot-js/webpack.config.js @@ -3,11 +3,6 @@ let webpack = require("webpack"); let CopyWebpackPlugin = require("copy-webpack-plugin"); -//require("font-awesome-webpack"); -// require("less"); -// require("css-loader"); -// require("less-loader"); -// require("font-awesome-webpack"); module.exports = { entry: { @@ -37,7 +32,6 @@ module.exports = { new webpack.ProvidePlugin({riot: "riot"}), new CopyWebpackPlugin([ - {from: "src/main/web/conf.js"}, {from: "src/main/web/index.html"}, {from: "src/main/web/robots.txt"}, {from: "src/main/web/img", to: "img"}, -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.