Implemented login page

materialious/src/lib/i18n/locales/en.json

@@ -7,9 +7,18 @@
 	"loadMore": "Load more",
 	"views": "views",
 	"login": "Login",
+	"username": "Username",
+	"password": "Password",
+	"invalidPassword": "Invalid password",
+	"usernameTaken": "Username taken",
+	"createAccount": "Create account",
+	"needRegister": "I need to register",
+	"needLogin": "I need to login",
 	"recommendedVideos": "Recommended Videos",
 	"playlistVideos": "Playlist Videos",
-	"invidiousLogin": "Please log in with your Invidious account",
+	"invidiousLogin": "Please log in with your Invidious account.",
+	"materialiousLogin": "Please login with your Materialious account.",
+	"materialiousCreate": "Please create your Materialious account.",
 	"invalidInstance": "Please verify the URL. If it's correct, the instance may be down or may not support third-party clients.",
 	"invidiousBlockWarning": "Invidious is currently being blocked by Google. If videos aren't loading for this instance, please use this instance on Materialious on {android} or {desktop} to get around this with local video fallback.",
 	"videos": "videos",

materialious/src/routes/(app)/+layout.svelte

@@ -117,6 +117,7 @@
 
 	async function login() {
 		if (isOwnBackend()?.internalAuth) {
+			goto(resolve('/internal/login', {}));
 			return;
 		}
 
@@ -499,11 +500,11 @@
 	<form onsubmit={usernamePasswordLogin}>
 		<div class="field label border" class:invalid={loginError}>
 			<input id="username" bind:value={rawUsername} name="username" type="text" />
-			<label for="username">Username</label>
+			<label for="username">{$_('username')}</label>
 		</div>
 		<div class="field label border" class:invalid={loginError}>
 			<input bind:value={rawPassword} name="password" type="password" />
-			<label for="password">Password</label>
+			<label for="password">{$_('password')}</label>
 		</div>
 
 		<nav class="right-align no-space">

materialious/src/routes/(app)/internal/login/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { createUserBackend, loginUserBackend } from '$lib/backend';
+	import { _ } from '$lib/i18n';
+
+	let needToRegister = $state(false);
+
+	let username = $state('');
+	let rawPassword = $state('');
+
+	let failed = $state(false);
+	async function onLogin(event: Event) {
+		event.preventDefault();
+
+		if (needToRegister) {
+			failed = !(await createUserBackend(username, rawPassword));
+		} else {
+			failed = !(await loginUserBackend(username, rawPassword));
+		}
+
+		if (!failed) {
+			goto(resolve('/', {}), { replaceState: true });
+		}
+	}
+</script>
+
+<nav class="center-align">
+	<article class="padding">
+		<h3>{$_(needToRegister ? 'createAccount' : 'login')}</h3>
+		<p class="no-margin">{$_(needToRegister ? 'materialiousCreate' : 'materialiousLogin')}</p>
+
+		<form onsubmit={onLogin}>
+			<div
+				class="field label prefix surface-container-highest"
+				class:invalid={failed && needToRegister}
+			>
+				<i>person</i>
+				<input bind:value={username} name="username" type="text" />
+				<label for="username">{$_('username')}</label>
+				{#if failed && needToRegister}
+					<output class="invalid">{$_('usernameTaken')}</output>
+				{/if}
+			</div>
+			<div
+				class="field label prefix surface-container-highest"
+				class:invalid={failed && !needToRegister}
+			>
+				<i>password</i>
+				<input bind:value={rawPassword} name="password" type="password" />
+				<label for="password">{$_('password')}</label>
+				{#if failed && !needToRegister}
+					<output class="invalid">{$_('invalidPassword')}</output>
+				{/if}
+			</div>
+
+			<nav class="right-align">
+				<button
+					type="button"
+					class="secondary"
+					onclick={() => {
+						needToRegister = !needToRegister;
+						failed = false;
+					}}
+				>
+					<span>{$_(!needToRegister ? 'needRegister' : 'needLogin')}</span>
+				</button>
+
+				<button type="submit">
+					<i>done</i>
+					<span>{$_(needToRegister ? 'createAccount' : 'login')}</span>
+				</button>
+			</nav>
+		</form>
+	</article>
+</nav>
+
+<style>
+	article {
+		width: 400px;
+	}
+
+	@media screen and (max-width: 400px) {
+		article {
+			width: 100%;
+		}
+	}
+</style>

materialious/src/routes/(app)/internal/login/+page.ts

@@ -0,0 +1,9 @@
+import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
+import { isOwnBackend } from '$lib/shared';
+
+export async function load() {
+	if (!isOwnBackend()?.internalAuth) {
+		goto(resolve('/', {}), { replaceState: true });
+	}
+}