Added signup page.

pages/auth/login/+Page.vue

@@ -98,13 +98,13 @@ async function login() {
 	errorMsg.value = null;
 
 	try {
-		await post('/session', {
+		const loginUser = await post('/session', {
 			username: username.value,
 			password: password.value,
 			redirect: pageContext.urlParsed.search.r,
 		});
 
-		navigate(decodeURIComponent(pageContext.urlParsed.search.r), null, { redirect: true });
+		navigate(pageContext.urlParsed.search.r ? decodeURIComponent(pageContext.urlParsed.search.r) : `/user/${loginUser.username}`, null, { redirect: true });
 	} catch (error) {
 		errorMsg.value = error.message;
 	}

pages/auth/signup/+Page.vue

@@ -0,0 +1,236 @@
+<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
+			autocomplete="off"
+			class="login-panel"
+			@submit.prevent="signup"
+		>
+			<div
+				v-if="errorMsg"
+				class="error"
+			>{{ errorMsg }}</div>
+
+			<input
+				v-model="username"
+				placeholder="Username"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="email"
+				type="email"
+				placeholder="E-mail"
+				class="input"
+				required
+			>
+
+			<div class="password-container">
+				<input
+					v-model="password"
+					:type="showPassword ? 'input' : 'password'"
+					autocomplete="new-password"
+					minlength="3"
+					placeholder="Password"
+					class="password input"
+					required
+				>
+
+				<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>
+
+			<div class="password-container">
+				<input
+					v-model="passwordConfirm"
+					:type="showPassword ? 'input' : 'password'"
+					autocomplete="new-password"
+					minlength="3"
+					placeholder="Confirm password"
+					class="password input"
+					required
+				>
+
+				<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">Sign up</button>
+
+			<a
+				href="/login"
+				class="link"
+			>I already have 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 email = ref('');
+const password = ref('');
+const passwordConfirm = ref('');
+
+const errorMsg = ref(null);
+const showPassword = ref(false);
+
+async function signup() {
+	errorMsg.value = null;
+
+	if (password.value !== passwordConfirm.value) {
+		errorMsg.value = 'Passwords do not match';
+		return;
+	}
+
+	try {
+		const newUser = await post('/users', {
+			username: username.value,
+			email: email.value,
+			password: password.value,
+			redirect: pageContext.urlParsed.search.r,
+		});
+
+		navigate(`/user/${newUser.username}`, 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/signup/+route.js

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

pages/users/@username/+Page.vue

@@ -17,8 +17,6 @@ import { inject } from 'vue';
 
 const pageContext = inject('pageContext');
 const profile = pageContext.pageProps.profile;
-
-console.log('profile', profile);
 </script>
 
 <style scoped>

pages/users/@username/+onBeforeRender.js

@@ -1,8 +1,14 @@
+import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+
 import { fetchUser } from '#/src/users.js';
 
 export async function onBeforeRender(pageContext) {
 	const profile = await fetchUser(pageContext.routeParams.username);
 
+	if (!profile) {
+		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
+	}
+
 	return {
 		pageContext: {
 			title: profile.username,