diff options
author | dartcafe <github@dartcafe.de> | 2020-09-20 10:49:47 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-09-20 10:49:47 +0300 |
commit | ebd8f3c28d9000a11df726e2617e01cdff82f636 (patch) | |
tree | 824fa2ead559beb022259e5466030cf86b2c1b17 /src | |
parent | dc31702547d3a333af86e5175347ecb9f09a1da6 (diff) |
public polls - new dialog for login
Diffstat (limited to 'src')
-rw-r--r-- | src/js/components/Base/PublicRegisterModal.vue | 96 |
1 files changed, 65 insertions, 31 deletions
diff --git a/src/js/components/Base/PublicRegisterModal.vue b/src/js/components/Base/PublicRegisterModal.vue index 6f780c93..6b1025bf 100644 --- a/src/js/components/Base/PublicRegisterModal.vue +++ b/src/js/components/Base/PublicRegisterModal.vue @@ -23,37 +23,44 @@ <template> <Modal v-show="modal" :can-close="false"> <div class="modal__content"> - <div class="enter__name"> - <h2>{{ t('polls', 'Who are you?') }}</h2> - <p>{{ t('polls', 'To participate, tell us how we can call you!') }}</p> + <h2>{{ t('polls', 'Public poll') }}</h2> - <input ref="userName" v-model="userName" :class="userNameCheckStatus" - type="text" - :placeholder="t('polls', 'Enter your name')" @keyup.enter="writeUserName"> - - <div> - {{ userNameCheckResult }} - </div> + <div v-show="card === 'front'" class="front-card"> + <h3> {{ t('polls', 'Are you a user of this site and have a login?') }} </h3> + <ButtonDiv :title="t('polls', 'Yes, I have a login')" @click="login()" /> + <ButtonDiv :title="t('polls', 'No, I have no login')" @click="card = 'back'" /> </div> - <div class="enter__email"> - <p>{{ t('polls', 'Enter your email address to be able to subscribe to updates and get your personal link via email.') }}</p> - <input v-model="emailAddress" :class="emailAddressCheckStatus" - type="text" - :placeholder="t('polls', 'Enter your email address')" @keyup.enter="writeUserName"> + <div v-show="card === 'back'" class="back-card"> + <div class="section__username"> + <h3>{{ t('polls', 'To participate, tell us how we can call you!') }}</h3> + <input ref="userName" v-model="userName" :class="userNameCheckStatus" + type="text" :placeholder="t('polls', 'Enter your name')" @keyup.enter="submitRegistration"> + <div> + {{ userNameCheckResult }} + </div> + </div> - <div> - {{ emailAddressCheckResult }} + <div class="section__email"> + <h3>{{ t("polls", "With your email address you can subscribe to notifications and you will receive your personal link to this poll.") }}</h3> + <input v-model="emailAddress" :class="emailAddressCheckStatus" + type="text" :placeholder="t('polls', 'Optional email address')" @keyup.enter="submitRegistration"> + <div> + {{ emailAddressCheckResult }} + </div> </div> - </div> - <div class="modal__buttons"> - <a :href="loginLink" class="modal__buttons__link"> {{ t('polls', 'You have an account? Log in here.') }} </a> - <div class="modal__buttons__spacer" /> - <ButtonDiv :title="t('polls', 'Cancel')" - @click="closeModal" /> - <ButtonDiv :primary="true" :disabled="!isValidName || checkingUserName" :title="t('polls', 'OK')" - @click="writeUserName" /> + <div class="modal__buttons"> + <Actions> + <ActionButton icon="icon-close" @click="card = 'front'"> + {{ t('polls', 'Back') }} + </ActionButton> + </Actions> + <div class="modal__buttons__spacer" /> + <ButtonDiv :title="t('polls', 'Cancel')" @click="closeModal" /> + <ButtonDiv :primary="true" :disabled="disableSubmit" :title="t('polls', 'OK')" + @click="submitRegistration" /> + </div> </div> </div> </Modal> @@ -65,13 +72,15 @@ import axios from '@nextcloud/axios' import ButtonDiv from '../Base/ButtonDiv' import { showError } from '@nextcloud/dialogs' import { generateUrl } from '@nextcloud/router' -import { Modal } from '@nextcloud/vue' +import { Modal, Actions, ActionButton } from '@nextcloud/vue' import { mapState } from 'vuex' export default { name: 'PublicRegisterModal', components: { + Actions, + ActionButton, Modal, ButtonDiv, }, @@ -86,6 +95,7 @@ export default { isValidName: false, isValidEmailAddress: false, modal: true, + card: 'front', } }, @@ -95,6 +105,10 @@ export default { share: state => state.poll.share, }), + disableSubmit() { + return !this.isValidName || this.checkingUserName + }, + loginLink() { const redirectUrl = this.$router.resolve({ name: 'publicVote', @@ -122,9 +136,9 @@ export default { return t('polls', 'Checking username …') } else { if (this.userName.length < 3) { - return t('polls', 'Please use at least 3 characters for your name.') + return t('polls', 'Please use at least 3 characters.') } else if (!this.isValidName) { - return t('polls', 'This name is not valid, i.e. because it is already in use.') + return t('polls', 'This name is not valid.') } else { return t('polls', 'OK, we will call you {username}.', { username: this.userName }) } @@ -136,7 +150,7 @@ export default { return t('polls', 'Checking email address …') } else { if (this.emailAddress.length < 1) { - return t('polls', 'Vote without email address.') + return t('polls', ' ') } else if (!this.isValidEmailAddress) { return t('polls', 'This email address is not valid.') } else { @@ -202,6 +216,10 @@ export default { this.modal = false }, + login() { + window.location.assign(window.location.protocol + '//' + window.location.host + this.loginLink) + }, + validatePublicUsername: debounce(function() { if (this.userName.length > 2) { return axios.post(generateUrl('apps/polls/check/username'), { pollId: this.poll.id, userName: this.userName, token: this.$route.params.token }) @@ -236,7 +254,7 @@ export default { } }, 500), - writeUserName() { + submitRegistration() { if (this.isValidName && (this.isValidEmailAddress || this.emailAddress.length === 0)) { this.$store.dispatch('poll/shares/addPersonal', { token: this.$route.params.token, userName: this.userName, emailAddress: this.emailAddress }) .then((response) => { @@ -258,7 +276,19 @@ export default { } </script> -<style lang="scss"> +<style lang="scss" scoped> + + .front-card, .back-card { + display: flex; + flex-direction: column; + > button { + margin: 8px 0; + } + } + + [class*="section__"] { + margin: 4px 0; + } .modal__content { .enter__name, .enter__email { @@ -266,4 +296,8 @@ export default { } } + .description { + hyphens: auto; + border-top: 1px solid var(--color-border) + } </style> |