From eb15046c5e6a7b85557fbd1edbec4a8a755c9541 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 19 Oct 2019 16:27:56 +0200
Subject: [PATCH] Added labels for login and register inputs

---
 src/App.vue                                  |  2 +-
 src/components/user/Login.vue                |  8 +++++---
 src/components/user/PasswordReset.vue        |  8 +++++---
 src/components/user/Register.vue             | 14 +++++++++-----
 src/components/user/RequestPasswordReset.vue |  7 ++++---
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 630e98e6a..e9e2fc62f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,7 +155,7 @@
                 </div>
             </div>
             <div v-else>
-                <div class="container has-text-centered">
+                <div class="container">
                     <div class="column is-4 is-offset-4">
                         <img src="/images/logo-full.svg" alt="Vikunja"/>
                         <router-view/>
diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue
index 91979e477..fcdc02261 100644
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@@ -1,19 +1,21 @@
 <template>
 	<div>
-		<h2 class="title">Login</h2>
+		<h2 class="title has-text-centered">Login</h2>
 		<div class="box">
 			<div v-if="confirmedEmailSuccess" class="notification is-success has-text-centered">
 				You successfully confirmed your email! You can log in now.
 			</div>
 			<form id="loginform" @submit.prevent="submit">
 				<div class="field">
+					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password">Password</label>
 					<div class="control">
-						<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
+						<input type="password" class="input" id="password" name="password" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
 					</div>
 				</div>
 
diff --git a/src/components/user/PasswordReset.vue b/src/components/user/PasswordReset.vue
index 0068fd76f..933b57f3b 100644
--- a/src/components/user/PasswordReset.vue
+++ b/src/components/user/PasswordReset.vue
@@ -1,16 +1,18 @@
 <template>
 	<div>
-		<h2 class="title">Reset your password</h2>
+		<h2 class="title has-text-centered">Reset your password</h2>
 		<div class="box">
 			<form id="form" @submit.prevent="submit" v-if="!successMessage">
 				<div class="field">
+					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input v-focus type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						<input v-focus type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
+						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
 					</div>
 				</div>
 
diff --git a/src/components/user/Register.vue b/src/components/user/Register.vue
index 6c0944e9c..c2039305a 100644
--- a/src/components/user/Register.vue
+++ b/src/components/user/Register.vue
@@ -1,26 +1,30 @@
 <template>
 	<div>
-		<h2 class="title">Register</h2>
+		<h2 class="title has-text-centered">Register</h2>
 		<div class="box">
 			<form id="registerform" @submit.prevent="submit">
 				<div class="field">
+					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
+						<input type="text" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="credentials.email" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						<input type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
+						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
 					</div>
 				</div>
 
diff --git a/src/components/user/RequestPasswordReset.vue b/src/components/user/RequestPasswordReset.vue
index f885fc731..4ec4f9850 100644
--- a/src/components/user/RequestPasswordReset.vue
+++ b/src/components/user/RequestPasswordReset.vue
@@ -1,11 +1,12 @@
 <template>
 	<div>
-		<h2 class="title">Reset your password</h2>
+		<h2 class="title has-text-centered">Reset your password</h2>
 		<div class="box">
-			<form id="loginform" @submit.prevent="submit" v-if="!isSuccess">
+			<form @submit.prevent="submit" v-if="!isSuccess">
 				<div class="field">
+					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="email" placeholder="Email-Adress" v-model="passwordReset.email" required>
+						<input v-focus type="text" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="passwordReset.email" required/>
 					</div>
 				</div>