src/App.vue

@@ -64,5 +64,6 @@
 	.content {
 		margin-left: 8px;
 		margin-right: 8px;
+		margin-bottom: 8px;
 	}
 </style>

src/components/ApplicationInputSwitch.vue

@@ -2,6 +2,7 @@
 	<div>
 		<LimitedTextField v-if="type === 'text-box-limited'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<TextField v-else-if="type === 'text-box'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<Links v-else-if="type === 'links'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<LineInput v-else-if="type === 'line'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<Age v-else-if="type === 'age'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 
@@ -12,6 +13,7 @@
 <script>
 	import LimitedTextField from './inputtypes/LimitedTextField.vue'
 	import TextField from './inputtypes/TextField.vue'
+	import Links from './inputtypes/Links.vue'
 	import LineInput from './inputtypes/LineInput.vue'
 	import Age from './inputtypes/Age.vue'
 
@@ -42,6 +44,7 @@
 		components: {
 			LimitedTextField,
 			TextField,
+			Links,
 			LineInput,
 			Age,
 		},

src/components/HeaderBar.vue

@@ -172,7 +172,7 @@
 		background-color: #222;
 
 		/* Padder fix */
-		margin-top: 0.2em;
+		margin-top: 0.18em;
 		
 		right: 50%;
 		transform: translateX(50%);

src/components/inputtypes/Age.vue

@@ -84,7 +84,7 @@
 
 <style scoped>
 	.textarea {
-		width: 6em;
+		width: 2em;
 		margin: auto;
 
 		color: #fff;

src/components/inputtypes/Links.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="width">
+		<div class="linkline" v-for="n in links.length">
+			<input class="line" type="text" @input="change(n, $event.target.value)" :ref="n"/>
+		</div>
+	</div>
+</template>
+
+<script>
+	//TODO: Add validation, a link should match a regex.
+	export default {
+		data() {
+			return {
+				links: [''],
+			}
+		},
+		methods: {
+			getContent() {
+				let links = [...this.links]
+				links.splice(links.length -1, 1)
+				return links
+			},
+			change(index, content) {
+				this.links[index-1] = content
+
+				if(content === '') {
+					if(this.links.length > 1) {
+						this.links.splice(index-1, 1)
+						this.updateFields()
+					}
+				} else if(index === this.links.length) {
+					this.links.push('')
+				}
+
+				this.$emit('update')
+			},
+			updateFields() {
+				let counter = 0
+				for(let i = 1; i <= this.links.length; i++) {
+					let el = this.$refs[i][0]
+					el.value = this.links[counter++]
+				}
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.line {
+		width: 100%;
+		min-height: 1.2em;
+		resize: vertical;
+		margin: auto;
+		margin-top: 2px;
+		
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+
+		height: 1.2em;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>

src/views/Application.vue

@@ -3,9 +3,15 @@
 		<h1>Application by {{ appdata.username }}</h1>
 		<span v-if="error !== ''">{{ error }}</span>
 		<div class="appdata" v-else>
-			<div class="pair" v-for="(value, key) in appdata.fields" :key="key">
+			<div class="pair _124ig23u5f235u" v-for="(value, key) in appdata.fields" :key="key">
 				<h4>{{ key }}</h4>
-				<p>{{ value }}</p>
+				<p v-if="Array.isArray(value)">
+					<span v-for="link in value">
+					<span>- </span><a :href="link">{{ link }}</a><br>
+					</span>
+				</p>
+				<p v-else-if="value === ''"> -/- </p>
+				<p v-else v-html="'' + escape(value) + ''"></p>
 			</div>
 		</div>
 	</div>
@@ -29,10 +35,27 @@
 			})
 		},
 		methods: {
+			escape(html) {
+				html = html.replace(/</g, '&lt;')
+				html = html.replace(/>/g, '&gt;')
+
+				html = html.replace(/\n/g, '<br>')
+				html = html.replace(/(\t+)/g, '<pre>$1</pre>')
+
+				return html
+			}
 		},
 	}
 </script>
 
+<style>
+	/* TODO: Convert to scoped... */
+	._124ig23u5f235u pre {
+		margin: 0em;
+		display: inline;
+	}
+</style>
+
 <style scoped>
 	.appdata {
 		/width: 63em;