This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 5c3fb9ad858e4832fc143f116be2dad0d14c091e Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Wed May 24 09:48:01 2017 +0200 création et utilisation des composants : Modal, confirmation et information. --- pollen-ui-riot-js/src/main/web/i18n.json | 28 ++++-- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 4 + pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 2 +- pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html | 4 +- .../src/main/web/tag/UserCard.tag.html | 24 ++--- .../web/tag/favoriteList/ChildListCard.tag.html | 16 ++-- .../web/tag/favoriteList/FavoriteList.tag.html | 10 ++- .../web/tag/favoriteList/FavoriteListCard.tag.html | 12 +-- .../main/web/tag/favoriteList/MemberCard.tag.html | 16 ++-- .../src/main/web/tag/poll/Comments.tag.html | 10 ++- .../src/main/web/tag/poll/Poll.tag.html | 15 ++-- .../src/main/web/tag/poll/Votes.tag.html | 10 +-- .../src/main/web/tag/popup/AccountCreated.tag.html | 82 ----------------- .../{Modal.tag.html => ConfirmPopup.tag.html} | 43 +++++---- .../{Modal.tag.html => InformationPopup.tag.html} | 40 +++++---- .../src/main/web/tag/popup/Modal.tag.html | 28 ++++-- .../src/main/web/tag/popup/NewPassword.tag.html | 98 ++++++-------------- .../main/web/tag/popup/ResendValidation.tag.html | 100 ++++++--------------- .../web/tag/voterList/VoterListActions.tag.html | 15 ++-- .../web/tag/voterList/VoterListMember.tag.html | 15 ++-- 20 files changed, 226 insertions(+), 346 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 2b57c10..31a6a82 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -128,10 +128,11 @@ "signup_resendValidation": "Déja inscrit, mais compte non validé ?", "signup_error": "Impossible d'enregister le compte.", "signup_error_email": "L'adresse email est déjà utilisé pour un autre compte.", - "createaccount_title": "Votre compte a bien été créé", - "createaccount_description": "Un courriel vous a été envoyé avec l'url de validation de votre compte.", - "createaccount_action": "Continuer", + "signup_createAccount_title": "Votre compte a bien été créé", + "signup_createAccount_message": "Un courriel vous a été envoyé avec l'url de validation de votre compte.", + "signup_createAccount_action": "Continuer", "resendvalidation_title": "Renvoyer un courriel de validation de compte", + "resendvalidation_cancel": "Annuler", "resendvalidation_action": "Envoyer", "resendvalidation_placeholder": "Entrer votre courriel", "resendvalidation_sent": "Un nouveau courriel d'invitation a été envoyé", @@ -305,6 +306,7 @@ "user_emailValidate": "En cours de validation", "user_administrator": "Administrateur", "user_edit": "Modifier l'utilisateur", + "user_ban": "Désactiver", "user_banUser": "Désactiver l'utilisateur", "user_banUserMessage": "Désactiver l'utilisateur ?", "user_deleteUser": "Supprimer l'utilisateur", @@ -414,7 +416,10 @@ "voterList_member_delete": "Supprimer le participant", "voterList_member_deleteMessage": "Supprimer le participant ?", "modal_cancel": "Annuler", - "modal_ok": "Ok" + "modal_ok": "Ok", + "confirm_cancel": "Annuler", + "confirm_delete": "Supprimer", + "information_ok": "Ok" }, "en": { "main_pollen_title": "Pollen - ", @@ -545,6 +550,9 @@ "signup_resendValidation": "Already member, but account never validated ?", "signup_error": "Could not register account.", "signup_error_email": "This email is already used.", + "signup_createAccount_title": "Your account was created", + "signup_createAccount_message": "We sent you an email with the account validation process.", + "signup_createAccount_action": "Continue", "signcheck_title": "Validate your account", "signcheck_signin": "Sign in", "signcheck_resendValidation": "Send a new invitation", @@ -552,10 +560,8 @@ "signcheck_validating": "Your account is validating...", "signcheck_validating_error": "Your account could not be validated, try to send a new invitation.", "signcheck_validating_success": "Your account was validated! You can now sign in. Enjoy!", - "createaccount_title": "Your account was created", - "createaccount_description": "We sent you an email with the account validation process.", - "createaccount_action": "Continue", "resendvalidation_title": "Send another validation email", + "resendvalidation_cancel": "Cancel", "resendvalidation_action": "Send again", "resendvalidation_sent": "A new invitation email was sent", "resendvalidation_placeholder": "Fill your email", @@ -712,6 +718,7 @@ "user_emailValidate": "email validation waiting", "user_administrator": "Administrator", "user_edit": "Edit user", + "user_ban": "Ban", "user_banUser": "Ban user", "user_banUserMessage": "Ban user ?", "user_deleteUser": "Delete user", @@ -818,7 +825,10 @@ "voterList_member_weight": "Weight", "voterList_member_delete": "Delete member", "voterList_member_deleteMessage": "Delete member ?", - "modal_cancel": "Annuler", - "modal_ok": "Ok" + "modal_cancel": "Cancel", + "modal_ok": "Ok", + "confirm_cancel": "Cancel", + "confirm_delete": "Delete", + "information_ok": "Ok" } } diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index bc6aade..6dcf8e2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -33,8 +33,12 @@ require("./Users.tag.html"); require("./UserProfile.tag.html"); require("./favoriteList/FavoriteLists.tag.html"); require("./favoriteList/FavoriteList.tag.html"); +require("./popup/ConfirmPopup.tag.html"); +require("./popup/InformationPopup.tag.html"); <Pollen class="body-wrapper"> <div id="infoMessages"></div> + <ConfirmPopup/> + <InformationPopup/> <PollenHeader/> <PollenWaiter parent-id="body-content"/> <div id="body-content" class="body-content"> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html index 569579c..2127f7f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html @@ -83,7 +83,7 @@ require("./SignUp.tag.html"); }; this.close = () => { - this.logger.log("close !"); + this.logger.log("close !"); this.openSignIn = false; this.update(); }; diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html index d614cb3..622875c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html @@ -20,7 +20,6 @@ */ let route = require("riot-route"); require("./popup/ResendValidation.tag.html"); -require("./popup/AccountCreated.tag.html"); <SignUp class="body-content"> <div class="container"> @@ -99,7 +98,6 @@ require("./popup/AccountCreated.tag.html"); </div> <ResendValidation ref="resendValidation"/> - <AccountCreated ref="accountCreated"/> <script type="es6"> let authService = require("../js/AuthService"); @@ -129,7 +127,7 @@ require("./popup/AccountCreated.tag.html"); }; authService.signUp(user).then(() => { - this.refs.accountCreated.open(); + this.info(this.__.createAccount_title, this.__.createAccount_message, this.__.createAccount_action); this.update(); }) .catch((errors) => { diff --git a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html index 41a8e30..2c5946b 100644 --- a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html @@ -95,19 +95,23 @@ }; this.banUser = () => { - if (confirm(this.__.banUserMessage)) { - userService.banUser(this.opts.user.id).then(() => { - this.opts.onUserChange(); - }); - } + this.confirm(this.__.banUserMessage, this.__.ban, "warning").then((confirm) => { + if (confirm) { + userService.banUser(this.opts.user.id).then(() => { + this.opts.onUserChange(); + }); + } + }); }; this.deleteUser = () => { - if (confirm(this.__.deleteUserMessage)) { - userService.deleteUser(this.opts.user.id).then(() => { - this.opts.onUserChange(); - }); - } + this.confirm(this.__.deleteUserMessage).then((confirm) => { + if (confirm) { + userService.deleteUser(this.opts.user.id).then(() => { + this.opts.onUserChange(); + }); + } + }); }; this.saveUser = e => { diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html index bff81db..eca806d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html @@ -75,13 +75,15 @@ }; this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteChildList(this.opts.favoriteList.id, this.opts.childList.id).then(() => { - if (this.opts.onChildListChange) { - this.opts.onChildListChange(); - } - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteChildList(this.opts.favoriteList.id, this.opts.childList.id).then(() => { + if (this.opts.onChildListChange) { + this.opts.onChildListChange(); + } + }); + } + }); }; this.save = e => { diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html index 3b778b3..2118852 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html @@ -284,9 +284,13 @@ require("./ChildListCard.tag.html"); this.favoriteLists = []; this.delete = () => { - if (this.favoriteList.id && confirm(this.__.deleteMessage)) { - favoriteListService.deleteFavoriteList(this.favoriteList.id).then(() => { - route("/favoriteLists") + if (this.favoriteList.id) { + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteFavoriteList(this.favoriteList.id).then(() => { + route("/favoriteLists"); + }); + } }); } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html index 30f845c..ef2e222 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html @@ -23,11 +23,13 @@ require("./MemberCard.tag.html"); let favoriteListService = require("../../js/FavoriteListService"); this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteFavoriteList(this.opts.favoriteList.id).then(() => { - this.opts.onFavoriteListChange(); - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteFavoriteList(this.opts.favoriteList.id).then(() => { + this.opts.onFavoriteListChange(); + }); + } + }); }; </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html index a5aa5c2..f17fb4a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html @@ -84,13 +84,15 @@ }; this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteMember(this.opts.favoriteList.id, this.opts.member.id).then(() => { - if (this.opts.onMemberChange) { - this.opts.onMemberChange(); - } - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteMember(this.opts.favoriteList.id, this.opts.member.id).then(() => { + if (this.opts.onMemberChange) { + this.opts.onMemberChange(); + } + }); + } + }); }; this.save = e => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html index 688da5b..16b9b03 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html @@ -211,10 +211,12 @@ require("./CommentPopup.tag.html"); }; this.deleteComment = (comment) => () => { - let response = confirm(this.__.deleteComment); - if (response) { - this.poll.deleteComment(comment); - } + this.confirm(this.__.deleteComment).then((confirm) => { + if (confirm) { + this.poll.deleteComment(comment); + this.update(); + } + }); }; this.scrollTop = () => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html index 000f4ac..4bbcdb2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html @@ -219,13 +219,14 @@ require("../popup/QrCodeButton.tag.html"); this.deletePoll = (e) => { e.preventDefault(); e.stopPropagation(); - let response = confirm(this.__.deletePoll); - if (response) { - this.poll.delete().then(() => { - let route = require("riot-route"); - route("/home"); - }); - } + this.confirm(this.__.deletePoll).then((confirm) => { + if (confirm) { + this.poll.delete().then(() => { + let route = require("riot-route"); + route("/home"); + }); + } + }); }; this.copyUrl = (refInputUrl) => () => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index d5e23dc..0c669fb 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -354,14 +354,14 @@ require("./Podium.tag.html"); this.deleteVote = (vote) => (e) => { e.preventDefault(); e.stopPropagation(); - let response = confirm(this.__.delete); - if (response) { - this.poll.deleteVote(vote) - .then(() => { + this.confirm(this.__.delete).then((confirm) => { + if (confirm) { + this.poll.deleteVote(vote).then(() => { this.selectedChoiceNb = 0; this.update(); }); - } + } + }); }; this.addChoice = (e) => { diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html deleted file mode 100644 index f184914..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html +++ /dev/null @@ -1,82 +0,0 @@ -/*- - * #%L - * Pollen :: UI (Riot Js) - * %% - * Copyright (C) 2009 - 2017 CodeLutin - * %% - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * #L% - */ -<AccountCreated show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - {__.description} - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> - - <script type="es6"> - let session = require("../../js/Session"); - let route = require("riot-route"); - - this.installBundle(session, "createaccount"); - this.openModal = false; - - this.oldParent = this.parent.root; - - this.open = () => { - this.openModal = true; - }; - - this.close = () => { - this.openModal = false; - }; - - this.action = () => { - this.close(); - route("home", null, true); - this.bus.trigger("closeSignIn"); - }; - - </script> - - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - </style> - -</AccountCreated> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html similarity index 61% copy from pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html copy to pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html index 9eedabe..0da776f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html @@ -1,16 +1,13 @@ -<modal show={openModal}> +<ConfirmPopup show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> <div class="c-card c-card--higher"> <header class="c-card__header"> <h2 class="c-heading"> - {opts.title} + {message} </h2> </header> - <div class="c-card__body"> - <yield/> - </div> <footer class="c-card__footer c-card__footer--block"> <div class="c-input-group"> <button type="button" @@ -19,9 +16,9 @@ {__.cancel} </button> <button type="button" - class="c-button c-button--block c-button--info" - onclick={close}> - {__.ok} + class="c-button c-button--block c-button--{type}" + onclick={confirm}> + {label} </button> </div> </footer> @@ -32,28 +29,42 @@ let session = require("../../js/Session"); - this.installBundle(session, "modal"); + this.installBundle(session, "confirm"); this.openModal = false; - this.open = () => { + this.open = (message, label, type) => { + this.message = message; + this.label = label || this.__.delete; + this.type = type || "error"; this.openModal = true; this.modalPromise = new Promise((resolve, reject) => { this.modalResolve = resolve; this.modalReject = reject; }); + this.update(); return this.modalPromise; }; - this.close = () => { - this.openModal = false; - this.modalResolve(); + this.close = (value) => { + if (this.openModal) { + this.openModal = false; + this.modalResolve(value); + this.update(); + } + }; + + this.confirm = () => { + this.close(true); }; this.cancel = () => { - this.openModal = false; - this.modalReject(); + this.close(false); }; + this.listen("escape", this.cancel); + + riot.mixin({confirm: this.open}); + </script> <style> @@ -62,4 +73,4 @@ } </style> -</modal> +</ConfirmPopup> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html similarity index 63% copy from pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html copy to pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html index 9eedabe..0f7c437 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html @@ -1,27 +1,22 @@ -<modal show={openModal}> +<InformationPopup show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> <div class="c-card c-card--higher"> <header class="c-card__header"> <h2 class="c-heading"> - {opts.title} + {title} </h2> </header> <div class="c-card__body"> - <yield/> + {message} </div> <footer class="c-card__footer c-card__footer--block"> <div class="c-input-group"> <button type="button" - class="c-button c-button--block c-button--brand" - onclick={cancel}> - {__.cancel} - </button> - <button type="button" - class="c-button c-button--block c-button--info" + class="c-button c-button--block c-button--{type}" onclick={close}> - {__.ok} + {label} </button> </div> </footer> @@ -32,27 +27,34 @@ let session = require("../../js/Session"); - this.installBundle(session, "modal"); + this.installBundle(session, "information"); this.openModal = false; - this.open = () => { + this.open = (title, message, label, type) => { + this.title = title; + this.message = message; + this.label = label || this.__.ok; + this.type = type || "brand"; this.openModal = true; this.modalPromise = new Promise((resolve, reject) => { this.modalResolve = resolve; this.modalReject = reject; }); + this.update(); return this.modalPromise; }; this.close = () => { - this.openModal = false; - this.modalResolve(); + if (this.openModal) { + this.openModal = false; + this.modalResolve(); + this.update(); + } }; - this.cancel = () => { - this.openModal = false; - this.modalReject(); - }; + this.listen("escape", this.close); + + riot.mixin({info: this.open}); </script> @@ -62,4 +64,4 @@ } </style> -</modal> +</InformationPopup> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html index 9eedabe..ce3e435 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html @@ -2,7 +2,7 @@ <modal show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> - <div class="c-card c-card--higher"> + <form class="c-card c-card--higher" onsubmit={submit}> <header class="c-card__header"> <h2 class="c-heading"> {opts.title} @@ -18,14 +18,13 @@ onclick={cancel}> {__.cancel} </button> - <button type="button" - class="c-button c-button--block c-button--info" - onclick={close}> - {__.ok} + <button type="submit" + class="c-button c-button--block c-button--{opts.type || 'info'}" > + {opts.label || __.ok} </button> </div> </footer> - </div> + </form> </div> <script type="es6"> @@ -44,6 +43,16 @@ return this.modalPromise; }; + this.submit = e => { + e.preventDefault(); + e.stopPropagation(); + + let promise = this.opts.onsubmit ? this.opts.onsubmit() : Promise.resolve(); + + promise.then(() => {this.close();}, () => {}); + + }; + this.close = () => { this.openModal = false; this.modalResolve(); @@ -54,6 +63,13 @@ this.modalReject(); }; + this.listen("escape", () => { + if (this.openModal) { + this.cancel(); + this.update(); + } + }); + </script> <style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html index 727944f..af23b65 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html @@ -18,94 +18,52 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -<NewPassword show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - <input class="c-field {c-field--error : error}" - ref="email" - type="email" - required - placeholder="{__.placeholder}"> - <div if="{error}" - class="c-hint--static c-hint--error"> - {error} - </div> - <div if="{sent}" - class="c-hint--static c-hint--success"> - <i class="fa fa-envelope"></i> {__.sent} - </div> - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> - +<NewPassword> + <Modal ref="modal" title={__.title} onsubmit={submit} label={__.action}> + <input class="c-field {c-field--error : parent.error}" + ref="email" + type="email" + required + placeholder="{parent.__.placeholder}"> + <div if="{parent.error}" + class="c-hint--static c-hint--error"> + {parent.error} + </div> + <div if="{parent.sent}" + class="c-hint--static c-hint--success"> + <i class="fa fa-envelope"></i> {parent.__.sent} + </div> + </Modal> + <script type="es6"> let session = require("../../js/Session"); let authService = require("../../js/AuthService"); this.installBundle(session, "newpassword"); this.sent = false; - this.openModal = false; this.error = ""; this.oldParent = this.parent.root; this.open = (email) => { - this.refs.email.value = email; + this.refs.modal.refs.email.value = email; this.error = ""; this.sent = false; - this.openModal = true; + this.refs.modal.open().then(() => {}, () => {}); }; - this.close = () => { - this.openModal = false; - }; - - this.action = (e) => { - e.preventDefault(); - e.stopPropagation(); + this.submit = () => { 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.__.error_emailNotFound; - this.update(); - }); - } + let email = this.refs.modal.refs.email.value; + return authService.newPassword(email).then(() => { + this.sent = true; + this.update(); + }, () => { + this.error = this.__.error_emailNotFound; + this.update(); + }); }; </script> - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - </style> - </NewPassword> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html index 2137e44..341dda4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html @@ -18,45 +18,22 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -<ResendValidation show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - <input class="c-field {c-field--error : error}" - ref="email" - type="email" - required - placeholder="{__.placeholder}"> - <div if="{error}" - class="c-hint--static c-hint--error"> - {error} - </div> - <div if="{sent}" - class="c-hint--static c-hint--success"> - <i class="fa fa-envelope"></i> {__.sent} - </div> - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> +<ResendValidation> + <Modal ref="modal" title={__.title} onsubmit={submit} label={__.action}> + <input class="c-field {c-field--error : parent.error}" + ref="email" + type="email" + required + placeholder="{parent.__.placeholder}"> + <div if="{parent.error}" + class="c-hint--static c-hint--error"> + {parent.error} + </div> + <div if="{parent.sent}" + class="c-hint--static c-hint--success"> + <i class="fa fa-envelope"></i> {parent.__.sent} + </div> + </Modal> <script type="es6"> @@ -65,49 +42,24 @@ this.installBundle(session, "resendvalidation"); - this.openModal = false; - this.open = () => { - this.refs.email.value = ""; - this.sent = false; - this.error = ""; - this.openModal = true; - this.update(); + this.refs.modal.open().then(() => {}, () => {}); }; - this.close = () => { - this.openModal = false; - }; - this.action = (e) => { - - e.preventDefault(); - e.stopPropagation(); + this.submit = () => { 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.__.error_emailNotFound; - this.update(); - }); - } + let email = this.refs.modal.refs.email.value; + return authService.resendValidation(email).then(() => { + this.sent = true; + this.update(); + }, () => { + this.error = this.__.error_emailNotFound; + this.update(); + }); }; </script> - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - - </style> - </ResendValidation> diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html index 37a3015..923d3f2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html @@ -63,11 +63,6 @@ </select> </modal> - <modal title={__.delete} - ref="deleteConfirm"> - {parent.__.deleteMessage} - </modal> - <script type="es6"> let session = require("../../js/Session"); this.installBundle(session, "voterList"); @@ -101,10 +96,12 @@ this.delete = () => { if (this.opts.voterList.parentId) { - this.refs.deleteConfirm.open().then(() => { - voterListService.deleteVoterList(this.opts.voterList); - this.parent.parent.update(); - }, () => {}); + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + voterListService.deleteVoterList(this.opts.voterList); + this.parent.parent.update(); + } + }); } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html index 795afcf..a072a30 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html @@ -42,11 +42,6 @@ </button> </div> - <modal title={__.delete} - ref="deleteConfirm"> - {parent.__.deleteMessage} - </modal> - <script type="es6"> let session = require("../../js/Session"); this.installBundle(session, "voterList_member"); @@ -54,10 +49,12 @@ this.delete = () => { - this.refs.deleteConfirm.open().then(() => { - voterListService.deleteMember(this.opts.member); - this.parent.update(); - }, () => {}); + this.confirm(this.__.deleteMessage).then((result) => { + if (result) { + voterListService.deleteMember(this.opts.member); + this.parent.update(); + } + }); }; this.submit = () => { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.