diff options
author | dartcafe <github@dartcafe.de> | 2020-09-13 13:45:46 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-09-13 13:45:46 +0300 |
commit | d0ed62807b380868e97c31265e60d887788fa08a (patch) | |
tree | 1891dc5829205d50043b0f9905966f8da2996d1f /src | |
parent | c0ebb54966d3b334145d5075e1da8757b90018b8 (diff) |
Validate email address and improve register dialog
Diffstat (limited to 'src')
-rw-r--r-- | src/js/App.vue | 8 | ||||
-rw-r--r-- | src/js/assets/loading-small.gif | bin | 0 -> 1771 bytes | |||
-rw-r--r-- | src/js/components/Base/PublicRegisterModal.vue | 115 |
3 files changed, 105 insertions, 18 deletions
diff --git a/src/js/App.vue b/src/js/App.vue index d8201dbc..d4985ee1 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -158,6 +158,7 @@ export default { --icon-polls-handle: url('./assets/handle.svg'); --icon-polls-mail: url('./assets/mail.svg'); --icon-polls-sidebar-toggle: url('./assets/sidebar-toggle.svg'); + --icon-polls-loading: url('./assets/loading-small.gif'); // filters to colorize background svg from black // generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2 @@ -260,12 +261,19 @@ input { border-color: var(--color-error); background-color: var(--color-background-error); background-image: var(--icon-polls-no); + color: var(--color-text-maxcontrast); + } + + &.checking { + border-color: var(--color-warning); + background-image: var(--icon-polls-loading); } &.success, &.icon-confirm.success { border-color: var(--color-success); background-image: var(--icon-polls-yes); background-color: var(--color-background-success) !important; + color: var(--color-text-maxcontrast); } &.icon { diff --git a/src/js/assets/loading-small.gif b/src/js/assets/loading-small.gif Binary files differnew file mode 100644 index 00000000..83587a63 --- /dev/null +++ b/src/js/assets/loading-small.gif diff --git a/src/js/components/Base/PublicRegisterModal.vue b/src/js/components/Base/PublicRegisterModal.vue index 478468a6..6f780c93 100644 --- a/src/js/components/Base/PublicRegisterModal.vue +++ b/src/js/components/Base/PublicRegisterModal.vue @@ -27,23 +27,24 @@ <h2>{{ t('polls', 'Who are you?') }}</h2> <p>{{ t('polls', 'To participate, tell us how we can call you!') }}</p> - <input ref="userName" v-model="userName" :class="{ error: (!isValidName && userName.length > 0), success: isValidName }" + <input ref="userName" v-model="userName" :class="userNameCheckStatus" type="text" :placeholder="t('polls', 'Enter your name')" @keyup.enter="writeUserName"> <div> - <span v-show="checkingUserName" class="icon-loading-small">Checking username …</span> - <span v-show="!checkingUserName && userName.length < 3" class="error">{{ t('polls', 'Please use at least 3 characters for your name.') }}</span> - <span v-show="!checkingUserName && userName.length > 2 && !isValidName" class="error">{{ t('polls', 'This name is not valid, i.e. because it is already in use.') }}</span> - <span v-show="!checkingUserName && userName.length > 2 && isValidName" class="error">{{ t('polls', 'OK, we will call you {username}.', {username : userName }) }}</span> + {{ userNameCheckResult }} </div> </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="{ error: (!isValidName && userName.length > 0), success: isValidName }" + <input v-model="emailAddress" :class="emailAddressCheckStatus" type="text" :placeholder="t('polls', 'Enter your email address')" @keyup.enter="writeUserName"> + + <div> + {{ emailAddressCheckResult }} + </div> </div> <div class="modal__buttons"> @@ -80,8 +81,10 @@ export default { userName: '', emailAddress: '', checkingUserName: false, + checkingEmailAddress: false, redirecting: false, isValidName: false, + isValidEmailAddress: false, modal: true, } }, @@ -99,19 +102,85 @@ export default { }).href return generateUrl('login?redirect_url=' + redirectUrl) }, + + userNameCheckStatus() { + if (this.checkingUserName) { + return 'checking' + } else { + if (this.userName.length === 0) { + return 'empty' + } else if (this.userName.length < 3 || !this.isValidName) { + return 'error' + } else { + return 'success' + } + } + }, + + userNameCheckResult() { + if (this.checkingUserName) { + return t('polls', 'Checking username …') + } else { + if (this.userName.length < 3) { + return t('polls', 'Please use at least 3 characters for your name.') + } else if (!this.isValidName) { + return t('polls', 'This name is not valid, i.e. because it is already in use.') + } else { + return t('polls', 'OK, we will call you {username}.', { username: this.userName }) + } + } + }, + + emailAddressCheckResult() { + if (this.checkingEmailAddress) { + return t('polls', 'Checking email address …') + } else { + if (this.emailAddress.length < 1) { + return t('polls', 'Vote without email address.') + } else if (!this.isValidEmailAddress) { + return t('polls', 'This email address is not valid.') + } else { + return t('polls', 'This email address is valid.') + } + } + }, + + emailAddressCheckStatus() { + if (this.checkingEmailAddress) { + return 'checking' + } else { + if (this.emailAddress.length === 0) { + return '' + } else if (!this.isValidEmailAddress) { + return 'error' + } else { + return 'success' + } + } + }, + }, watch: { userName: function() { - this.isValidName = false if (this.userName.length > 2) { this.checkingUserName = true if (this.userName !== this.share.userid) { - this.isValidName = this.validatePublicUsername() + this.validatePublicUsername() } } else { - this.invalidUserNameMessage = t('polls', 'Please use at least 3 characters for your username!') this.checkingUserName = false + this.isValidName = false + } + }, + + emailAddress: function() { + if (this.emailAddress.length > 0) { + this.checkingEmailAddress = true + this.validateEmailAddress() + } else { + this.checkingEmailAddress = false + this.isValidEmailAddress = false } }, }, @@ -133,32 +202,42 @@ export default { this.modal = false }, - validatePublicUsername: debounce(function() { + validatePublicUsername: debounce(function() { if (this.userName.length > 2) { - this.checkingUserName = true return axios.post(generateUrl('apps/polls/check/username'), { pollId: this.poll.id, userName: this.userName, token: this.$route.params.token }) .then(() => { this.checkingUserName = false this.isValidName = true - this.invalidUserNameMessage = 'Username is OK.' - return true }) .catch(() => { this.checkingUserName = false this.isValidName = false - this.invalidUserNameMessage = t('polls', 'This username can not be chosen.') - return false }) } else { this.checkingUserName = false this.isValidName = false - this.invalidUserNameMessage = t('polls', 'Please use at least 3 characters for your username!') - return false + } + }, 500), + + validateEmailAddress: debounce(function() { + if (this.emailAddress.length > 0) { + return axios.get(generateUrl('apps/polls/check/emailaddress').concat('/', this.emailAddress)) + .then(() => { + this.isValidEmailAddress = true + this.checkingEmailAddress = false + }) + .catch(() => { + this.isValidEmailAddress = false + this.checkingEmailAddress = false + }) + } else { + this.isValidEmailAddress = false + this.checkingEmailAddress = false } }, 500), writeUserName() { - if (this.isValidName) { + 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) => { if (this.$route.params.token === response.token) { |