<script setup>
import { inject, onMounted, ref } from 'vue';

import Password from '#/components/form/password.vue';

import { post } from '#/src/api.js';
import navigate from '#/src/navigate.js';

const pageContext = inject('pageContext');
const user = pageContext.user;
const allowSignup = pageContext.env.allowSignup;
const allowRecovery = pageContext.env.emailEnabled;

const username = ref('');
const password = ref('');

const submitted = ref(false);
const errorMsg = ref(null);
const userInput = ref(null);

async function login() {
	submitted.value = true;
	errorMsg.value = null;

	try {
		const loginUser = await post('/session', {
			username: username.value,
			password: password.value,
			redirect: pageContext.urlParsed.search.r,
		});

		navigate(pageContext.urlParsed.search.r ? decodeURIComponent(pageContext.urlParsed.search.r) : `/user/${loginUser.username}`, null, { redirect: true });
	}
	catch (error) {
		errorMsg.value = error.message;
	}
	finally {
		submitted.value = false;
	}
}

onMounted(() => {
	userInput.value?.focus();
});
</script>

<template>
	<div class="login-container">
		<div v-if="user">
			You are already logged in as {{ user.username }}.

			<ul>
				<li>
					<a
						:href="`/user/${user.username}`"
						class="link"
					>View my profile</a>
				</li>

				<li>
					<a
						href="/updates"
						class="link"
					>Check out latest porn updates</a>
				</li>

				<li>
					<a
						href="/actors"
						class="link"
					>Browse the hottest porn stars</a>
				</li>
			</ul>
		</div>

		<form
			v-else
			class="login-panel"
			@submit.prevent="login"
		>
			<div
				v-if="errorMsg"
				class="error"
			>{{ errorMsg }}</div>

			<input
				ref="userInput"
				v-model="username"
				placeholder="Username or e-mail"
				class="input"
			>

			<Password
				:password="password"
				@input="(newPassword) => password = newPassword"
			/>

			<button
				class="button button-submit"
				:disabled="submitted"
			>Log in</button>

			<a
				v-if="allowSignup"
				href="/signup"
				class="link"
			>Create an account</a>

			<a
				v-if="allowRecovery"
				href="/recovery"
				class="link"
			>I forgot my password</a>
		</form>
	</div>
</template>

<style scoped>
.input {
	width: 100%;
}

.login-container {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	background: var(--background-base-10);
}

.login-panel {
	width: 20rem;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	margin: 1rem;
	border-radius: .5rem;
	box-shadow: 0 0 3px var(--shadow-weak-30);
	background: var(--background-base);
	font-size: 1rem;

	.button {
		justify-content: center;
	}

	.link {
		margin-top: .5rem;
		text-align: center;
	}
}

.password-container {
	display: flex;
	position: relative;
}

.password {
	flex-grow: 1;
}

.password-show {
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	padding: 0 1rem 0 .5rem;

	.icon {
		fill: var(--glass);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}

.error {
	background: var(--error);
	color: var(--text-light);
	padding: .75rem 1rem;
	border-radius: .25rem;
	margin-bottom: .5rem;
	font-size: .9rem;
	font-weight: bold;
	text-align: center;
}

.button-submit {
	padding: .75rem 1rem;
}
</style>
