refactor(InputHelpBox): modularised to allow easier for future updates

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

frontend/src/App.vue

@@ -467,17 +467,6 @@ button.delete:focus {
 	height: 36px;
 }
 
-.input {
-	margin-top: 3px;
-}
-
-.help {
-	margin-top: 0 !important;
-	margin-bottom: 5px !important;
-	font-size: 12px;
-	height: 17px !important;
-}
-
 .fadein-helpbox-enter-active {
 	transition-duration: 0.3s;
 	transition-timing-function: ease-in;
@@ -502,10 +491,6 @@ button.delete:focus {
 
 .control {
 	margin-bottom: 5px !important;
-
-	&.control:not(:first-of-type) {
-		margin: 15px 0;
-	}
 }
 
 .input-with-button {

frontend/src/components/modals/Register.vue

@@ -35,13 +35,11 @@
 					/>
 				</p>
 				<transition name="fadein-helpbox">
-					<p
-						class="help"
+					<input-help-box
 						v-if="email.entered"
-						:class="email.valid ? 'is-success' : 'is-danger'"
-					>
-						{{ email.message }}
-					</p>
+						:valid="email.valid"
+						:message="email.message"
+					></input-help-box>
 				</transition>
 
 				<p class="control">
@@ -55,13 +53,11 @@
 					/>
 				</p>
 				<transition name="fadein-helpbox">
-					<p
-						class="help"
+					<input-help-box
 						v-if="username.entered"
-						:class="username.valid ? 'is-success' : 'is-danger'"
-					>
-						{{ username.message }}
-					</p>
+						:valid="username.valid"
+						:message="username.message"
+					></input-help-box>
 				</transition>
 
 				<p class="control">
@@ -76,13 +72,11 @@
 					/>
 				</p>
 				<transition name="fadein-helpbox">
-					<p
-						class="help"
+					<input-help-box
 						v-if="password.entered"
-						:class="password.valid ? 'is-success' : 'is-danger'"
-					>
-						{{ password.message }}
-					</p>
+						:valid="password.valid"
+						:message="password.message"
+					></input-help-box>
 				</transition>
 
 				<br />
@@ -115,12 +109,14 @@
 
 <script>
 import { mapActions } from "vuex";
-
 import Toast from "toasters";
 
+import InputHelpBox from "../ui/InputHelpBox.vue";
+
 import validation from "../../validation";
 
 export default {
+	components: { InputHelpBox },
 	data() {
 		return {
 			username: {

frontend/src/components/ui/InputHelpBox.vue

@@ -0,0 +1,32 @@
+<template>
+	<p class="help" :class="valid ? 'is-success' : 'is-danger'">
+		{{ message }}
+	</p>
+</template>
+
+<script>
+export default {
+	props: {
+		message: {
+			type: String,
+			required: true
+		},
+		valid: {
+			type: Boolean,
+			required: true
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.help {
+	margin-top: 0 !important;
+	margin-bottom: 5px !important;
+	font-size: 12px;
+}
+</style>

frontend/src/pages/ResetPassword.vue

@@ -61,17 +61,11 @@
 								</p>
 							</div>
 							<transition name="fadein-helpbox">
-								<p
-									class="help"
+								<input-help-box
 									v-if="validation.email.entered"
-									:class="
-										validation.email.valid
-											? 'is-success'
-											: 'is-danger'
-									"
-								>
-									{{ validation.email.message }}
-								</p>
+									:valid="validation.email.valid"
+									:message="validation.email.message"
+								></input-help-box>
 							</transition>
 						</div>
 					</div>
@@ -141,17 +135,11 @@
 							</p>
 
 							<transition name="fadein-helpbox">
-								<p
-									class="help"
+								<input-help-box
 									v-if="validation.newPassword.entered"
-									:class="
-										validation.newPassword.valid
-											? 'is-success'
-											: 'is-danger'
-									"
-								>
-									{{ validation.newPassword.message }}
-								</p>
+									:valid="validation.newPassword.valid"
+									:message="validation.newPassword.message"
+								></input-help-box>
 							</transition>
 
 							<p
@@ -173,17 +161,13 @@
 							</p>
 
 							<transition name="fadein-helpbox">
-								<p
-									class="help"
+								<input-help-box
 									v-if="validation.newPasswordAgain.entered"
-									:class="
-										validation.newPasswordAgain.valid
-											? 'is-success'
-											: 'is-danger'
+									:valid="validation.newPasswordAgain.valid"
+									:message="
+										validation.newPasswordAgain.message
 									"
-								>
-									{{ validation.newPasswordAgain.message }}
-								</p>
+								></input-help-box>
 							</transition>
 
 							<a
@@ -242,12 +226,13 @@ import Toast from "toasters";
 
 import MainHeader from "../components/layout/MainHeader.vue";
 import MainFooter from "../components/layout/MainFooter.vue";
+import InputHelpBox from "../components/ui/InputHelpBox.vue";
 
 import io from "../io";
 import validation from "../validation";
 
 export default {
-	components: { MainHeader, MainFooter },
+	components: { MainHeader, MainFooter, InputHelpBox },
 	props: {
 		mode: {
 			default: "reset",

frontend/src/pages/Settings/index.vue

@@ -217,7 +217,7 @@ export default {
 		height: fit-content;
 
 		.save-changes {
-			margin-top: 20px;
+			margin-top: 30px;
 
 			&:disabled {
 				background-color: $light-grey !important;
@@ -225,6 +225,10 @@ export default {
 			}
 		}
 
+		.control:not(:first-of-type) {
+			margin: 10px 0;
+		}
+
 		label {
 			font-size: 14px;
 			color: $dark-grey-2;

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

@@ -25,12 +25,10 @@
 			>
 		</p>
 		<transition name="fadein-helpbox">
-			<p
-				class="help"
-				:class="validation.username.valid ? 'is-success' : 'is-danger'"
-			>
-				{{ validation.username.message }}
-			</p>
+			<input-help-box
+				:valid="validation.username.valid"
+				:message="validation.username.message"
+			></input-help-box>
 		</transition>
 
 		<p class="control is-expanded">
@@ -43,15 +41,14 @@
 				v-if="modifiedUser.email"
 				v-model="modifiedUser.email.address"
 				@blur="onInputBlur('email')"
+				autocomplete="off"
 			/>
 		</p>
 		<transition name="fadein-helpbox">
-			<p
-				class="help"
-				:class="validation.email.valid ? 'is-success' : 'is-danger'"
-			>
-				{{ validation.email.message }}
-			</p>
+			<input-help-box
+				:valid="validation.email.valid"
+				:message="validation.email.message"
+			></input-help-box>
 		</transition>
 
 		<transition name="saving-changes-transition" mode="out-in">
@@ -74,9 +71,11 @@ import Toast from "toasters";
 import validation from "../../../validation";
 import io from "../../../io";
 
+import InputHelpBox from "../../../components/ui/InputHelpBox.vue";
 import SaveButton from "../mixins/SaveButton.vue";
 
 export default {
+	components: { InputHelpBox },
 	mixins: [SaveButton],
 	data() {
 		return {

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

@@ -34,17 +34,11 @@
 			</p>
 
 			<transition name="fadein-helpbox">
-				<p
-					class="help"
+				<input-help-box
 					v-if="validation.newPassword.entered"
-					:class="
-						validation.newPassword.valid
-							? 'is-success'
-							: 'is-danger'
-					"
-				>
-					{{ validation.newPassword.message }}
-				</p>
+					:valid="validation.newPassword.valid"
+					:message="validation.newPassword.message"
+				></input-help-box>
 			</transition>
 
 			<p class="control">
@@ -153,7 +147,10 @@ import { mapGetters, mapState } from "vuex";
 import io from "../../../io";
 import validation from "../../../validation";
 
+import InputHelpBox from "../../../components/ui/InputHelpBox.vue";
+
 export default {
+	components: { InputHelpBox },
 	data() {
 		return {
 			serverDomain: "",