Adding Age input type for Apps

src/components/ApplicationInputSwitch.vue

@@ -3,6 +3,7 @@
 		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options" ref="element"/>
 		<TextField v-else-if="type === 'text-box'" :highlight="highlight" :options="options" ref="element"/>
 		<LineInput v-else-if="type === 'line'" :highlight="highlight" :options="options" ref="element"/>
+		<Age v-else-if="type === 'age'" :highlight="highlight" :options="options" ref="element"/>
 
 		<span v-else>= OOPS, this input type '{{ type }}' has to be implemented.</span>
 	</div>
@@ -12,6 +13,7 @@
 	import LimitedTextField from './inputtypes/LimitedTextField.vue'
 	import TextField from './inputtypes/TextField.vue'
 	import LineInput from './inputtypes/LineInput.vue'
+	import Age from './inputtypes/Age.vue'
 
 	export default {
 		props: [
@@ -34,6 +36,7 @@
 			LimitedTextField,
 			TextField,
 			LineInput,
+			Age,
 		},
 	}
 </script>

src/components/inputtypes/Age.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="width">
+		<input class="textarea" :class="{broken: !isOkay, good: highlight && isOkay}" v-model="inputText" @keypress="validateType" @paste="validatePaste"/>
+		<span class="error"> {{ error }}</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+				error: '',
+			}
+		},
+		props: [
+			'highlight',
+			'options',
+		],
+		methods: {
+			getContent() {
+				return this.inputText
+			},
+			validateType(event) {
+				//Prevent most inputs which are not the digits 0 to 9
+				let code = event.keyCode || event.which
+				let key = String.fromCharCode(code)
+
+				if(!/[0-9]/.test(key)) {
+					event.preventDefault()
+				}
+			},
+			validatePaste(event) {
+				//Allow pasting every only numeric text, may contain space and tab (will be removed)
+				let data = event.clipboardData.getData('text/plain')
+
+				event.preventDefault()
+				if(data.match(/^[ \t0-9]+$/)) {
+					this.inputText = this.inputText + data.replace(/[\t ]/g, '')
+				}
+			},
+		},
+		computed: {
+			isOkay() {
+				//TODO: Properly set the error message. Or is this proper enough?
+				// eslint-disable-next-line
+				this.error = ''
+				if(this.inputText === '') {
+					return true
+				}
+
+				if(this.inputText.match(/^[1-9][0-9]*$/)) {
+
+					if(this.inputText < this.options.min) {
+						// eslint-disable-next-line
+						this.error = 'You seem to be younger than ' + this.options.min + ' are you really typing this yourself?'
+						return false
+					}
+
+					if(this.inputText > this.options.max) {
+						// eslint-disable-next-line
+						this.error = 'You seem to be older than ' + this.options.max + ' if you are a zombie or from any other non-human species, please contact a staffmember to hack in your real age.'
+						return false
+					}
+
+					return true
+				}
+
+				// eslint-disable-next-line
+				this.error = 'Please only enter one positive integer number without leading zeros.'
+				return false
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.textarea {
+		width: 6em;
+		margin: auto;
+
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+
+		outline: none;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+
+	.broken {
+		border: 1px solid #f00;
+	}
+
+	.good {
+		border: 1px solid #0f0;
+	}
+
+	.error {
+		color: #f00;
+		font-size: 0.8em;
+		line-height: 0.8em;
+	}
+</style>