feat: small improvements to Register/Login

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

frontend/src/components/modals/Login.vue

@@ -1,79 +1,118 @@
 <template>
-	<div class="modal is-active">
-		<div
-			class="modal-background"
-			@click="
-				closeModal({
-					sector: 'header',
-					modal: 'login'
-				})
-			"
-		/>
-		<div class="modal-card">
-			<header class="modal-card-head">
-				<p class="modal-card-title">Login</p>
-				<button
-					class="delete"
-					@click="
-						closeModal({
-							sector: 'header',
-							modal: 'login'
-						})
-					"
-				/>
-			</header>
-			<section class="modal-card-body">
-				<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
-				<form>
-					<p class="control">
-						<label class="label">Email</label>
-						<input
-							v-model="email"
-							class="input"
-							type="email"
-							placeholder="Email..."
-						/>
-					</p>
-					<p class="control">
-						<label class="label">Password</label>
-						<input
-							v-model="password"
-							class="input"
-							type="password"
-							placeholder="Password..."
-							@keypress="
-								$parent.submitOnEnter(submitModal, $event)
-							"
-						/>
-					</p>
-					<br />
-					<p>
-						By logging in/registering you agree to our
-						<router-link to="/terms"> Terms of Service </router-link
-						>&nbsp;and
-						<router-link to="/privacy"> Privacy Policy </router-link
-						>.
-					</p>
-				</form>
-			</section>
-			<footer class="modal-card-foot">
-				<a class="button is-primary" href="#" @click="submitModal()"
-					>Submit</a
-				>
-				<a
-					class="button is-github"
-					:href="apiDomain + '/auth/github/authorize'"
-					@click="githubRedirect()"
-				>
-					<div class="icon">
-						<img class="invert" src="/assets/social/github.svg" />
+	<div>
+		<metadata title="Login" v-if="isPage" />
+		<div class="modal is-active">
+			<div class="modal-background" @click="closeLoginModal()" />
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Login</p>
+					<button
+						v-if="!isPage"
+						class="delete"
+						@click="closeLoginModal()"
+					/>
+				</header>
+
+				<section class="modal-card-body">
+					<form>
+						<!-- email address -->
+						<p class="control">
+							<label class="label">Email</label>
+							<input
+								v-model="email"
+								class="input"
+								type="email"
+								placeholder="Email..."
+							/>
+						</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..."
+								@keypress="
+									$parent.submitOnEnter(submitModal, $event)
+								"
+							/>
+							<a @click="togglePasswordVisibility()">
+								<i class="material-icons">
+									{{
+										!password.visible
+											? "visibility"
+											: "visibility_off"
+									}}
+								</i>
+							</a>
+						</div>
+
+						<router-link
+							id="forgot-password"
+							href="#"
+							to="/reset_password"
+							@click.native="closeLoginModal()"
+						>
+							Forgot password?
+						</router-link>
+
+						<br />
+						<p>
+							By logging in you agree to our
+							<router-link
+								to="/terms"
+								@click.native="closeLoginModal()"
+							>
+								Terms of Service
+							</router-link>
+							&nbsp;and
+							<router-link
+								to="/privacy"
+								@click.native="closeLoginModal()"
+							>
+								Privacy Policy </router-link
+							>.
+						</p>
+					</form>
+				</section>
+
+				<footer class="modal-card-foot">
+					<router-link to="/register" v-if="isPage">
+						Don't have an account?
+					</router-link>
+					<a v-else href="#" @click="changeToRegisterModal()">
+						Don't 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;Login with GitHub
+						</a>
+						<a
+							class="button is-primary"
+							href="#"
+							@click="submitModal()"
+							>Login</a
+						>
 					</div>
-					&nbsp;&nbsp;Login with GitHub
-				</a>
-				<a href="/reset_password" @click="resetPassword()"
-					>Forgot password?</a
-				>
-			</footer>
+				</footer>
+			</div>
 		</div>
 	</div>
 </template>
@@ -87,37 +126,53 @@ export default {
 	data() {
 		return {
 			email: "",
-			password: "",
-			apiDomain: ""
+			password: {
+				value: "",
+				visible: false
+			},
+			apiDomain: "",
+			isPage: false
 		};
 	},
 	async mounted() {
 		this.apiDomain = await lofig.get("apiDomain");
+
+		if (this.$route.path === "/login") this.isPage = true;
 	},
 	methods: {
 		submitModal() {
 			this.login({
 				email: this.email,
-				password: this.password
+				password: this.password.value
 			})
 				.then(res => {
 					if (res.status === "success") window.location.reload();
 				})
 				.catch(err => new Toast(err.message));
 		},
-		resetPassword() {
-			this.closeModal({ sector: "header", modal: "login" });
-			this.$router.go("/reset_password");
+		togglePasswordVisibility() {
+			if (this.$refs.password.type === "password") {
+				this.$refs.password.type = "text";
+				this.password.visible = true;
+			} else {
+				this.$refs.password.type = "password";
+				this.password.visible = false;
+			}
+		},
+		changeToRegisterModal() {
+			if (!this.isPage) {
+				this.closeLoginModal();
+				this.openModal({ sector: "header", modal: "register" });
+			}
+		},
+		closeLoginModal() {
+			if (!this.isPage)
+				this.closeModal({ sector: "header", modal: "login" });
 		},
 		githubRedirect() {
 			localStorage.setItem("github_redirect", this.$route.path);
-			console.log(
-				"Yes",
-				this.$route.path,
-				localStorage.getItem("github_redirect")
-			);
 		},
-		...mapActions("modalVisibility", ["closeModal"]),
+		...mapActions("modalVisibility", ["closeModal", "openModal"]),
 		...mapActions("user/auth", ["login"])
 	}
 };
@@ -138,6 +193,32 @@ export default {
 	}
 }
 
+#password-container {
+	display: flex;
+	align-items: center;
+
+	a {
+		width: 0;
+		margin-left: -30px;
+		z-index: 0;
+		top: 2px;
+		position: relative;
+		color: var(--light-grey-1);
+	}
+}
+
+#forgot-password {
+	display: flex;
+	justify-content: flex-end;
+	height: 0;
+	margin-top: 5px;
+}
+
+.modal-card-foot {
+	display: flex;
+	justify-content: space-between;
+}
+
 .button.is-github {
 	background-color: var(--dark-grey-2);
 	color: var(--white) !important;

frontend/src/components/modals/Register.vue

@@ -1,28 +1,17 @@
 <template>
 	<div class="modal is-active">
-		<div
-			class="modal-background"
-			@click="
-				closeModal({
-					sector: 'header',
-					modal: 'register'
-				})
-			"
-		/>
+		<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="
-						closeModal({
-							sector: 'header',
-							modal: 'register'
-						})
-					"
+					@click="closeRegisterModal()"
 				/>
 			</header>
 			<section class="modal-card-body">
+				<!-- email address -->
 				<p class="control">
 					<label class="label">Email</label>
 					<input
@@ -42,6 +31,7 @@
 					></input-help-box>
 				</transition>
 
+				<!-- username -->
 				<p class="control">
 					<label class="label">Username</label>
 					<input
@@ -60,17 +50,32 @@
 					></input-help-box>
 				</transition>
 
+				<!-- 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)"
 					/>
-				</p>
+					<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"
@@ -82,26 +87,48 @@
 				<br />
 
 				<p>
-					By logging in/registering you agree to our
-					<router-link to="/terms"> Terms of Service </router-link
-					>&nbsp;and
-					<router-link to="/privacy"> Privacy Policy </router-link>.
+					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">
-				<a class="button is-primary" href="#" @click="submitModal()"
-					>Submit</a
-				>
-				<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
+				<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>
+					<a class="button is-primary" href="#" @click="submitModal()"
+						>Register</a
+					>
+				</div>
 			</footer>
 		</div>
 	</div>
@@ -134,6 +161,7 @@ export default {
 				value: "",
 				valid: false,
 				entered: false,
+				visible: false,
 				message: "Please enter a valid password."
 			},
 			recaptcha: {
@@ -141,7 +169,8 @@ export default {
 				token: "",
 				enabled: false
 			},
-			apiDomain: ""
+			apiDomain: "",
+			isPage: false
 		};
 	},
 	watch: {
@@ -194,6 +223,8 @@ export default {
 		}
 	},
 	async mounted() {
+		if (this.$route.path === "/register") this.isPage = true;
+
 		this.apiDomain = await lofig.get("apiDomain");
 
 		lofig.get("recaptcha").then(obj => {
@@ -221,6 +252,25 @@ export default {
 		});
 	},
 	methods: {
+		togglePasswordVisibility() {
+			if (this.$refs.password.type === "password") {
+				this.$refs.password.type = "text";
+				this.password.visible = true;
+			} else {
+				this.$refs.password.type = "password";
+				this.password.visible = false;
+			}
+		},
+		changeToLoginModal() {
+			if (!this.isPage) {
+				this.closeRegisterModal();
+				this.openModal({ sector: "header", modal: "login" });
+			}
+		},
+		closeRegisterModal() {
+			if (!this.isPage)
+				this.closeModal({ sector: "header", modal: "login" });
+		},
 		submitModal() {
 			if (
 				!this.username.valid ||
@@ -246,7 +296,7 @@ export default {
 		githubRedirect() {
 			localStorage.setItem("github_redirect", this.$route.path);
 		},
-		...mapActions("modalVisibility", ["closeModal"]),
+		...mapActions("modalVisibility", ["closeModal", "openModal"]),
 		...mapActions("user/auth", ["register"])
 	}
 };
@@ -267,6 +317,25 @@ export default {
 	}
 }
 
+#password-container {
+	display: flex;
+	align-items: center;
+
+	a {
+		width: 0;
+		margin-left: -30px;
+		z-index: 0;
+		top: 2px;
+		position: relative;
+		color: var(--light-grey-1);
+	}
+}
+
+.modal-card-foot {
+	display: flex;
+	justify-content: space-between;
+}
+
 .button.is-github {
 	background-color: var(--dark-grey-2);
 	color: var(--white) !important;

frontend/src/store/modules/modalVisibility.js

@@ -32,11 +32,11 @@ const state = {
 const getters = {};
 
 const actions = {
-	closeModal: async ({ commit }, data) => {
-		if (data.modal === "register") {
-			const recaptchaEnabled = await lofig.get("recaptcha.enabled");
-			if (recaptchaEnabled) window.location.reload();
-		}
+	closeModal: ({ commit }, data) => {
+		if (data.modal === "register")
+			lofig.get("recaptcha.enabled").then(enabled => {
+				if (enabled) window.location.reload();
+			});
 
 		commit("closeModal", data);
 		commit("closeCurrentModal");