feat(InputHelpBox): default message now has no success/error colour, fixed onInput

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/InputHelpBox.vue

@@ -1,5 +1,14 @@
 <template>
-	<p class="help" :class="valid ? 'is-success' : 'is-danger'">
+	<p
+		class="help"
+		:class="
+			entered || entered === undefined
+				? valid
+					? 'is-success'
+					: 'is-danger'
+				: 'is-grey'
+		"
+	>
 		{{ message }}
 	</p>
 </template>
@@ -14,19 +23,24 @@ export default {
 		valid: {
 			type: Boolean,
 			required: true
+		},
+		entered: {
+			type: Boolean,
+			default: undefined,
+			required: false
 		}
-	},
-	data() {
-		return {};
-	},
-	methods: {}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
 .help {
 	margin-top: 0 !important;
-	margin-bottom: 5px !important;
+	margin-bottom: 10px !important;
 	font-size: 12px;
 }
+
+.is-grey {
+	color: var(--dark-grey-1);
+}
 </style>

frontend/src/components/modals/Login.vue

@@ -217,6 +217,7 @@ export default {
 .modal-card-foot {
 	display: flex;
 	justify-content: space-between;
+	flex-wrap: wrap;
 }
 
 .button.is-github {

frontend/src/components/modals/Register.vue

@@ -1,135 +1,143 @@
 <template>
-	<div class="modal is-active">
-		<div class="modal-background" @click="closeRegisterModal()" />
-		<div class="modal-card">
-			<header class="modal-card-head">
-				<p class="modal-card-title">Register</p>
-				<button
-					v-if="!isPage"
-					class="delete"
-					@click="closeRegisterModal()"
-				/>
-			</header>
-			<section class="modal-card-body">
-				<!-- email address -->
-				<p class="control">
-					<label class="label">Email</label>
-					<input
-						v-model="email.value"
-						class="input"
-						type="email"
-						placeholder="Email..."
-						@blur="onInputBlur('email')"
-						autofocus
+	<div>
+		<metadata title="Register" v-if="isPage" />
+		<div class="modal is-active">
+			<div class="modal-background" @click="closeRegisterModal()" />
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Register</p>
+					<button
+						v-if="!isPage"
+						class="delete"
+						@click="closeRegisterModal()"
 					/>
-				</p>
-				<transition name="fadein-helpbox">
-					<input-help-box
-						v-if="email.entered"
-						:valid="email.valid"
-						:message="email.message"
-					></input-help-box>
-				</transition>
+				</header>
+				<section class="modal-card-body">
+					<!-- email address -->
+					<p class="control">
+						<label class="label">Email</label>
+						<input
+							v-model="email.value"
+							class="input"
+							type="email"
+							placeholder="Email..."
+							@keypress="onInput('email')"
+							autofocus
+						/>
+					</p>
+					<transition name="fadein-helpbox">
+						<input-help-box
+							:entered="email.entered"
+							:valid="email.valid"
+							:message="email.message"
+						></input-help-box>
+					</transition>
 
-				<!-- username -->
-				<p class="control">
-					<label class="label">Username</label>
-					<input
-						v-model="username.value"
-						class="input"
-						type="text"
-						placeholder="Username..."
-						@blur="onInputBlur('username')"
-					/>
-				</p>
-				<transition name="fadein-helpbox">
-					<input-help-box
-						v-if="username.entered"
-						:valid="username.valid"
-						:message="username.message"
-					></input-help-box>
-				</transition>
+					<!-- username -->
+					<p class="control">
+						<label class="label">Username</label>
+						<input
+							v-model="username.value"
+							class="input"
+							type="text"
+							placeholder="Username..."
+							@keypress="onInput('username')"
+						/>
+					</p>
+					<transition name="fadein-helpbox">
+						<input-help-box
+							:entered="username.entered"
+							:valid="username.valid"
+							:message="username.message"
+						></input-help-box>
+					</transition>
 
-				<!-- password -->
-				<p class="control">
-					<label class="label">Password</label>
-				</p>
+					<!-- password -->
+					<p class="control">
+						<label class="label">Password</label>
+					</p>
 
-				<div id="password-container">
-					<input
-						v-model="password.value"
-						class="input"
-						type="password"
-						ref="password"
-						placeholder="Password..."
-						@blur="onInputBlur('password')"
-						@keypress="$parent.submitOnEnter(submitModal, $event)"
-					/>
-					<a @click="togglePasswordVisibility()">
-						<i class="material-icons">
-							{{
-								!password.visible
-									? "visibility"
-									: "visibility_off"
-							}}
-						</i>
-					</a>
-				</div>
+					<div id="password-container">
+						<input
+							v-model="password.value"
+							class="input"
+							type="password"
+							ref="password"
+							placeholder="Password..."
+							@keypress="
+								onInput('password') &&
+									$parent.submitOnEnter(submitModal, $event)
+							"
+						/>
+						<a @click="togglePasswordVisibility()">
+							<i class="material-icons">
+								{{
+									!password.visible
+										? "visibility"
+										: "visibility_off"
+								}}
+							</i>
+						</a>
+					</div>
 
-				<transition name="fadein-helpbox">
-					<input-help-box
-						v-if="password.entered"
-						:valid="password.valid"
-						:message="password.message"
-					></input-help-box>
-				</transition>
+					<transition name="fadein-helpbox">
+						<input-help-box
+							:valid="password.valid"
+							:entered="password.entered"
+							:message="password.message"
+						></input-help-box>
+					</transition>
 
-				<br />
+					<br />
 
-				<p>
-					By registering you agree to our
-					<router-link
-						to="/terms"
-						@click.native="closeRegisterModal()"
-					>
-						Terms of Service
+					<p>
+						By registering you agree to our
+						<router-link
+							to="/terms"
+							@click.native="closeRegisterModal()"
+						>
+							Terms of Service
+						</router-link>
+						&nbsp;and
+						<router-link
+							to="/privacy"
+							@click.native="closeRegisterModal()"
+						>
+							Privacy Policy </router-link
+						>.
+					</p>
+				</section>
+				<footer class="modal-card-foot">
+					<router-link to="/login" v-if="isPage">
+						Already have an account?
 					</router-link>
-					&nbsp;and
-					<router-link
-						to="/privacy"
-						@click.native="closeRegisterModal()"
-					>
-						Privacy Policy </router-link
-					>.
-				</p>
-			</section>
-			<footer class="modal-card-foot">
-				<router-link to="/login" v-if="isPage">
-					Already have an account?
-				</router-link>
-				<a v-else href="#" @click="changeToLoginModal()">
-					Already have an account?
-				</a>
-
-				<div id="actions">
-					<a
-						class="button is-github"
-						:href="apiDomain + '/auth/github/authorize'"
-						@click="githubRedirect()"
-					>
-						<div class="icon">
-							<img
-								class="invert"
-								src="/assets/social/github.svg"
-							/>
-						</div>
-						&nbsp;&nbsp;Register with GitHub
+					<a v-else href="#" @click="changeToLoginModal()">
+						Already have an account?
 					</a>
-					<a class="button is-primary" href="#" @click="submitModal()"
-						>Register</a
-					>
-				</div>
-			</footer>
+
+					<div id="actions">
+						<a
+							class="button is-github"
+							:href="apiDomain + '/auth/github/authorize'"
+							@click="githubRedirect()"
+						>
+							<div class="icon">
+								<img
+									class="invert"
+									src="/assets/social/github.svg"
+								/>
+							</div>
+							&nbsp;&nbsp;Register with GitHub
+						</a>
+						<a
+							class="button is-primary"
+							href="#"
+							@click="submitModal()"
+							>Register</a
+						>
+					</div>
+				</footer>
+			</div>
 		</div>
 	</div>
 </template>
@@ -149,7 +157,7 @@ export default {
 				value: "",
 				valid: false,
 				entered: false,
-				message: "Please enter a valid username."
+				message: "Only letters, numbers and underscores are allowed."
 			},
 			email: {
 				value: "",
@@ -162,7 +170,8 @@ export default {
 				valid: false,
 				entered: false,
 				visible: false,
-				message: "Please enter a valid password."
+				message:
+					"Include at least one lowercase letter, one uppercase letter, one number and one special character."
 			},
 			recaptcha: {
 				key: "",
@@ -182,7 +191,7 @@ export default {
 				this.username.valid = false;
 			} else if (!validation.regex.azAZ09_.test(value)) {
 				this.username.message =
-					"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.";
+					"Invalid format. Allowed characters: a-z, A-Z, 0-9 and _.";
 				this.username.valid = false;
 			} else {
 				this.username.message = "Everything looks great!";
@@ -199,7 +208,7 @@ export default {
 				value.indexOf("@") !== value.lastIndexOf("@") ||
 				!validation.regex.emailSimple.test(value)
 			) {
-				this.email.message = "Invalid Email format.";
+				this.email.message = "Invalid format.";
 				this.email.valid = false;
 			} else {
 				this.email.message = "Everything looks great!";
@@ -214,7 +223,7 @@ export default {
 				this.password.valid = false;
 			} else if (!validation.regex.password.test(value)) {
 				this.password.message =
-					"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.";
+					"Include at least one lowercase letter, one uppercase letter, one number and one special character.";
 				this.password.valid = false;
 			} else {
 				this.password.message = "Everything looks great!";
@@ -290,7 +299,7 @@ export default {
 				})
 				.catch(err => new Toast(err.message));
 		},
-		onInputBlur(inputName) {
+		onInput(inputName) {
 			this[inputName].entered = true;
 		},
 		githubRedirect() {
@@ -331,9 +340,14 @@ export default {
 	}
 }
 
+.control {
+	margin-bottom: 2px !important;
+}
+
 .modal-card-foot {
 	display: flex;
 	justify-content: space-between;
+	flex-wrap: wrap;
 }
 
 .button.is-github {

frontend/src/pages/ResetPassword.vue

@@ -45,7 +45,7 @@
 										autofocus
 										v-model="email"
 										@keyup.enter="submitEmail()"
-										@blur="onInputBlur('email')"
+										@keypress="onInput('email')"
 									/>
 								</p>
 								<p class="control">
@@ -62,10 +62,10 @@
 							</div>
 							<transition name="fadein-helpbox">
 								<input-help-box
-									v-if="validation.email.entered"
+									:entered="validation.email.entered"
 									:valid="validation.email.valid"
 									:message="validation.email.message"
-								></input-help-box>
+								/>
 							</transition>
 						</div>
 					</div>
@@ -134,16 +134,16 @@
 									type="password"
 									placeholder="Enter password here..."
 									v-model="newPassword"
-									@blur="onInputBlur('newPassword')"
+									@keypress="onInput('newPassword')"
 								/>
 							</p>
 
 							<transition name="fadein-helpbox">
 								<input-help-box
-									v-if="validation.newPassword.entered"
+									:entered="validation.newPassword.entered"
 									:valid="validation.newPassword.valid"
 									:message="validation.newPassword.message"
-								></input-help-box>
+								/>
 							</transition>
 
 							<p
@@ -160,18 +160,20 @@
 									placeholder="Enter password here..."
 									v-model="newPasswordAgain"
 									@keyup.enter="changePassword()"
-									@blur="onInputBlur('newPasswordAgain')"
+									@keypress="onInput('newPasswordAgain')"
 								/>
 							</p>
 
 							<transition name="fadein-helpbox">
 								<input-help-box
-									v-if="validation.newPasswordAgain.entered"
+									:entered="
+										validation.newPasswordAgain.entered
+									"
 									:valid="validation.newPasswordAgain.valid"
 									:message="
 										validation.newPasswordAgain.message
 									"
-								></input-help-box>
+								/>
 							</transition>
 
 							<a
@@ -260,7 +262,8 @@ export default {
 				newPassword: {
 					entered: false,
 					valid: false,
-					message: "Please enter a valid password."
+					message:
+						"Include at least one lowercase letter, one uppercase letter, one number and one special character."
 				},
 				newPasswordAgain: {
 					entered: false,
@@ -297,7 +300,7 @@ export default {
 				this.validation.newPassword.valid = false;
 			} else if (!validation.regex.password.test(value)) {
 				this.validation.newPassword.message =
-					"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.";
+					"Include at least one lowercase letter, one uppercase letter, one number and one special character.";
 				this.validation.newPassword.valid = false;
 			} else {
 				this.validation.newPassword.message = "Everything looks great!";
@@ -320,7 +323,7 @@ export default {
 				this.validation.newPasswordAgain.valid = true;
 			}
 		},
-		onInputBlur(inputName) {
+		onInput(inputName) {
 			this.validation[inputName].entered = true;
 		},
 		submitEmail() {
@@ -570,4 +573,8 @@ p {
 	background-color: var(--grey-3);
 	color: var(--white);
 }
+
+.control {
+	margin-bottom: 2px !important;
+}
 </style>

frontend/src/pages/Settings/tabs/Account.vue

@@ -18,7 +18,7 @@
 				v-model="modifiedUser.username"
 				maxlength="32"
 				autocomplete="off"
-				@blur="onInputBlur('username')"
+				@keypress="onInput('username')"
 			/>
 			<span v-if="modifiedUser.username" class="character-counter"
 				>{{ modifiedUser.username.length }}/32</span
@@ -26,9 +26,10 @@
 		</p>
 		<transition name="fadein-helpbox">
 			<input-help-box
+				:entered="validation.username.entered"
 				:valid="validation.username.valid"
 				:message="validation.username.message"
-			></input-help-box>
+			/>
 		</transition>
 
 		<p class="control is-expanded">
@@ -40,15 +41,16 @@
 				placeholder="Enter email address here..."
 				v-if="modifiedUser.email"
 				v-model="modifiedUser.email.address"
-				@blur="onInputBlur('email')"
+				@keypress="onInput('email')"
 				autocomplete="off"
 			/>
 		</p>
 		<transition name="fadein-helpbox">
 			<input-help-box
+				:entered="validation.email.entered"
 				:valid="validation.email.valid"
 				:message="validation.email.message"
-			></input-help-box>
+			/>
 		</transition>
 
 		<save-button ref="saveButton" @clicked="saveChanges()" />
@@ -144,7 +146,7 @@ export default {
 			value !== this.originalUser.username // Sometimes a username pulled from GitHub won't succeed validation
 		) {
 				this.validation.username.message =
-					"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.";
+					"Invalid format. Allowed characters: a-z, A-Z, 0-9 and _.";
 				this.validation.username.valid = false;
 			} else {
 				this.validation.username.message = "Everything looks great!";
@@ -162,7 +164,7 @@ export default {
 				value.indexOf("@") !== value.lastIndexOf("@") ||
 				!validation.regex.emailSimple.test(value)
 			) {
-				this.validation.email.message = "Invalid Email format.";
+				this.validation.email.message = "Invalid format.";
 				this.validation.email.valid = false;
 			} else {
 				this.validation.email.message = "Everything looks great!";
@@ -171,7 +173,7 @@ export default {
 		}
 	},
 	methods: {
-		onInputBlur(inputName) {
+		onInput(inputName) {
 			this.validation[inputName].entered = true;
 		},
 		saveChanges() {
@@ -285,3 +287,9 @@ export default {
 	}
 };
 </script>
+
+<style lang="scss" scoped>
+.control {
+	margin-bottom: 2px !important;
+}
+</style>

frontend/src/pages/Settings/tabs/Security.vue

@@ -29,16 +29,16 @@
 					placeholder="Enter new password here..."
 					v-model="validation.newPassword.value"
 					@keyup.enter="changePassword()"
-					@blur="onInputBlur('newPassword')"
+					@keypress="onInput('newPassword')"
 				/>
 			</p>
 
 			<transition name="fadein-helpbox">
 				<input-help-box
-					v-if="validation.newPassword.entered"
+					:entered="validation.newPassword.entered"
 					:valid="validation.newPassword.valid"
 					:message="validation.newPassword.message"
-				></input-help-box>
+				/>
 			</transition>
 
 			<p class="control">
@@ -158,7 +158,8 @@ export default {
 					value: "",
 					valid: false,
 					entered: false,
-					message: "Please enter a valid password."
+					message:
+						"Include at least one lowercase letter, one uppercase letter, one number and one special character."
 				}
 			}
 		};
@@ -182,7 +183,7 @@ export default {
 				this.validation.newPassword.valid = false;
 			} else if (!validation.regex.password.test(value)) {
 				this.validation.newPassword.message =
-					"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.";
+					"Include at least one lowercase letter, one uppercase letter, one number and one special character.";
 				this.validation.newPassword.valid = false;
 			} else {
 				this.validation.newPassword.message = "Everything looks great!";
@@ -194,7 +195,7 @@ export default {
 		this.apiDomain = await lofig.get("apiDomain");
 	},
 	methods: {
-		onInputBlur(inputName) {
+		onInput(inputName) {
 			this.validation[inputName].entered = true;
 		},
 		changePassword() {
@@ -244,4 +245,8 @@ export default {
 #change-password-button {
 	margin-top: 10px;
 }
+
+.control {
+	margin-bottom: 2px !important;
+}
 </style>