<template>
	<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">
					<div id="actions">
						<a
							class="button is-primary"
							href="#"
							@click="submitModal()"
							>Login</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;Login with GitHub
						</a>
					</div>
					<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>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions } from "vuex";

import Toast from "toasters";

export default {
	data() {
		return {
			email: "",
			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.value
			})
				.then(res => {
					if (res.status === "success") window.location.reload();
				})
				.catch(err => new Toast(err.message));
		},
		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);
		},
		...mapActions("modalVisibility", ["closeModal", "openModal"]),
		...mapActions("user/auth", ["login"])
	}
};
</script>

<style lang="scss" scoped>
.night-mode {
	.modal-card,
	.modal-card-head,
	.modal-card-body,
	.modal-card-foot {
		background-color: var(--dark-grey-3);
	}

	.label,
	p:not(.help) {
		color: var(--light-grey-2);
	}
}

#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-start;
	height: 0;
	margin: 5px 0;
}

.modal-card-foot {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.button.is-github {
	background-color: var(--dark-grey-2);
	color: var(--white) !important;
}

.is-github:focus {
	background-color: var(--dark-grey-4);
}
.is-primary:focus {
	background-color: var(--primary-color) !important;
}

.invert {
	filter: brightness(5);
}

a {
	color: var(--primary-color);
}
</style>
