src/components/ApplicationInputSwitch.vue

@@ -1,8 +1,9 @@
 <template>
 	<div>
-		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options"/>
-		<TextField v-else-if="type === 'text-box'" />
-		<LineInput v-else-if="type === 'line'" />
+		<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: [
@@ -19,10 +21,22 @@
 			'highlight',
 			'options',
 		],
+		methods: {
+			getContent() {
+				return this.$refs.element === undefined ? '' : this.$refs.element.getContent()
+			},
+		},
+		computed: {
+			isOkay() {
+				//TODO: Get rid of undefined (Implment all input types)
+				return this.$refs.element === undefined || this.$refs.element.isOkay
+			},
+		},
 		components: {
 			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>

src/components/inputtypes/LimitedTextField.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="width">
-		<textarea v-bind:class="{ textarea: true, not_enough: highlight && !isEnough, enough: highlight && isEnough }" type="text" v-model="inputText" />
+		<textarea class="textarea" :class="{not_enough: highlight && !isOkay, enough: highlight && isOkay}" type="text" v-model="inputText" />
 		<SimpleProgressBar class="progbar" :count="len" :max="options.min" :steps="options.steps"/>
 	</div>
 </template>
@@ -14,21 +14,23 @@
 				inputText: '',
 			}
 		},
-
 		props: [
 			'highlight',
 			'options'
 		],
-
-		computed: {
-			isEnough() {
-				return this.inputText.length >= this.options.min
+		methods: {
+			getContent() {
+				return this.inputText
 			},
+		},
+		computed: {
 			len() {
 				return this.inputText.length
-			}
+			},
+			isOkay() {
+				return this.inputText.length >= this.options.min
+			},
 		},
-
 		components: {
 			SimpleProgressBar,
 		},

src/components/inputtypes/LineInput.vue

@@ -1,9 +1,29 @@
 <template>
 	<div class="width">
-		<input class="textarea" type="text" />
+		<input class="textarea" type="text" v-model="inputText"/>
 	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+			}
+		},
+		methods: {
+			getContent() {
+				return this.inputText
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
 <style scoped>
 	.textarea {
 		width: 50%;

src/components/inputtypes/TextField.vue

@@ -1,9 +1,29 @@
 <template>
 	<div class="width">
-		<textarea class="textarea" type="text" />
+		<textarea class="textarea" type="text" v-model="inputText"/>
 	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+			}
+		},
+		methods: {
+			getContent() {
+				return this.inputText
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
 <style scoped>
 	.textarea {
 		width: 100%;

src/views/Application.vue

@@ -1,9 +1,8 @@
 <template>
 	<div>
-		<h1>Application with ID {{ id }}</h1>
+		<h1>Application by {{ appdata.username }}</h1>
 		<span v-if="error !== ''">{{ error }}</span>
 		<div class="appdata" v-else>
-			<p>Username: {{ appdata.username }}</p>
 			<div class="pair" v-for="(value, key) in appdata.fields" :key="key">
 				<h4>{{ key }}</h4>
 				<p>{{ value }}</p>
@@ -13,6 +12,7 @@
 </template>
 
 <script>
+	//TODO: Fix title...
 	export default {
 		data () {
 			return {
@@ -50,5 +50,7 @@
 		margin: 0;
 		margin-top: 0.2em;
 		margin-left: 0.5em;
+
+		overflow-wrap: break-word;
 	}
 </style>

src/views/CreateApplication.vue

@@ -7,10 +7,11 @@
 				<h3 class="question">- {{ element.text }}</h3>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
-				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options"></ApplicationInputSwitch>
+				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options" :ref="index"></ApplicationInputSwitch>
 				<span class="hint">{{ element.hint }}</span>
 			</div>
 			<button @click="update">Create/Update</button>
+			<span class="error"> {{ error }}</span>
 		</div>
 		<span v-else>You are not logged in.</span>
 	</div>
@@ -25,6 +26,7 @@
 				instruction: '',
 				pattern: null,
 				highlight: false,
+				error: '',
 			}
 		},
 		created () {
@@ -39,8 +41,43 @@
 			},
 		},
 		methods: {
+			isReady() {
+				for(let key in this.$refs) {
+					//TBI What is that 0
+					let el = this.$refs[key][0]
+
+					if(!el.isOkay) {
+						return false;
+					}
+				}
+
+				return true
+			},
+			getContent() {
+				let answers = []
+				for(let key in this.$refs) {
+					//TBI What is that 0
+					answers.push(this.$refs[key][0].getContent())
+				}
+
+				return answers
+			},
 			update() {
-				this.highlight = true
+				if(this.isReady()) {
+					this.core.post('/application', {
+						//TODO: Pattern, User-token
+						answers: this.getContent(),
+						creator: this.user.username,
+					}).then((response) => {
+						
+						console.log('Response: ', response.data);
+					});
+
+					this.error = ''
+				} else {
+					this.highlight = true
+					this.error = 'Please fill the required fields'
+				}
 			},
 		},
 		components: {
@@ -62,4 +99,8 @@
 	.hint {
 		font-size: 0.8em;
 	}
+
+	.error {
+		color: red;
+	}
 </style>