Added basic login.

pages/auth/login/+Page.vue

@@ -0,0 +1,186 @@
+<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
+				v-model="username"
+				placeholder="Username or e-mail"
+				class="input"
+			>
+
+			<div class="password-container">
+				<input
+					v-model="password"
+					:type="showPassword ? 'input' : 'password'"
+					placeholder="Password"
+					class="password input"
+				>
+
+				<div
+					class="password-show"
+					@click="showPassword = !showPassword"
+				>
+					<Icon
+						v-show="!showPassword"
+						icon="eye"
+						class="password-show"
+					/>
+
+					<Icon
+						v-show="showPassword"
+						icon="eye-blocked"
+						class="password-show"
+					/>
+				</div>
+			</div>
+
+			<button class="button button-submit">Log in</button>
+
+			<a
+				href="/signup"
+				class="link"
+			>Create an account</a>
+		</form>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { post } from '#/src/api.js';
+import navigate from '#/src/navigate.js';
+
+const pageContext = inject('pageContext');
+const user = pageContext.user;
+
+const username = ref('');
+const password = ref('');
+
+const errorMsg = ref(null);
+const showPassword = ref(false);
+
+async function login() {
+	errorMsg.value = null;
+
+	try {
+		await post('/session', {
+			username: username.value,
+			password: password.value,
+			redirect: pageContext.urlParsed.search.r,
+		});
+
+		navigate(decodeURIComponent(pageContext.urlParsed.search.r), null, { redirect: true });
+	} catch (error) {
+		errorMsg.value = error.message;
+	}
+}
+</script>
+
+<style scoped>
+.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(--shadow);
+	}
+
+	&: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;
+}
+</style>

pages/auth/login/+route.js

@@ -0,0 +1 @@
+export default '/login';

pages/users/@username/+Page.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="profile">
+		<div class="profile-header">
+			<img
+				v-if="profile.avatar"
+				:src="profile.avatar"
+				class="avatar"
+			>
+
+			<h2 class="username">{{ profile.username }}</h2>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const pageContext = inject('pageContext');
+const profile = pageContext.pageProps.profile;
+
+console.log('profile', profile);
+</script>
+
+<style scoped>
+.profile-header {
+	display: flex;
+	align-items: center;
+	padding: .5rem 1rem;
+    color: var(--highlight-strong-30);
+    background: var(--grey-dark-40);
+}
+
+.username {
+	margin: 0;
+}
+
+.avatar {
+	width: 2rem;
+	height: 2rem;
+	border-radius: .25rem;
+	margin-right: 1rem;
+}
+</style>

pages/users/@username/+onBeforeRender.js

@@ -0,0 +1,14 @@
+import { fetchUser } from '#/src/users.js';
+
+export async function onBeforeRender(pageContext) {
+	const profile = await fetchUser(pageContext.routeParams.username);
+
+	return {
+		pageContext: {
+			title: profile.username,
+			pageProps: {
+				profile, // differentiate from authed 'user'
+			},
+		},
+	};
+}

pages/users/@username/+route.js

@@ -0,0 +1 @@
+export default '/user/@username';