optimizations, fixes and tidy

Signed-off-by: dartcafe <github@dartcafe.de>

3 files changed, 146 insertions, 142 deletions

diff --git a/src/js/components/Base/InputDiv.vue b/src/js/components/Base/InputDiv.vue
index 777d1925..0b1af6b4 100644
--- a/src/js/components/Base/InputDiv.vue
+++ b/src/js/components/Base/InputDiv.vue
@@ -22,14 +22,14 @@
 
 <template lang="html">
 	<div :class="['input-div', { numeric: useNumModifiers }]">
-		<div v-if="useNumModifiers" class="modifyer subtract icon icon-polls-minus" @click="$emit('subtract')" />
+		<div v-if="useNumModifiers" class="modifier subtract icon icon-polls-minus" @click="$emit('subtract')" />
 		<input ref="input"
 			:value="value"
 			:placeholder="placeholder"
-			:class="['input', inputClass]"
+			:class="['input', signalingClass]"
 			@input="$emit('update:value', $event.target.value)"
 			@keyup.enter="$emit('submit', $event.target.value)">
-		<div v-if="useNumModifiers" class="modifyer add icon icon-add" @click="$emit('add')" />
+		<div v-if="useNumModifiers" class="modifier add icon icon-add" @click="$emit('add')" />
 		<ButtonDiv v-if="!useNumModifiers && !noSubmit" submit @click="$emit('submit', $refs.input.value)" />
 	</div>
 </template>
@@ -50,7 +50,7 @@ export default {
 			type: [String, Number],
 			required: true,
 		},
-		inputClass: {
+		signalingClass: {
 			type: String,
 			default: '',
 		},
@@ -62,11 +62,29 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		focus: {
+			type: Boolean,
+			default: false,
+		},
 		noSubmit: {
 			type: Boolean,
 			default: false,
 		},
 	},
+
+	mounted() {
+		if (this.focus) {
+			this.setFocus()
+		}
+	},
+
+	methods: {
+		setFocus() {
+			this.$nextTick(() => {
+				this.$refs.input.focus()
+			})
+		},
+	},
 }
 
 </script>
@@ -90,9 +108,35 @@ export default {
 
 	input {
 		width: 100%;
+		background-repeat: no-repeat;
+		background-position: right 12px center;
 		&:empty:before {
 			color: grey;
 		}
+
+		&.error {
+			border-color: var(--color-error);
+			background-color: var(--color-background-error);
+			background-image: var(--icon-polls-no);
+			color: var(--color-foreground-error);
+		}
+
+		&.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-foreground-success);
+		}
+
+		&.icon {
+			flex: 0;
+			padding: 0 17px;
+		}
 	}
 
 	.add {
@@ -107,7 +151,7 @@ export default {
 		border-radius: var(--border-radius) 0 0 var(--border-radius);
 	}
 
-	.modifyer {
+	.modifier {
 		position: absolute;
 		top: 0;
 		height: 32px;
diff --git a/src/js/components/Base/PublicEmail.vue b/src/js/components/Base/PublicEmail.vue
index 64b4ef19..06a3c834 100644
--- a/src/js/components/Base/PublicEmail.vue
+++ b/src/js/components/Base/PublicEmail.vue
@@ -22,82 +22,63 @@
 
 <template>
 	<div class="public-email">
-		<!-- <div class="input-wrapper">
-			<input v-model="emailAddress" v-tooltip="check.result" :class="['input', check.status]"
-				:placeholder="t('polls', 'Optional email address')" @keyup.enter="submitEmailAddress">
-			<ButtonDiv submit @click="submitEmailAddress" />
-		</div> -->
-
 		<InputDiv v-tooltip="check.result"
 			:value.sync="emailAddress"
-			:class="check.status"
-			:input-class="check.status"
+			:signaling-class="check.status"
 			:placeholder="t('polls', 'Optional email address')"
 			@submit="submitEmailAddress" />
-		<h3>{{ t("polls", "With your email address you can subscribe to notifications and you will receive your personal link to this poll.") }}</h3>
 	</div>
 </template>
 
 <script>
 import debounce from 'lodash/debounce'
 import axios from '@nextcloud/axios'
-// import ButtonDiv from '../Base/ButtonDiv'
 import InputDiv from '../Base/InputDiv'
-import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { mapState } from 'vuex'
 
 export default {
 	name: 'PublicEmail',
 
 	components: {
-		// ButtonDiv,
 		InputDiv,
 	},
 
+	props: {
+		value: {
+			type: String,
+			default: '',
+		},
+	},
+
 	data() {
 		return {
-			checkingEmailAddress: false,
-			isValidEmailAddress: false,
+			emailAddress: this.value,
+			checkResult: '',
+			checkStatus: '',
+			checking: false,
 		}
 	},
 
 	computed: {
-		...mapState({
-			share: state => state.share,
-		}),
-
-		emailAddress: {
-			get() {
-				return this.share.emailAddress
-			},
-			set(value) {
-				this.$store.commit('share/setEmailAddress', value)
-			},
+		emailAddressUnchanged() {
+			return this.emailAddress === this.value
 		},
 
 		check() {
-			if (this.checkingEmailAddress) {
+			if (this.checking) {
 				return {
 					result: t('polls', 'Checking email address …'),
 					status: 'checking',
 				}
+			} else if (this.emailAddressUnchanged) {
+				return {
+					result: '',
+					status: '',
+				}
 			} else {
-				if (this.emailAddress.length < 1) {
-					return {
-						result: '',
-						status: '',
-					}
-				} else if (!this.isValidEmailAddress) {
-					return {
-						result: t('polls', 'Invalid email address.'),
-						status: 'error',
-					}
-				} else {
-					return {
-						result: t('polls', 'valid email address.'),
-						status: 'success',
-					}
+				return {
+					result: this.checkResult,
+					status: this.checkStatus,
 				}
 			}
 		},
@@ -105,56 +86,36 @@ export default {
 
 	watch: {
 		emailAddress: function() {
-			if (this.emailAddress.length > 0) {
-				this.checkingEmailAddress = true
-				this.validateEmailAddress()
-			} else {
-				this.checkingEmailAddress = false
-				this.isValidEmailAddress = false
-			}
+			this.validateEmailAddress()
 		},
 	},
 
 	methods: {
-		validateEmailAddress: debounce(function() {
-			if (this.emailAddress.length > 0) {
-				return axios.get(generateUrl('apps/polls/check/emailaddress') + '/' + this.emailAddress)
-					.then(() => {
-						this.isValidEmailAddress = true
-						this.checkingEmailAddress = false
-					})
-					.catch(() => {
-						this.isValidEmailAddress = false
-						this.checkingEmailAddress = false
-					})
+		validateEmailAddress: debounce(async function() {
+			if (this.emailAddress.length < 1 || this.emailAddressUnchanged) {
+				this.checkResult = ''
+				this.checkStatus = ''
 			} else {
-				this.isValidEmailAddress = false
-				this.checkingEmailAddress = false
+				try {
+					this.checking = true
+					await axios.get(generateUrl('apps/polls/check/emailaddress') + '/' + this.emailAddress)
+					this.checkResult = t('polls', 'valid email address.')
+					this.checkStatus = 'success'
+				} catch (e) {
+					this.checkResult = t('polls', 'Invalid email address.')
+					this.checkStatus = 'error'
+				} finally {
+					this.checking = false
+				}
+
 			}
 		}, 500),
 
-		submitEmailAddress() {
-			if (this.isValidEmailAddress || this.emailAddress.length === 0) {
-				this.$store.dispatch('share/updateEmailAddress', { emailAddress: this.emailAddress })
-					.then((response) => {
-						showSuccess(t('polls', 'Email address {emailAddress} saved.', { emailAddress: this.emailAddress }))
-					})
-					.catch(() => {
-						showError(t('polls', 'Error saving email address {emailAddress}', { emailAddress: this.emailAddress }))
-					})
+		async submitEmailAddress() {
+			if (this.checkResult === 'success' || this.emailAddress.length > 0) {
+				this.$emit('update', this.emailAddress)
 			}
 		},
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-.input-wrapper {
-	display: flex;
-}
-
-input {
-	width: 240px;
-}
-
-</style>
diff --git a/src/js/components/Base/PublicRegisterModal.vue b/src/js/components/Base/PublicRegisterModal.vue
index 03fad48a..2b6c660f 100644
--- a/src/js/components/Base/PublicRegisterModal.vue
+++ b/src/js/components/Base/PublicRegisterModal.vue
@@ -36,20 +36,23 @@
 					<h2>{{ t('polls', 'Participate in public poll!') }}</h2>
 					<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>
+						<InputDiv v-tooltip="userNameCheck.result"
+							:value.sync="userName"
+							:signaling-class="userNameCheck.status"
+							:placeholder="t('polls', 'Enter your name')"
+							no-submit
+							focus
+							@submit="submitRegistration" />
 					</div>
 
 					<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>
+						<InputDiv v-tooltip="emailCheck.result"
+							:value.sync="emailAddress"
+							:signaling-class="emailCheck.status"
+							:placeholder="t('polls', 'Optional email address')"
+							no-submit
+							@submit="submitRegistration" />
 					</div>
 
 					<div class="modal__buttons">
@@ -68,6 +71,7 @@
 import debounce from 'lodash/debounce'
 import axios from '@nextcloud/axios'
 import ButtonDiv from '../Base/ButtonDiv'
+import InputDiv from '../Base/InputDiv'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import { Modal } from '@nextcloud/vue'
@@ -79,6 +83,7 @@ export default {
 	components: {
 		Modal,
 		ButtonDiv,
+		InputDiv,
 	},
 
 	data() {
@@ -112,58 +117,59 @@ export default {
 			return generateUrl('login?redirect_url=' + redirectUrl)
 		},
 
-		userNameCheckStatus() {
+		userNameCheck() {
 			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'
+				return {
+					result: t('polls', 'Checking username …'),
+					status: 'checking',
 				}
-			}
-		},
-
-		userNameCheckResult() {
-			if (this.checkingUserName) {
-				return t('polls', 'Checking username …')
 			} else {
-				if (this.userName.length < 3) {
-					return t('polls', 'Please use at least 3 characters.')
+				if (this.userName.length === 0) {
+					return {
+						result: t('polls', 'Enter a username to participate.'),
+						status: 'empty',
+					}
+				} else if (this.userName.length < 3) {
+					return {
+						result: t('polls', 'Please use at least 3 characters.'),
+						status: 'error',
+					}
 				} else if (!this.isValidName) {
-					return t('polls', 'This name is not valid.')
+					return {
+						result: t('polls', 'Invalid name'),
+						status: 'error',
+					}
 				} else {
-					return t('polls', 'OK, we will call you {username}.', { username: this.userName })
+					return {
+						result: t('polls', '{username} is valid.', { username: this.userName }),
+						status: 'success',
+					}
 				}
 			}
 		},
 
-		emailAddressCheckResult() {
+		emailCheck() {
 			if (this.checkingEmailAddress) {
-				return t('polls', 'Checking email address …')
-			} else {
-				if (this.emailAddress.length < 1) {
-					return t('polls', ' ')
-				} else if (!this.isValidEmailAddress) {
-					return t('polls', 'This email address is not valid.')
-				} else {
-					return t('polls', 'This email address is valid.')
+				return {
+					result: t('polls', 'Checking email address …'),
+					status: 'checking',
 				}
-			}
-		},
-
-		emailAddressCheckStatus() {
-			if (this.checkingEmailAddress) {
-				return 'checking'
 			} else {
-				if (this.emailAddress.length === 0) {
-					return ''
+				if (this.emailAddress.length < 1) {
+					return {
+						result: '',
+						status: '',
+					}
 				} else if (!this.isValidEmailAddress) {
-					return 'error'
+					return {
+						result: t('polls', 'Invalid email address.'),
+						status: 'error',
+					}
 				} else {
-					return 'success'
+					return {
+						result: t('polls', 'valid email address.'),
+						status: 'success',
+					}
 				}
 			}
 		},
@@ -197,16 +203,9 @@ export default {
 	mounted() {
 		this.userName = this.share.displayName
 		this.emailAddress = this.share.emailAddress
-		this.setFocus()
 	},
 
 	methods: {
-		setFocus() {
-			this.$nextTick(() => {
-				this.$refs.userName.focus()
-			})
-		},
-
 		closeModal() {
 			this.modal = false
 		},