src/components/lists/EditList.vue

@@ -12,7 +12,7 @@
 						<div class="field">
 							<label class="label" for="listtext">List Name</label>
 							<div class="control">
-								<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="listtext" placeholder="The list title goes here..." v-model="list.title">
+								<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="listtext" placeholder="The list title goes here..." v-model="list.title">
 							</div>
 						</div>
 						<div class="field">

src/components/lists/NewList.vue

@@ -4,7 +4,7 @@
 		<form @submit.prevent="newList">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
+					<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
 					<span class="icon is-small is-left">
 						<icon icon="list-ol"/>
 					</span>

src/components/lists/ShowList.vue

@@ -9,7 +9,7 @@
 		<form @submit.prevent="addTask()">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="newTask.text" type="text" placeholder="Add a new task...">
+					<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="newTask.text" type="text" placeholder="Add a new task...">
 					<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
@@ -67,7 +67,7 @@
 								<div class="field">
 									<label class="label" for="tasktext">Task Text</label>
 									<div class="control">
-										<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
+										<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
 									</div>
 								</div>
 								<div class="field">

src/components/namespaces/EditNamespace.vue

@@ -12,7 +12,7 @@
 						<div class="field">
 							<label class="label" for="namespacetext">Namespace Name</label>
 							<div class="control">
-								<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
+								<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
 							</div>
 						</div>
 						<div class="field">

src/components/namespaces/NewNamespace.vue

@@ -4,7 +4,7 @@
 		<form @submit.prevent="newNamespace">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
+					<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
 					<span class="icon is-small is-left">
 										<icon icon="layer-group"/>
 					</span>

src/components/teams/EditTeam.vue

@@ -12,7 +12,7 @@
 						<div class="field">
 							<label class="label" for="teamtext">Team Name</label>
 							<div class="control">
-								<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name">
+								<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name">
 							</div>
 						</div>
 						<div class="field">

src/components/teams/NewTeam.vue

@@ -4,7 +4,7 @@
 		<form @submit.prevent="newTeam">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
+					<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
 					<span class="icon is-small is-left">
 						<icon icon="users"/>
 					</span>

src/components/user/Login.vue

@@ -8,7 +8,7 @@
 			<form id="loginform" @submit.prevent="submit">
 				<div class="field">
 					<div class="control">
-						<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
 					</div>
 				</div>
 				<div class="field">

src/components/user/PasswordReset.vue

@@ -5,7 +5,7 @@
 			<form id="form" @submit.prevent="submit" v-if="!successMessage">
 				<div class="field">
 					<div class="control">
-						<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						<input v-focus type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
 					</div>
 				</div>
 				<div class="field">

src/components/user/Register.vue

@@ -5,7 +5,7 @@
 			<form id="registerform" @submit.prevent="submit">
 				<div class="field">
 					<div class="control">
-						<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
 					</div>
 				</div>
 				<div class="field">

src/components/user/RequestPasswordReset.vue

@@ -5,7 +5,7 @@
 			<form id="loginform" @submit.prevent="submit" v-if="!isSuccess">
 				<div class="field">
 					<div class="control">
-						<input type="text" class="input" name="email" placeholder="Email-Adress" v-model="email" required>
+						<input v-focus type="text" class="input" name="email" placeholder="Email-Adress" v-model="email" required>
 					</div>
 				</div>
 

src/main.js

@@ -56,6 +56,16 @@ Vue.component('icon', FontAwesomeIcon)
 import VTooltip from 'v-tooltip'
 Vue.use(VTooltip)
 
+// Set focus
+Vue.directive('focus', {
+	// When the bound element is inserted into the DOM...
+	inserted: function (el) {
+		// Focus the element
+		el.focus()
+	}
+})
+
+
 // Check the user's auth status when the app starts
 auth.checkAuth()