Finish start page

src/components/FancyInput.vue

@@ -80,6 +80,9 @@
 			padding: 0.1rem 0.25rem;
 			top: -1.75rem;
 			right: 0;
+			
+
+			&:first-letter{ text-transform: capitalize; }
 
 			opacity: 0;
 			pointer-events: 0;

src/components/FancyTextarea.vue

@@ -84,6 +84,8 @@
 			padding: 0.1rem 0.25rem;
 			top: -1.75rem;
 			right: 0;
+			
+			&:first-letter{ text-transform: capitalize; }
 
 			opacity: 0;
 			pointer-events: 0;

src/components/routes/Start.vue

@@ -1,13 +1,30 @@
 <template>
 	<div class='route_container route_container--fullscreen'>
+		<modal-window v-model='modal.show'>
+			<div style='padding: 0rem 1rem 1rem 1rem;'>
+				<p v-for='error in modal.errors'>{{error}}</p>
+				<button class='button' @click='modal.show = false'>OK</button>
+			</div>
+		</modal-window>
 		<div v-show='panel === 1'>
 			<div class='h1'>Hi.</div>
 			<p class='explanation'>
 				First create your admin account for the forum.
 			</p>
 			<div>
-				<fancy-input v-model='username' :error='errors.username' width='100%' placeholder='Username'></fancy-input>
-				<fancy-input v-model='password' :error='errors.password' width='100%' placeholder='Password' type='password'></fancy-input>
+				<fancy-input
+					v-model='username'
+					:error='errors.username'
+					width='100%'
+					placeholder='Username'
+				></fancy-input>
+				<fancy-input
+					v-model='password'
+					:error='errors.password'
+					width='100%'
+					placeholder='Password'
+					type='password'
+				></fancy-input>
 				<fancy-input
 					v-model='confirmPassword'
 					:error='errors.confirmPassword'
@@ -24,23 +41,57 @@
 				You can change these later on the admin page
 			</p>
 			<div>
-				<fancy-input v-model='forumName' width='100%' placeholder='Forum name'></fancy-input>
-				<p class='p--small'>These are like 'sub-forums'. Separate them with commas (e.g. books, technology, cars)</p>
-				<fancy-input v-model='categories' width='100%' placeholder='Categories'></fancy-input>
+				<fancy-input
+					v-model='forumName'
+					:error='errors.forumName'
+					width='100%'
+					placeholder='Forum name'
+				></fancy-input>
 				<p class='p--small'>What is your forum about?</p>
-				<fancy-textarea v-model='forumDescription' width='100%' placeholder='Forum description'></fancy-textarea>
-				<button style='width: 100%;' class='button button--green'>Finish</button>
+				<fancy-textarea
+					v-model='forumDescription'
+					:error='errors.forumDescription'
+					width='100%'
+					placeholder='Forum description'
+				></fancy-textarea>
+				<button style='width: 100%;' class='button button--green' @click='addSettings'>Add settings</button>
 			</div>
 		</div>
+		<div v-show='panel === 3'>
+			<div class='h1'>Categories</div>
+			<p class='explanation'>
+				People post threads in categories so that they're easier to sort through<br/>
+				You can add or remove them later on the admin page
+			</p>
+			<div>
+				<p v-if='categories.length'>
+					<b>Categories:</b>
+					{{categories.join(', ')}}
+				</p>
+				<p v-else>No categories added</p>
+				<div class='categories_form'>
+					<fancy-input
+						v-model='category'
+						:error='errors.name'
+						width='100%'
+						placeholder='Category name'
+					></fancy-input>
+					<button class='button button--green' @click='addCategory'>Add category</button>
+				</div>
+			</div>
+			<button style='width: 100%;' class='button button--green' @click='finish'>Finish</button>
+		</div>
 	</div>
 </template>
 
 <script>
 	import FancyInput from '../FancyInput'
 	import FancyTextarea from '../FancyTextarea'
+	import ModalWindow from '../ModalWindow'
 
 	export default {
 		name: 'start',
+
 		data () {
 			return {
 				username: '',
@@ -48,19 +99,31 @@
 				confirmPassword: '',
 				forumName: '',
 				forumDescription: '',
-				categories: '',
+
+				category: '',
+				categories: [],
+
 				panel: 1,
 
 				errors: {
 					username: '',
 					password: '',
-					confirmPassword: ''
+					confirmPassword: '',
+					forumName: '',
+					forumDescription: '',
+					name: ''
+				},
+
+				modal: {
+					show: false,
+					errors: []
 				}
 			}
 		},
 		components: {
 			FancyInput,
-			FancyTextarea
+			FancyTextarea,
+			ModalWindow
 		},
 		computed: {},
 		methods: {
@@ -68,15 +131,86 @@
 				this.errors.username = ''
 				this.errors.password = ''
 				this.errors.confirmPassword = ''
+				this.errors.forumName = ''
+				this.errors.forumDescription = ''
+				this.errors.name = ''
+			},
+			errorCallback (err) {
+				let errors = err.response.data.errors
+				let nonParamErrors = []
+
+				errors.forEach(error => {
+					let param = error.parameter
+
+					if(param && this.errors[param] !== undefined) {
+						this.errors[param] = error.message
+					} else {
+						nonParamErrors.push(error.message)
+					}
+				})
+
+				if(nonParamErrors.length) {
+					this.modal.show = true
+					this.modal.errors = nonParamErrors
+				}
 			},
 			createAccount () {
 				this.clearErrors()
 
 				if(this.password !== this.confirmPassword) {
-					this.errors.confirmPassword =  'Passwords must match!'
-				} else {
+					this.errors.confirmPassword =  'passwords do not match'
+
+					return;
+				}
+
+				let req = this.axios.post('/api/v1/user', {
+					username: this.username,
+					password: this.password,
+					admin: true
+				})
+
+				req.then(res => {
+					this.$store.commit('setUsername', res.data.username)
 					this.panel = 2
+				}).catch(this.errorCallback)
+			},
+			addSettings () {
+				this.clearErrors()
+
+				if(!this.forumName.trim().length) {
+					this.errors.forumName = 'Forum name can\'t be blank'
+					return
+				}
+
+				let settingsReq = this.axios.put('/api/v1/settings', {
+					forumName: this.forumName,
+					forumDescription: this.forumDescription
+				})
+
+				settingsReq.then(res => {
+					this.$store.commit('setForumName', res.data.forumName)
+					this.panel = 3
+				}).catch(this.errorCallback)
+			},
+			addCategory () {
+				this.clearErrors()
+
+				if(!this.category.length) {
+					this.errors.name = 'Category name can\'t be blank'
+					return
 				}
+
+				this.axios.post('/api/v1/category', {
+					name: this.category.trim()
+				}).then(res => {
+					this.$store.commit('addCategories', res.data.name)
+					this.categories.push(res.data.name)
+				}).catch(this.errorCallback)
+
+				this.category = ''
+			},
+			finish () {
+				if(this.categories.length) this.$router.push('/')
 			}
 		}
 	}
@@ -110,4 +244,20 @@
 		width: 25rem;
 	}
 
+	.categories_form {
+		margin-bottom: 1rem;
+		align-items: center;
+		display: flex;
+
+		.fancy_input {
+			flex-grow: 6;
+			margin: 0;
+			margin-right: 0.5rem;
+		}
+		button {
+			height: 1.9rem;
+			padding: 0 0.5rem;
+		}
+	}
+
 </style>

src/store/index.js

@@ -36,6 +36,19 @@ export default new Vuex.Store({
 		},
 		setAccountModalState (state, value) {
 			state.accountModal = value;
+		},
+		setUsername (state, value) {
+			state.username = value
+		},
+		setForumName (state, value) {
+			state.meta.name = value
+		},
+		addCategories (state, value) {
+			if(Array.isArray(value)) {
+				state.meta.categories = value
+			} else {
+				state.meta.categories.push(value)
+			}
 		}
 	},
 	modules: { thread }