From 5a2ba9c2e7605bb788bc406184547d22c6436867 Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Mon, 23 Dec 2024 11:13:27 -0500
Subject: v2.1.0, refactor w/ crimson

---
 src/web/_views/_modal/about.php       |   9 ++
 src/web/_views/_modal/new_post.php    |  56 +++++++
 src/web/_views/_modal/register.php    | 178 ++++++++++++++++++++++
 src/web/_views/_template/comment.php  |  12 ++
 src/web/_views/_template/error.php    |  12 ++
 src/web/_views/_template/modal.php    |  14 ++
 src/web/_views/_template/post.php     |  86 +++++++++++
 src/web/_views/_template/posts.php    |  32 ++++
 src/web/_views/_template/toast.php    |  22 +++
 src/web/_views/apps/auth/login.php    |  87 -----------
 src/web/_views/apps/error/main.php    |   6 -
 src/web/_views/apps/home/main.php     |  27 ----
 src/web/_views/apps/people/card.php   |  15 --
 src/web/_views/apps/people/footer.php |   3 -
 src/web/_views/apps/people/header.php |   6 -
 src/web/_views/apps/people/main.php   |  72 ---------
 src/web/_views/apps/people/people.php |   7 -
 src/web/_views/apps/profile/main.php  | 269 ----------------------------------
 src/web/_views/apps/settings/main.php | 200 -------------------------
 src/web/_views/auth/main.php          |  87 +++++++++++
 src/web/_views/error/main.php         |   6 +
 src/web/_views/head.php               |  15 +-
 src/web/_views/header.php             |  38 ++---
 src/web/_views/home/main.php          |  27 ++++
 src/web/_views/modal/about.php        |   9 --
 src/web/_views/modal/new_post.php     |  59 --------
 src/web/_views/modal/register.php     | 178 ----------------------
 src/web/_views/people/card.php        |  15 ++
 src/web/_views/people/footer.php      |   3 +
 src/web/_views/people/header.php      |   6 +
 src/web/_views/people/main.php        |  76 ++++++++++
 src/web/_views/people/people.php      |   5 +
 src/web/_views/profile/main.php       | 269 ++++++++++++++++++++++++++++++++++
 src/web/_views/settings/main.php      | 197 +++++++++++++++++++++++++
 src/web/_views/template/comment.php   |  15 --
 src/web/_views/template/error.php     |  12 --
 src/web/_views/template/modal.php     |  14 --
 src/web/_views/template/post.php      |  87 -----------
 src/web/_views/template/posts.php     |  25 ----
 src/web/_views/template/toast.php     |  26 ----
 40 files changed, 1127 insertions(+), 1155 deletions(-)
 create mode 100644 src/web/_views/_modal/about.php
 create mode 100644 src/web/_views/_modal/new_post.php
 create mode 100644 src/web/_views/_modal/register.php
 create mode 100644 src/web/_views/_template/comment.php
 create mode 100644 src/web/_views/_template/error.php
 create mode 100644 src/web/_views/_template/modal.php
 create mode 100644 src/web/_views/_template/post.php
 create mode 100644 src/web/_views/_template/posts.php
 create mode 100644 src/web/_views/_template/toast.php
 delete mode 100644 src/web/_views/apps/auth/login.php
 delete mode 100644 src/web/_views/apps/error/main.php
 delete mode 100644 src/web/_views/apps/home/main.php
 delete mode 100644 src/web/_views/apps/people/card.php
 delete mode 100644 src/web/_views/apps/people/footer.php
 delete mode 100644 src/web/_views/apps/people/header.php
 delete mode 100644 src/web/_views/apps/people/main.php
 delete mode 100644 src/web/_views/apps/people/people.php
 delete mode 100644 src/web/_views/apps/profile/main.php
 delete mode 100644 src/web/_views/apps/settings/main.php
 create mode 100644 src/web/_views/auth/main.php
 create mode 100644 src/web/_views/error/main.php
 create mode 100644 src/web/_views/home/main.php
 delete mode 100644 src/web/_views/modal/about.php
 delete mode 100644 src/web/_views/modal/new_post.php
 delete mode 100644 src/web/_views/modal/register.php
 create mode 100644 src/web/_views/people/card.php
 create mode 100644 src/web/_views/people/footer.php
 create mode 100644 src/web/_views/people/header.php
 create mode 100644 src/web/_views/people/main.php
 create mode 100644 src/web/_views/people/people.php
 create mode 100644 src/web/_views/profile/main.php
 create mode 100644 src/web/_views/settings/main.php
 delete mode 100644 src/web/_views/template/comment.php
 delete mode 100644 src/web/_views/template/error.php
 delete mode 100644 src/web/_views/template/modal.php
 delete mode 100644 src/web/_views/template/post.php
 delete mode 100644 src/web/_views/template/posts.php
 delete mode 100644 src/web/_views/template/toast.php

(limited to 'src/web/_views')

diff --git a/src/web/_views/_modal/about.php b/src/web/_views/_modal/about.php
new file mode 100644
index 0000000..4bc7a4f
--- /dev/null
+++ b/src/web/_views/_modal/about.php
@@ -0,0 +1,9 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div id="about-menu" class="modal-content">
+	<div><span class="logo">xssbook</span></div>
+	<div><span class="mb"><?=ucfirst(lang('version'))?></span></div>
+	<div><span><?=ucfirst(lang('copyright'))?></span></div>
+	<div><a class="btn btn-primary mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a></div>
+	<div><p>For reports of abuse, please email <a class="btn-primary" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p></div>
+</div>
diff --git a/src/web/_views/_modal/new_post.php b/src/web/_views/_modal/new_post.php
new file mode 100644
index 0000000..aff19a5
--- /dev/null
+++ b/src/web/_views/_modal/new_post.php
@@ -0,0 +1,56 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<form id="new-post-form">
+<div class="modal-content new-post-modal">
+	<div class="row">
+		<?=pfp($session)?>
+		<div class="col ml">
+			<strong><?=$session['first_name'] . ' ' . $session['last_name']?></strong>
+			<span class="subtext"><?=ucfirst(lang('now'))?></span>
+		</div>
+	</div>
+	<textarea
+		type="text"
+		name="content"
+		id="new-post-content"
+		placeholder="<?=ucfirst(lang('action_new_post_text', sub: [$session['first_name']]))?>"
+	></textarea>
+</div>
+<div class="modal-footer">
+	<?=ilang('action_submit',
+		id: 'new-post-submit',
+		class: 'btn btn-submit btn-alt grow',
+		attrs: array('type' => 'submit'),
+		type: 'button',
+	)?>
+</div>
+</form>
+<script>
+	$('#new-post-form').submit(function(e) {
+		e.preventDefault();
+		let content = $('#new-post-content').val();
+		let me = $(this);
+
+		const getPost = function(data) {
+			if (data) {
+				$('#post-container').prepend(data);
+			}
+			me.closest('.modal-container').remove();
+		}
+
+		const onPost = function(data) {
+			let id = data[0].id;
+			$.get({
+				url: '/_post/post?id=' + id,
+				success: getPost
+			});
+		}
+
+		$.ajax({
+			url: '/api/post',
+			method: 'POST',
+			data: JSON.stringify({ content }),
+			success: onPost
+		});
+	});
+</script>
diff --git a/src/web/_views/_modal/register.php b/src/web/_views/_modal/register.php
new file mode 100644
index 0000000..2126d0d
--- /dev/null
+++ b/src/web/_views/_modal/register.php
@@ -0,0 +1,178 @@
+
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<form id="register-form">
+<div class="modal-content register-modal col">
+	<label>
+		<?=ucwords(lang('ph_basic_info'))?>
+	</label>
+	<div class="row mt">
+		<div class="form-input grow">
+			<input
+				type="text"
+				name="first_name"
+				id="register-first-name"
+				placeholder=" "
+			>
+			<label for="first_name">
+				<?=ucwords(lang('ph_first_name'))?>
+			</label>
+		</div>
+		<div class="form-input ml grow">
+			<input
+				type="text"
+				name="last_name"
+				id="register-last-name"
+				placeholder=" "
+			>
+			<label for="last_name">
+				<?=ucwords(lang('ph_last_name'))?>
+			</label>
+		</div>
+	</div>
+	<div class="form-input mt">
+		<input
+			type="text"
+			name="username"
+			id="register-username"
+			placeholder=" "
+		>
+		<label for="username">
+			<?=ucwords(lang('ph_username'))?>
+		</label>
+	</div>
+	<div class="form-input mt">
+		<input
+			type="password"
+			name="password"
+			id="register-password"
+			placeholder=" "
+		>
+		<label for="password">
+			<?=ucwords(lang('ph_password'))?>
+		</label>
+	</div>
+	<div class="form-input mt">
+		<input
+			type="text"
+			name="email"
+			id="register-email"
+			placeholder=" "
+		>
+		<label for="email">
+			<?=ucwords(lang('ph_email'))?>
+		</label>
+	</div>
+	<label for="birth_date" class="mt">
+		<?=ucwords(lang('ph_birth_date'))?>
+	</label>
+	<input
+		class="mt"
+		type="date"
+		name="birth_date"
+		id="register-birth-date"
+	>
+	<label for="gender" class="mt">
+		<?=ucwords(lang('ph_gender'))?>
+	</label>
+	<div class="row mt" data-type="radio" data-name="gender-wrapper">
+		<div class="form-radio mr">
+			<input
+				type="radio"
+				id="register-gender-male"
+				name="gender"
+				value="Male"
+			>
+			<label
+				for="register-gender-male"
+				class="static"
+			>
+				<?=ucwords(lang('ph_gender_male'))?>
+			</label>
+		</div>
+		<div class="form-radio mr">
+			<input
+				type="radio"
+				id="register-gender-female"
+				name="gender"
+				value="Female"
+			>
+			<label
+				for="register-gender-female"
+				class="static"
+			>
+				<?=ucwords(lang('ph_gender_female'))?>
+			</label>
+		</div>
+		<div class="form-radio">
+			<input
+				type="radio"
+				id="register-gender-lettuce"
+				name="gender"
+				value="Lettuce"
+			>
+			<label
+				for="register-gender-lettuce"
+				class="static"
+			>
+				<?=ucwords(lang('ph_gender_lettuce'))?>
+			</label>
+		</div>
+	</div>
+</div>
+<div class="modal-footer">
+		<?=ilang('action_register',
+			id: 'register-submit',
+			class: 'btn btn-submit btn-alt grow',
+			attrs: array('type' => 'submit'),
+			type: 'button',
+		)?>
+</div>
+</form>
+<script>
+	$('#register-form').submit(function(e) {
+		e.preventDefault();
+
+		let form = event.target;
+		let formFields = form.elements;
+
+		let first_name = formFields.first_name.value.trim();
+		let last_name = formFields.last_name.value.trim();
+		let username = formFields.username.value.trim();
+		let password = formFields.password.value.trim();
+		let email = formFields.email.value.trim();
+		let birth_date = formFields.birth_date.value.trim();
+		let gender = formFields.gender.value.trim();
+
+		if(birth_date === '') {
+			errorToast('toast_date_empty');
+			return;
+		}
+
+		const onSuccess = function() {
+			$.ajax({
+				url: '/api/rpc/login',
+				method: 'POST',
+				data: JSON.stringify({
+					username, password
+				}),
+				success: onLogin
+			});
+		};
+
+		$.ajax({
+			url: '/api/user',
+			method: 'POST',
+			data: JSON.stringify({
+				first_name,
+				last_name,
+				username,
+				password,
+				email,
+				birth_date,
+				gender,
+			}),
+			success: onSuccess
+		});
+	});
+</script>
diff --git a/src/web/_views/_template/comment.php b/src/web/_views/_template/comment.php
new file mode 100644
index 0000000..b947ff6
--- /dev/null
+++ b/src/web/_views/_template/comment.php
@@ -0,0 +1,12 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div class="comment row mt">
+	<?=pfp($user)?>
+	<div class="ml col sub-card">
+		<div class="row">
+			<strong><?=$this->format_name($user)?></strong>
+			<span class="subtext ml"><?=$this->format_date($comment['created'])?></span>
+		</div>
+		<?=$comment['content']?>
+	</div>
+</div>
diff --git a/src/web/_views/_template/error.php b/src/web/_views/_template/error.php
new file mode 100644
index 0000000..2e02cb1
--- /dev/null
+++ b/src/web/_views/_template/error.php
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title><?=$code . ' - ' . $msg?></title>
+	</head>
+	<body>
+		<center>
+			<h1><?=$code . ' ' . $msg?></h1>
+		</center>
+		<hr>
+	</body>
+</html>
diff --git a/src/web/_views/_template/modal.php b/src/web/_views/_template/modal.php
new file mode 100644
index 0000000..8e4545d
--- /dev/null
+++ b/src/web/_views/_template/modal.php
@@ -0,0 +1,14 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div class="modal-container">
+	<div class="modal">
+		<div class="modal-header row">
+			<span class="modal-title"><?=$title?></span>
+			<?=ilang(
+				'action_modal_close',
+				class: 'btn btn-action modal-close',
+			)?>
+		</div>
+		<?php $this->view('_modal/' . $content, $data) ?>
+	</div>
+</div>
diff --git a/src/web/_views/_template/post.php b/src/web/_views/_template/post.php
new file mode 100644
index 0000000..f7f5de2
--- /dev/null
+++ b/src/web/_views/_template/post.php
@@ -0,0 +1,86 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div class="post card">
+	<div class="row">
+		<?=pfp($user)?>
+		<div class="col ml">
+			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
+			<span class="subtext"><?=$this->format_date($post['created'])?></span>
+		</div>
+	</div>
+	<p>
+		<?=$post['content']?>
+	</p>
+<?php
+	$liked = $post['like_id'] ? 'btn-primary' : '';
+	$post_attrs = array(
+		'postId' => $post['id']
+	);
+	if ($post['like_id'] !== NULL) {
+		$post_attrs['likeId'] = $post['like_id'];
+	}
+?>
+	<span class="likes subtext"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
+<?php if ($session): ?>
+	<hr>
+	<div class="row">
+		<?=ilang('action_like',
+			class: 'btn grow action-like ' . $liked,
+			attrs: $post_attrs
+		)?>
+		<?=ilang('action_comment', class: 'btn grow action-comment',
+			onclick: '$(\'#action-new-comment-' . $post['id'] . '\').focus()'
+		)?>
+	</div>
+	<hr>
+<?php endif; ?>
+	<div class="col comments pb">
+		<?php
+			$_GET = array('id' => $post['id']);
+			$cdata = $this->comments();
+
+			$loaded = $cdata['loaded'];
+			$max = $cdata['max'];
+			$page_size = $cdata['page_size'];
+			$total = $post['comment_count'];
+
+			if ($loaded >= $page_size && $page_size < $total) {
+				echo ilang('action_load_comments',
+					class: 'action-load-comments btn btn-blend mt',
+					attrs: array(
+						'postId' => $post['id'],
+						'loaded' => $loaded,
+						'pageSize' => $page_size,
+						'commentCount' => $total,
+						'commentMax' => $max,
+					)
+				);
+			}
+
+		?>
+	</div>
+<?php if ($session): ?>
+	<div class="row pb">
+		<?=pfp($session)?>
+		<form class="ml action-new-comment-form row">
+			<input
+				type="hidden"
+				name="id"
+				value="<?=$post['id']?>"
+			>
+			<input
+				id="action-new-comment-<?=$post['id']?>"
+				class="action-new-comment btn grow btn-alt"
+				postId="<?=$post['id']?>"
+				autocomplete="off"
+				type="text"
+				name="text"
+				placeholder="<?=ucfirst(lang('action_new_comment_text'))?>"
+				aria-label="<?=ucfirst(lang('action_new_comment_tip'))?>"
+			>
+		</form>
+	</div>
+<?php endif; ?>
+</div>
+
+
diff --git a/src/web/_views/_template/posts.php b/src/web/_views/_template/posts.php
new file mode 100644
index 0000000..4202e67
--- /dev/null
+++ b/src/web/_views/_template/posts.php
@@ -0,0 +1,32 @@
+<div id="post-container">
+<?php
+	$pdata = $this->posts();
+
+	$loaded = $pdata['loaded'];
+	$page_size = $pdata['page_size'];
+	$total = $pdata['total'];
+	$max = $pdata['max'];
+	$filterUid = $pdata['filter_uid'];
+?>
+<?php if ($loaded == 0): ?>
+	<div id="no-posts" class="card">
+		<span class="no-posts-title mb"><?=lang('no_posts_found')?></span>
+		<span><?=random_value(explode("\n", lang('no_posts_found_ext')))?></span>
+	</div>
+<?php endif; ?>
+<?php
+	if ($loaded >= $page_size && $page_size < $total) {
+		echo ilang('action_load_posts',
+			id: 'action-load-posts',
+			class: 'btn btn-blend grow mb mt',
+			attrs: array(
+				'loaded' => $loaded,
+				'pageSize' => $page_size,
+				'postCount' => $total,
+				'postMax' => $max,
+				'userId' => $filterUid ? json_encode($filterUid) : ''
+			)
+		);
+	}
+?>
+</div>
diff --git a/src/web/_views/_template/toast.php b/src/web/_views/_template/toast.php
new file mode 100644
index 0000000..902955c
--- /dev/null
+++ b/src/web/_views/_template/toast.php
@@ -0,0 +1,22 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<?php
+	$params = array();
+
+	if ($detail)
+		$params[] = lang('api_column_' . $detail);
+
+	if ($hint)
+		$params[] = $hint;
+
+	$lang_msg = lang($msg, '', sub: $params);
+	if(!$lang_msg)
+		$lang_msg = $msg;
+	else
+		$lang_msg = ucfirst($lang_msg);
+
+?>
+<div class="toast <?=$type?>">
+	<?=$lang_msg?>
+	<?=ilang('action_close', class: 'action-close-toast')?>
+</div>
diff --git a/src/web/_views/apps/auth/login.php b/src/web/_views/apps/auth/login.php
deleted file mode 100644
index ac4cd02..0000000
--- a/src/web/_views/apps/auth/login.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<main id="main">
-	<div class="branding col">
-		<h1>xssbook</h1>
-		<span><?=ucfirst(lang('login_branding'))?></span>
-	</div>
-	<div class="form card col">
-		<form id="action-login" class="col" action="">
-			<div class="form-input mb">
-				<input
-					type="text"
-					name="username"
-					id="login-username"
-					placeholder=" "
-					autofocus="true"
-				>
-				<label for="username">
-					<?=ucfirst(lang('ph_username'))?>
-				</label>
-			</div>
-			<div class="form-input mb">
-				<input
-					type="password"
-					name="password"
-					id="login-password"
-					placeholder=" "
-				>
-				<label for="password">
-					<?=ucfirst(lang('ph_password'))?>
-				</label>
-			</div>
-			<?=ilang('action_login',
-				class: 'btn btn-primary btn-alt grow',
-				button: TRUE,
-				attrs: array('type' => 'submit')
-			)?>
-			<?/*=ilang('action_forgot_passwd',
-				class: 'btn btn-blend btn-primary grow mt'
-			)*/?>
-		</form>
-		<hr>
-		<?=ilang('action_create_account',
-			id: 'action-register',
-			class: 'btn btn-success btn-alt grow',
-			button: TRUE,
-			attrs: array('type' => 'submit')
-		)?>
-	</div>
-	<script>
-
-		const onLogin = function(data) {
-			let jwt = data.token;
-
-			$.ajax({
-				url: '/auth/update',
-				method: 'POST',
-				data: JSON.stringify({
-					key: 'jwt',
-					value: jwt
-				}),
-				success: function (_) {
-					window.location = '/home';
-				}
-			})
-		};
-
-		$('#action-login').on('submit', function(e) {
-			e.preventDefault();
-			let username = $('#login-username').val();
-			let password = $('#login-password').val();
-
-			$.ajax({
-				url: '/api/rpc/login',
-				method: 'POST',
-				data: JSON.stringify({ username, password }),
-				success: onLogin
-			});
-		});
-
-		$('#action-register').on('click', function() {
-			$.get( "/modal/register", function (data) {
-				$(document.body).append(data);
-			});
-		})
-	</script>
-</main>
diff --git a/src/web/_views/apps/error/main.php b/src/web/_views/apps/error/main.php
deleted file mode 100644
index bcc6f90..0000000
--- a/src/web/_views/apps/error/main.php
+++ /dev/null
@@ -1,6 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<main id="main">
-	<h1><?=$title?></h1>
-	<span><?=ucfirst($msg)?></span>
-</main>
diff --git a/src/web/_views/apps/home/main.php b/src/web/_views/apps/home/main.php
deleted file mode 100644
index 864034a..0000000
--- a/src/web/_views/apps/home/main.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<main id="main">
-<?php if ($self): ?>
-	<div id="new-post" class="card">
-		<div class="row grow">
-			<?=pfp($self)?>
-			<a
-				id="action-new-post"
-				class="btn btn-alt grow ml"
-				autocomplete="off"
-				aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
-			>
-				<?=ucfirst(lang('action_new_post_text', sub: [$self['first_name']]))?>
-			</a>
-		</div>
-		<script>
-			$('#action-new-post').on('click', function() {
-				$.get( "/modal/new_post", function (data) {
-					$(document.body).append(data);
-				});
-			})
-		</script>
-	</div>
-<?php endif; ?>
-	<?php $this->post_controller->index(); ?>
-</main>
diff --git a/src/web/_views/apps/people/card.php b/src/web/_views/apps/people/card.php
deleted file mode 100644
index 93b1350..0000000
--- a/src/web/_views/apps/people/card.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<a
-	class="card profile"
-	href="/profile?id=<?=$user['id']?>"
->
-	<div class="col">
-		<?=pfp($user, FALSE)?>
-		<div class="col ml">
-			<span class="name"><?=$this->format_model->name($user)?></span>
-			<span class="subtext"><?=$user['username']?></span>
-		</div>
-	</div>
-</a>
-<?
diff --git a/src/web/_views/apps/people/footer.php b/src/web/_views/apps/people/footer.php
deleted file mode 100644
index f18e031..0000000
--- a/src/web/_views/apps/people/footer.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-</main>
diff --git a/src/web/_views/apps/people/header.php b/src/web/_views/apps/people/header.php
deleted file mode 100644
index b1099ec..0000000
--- a/src/web/_views/apps/people/header.php
+++ /dev/null
@@ -1,6 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<main id="main">
-	<h1 class="title"><?=ucfirst(lang('title'))?></h1>
-	<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
-	<hr>
diff --git a/src/web/_views/apps/people/main.php b/src/web/_views/apps/people/main.php
deleted file mode 100644
index ec84ab9..0000000
--- a/src/web/_views/apps/people/main.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<div id="people-container" class="col">
-<?php
-	$pdata = $this->people();
-?>
-</div>
-<?php
-	$loaded = count($pdata['users']);
-	$page_size = $pdata['page_size'];
-	$total = $pdata['count'];
-	$max = $pdata['max_id'];
-	$filter_uid = $pdata['filter_uid'];
-	$filer_type = $pdata['filter_type'];
-?>
-<?php if ($loaded >= $page_size && $page_size < $total): ?>
-	<?=ilang('action_load_users',
-			id: 'action-load-users',
-			class: 'btn btn-blend grow mb',
-			attrs: array(
-				'loaded' => $loaded,
-				'pageSize' => $page_size,
-				'userCount' => $total,
-				'userMax' => $max,
-				'filterUid' => $filter_uid,
-				'filterType' => $filer_type
-			)
-	)?>
-	<script>
-
-		$('#action-load-users').on('click', function() {
-			let me = $(this);
-			let page = me.attr('page');
-			if (!page) {
-				page = '1';
-			}
-			let newPage = Number(page) + 1;
-			me.attr('page', newPage + '');
-
-			let loaded = Number(me.attr('loaded'));
-			let pageSize = Number(me.attr('pageSize'));
-			let userCount = Number(me.attr('userCount'));
-			let userMax = Number(me.attr('userMax'));
-
-			let filterType = me.attr('filterType');
-			let filterUid = me.attr('filterUid');
-
-			let url = '/people/people?page=' + page + '&max=' + userMax;
-
-			if (filterType && filterUid) {
-				url += '&filter=' + filterType + '&uid=' + filterUid;
-			}
-
-			$.get(url, function (data) {
-				if (data === '') {
-					me.remove();
-					return;
-				}
-
-				let container = $('#people-container');
-				container.append(data);
-
-				loaded += pageSize;
-				if (loaded >= userCount) {
-					me.remove();
-				} else {
-					me.attr('loaded', loaded + '');
-				}
-			});
-		});
-	</script>
-<?php endif ?>
diff --git a/src/web/_views/apps/people/people.php b/src/web/_views/apps/people/people.php
deleted file mode 100644
index 5fc0d17..0000000
--- a/src/web/_views/apps/people/people.php
+++ /dev/null
@@ -1,7 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<?php
-	foreach($users as $user) {
-		$this->view('apps/people/card', array('user' => $user));
-	}
-?>
diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php
deleted file mode 100644
index b2ad496..0000000
--- a/src/web/_views/apps/profile/main.php
+++ /dev/null
@@ -1,269 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<main id="main">
-	<div id="profile-header-container">
-		<div id="profile-header" class="col">
-			<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
-			<div class="info row">
-				<div class="pfp-wrapper">
-					<?=pfp($user)?>
-				</div>
-				<div class="col content grow">
-					<div class="row grow">
-						<div class="col mb">
-							<strong class="name"><?=$this->format_model->name($user)?></strong>
-							<span class="subtext"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
-						</div>
-						<?php if (
-							$this->main->session &&
-							(!isset($self) || $self['id'] != $user['id'])
-						): ?>
-						<div class="follow">
-							<?=ilang(
-								'action_follow',
-								id: 'action-follow-follow',
-								class: 'btn btn-alt',
-								style: (!$following && !$followed) ? '' : 'display: none',
-								sub: [$user['first_name']]
-							)?>
-							<?=ilang(
-								'action_follow_back',
-								id: 'action-follow-follow-back',
-								class: 'btn btn-alt',
-								style: (!$following && $followed) ? '' : 'display: none',
-								sub: [$user['first_name']]
-							)?>
-							<?=ilang(
-								'action_following',
-								id: 'action-follow-following',
-								class: 'btn btn-alt btn-primary',
-								style: ($following && !$followed) ? '' : 'display: none',
-								sub: [$user['first_name']]
-							)?>
-							<?=ilang(
-								'action_friends',
-								id: 'action-follow-friends',
-								class: 'btn btn-alt btn-primary',
-								style: ($following && $followed) ? '' : 'display: none',
-								sub: [$user['first_name']]
-							)?>
-						</div>
-						<script>
-							let following = <?=json_encode($following)?>;
-							let followed = <?=json_encode($followed)?>;
-							let followId = <?=json_encode($follow_id)?>;
-							let followee_id = <?=json_encode($user['id'])?>;
-							let btns = {};
-
-							const disableBtn = (btn) => {
-								btn.css('display', 'none');
-							};
-
-							const enableBtn	= (btn) => {
-								btn.css('display', '');
-							};
-
-							const updateFollow = () => {
-								for (let btn of Object.values(btns)) {
-									disableBtn(btn);
-								}
-								if (!following && !followed) {
-									enableBtn(btns['follow']);
-								} else if (!following && followed) {
-									enableBtn(btns['follow-back']);
-								} else if (following && !followed) {
-									enableBtn(btns['following']);
-								} else if (following && followed) {
-									enableBtn(btns['friends']);
-								}
-							}
-
-							const onPatchFollow = (data) => {
-								following = data[0].value;
-								updateFollow();
-							}
-
-							const onPostFollow = (data) => {
-								followId = data[0].id;
-								following = true;
-								updateFollow();
-							}
-
-							const onClickFollow = () => {
-								if (followId) {
-									$.ajax({
-										url: '/api/follow?id=eq.' + followId,
-										method: 'PATCH',
-										data: JSON.stringify({ followee_id, value: !following }),
-										success: onPatchFollow
-									});
-								} else {
-									$.ajax({
-										url: '/api/follow',
-										method: 'POST',
-										data: JSON.stringify({ followee_id, value: !following }),
-										success: onPostFollow,
-									});
-								}
-							}
-
-							const loadBtn = (name) => {
-								let btn = $('#action-follow-' + name);
-								btn.on('click', onClickFollow);
-
-								btns[name] = btn;
-							};
-
-							loadBtn('follow');
-							loadBtn('follow-back');
-							loadBtn('following');
-							loadBtn('friends');
-						</script>
-						<?php endif; ?>
-					</div>
-					<?php if(strlen($user['profile_bio']) > 0): ?>
-						<br>
-						<strong><?=ucfirst(lang('bio'))?></strong>
-						<span class="subtext"><?=$user['profile_bio']?></span>
-					<?php endif; ?>
-				</div>
-			</div>
-			<hr>
-			<div class="row options">
-				<?=ilang('action_posts',
-					sub: [$user['first_name']],
-					class: 'btn btn-primary btn-border',
-					id: 'action-posts'
-				)?>
-				<?=ilang('action_about',
-					sub: [$user['first_name']],
-					class: 'btn',
-					id: 'action-about'
-				)?>
-				<?=ilang('action_followers',
-					sub: [$user['first_name']],
-					class: 'btn',
-					id: 'action-followers'
-				)?>
-				<?=ilang('action_following',
-					sub: [$user['first_name']],
-					class: 'btn',
-					id: 'action-following'
-				)?>
-		</div>
-		</div>
-	</div>
-	<div id="tab-container" class="mt">
-		<div id="tab-posts" class="tab">
-			<?php
-				$_GET['user_id'] = $user['id'];
-				$this->post_controller->index();
-			?>
-		</div>
-		<div id="tab-about" class="tab card">
-			<h1><?=ucfirst(lang('about_general'))?></h1>
-			<table>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_general_username'))?></strong></td>
-					<td><?=$user['username']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_general_full_name'))?></strong></td>
-					<td><?=$user['first_name'] . ' ' . $user['last_name']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_general_email'))?></strong></td>
-					<td><?=$user['email']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_general_gender'))?></strong></td>
-					<td><?=$user['gender']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_general_birth_date'))?></strong></td>
-					<td><?=$this->main->date($user['birth_date'])?></td>
-				</tr>
-			</table>
-			<h1><?=ucfirst(lang('about_stats'))?></h1>
-			<table>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_posts'))?></strong></td>
-					<td><?=$user['post_count']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_like'))?></strong></td>
-					<td><?=$user['like_count']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_comments'))?></strong></td>
-					<td><?=$user['comment_count']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_following'))?></strong></td>
-					<td><?=$user['followed_count']?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_joined'))?></strong></td>
-					<td><?=$this->main->date($user['created'])?></td>
-				</tr>
-				<tr>
-					<td><strong><?=ucfirst(lang('about_stats_seen'))?></strong></td>
-					<td><?=$this->main->date($user['seen'])?></td>
-				</tr>
-			</table>
-		</div>
-		<div id="tab-followers" class="tab">
-		<?php
-			$_GET['filter'] = 'follower';
-			$_GET['uid'] = $user['id'];
-			$this->people_controller->content();
-		?>
-		</div>
-		<div id="tab-following" class="tab">
-		<?php
-			$_GET['filter'] = 'followee';
-			$_GET['uid'] = $user['id'];
-			$this->people_controller->content();
-		?>
-		</div>
-	</div>
-	<script>
-		let tabs = {};
-
-		const disableTab = (tab) => {
-			tab.btn.removeClass('btn-primary');
-			tab.btn.removeClass('btn-border');
-			tab.tab.css('display', 'none');
-		};
-
-		const enableTab = (tab) => {
-			tab.btn.addClass('btn-primary');
-			tab.btn.addClass('btn-border');
-			tab.tab.css('display', '');
-		};
-
-		const loadTab = (name, disable = true) => {
-			let btn = $('#action-' + name);
-			btn.on('click', function() {
-				for (let tab of Object.values(tabs)) {
-					disableTab(tab);
-				}
-				enableTab(tabs[name]);
-			});
-
-			tabs[name] = {
-				'btn': btn,
-				'tab': $('#tab-' + name)
-			};
-
-			if (disable) {
-				disableTab(tabs[name]);
-			}
-		};
-
-		loadTab('posts', false);
-		loadTab('about');
-		loadTab('followers');
-		loadTab('following');
-	</script>
-</main>
diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php
deleted file mode 100644
index 2033acc..0000000
--- a/src/web/_views/apps/settings/main.php
+++ /dev/null
@@ -1,200 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-
-<?php
-
-$user = $this->main->user();
-
-function __create_form($user, $col) {
-	$ph = ucfirst(lang('ph_' . $col));
-	$val = $user[$col];
-	return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\">
-			<div class=\"form-input mb\" style=\"flex: 1\">
-				<input
-					type=\"text\"
-					name=\"{$col}\"
-					id=\"{$col}\"
-					placeholder=\" \"
-					value=\"{$val}\"
-				>
-				<label for=\"{$col}\">
-					{$ph}
-				</label>
-			</div>
-			<input type=\"hidden\" name=\"col\" value=\"{$col}\">
-			<input type=\"hidden\" name=\"uid\" value=\"{$user['id']}\">
-			<button
-				class=\"btn btn-submit ml\"
-				style=\"flex: 0; height: fit-content;\"
-			><i class=\"mi\">check</i></button>
-		</form>";
-}
-
-?>
-
-<script>
-
-function onSuccess() {
-	successToast(<?=json_encode(ucfirst(lang('settings_success')))?>);
-}
-
-function handleSubmit(e) {
-	e.preventDefault();
-	let el = e.target.elements;
-	let col = el.col.value;
-	let uid = el.uid.value;
-	let val = el[col].value;
-
-	$.ajax({
-		url: '/api/user?id=eq.' + uid,
-		method: 'PATCH',
-		data: JSON.stringify({ [col]: val }),
-		success: onSuccess
-	});
-
-}
-
-function handlePassword(e) {
-	e.preventDefault();
-	let el = e.target.elements;
-	let curr = el.curr_password.value;
-	let newp = el.new_password.value;
-
-	$.ajax({
-		url: '/api/rpc/update_password',
-		method: 'POST',
-		data: JSON.stringify({
-			new_password: newp,
-			current_password: curr
-		}),
-		success: onSuccess
-	})
-}
-
-const toBase64 = file => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = reject;
-});
-
-function updateMedia(media_type) {
-
-	var input = document.createElement('input');
-	input.type = 'file';
-
-	input.onchange = async (e) => {
-		var file = e.target.files[0];
-		var data = (await toBase64(file)).split(";");
-		var mime = data[0].split(":")[1];
-		var content = data[1].split(",")[1];
-
-		$.ajax({
-			url: '/api/rpc/update_user_media',
-			method: 'POST',
-			data: JSON.stringify({
-				media_type, mime, content
-			}),
-			success: onSuccess
-		});
-
-	}
-
-	input.click();
-
-}
-
-function resetMedia(media_type) {
-	$.ajax({
-		url: '/api/rpc/delete_user_media',
-		method: 'POST',
-		data: JSON.stringify({
-			media_type
-		}),
-		success: onSuccess
-	});
-}
-</script>
-
-<main id="main">
-	<div id="settings" class="card">
-		<h1><?=ucfirst(lang('title'))?></h1>
-		<hr class="mt">
-		<h2><?=ucfirst(lang('general_title'))?></h2>
-		<strong><?=ucfirst(lang('general_desc'))?></strong>
-		<?=__create_form($user, 'username')?>
-		<?=__create_form($user, 'email')?>
-		<?=__create_form($user, 'first_name')?>
-		<?=__create_form($user, 'last_name')?>
-		<?=__create_form($user, 'gender')?>
-		<?=__create_form($user, 'profile_bio')?>
-		<hr class="mt">
-		<h2><?=ucfirst(lang('security_title'))?></h2>
-		<strong><?=ucfirst(lang('security_desc'))?></strong>
-		<form action="" class="col mt settings-form" onsubmit="handlePassword(event)">
-			<div class="form-input mb" style="flex: 1">
-				<input
-					type="password"
-					name="curr_password"
-					id="curr_password"
-					placeholder=" "
-				>
-				<label for="curr_password">
-					<?=ucwords(lang('ph_current_pass'))?>
-				</label>
-			</div>
-			<div class="form-input mb" style="flex: 1">
-				<input
-					type="password"
-					name="new_password"
-					id="new_password"
-					placeholder=" "
-				>
-				<label for="new_password">
-					<?=ucwords(lang('ph_new_pass'))?>
-				</label>
-			</div>
-			<button
-				class="btn grow btn-alt btn-submit"
-				style="flex: 0; height: fit-content;"
-			><?=lang('update')?></button>
-		</form>
-		<hr class="mt">
-		<h2><?=ucfirst(lang('media_title'))?></h2>
-		<strong><?=ucfirst(lang('media_desc'))?></strong>
-		<h3><?=ucfirst(lang('ph_avatar'))?></h3>
-		<div class="row">
-		<?=image(
-			"/api/rpc/profile_avatar?user_id={$user['id']}",
-			height: '100px'
-		)?>
-			<div class="col ml">
-				<button
-					class="btn btn-alt btn-primary"
-					onclick="updateMedia('avatar')"
-				><?=ucfirst(lang('update'))?></button>
-				<button
-					class="btn btn-alt btn-primary mt"
-					onclick="resetMedia('avatar')"
-				><?=ucfirst(lang('reset'))?></button>
-			</div>
-		</div>
-		<h3><?=ucfirst(lang('ph_banner'))?></h3>
-		<div class="row">
-		<?=image(
-			"/api/rpc/profile_banner?user_id={$user['id']}",
-			height: '100px'
-		)?>
-			<div class="col ml">
-				<button
-					class="btn btn-alt btn-primary"
-					onclick="updateMedia('banner')"
-				><?=ucfirst(lang('update'))?></button>
-				<button
-					class="btn btn-alt btn-primary mt"
-					onclick="resetMedia('banner')"
-				><?=ucfirst(lang('reset'))?></button>
-			</div>
-		</div>
-	</div>
-</main>
diff --git a/src/web/_views/auth/main.php b/src/web/_views/auth/main.php
new file mode 100644
index 0000000..9604770
--- /dev/null
+++ b/src/web/_views/auth/main.php
@@ -0,0 +1,87 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<main id="main">
+	<div class="branding col">
+		<h1>xssbook</h1>
+		<span><?=ucfirst(lang('login_branding'))?></span>
+	</div>
+	<div class="form card col">
+		<form id="action-login" class="col" action="">
+			<div class="form-input mb">
+				<input
+					type="text"
+					name="username"
+					id="login-username"
+					placeholder=" "
+					autofocus="true"
+				>
+				<label for="username">
+					<?=ucfirst(lang('ph_username'))?>
+				</label>
+			</div>
+			<div class="form-input mb">
+				<input
+					type="password"
+					name="password"
+					id="login-password"
+					placeholder=" "
+				>
+				<label for="password">
+					<?=ucfirst(lang('ph_password'))?>
+				</label>
+			</div>
+			<?=ilang('action_login',
+				class: 'btn btn-primary btn-alt grow',
+				type: 'button',
+				attrs: array('type' => 'submit')
+			)?>
+			<?/*=ilang('action_forgot_passwd',
+				class: 'btn btn-blend btn-primary grow mt'
+			)*/?>
+		</form>
+		<hr>
+		<?=ilang('action_create_account',
+			id: 'action-register',
+			class: 'btn btn-success btn-alt grow',
+			type: 'button',
+			attrs: array('type' => 'submit')
+		)?>
+	</div>
+	<script>
+
+		const onLogin = function(data) {
+			let jwt = data.token;
+
+			$.ajax({
+				url: '/auth/update',
+				method: 'POST',
+				data: JSON.stringify({
+					key: 'jwt',
+					value: jwt
+				}),
+				success: function (_) {
+					window.location = '/home';
+				}
+			})
+		};
+
+		$('#action-login').on('submit', function(e) {
+			e.preventDefault();
+			let username = $('#login-username').val();
+			let password = $('#login-password').val();
+
+			$.ajax({
+				url: '/api/rpc/login',
+				method: 'POST',
+				data: JSON.stringify({ username, password }),
+				success: onLogin
+			});
+		});
+
+		$('#action-register').on('click', function() {
+			$.get( "/_modal/register", function (data) {
+				$(document.body).append(data);
+			});
+		})
+	</script>
+</main>
diff --git a/src/web/_views/error/main.php b/src/web/_views/error/main.php
new file mode 100644
index 0000000..bcc6f90
--- /dev/null
+++ b/src/web/_views/error/main.php
@@ -0,0 +1,6 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<main id="main">
+	<h1><?=$title?></h1>
+	<span><?=ucfirst($msg)?></span>
+</main>
diff --git a/src/web/_views/head.php b/src/web/_views/head.php
index cca43a1..809ab36 100644
--- a/src/web/_views/head.php
+++ b/src/web/_views/head.php
@@ -4,23 +4,14 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<script>
-		<?php if ($this->main->session): ?>
-			var jwtStr = <?=json_encode($this->main->session['jwt'])?>;
+		<?php if ($session): ?>
+			var jwtStr = <?=json_encode($session['jwt'])?>;
 		<?php else: ?>
 			var jwtStr = null;
 		<?php endif; ?>
 		</script>
-	<?php
-		foreach ($js_files as $js) {
-			echo $this->main->link_js($js);
-		}
-		foreach ($css_files as $css) {
-			echo $this->main->link_css($css);
-		}
-	?>
+		<?=CRIMSON_META($this)?>
 		<title><?=$title?></title>
-		<!-- haa haa hee hee hoo hoo -->
-		<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
 	</head>
 	<body>
 		<div id="toast-container">
diff --git a/src/web/_views/header.php b/src/web/_views/header.php
index 7315afb..4ba15ed 100644
--- a/src/web/_views/header.php
+++ b/src/web/_views/header.php
@@ -1,7 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vim: syntax=php */ ?>
 <?php
-	$self = $this->main->user();
 	$this->view('head', $data);
 ?>
 		<header id="header">
@@ -11,41 +10,29 @@
 			<div class="center" :class="{hidden: !visible}">
 				<a
 					id="action-home"
-					class="btn <?=$this->main->info['app'] == 'home' ? 'btn-primary btn-border' : ''?>"
+					class="btn <?=ROUTER->req['app'] == 'home' ? 'btn-primary btn-border' : ''?>"
 					href="/home"
-					title="<?=ucfirst(lang('action_home_tip'))?>"
-				>
+					title="<?=ucfirst(lang('action_home_tip'))?>">
 					<i class="mi mi-lg">home</i>
 					<span><?=ucfirst(lang('action_home_text'))?></span>
 				</a>
 				<a
 					id="action-people"
-					class="btn <?=$this->main->info['app'] == 'people' ? 'btn-primary btn-border' : ''?>"
+					class="btn <?=ROUTER->req['app'] == 'people' ? 'btn-primary btn-border' : ''?>"
 					href="/people"
-					title="<?=ucfirst(lang('action_people_tip'))?>"
-				>
+					title="<?=ucfirst(lang('action_people_tip'))?>">
 					<i class="mi mi-lg">people</i>
 					<span><?=ucfirst(lang('action_people_text'))?></span>
 				</a>
-				<!--a
-					id="action-chat"
-					class="btn <?=$this->main->info['app'] == 'chat' ? 'btn-primary btn-border' : ''?>"
-					href="/chat"
-					title="<?=lang('action_chat_tip')?>"
-				>
-					<i class="mi mi-lg">chat</i>
-					<span><?=lang('action_chat_text')?></span>
-				</a-->
 			</div>
 			<div class="right">
 				<button
 					id="action-hamburger"
 					title="<?=ucfirst(lang('action_hamburger_tip'))?>"
-					class="btn mr"
-				>
+					class="btn mr">
 					<i class="mi mi-lg">menu</i>
 				</button>
-			<?php if($self): ?>
+			<?php if($session): ?>
 				<script>
 					var userMenu = null;
 
@@ -53,13 +40,13 @@
 						userMenu.toggleClass('hidden');
 					}
 				</script>
-				<?=pfp($self, FALSE, 'toggleUserMenu()')?>
+				<?=pfp($session, FALSE, 'toggleUserMenu()')?>
 				<div class="card col hidden" id="user-menu">
 					<span class="user-menu-header row mr">
-						<?=pfp($self, FALSE)?>
+						<?=pfp($session, FALSE)?>
 						<span class="col">
-							<strong><?=$this->format_model->name($self)?></strong>
-							<span class="subtext"><?=$self['username']?></span>
+							<strong><?=$this->format_name($session)?></strong>
+							<span class="subtext"><?=$session['username']?></span>
 						</span>
 					</span>
 					<hr>
@@ -67,13 +54,12 @@
 						'action_profile',
 						id: 'action-profile',
 						class: 'btn',
-						href: '/profile?id=' . $self['id']
+						href: '/profile?id=' . $session['id']
 					)?>
 					<?=ilang(
 						'action_xssbook_about',
 						id: 'action-xssbook-about',
 						class: 'btn',
-						click: 'viewAbout'
 					)?>
 					<?=ilang(
 						'action_settings',
@@ -94,7 +80,7 @@
 			</div>
 			<script>
 				$('#action-xssbook-about').on('click', function() {
-					$.get( "/modal/about", function (data) {
+					$.get( "/_modal/about", function (data) {
 						$(document.body).append(data);
 					});
 				})
diff --git a/src/web/_views/home/main.php b/src/web/_views/home/main.php
new file mode 100644
index 0000000..c9373d2
--- /dev/null
+++ b/src/web/_views/home/main.php
@@ -0,0 +1,27 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<main id="main">
+<?php if ($session): ?>
+	<div id="new-post" class="card">
+		<div class="row grow">
+			<?=pfp($session)?>
+			<a
+				id="action-new-post"
+				class="btn btn-alt grow ml"
+				autocomplete="off"
+				aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
+			>
+				<?=ucfirst(lang('action_new_post_text', sub: [$session['first_name']]))?>
+			</a>
+		</div>
+		<script>
+			$('#action-new-post').on('click', function() {
+				$.get( "/_modal/new_post", function (data) {
+					$(document.body).append(data);
+				});
+			})
+		</script>
+	</div>
+<?php endif; ?>
+	<?php $this->post_controller->index(); ?>
+</main>
diff --git a/src/web/_views/modal/about.php b/src/web/_views/modal/about.php
deleted file mode 100644
index 4bc7a4f..0000000
--- a/src/web/_views/modal/about.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<div id="about-menu" class="modal-content">
-	<div><span class="logo">xssbook</span></div>
-	<div><span class="mb"><?=ucfirst(lang('version'))?></span></div>
-	<div><span><?=ucfirst(lang('copyright'))?></span></div>
-	<div><a class="btn btn-primary mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a></div>
-	<div><p>For reports of abuse, please email <a class="btn-primary" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p></div>
-</div>
diff --git a/src/web/_views/modal/new_post.php b/src/web/_views/modal/new_post.php
deleted file mode 100644
index 66e6561..0000000
--- a/src/web/_views/modal/new_post.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<?php
-	$user = $this->main->user();
-?>
-<form id="new-post-form">
-<div class="modal-content new-post-modal">
-	<div class="row">
-		<?=pfp($user)?>
-		<div class="col ml">
-			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
-				<span class="subtext"><?=ucfirst(lang('now'))?></span>
-		</div>
-	</div>
-	<textarea
-		type="text"
-		name="content"
-		id="new-post-content"
-		placeholder="<?=ucfirst(lang('action_new_post_text', sub: [$user['first_name']]))?>"
-	></textarea>
-</div>
-<div class="modal-footer">
-		<?=ilang('action_submit',
-			id: 'new-post-submit',
-			class: 'btn btn-submit btn-alt grow',
-			attrs: array('type' => 'submit'),
-			button: TRUE
-		)?>
-</div>
-</form>
-<script>
-	$('#new-post-form').submit(function(e) {
-		e.preventDefault();
-		let content = $('#new-post-content').val();
-		let me = $(this);
-
-		const getPost = function(data) {
-			if (data) {
-				$('#post-container').prepend(data);
-			}
-			me.closest('.modal-container').remove();
-		}
-
-		const onPost = function(data) {
-			let id = data[0].id;
-			$.get({
-				url: '/_util/post/post?id=' + id,
-				success: getPost
-			});
-		}
-
-		$.ajax({
-			url: '/api/post',
-			method: 'POST',
-			data: JSON.stringify({ content }),
-			success: onPost
-		});
-	});
-</script>
diff --git a/src/web/_views/modal/register.php b/src/web/_views/modal/register.php
deleted file mode 100644
index 5c76fe9..0000000
--- a/src/web/_views/modal/register.php
+++ /dev/null
@@ -1,178 +0,0 @@
-
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<form id="register-form">
-<div class="modal-content register-modal col">
-	<label>
-		<?=ucwords(lang('ph_basic_info'))?>
-	</label>
-	<div class="row mt">
-		<div class="form-input grow">
-			<input
-				type="text"
-				name="first_name"
-				id="register-first-name"
-				placeholder=" "
-			>
-			<label for="first_name">
-				<?=ucwords(lang('ph_first_name'))?>
-			</label>
-		</div>
-		<div class="form-input ml grow">
-			<input
-				type="text"
-				name="last_name"
-				id="register-last-name"
-				placeholder=" "
-			>
-			<label for="last_name">
-				<?=ucwords(lang('ph_last_name'))?>
-			</label>
-		</div>
-	</div>
-	<div class="form-input mt">
-		<input
-			type="text"
-			name="username"
-			id="register-username"
-			placeholder=" "
-		>
-		<label for="username">
-			<?=ucwords(lang('ph_username'))?>
-		</label>
-	</div>
-	<div class="form-input mt">
-		<input
-			type="password"
-			name="password"
-			id="register-password"
-			placeholder=" "
-		>
-		<label for="password">
-			<?=ucwords(lang('ph_password'))?>
-		</label>
-	</div>
-	<div class="form-input mt">
-		<input
-			type="text"
-			name="email"
-			id="register-email"
-			placeholder=" "
-		>
-		<label for="email">
-			<?=ucwords(lang('ph_email'))?>
-		</label>
-	</div>
-	<label for="birth_date" class="mt">
-		<?=ucwords(lang('ph_birth_date'))?>
-	</label>
-	<input
-		class="mt"
-		type="date"
-		name="birth_date"
-		id="register-birth-date"
-	>
-	<label for="gender" class="mt">
-		<?=ucwords(lang('ph_gender'))?>
-	</label>
-	<div class="row mt" data-type="radio" data-name="gender-wrapper">
-		<div class="form-radio mr">
-			<input
-				type="radio"
-				id="register-gender-male"
-				name="gender"
-				value="Male"
-			>
-			<label
-				for="register-gender-male"
-				class="static"
-			>
-				<?=ucwords(lang('ph_gender_male'))?>
-			</label>
-		</div>
-		<div class="form-radio mr">
-			<input
-				type="radio"
-				id="register-gender-female"
-				name="gender"
-				value="Female"
-			>
-			<label
-				for="register-gender-female"
-				class="static"
-			>
-				<?=ucwords(lang('ph_gender_female'))?>
-			</label>
-		</div>
-		<div class="form-radio">
-			<input
-				type="radio"
-				id="register-gender-lettuce"
-				name="gender"
-				value="Lettuce"
-			>
-			<label
-				for="register-gender-lettuce"
-				class="static"
-			>
-				<?=ucwords(lang('ph_gender_lettuce'))?>
-			</label>
-		</div>
-	</div>
-</div>
-<div class="modal-footer">
-		<?=ilang('action_register',
-			id: 'register-submit',
-			class: 'btn btn-submit btn-alt grow',
-			attrs: array('type' => 'submit'),
-			button: TRUE
-		)?>
-</div>
-</form>
-<script>
-	$('#register-form').submit(function(e) {
-		e.preventDefault();
-
-		let form = event.target;
-		let formFields = form.elements;
-
-		let first_name = formFields.first_name.value.trim();
-		let last_name = formFields.last_name.value.trim();
-		let username = formFields.username.value.trim();
-		let password = formFields.password.value.trim();
-		let email = formFields.email.value.trim();
-		let birth_date = formFields.birth_date.value.trim();
-		let gender = formFields.gender.value.trim();
-
-		if(birth_date === '') {
-			errorToast('toast_date_empty');
-			return;
-		}
-
-		const onSuccess = function() {
-			$.ajax({
-				url: '/api/rpc/login',
-				method: 'POST',
-				data: JSON.stringify({
-					username, password
-				}),
-				success: onLogin
-			});
-		};
-
-		$.ajax({
-			url: '/api/user',
-			method: 'POST',
-			data: JSON.stringify({
-				first_name,
-				last_name,
-				username,
-				password,
-				email,
-				birth_date,
-				gender,
-			}),
-			success: onSuccess
-		});
-	});
-</script>
diff --git a/src/web/_views/people/card.php b/src/web/_views/people/card.php
new file mode 100644
index 0000000..7e040ba
--- /dev/null
+++ b/src/web/_views/people/card.php
@@ -0,0 +1,15 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<a
+	class="card profile"
+	href="/profile?id=<?=$user['id']?>"
+>
+	<div class="col">
+		<?=pfp($user, FALSE)?>
+		<div class="col ml">
+			<span class="name"><?=$this->format_name($user)?></span>
+			<span class="subtext"><?=$user['username']?></span>
+		</div>
+	</div>
+</a>
+<?
diff --git a/src/web/_views/people/footer.php b/src/web/_views/people/footer.php
new file mode 100644
index 0000000..f18e031
--- /dev/null
+++ b/src/web/_views/people/footer.php
@@ -0,0 +1,3 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+</main>
diff --git a/src/web/_views/people/header.php b/src/web/_views/people/header.php
new file mode 100644
index 0000000..b1099ec
--- /dev/null
+++ b/src/web/_views/people/header.php
@@ -0,0 +1,6 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<main id="main">
+	<h1 class="title"><?=ucfirst(lang('title'))?></h1>
+	<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
+	<hr>
diff --git a/src/web/_views/people/main.php b/src/web/_views/people/main.php
new file mode 100644
index 0000000..c602b2c
--- /dev/null
+++ b/src/web/_views/people/main.php
@@ -0,0 +1,76 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<div id="people-container" class="col">
+	<?php $pdata = $this->people(); ?>
+</div>
+<?php
+
+	$loaded = count($pdata['users']);
+	$page_size = $pdata['page_size'];
+	$total = $pdata['count'];
+	$max = $pdata['max_id'];
+	$filter_uid = $pdata['filter_uid'];
+	$filer_type = $pdata['filter_type'];
+
+?>
+<?php if ($loaded == 0): ?>
+	<div id="no-people" class="card">
+		<?=lang('no_people_found')?>
+	</div>
+<?php endif; ?>
+<?php if ($loaded >= $page_size && $page_size < $total): ?>
+	<?=ilang('action_load_users',
+			id: 'action-load-users',
+			class: 'btn btn-blend grow mb',
+			attrs: array(
+				'loaded' => $loaded,
+				'pageSize' => $page_size,
+				'userCount' => $total,
+				'userMax' => $max,
+				'filterUid' => $filter_uid,
+				'filterType' => $filer_type
+			)
+	)?>
+	<script>
+
+		$('#action-load-users').on('click', function() {
+			let me = $(this);
+			let page = me.attr('page');
+			if (!page) {
+				page = '1';
+			}
+			let newPage = Number(page) + 1;
+			me.attr('page', newPage + '');
+
+			let loaded = Number(me.attr('loaded'));
+			let pageSize = Number(me.attr('pageSize'));
+			let userCount = Number(me.attr('userCount'));
+			let userMax = Number(me.attr('userMax'));
+
+			let filterType = me.attr('filterType');
+			let filterUid = me.attr('filterUid');
+
+			let url = '/people/people?page=' + page + '&max=' + userMax;
+
+			if (filterType && filterUid) {
+				url += '&filter=' + filterType + '&uid=' + filterUid;
+			}
+
+			$.get(url, function (data) {
+				if (data === '') {
+					me.remove();
+					return;
+				}
+
+				let container = $('#people-container');
+				container.append(data);
+
+				loaded += pageSize;
+				if (loaded >= userCount) {
+					me.remove();
+				} else {
+					me.attr('loaded', loaded + '');
+				}
+			});
+		});
+	</script>
+<?php endif ?>
diff --git a/src/web/_views/people/people.php b/src/web/_views/people/people.php
new file mode 100644
index 0000000..8726f1d
--- /dev/null
+++ b/src/web/_views/people/people.php
@@ -0,0 +1,5 @@
+<?php /* Copyright (c) 2024 Freya Murphy */
+foreach($users as $user) {
+	$this->view('people/card', array('user' => $user));
+}
+?>
diff --git a/src/web/_views/profile/main.php b/src/web/_views/profile/main.php
new file mode 100644
index 0000000..3e7129c
--- /dev/null
+++ b/src/web/_views/profile/main.php
@@ -0,0 +1,269 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<main id="main">
+	<div id="profile-header-container">
+		<div id="profile-header" class="col">
+			<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
+			<div class="info row">
+				<div class="pfp-wrapper">
+					<?=pfp($user)?>
+				</div>
+				<div class="col content grow">
+					<div class="row grow">
+						<div class="col mb">
+							<strong class="name"><?=$this->format_name($user)?></strong>
+							<span class="subtext"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
+						</div>
+						<?php if (
+							$session &&
+							($session['id'] != $user['id'])
+						): ?>
+						<div class="follow">
+							<?=ilang(
+								'action_follow',
+								id: 'action-follow-follow',
+								class: 'btn btn-alt',
+								sub: [$user['first_name']],
+								style: (!$following && !$followed) ? '' : 'display: none',
+							)?>
+							<?=ilang(
+								'action_follow_back',
+								id: 'action-follow-follow-back',
+								class: 'btn btn-alt',
+								sub: [$user['first_name']],
+								style: (!$following && $followed) ? '' : 'display: none',
+							)?>
+							<?=ilang(
+								'action_following',
+								id: 'action-follow-following',
+								class: 'btn btn-alt btn-primary',
+								sub: [$user['first_name']],
+								style: ($following && !$followed) ? '' : 'display: none',
+							)?>
+							<?=ilang(
+								'action_friends',
+								id: 'action-follow-friends',
+								class: 'btn btn-alt btn-primary',
+								sub: [$user['first_name']],
+								style: ($following && $followed) ? '' : 'display: none',
+							)?>
+						</div>
+						<script>
+							let following = <?=json_encode($following)?>;
+							let followingId = <?=json_encode($following_id)?>;
+							let followed = <?=json_encode($followed)?>;
+							let followee_id = <?=json_encode($user['id'])?>;
+							let btns = {};
+
+							const disableBtn = (btn) => {
+								btn.css('display', 'none');
+							};
+
+							const enableBtn	= (btn) => {
+								btn.css('display', '');
+							};
+
+							const updateFollow = () => {
+								for (let btn of Object.values(btns)) {
+									disableBtn(btn);
+								}
+								if (!following && !followed) {
+									enableBtn(btns['follow']);
+								} else if (!following && followed) {
+									enableBtn(btns['follow-back']);
+								} else if (following && !followed) {
+									enableBtn(btns['following']);
+								} else if (following && followed) {
+									enableBtn(btns['friends']);
+								}
+							}
+
+							const onPatchFollow = (data) => {
+								following = data[0].value;
+								updateFollow();
+							}
+
+							const onPostFollow = (data) => {
+								followingId = data[0].id;
+								following = true;
+								updateFollow();
+							}
+
+							const onClickFollow = () => {
+								if (followingId) {
+									$.ajax({
+										url: '/api/follow?id=eq.' + followingId,
+										method: 'PATCH',
+										data: JSON.stringify({ followee_id, value: !following }),
+										success: onPatchFollow
+									});
+								} else {
+									$.ajax({
+										url: '/api/follow',
+										method: 'POST',
+										data: JSON.stringify({ followee_id, value: !following }),
+										success: onPostFollow,
+									});
+								}
+							}
+
+							const loadBtn = (name) => {
+								let btn = $('#action-follow-' + name);
+								btn.on('click', onClickFollow);
+
+								btns[name] = btn;
+							};
+
+							loadBtn('follow');
+							loadBtn('follow-back');
+							loadBtn('following');
+							loadBtn('friends');
+						</script>
+						<?php endif; ?>
+					</div>
+					<?php if(strlen($user['profile_bio']) > 0): ?>
+						<br>
+						<strong><?=ucfirst(lang('bio'))?></strong>
+						<span class="subtext"><?=$user['profile_bio']?></span>
+					<?php endif; ?>
+				</div>
+			</div>
+			<hr>
+			<div class="row options">
+				<?=ilang('action_posts',
+					sub: [$user['first_name']],
+					class: 'btn btn-primary btn-border',
+					id: 'action-posts'
+				)?>
+				<?=ilang('action_about',
+					sub: [$user['first_name']],
+					class: 'btn',
+					id: 'action-about'
+				)?>
+				<?=ilang('action_followers',
+					sub: [$user['first_name']],
+					class: 'btn',
+					id: 'action-followers'
+				)?>
+				<?=ilang('action_following',
+					sub: [$user['first_name']],
+					class: 'btn',
+					id: 'action-following'
+				)?>
+		</div>
+		</div>
+	</div>
+	<div id="tab-container" class="mt">
+		<div id="tab-posts" class="tab">
+			<?php
+				$_GET['user_id'] = $user['id'];
+				$this->post_controller->index();
+			?>
+		</div>
+		<div id="tab-about" class="tab card">
+			<h1><?=ucfirst(lang('about_general'))?></h1>
+			<table>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_general_username'))?></strong></td>
+					<td><?=$user['username']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_general_full_name'))?></strong></td>
+					<td><?=$user['first_name'] . ' ' . $user['last_name']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_general_email'))?></strong></td>
+					<td><?=$user['email']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_general_gender'))?></strong></td>
+					<td><?=$user['gender']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_general_birth_date'))?></strong></td>
+					<td><?=$this->format_date($user['birth_date'])?></td>
+				</tr>
+			</table>
+			<h1><?=ucfirst(lang('about_stats'))?></h1>
+			<table>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_posts'))?></strong></td>
+					<td><?=$user['post_count']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_like'))?></strong></td>
+					<td><?=$user['like_count']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_comments'))?></strong></td>
+					<td><?=$user['comment_count']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_following'))?></strong></td>
+					<td><?=$user['followed_count']?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_joined'))?></strong></td>
+					<td><?=$this->format_date($user['created'])?></td>
+				</tr>
+				<tr>
+					<td><strong><?=ucfirst(lang('about_stats_seen'))?></strong></td>
+					<td><?=$this->format_date($user['seen'])?></td>
+				</tr>
+			</table>
+		</div>
+		<div id="tab-followers" class="tab">
+		<?php
+			$_GET['filter'] = 'follower';
+			$_GET['uid'] = $user['id'];
+			$this->people_controller->content();
+		?>
+		</div>
+		<div id="tab-following" class="tab">
+		<?php
+			$_GET['filter'] = 'followee';
+			$_GET['uid'] = $user['id'];
+			$this->people_controller->content();
+		?>
+		</div>
+	</div>
+	<script>
+		let tabs = {};
+
+		const disableTab = (tab) => {
+			tab.btn.removeClass('btn-primary');
+			tab.btn.removeClass('btn-border');
+			tab.tab.css('display', 'none');
+		};
+
+		const enableTab = (tab) => {
+			tab.btn.addClass('btn-primary');
+			tab.btn.addClass('btn-border');
+			tab.tab.css('display', '');
+		};
+
+		const loadTab = (name, disable = true) => {
+			let btn = $('#action-' + name);
+			btn.on('click', function() {
+				for (let tab of Object.values(tabs)) {
+					disableTab(tab);
+				}
+				enableTab(tabs[name]);
+			});
+
+			tabs[name] = {
+				'btn': btn,
+				'tab': $('#tab-' + name)
+			};
+
+			if (disable) {
+				disableTab(tabs[name]);
+			}
+		};
+
+		loadTab('posts', false);
+		loadTab('about');
+		loadTab('followers');
+		loadTab('following');
+	</script>
+</main>
diff --git a/src/web/_views/settings/main.php b/src/web/_views/settings/main.php
new file mode 100644
index 0000000..4401fe1
--- /dev/null
+++ b/src/web/_views/settings/main.php
@@ -0,0 +1,197 @@
+<?php /* Copyright (c) 2024 Freya Murphy */
+
+$user = $session;
+
+function __create_form($user, $col) {
+	$ph = ucfirst(lang('ph_' . $col));
+	$val = $user[$col];
+	return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\">
+			<div class=\"form-input mb\" style=\"flex: 1\">
+				<input
+					type=\"text\"
+					name=\"{$col}\"
+					id=\"{$col}\"
+					placeholder=\" \"
+					value=\"{$val}\"
+				>
+				<label for=\"{$col}\">
+					{$ph}
+				</label>
+			</div>
+			<input type=\"hidden\" name=\"col\" value=\"{$col}\">
+			<input type=\"hidden\" name=\"uid\" value=\"{$user['id']}\">
+			<button
+				class=\"btn btn-submit ml\"
+				style=\"flex: 0; height: fit-content;\"
+			><i class=\"mi\">check</i></button>
+		</form>";
+}
+
+?>
+
+<script>
+
+function onSuccess() {
+	successToast(<?=json_encode(ucfirst(lang('settings_success')))?>);
+}
+
+function handleSubmit(e) {
+	e.preventDefault();
+	let el = e.target.elements;
+	let col = el.col.value;
+	let uid = el.uid.value;
+	let val = el[col].value;
+
+	$.ajax({
+		url: '/api/user?id=eq.' + uid,
+		method: 'PATCH',
+		data: JSON.stringify({ [col]: val }),
+		success: onSuccess
+	});
+
+}
+
+function handlePassword(e) {
+	e.preventDefault();
+	let el = e.target.elements;
+	let curr = el.curr_password.value;
+	let newp = el.new_password.value;
+
+	$.ajax({
+		url: '/api/rpc/update_password',
+		method: 'POST',
+		data: JSON.stringify({
+			new_password: newp,
+			current_password: curr
+		}),
+		success: onSuccess
+	})
+}
+
+const toBase64 = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+});
+
+function updateMedia(media_type) {
+
+	var input = document.createElement('input');
+	input.type = 'file';
+
+	input.onchange = async (e) => {
+		var file = e.target.files[0];
+		var data = (await toBase64(file)).split(";");
+		var mime = data[0].split(":")[1];
+		var content = data[1].split(",")[1];
+
+		$.ajax({
+			url: '/api/rpc/update_user_media',
+			method: 'POST',
+			data: JSON.stringify({
+				media_type, mime, content
+			}),
+			success: onSuccess
+		});
+
+	}
+
+	input.click();
+
+}
+
+function resetMedia(media_type) {
+	$.ajax({
+		url: '/api/rpc/delete_user_media',
+		method: 'POST',
+		data: JSON.stringify({
+			media_type
+		}),
+		success: onSuccess
+	});
+}
+</script>
+
+<main id="main">
+	<div id="settings" class="card">
+		<h1><?=ucfirst(lang('title'))?></h1>
+		<hr class="mt">
+		<h2><?=ucfirst(lang('general_title'))?></h2>
+		<strong><?=ucfirst(lang('general_desc'))?></strong>
+		<?=__create_form($user, 'username')?>
+		<?=__create_form($user, 'email')?>
+		<?=__create_form($user, 'first_name')?>
+		<?=__create_form($user, 'last_name')?>
+		<?=__create_form($user, 'gender')?>
+		<?=__create_form($user, 'profile_bio')?>
+		<hr class="mt">
+		<h2><?=ucfirst(lang('security_title'))?></h2>
+		<strong><?=ucfirst(lang('security_desc'))?></strong>
+		<form action="" class="col mt settings-form" onsubmit="handlePassword(event)">
+			<div class="form-input mb" style="flex: 1">
+				<input
+					type="password"
+					name="curr_password"
+					id="curr_password"
+					placeholder=" "
+				>
+				<label for="curr_password">
+					<?=ucwords(lang('ph_current_pass'))?>
+				</label>
+			</div>
+			<div class="form-input mb" style="flex: 1">
+				<input
+					type="password"
+					name="new_password"
+					id="new_password"
+					placeholder=" "
+				>
+				<label for="new_password">
+					<?=ucwords(lang('ph_new_pass'))?>
+				</label>
+			</div>
+			<button
+				class="btn grow btn-alt btn-submit"
+				style="flex: 0; height: fit-content;"
+			><?=lang('update')?></button>
+		</form>
+		<hr class="mt">
+		<h2><?=ucfirst(lang('media_title'))?></h2>
+		<strong><?=ucfirst(lang('media_desc'))?></strong>
+		<h3><?=ucfirst(lang('ph_avatar'))?></h3>
+		<div class="row">
+		<?=image(
+			"/api/rpc/profile_avatar?user_id={$user['id']}",
+			height: '100px'
+		)?>
+			<div class="col ml">
+				<button
+					class="btn btn-alt btn-primary"
+					onclick="updateMedia('avatar')"
+				><?=ucfirst(lang('update'))?></button>
+				<button
+					class="btn btn-alt btn-primary mt"
+					onclick="resetMedia('avatar')"
+				><?=ucfirst(lang('reset'))?></button>
+			</div>
+		</div>
+		<h3><?=ucfirst(lang('ph_banner'))?></h3>
+		<div class="row">
+		<?=image(
+			"/api/rpc/profile_banner?user_id={$user['id']}",
+			height: '100px'
+		)?>
+			<div class="col ml">
+				<button
+					class="btn btn-alt btn-primary"
+					onclick="updateMedia('banner')"
+				><?=ucfirst(lang('update'))?></button>
+				<button
+					class="btn btn-alt btn-primary mt"
+					onclick="resetMedia('banner')"
+				><?=ucfirst(lang('reset'))?></button>
+			</div>
+		</div>
+	</div>
+</main>
diff --git a/src/web/_views/template/comment.php b/src/web/_views/template/comment.php
deleted file mode 100644
index ceac588..0000000
--- a/src/web/_views/template/comment.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<?php
-	$format_model = $this->load->model('format');
-?>
-<div class="comment row mt">
-	<?=pfp($user)?>
-	<div class="ml col sub-card">
-		<div class="row">
-			<strong><?=$format_model->name($user)?></strong>
-			<span class="subtext ml"><?=$this->main->date($comment['created'])?></span>
-		</div>
-		<?=$comment['content']?>
-	</div>
-</div>
diff --git a/src/web/_views/template/error.php b/src/web/_views/template/error.php
deleted file mode 100644
index 2e02cb1..0000000
--- a/src/web/_views/template/error.php
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title><?=$code . ' - ' . $msg?></title>
-	</head>
-	<body>
-		<center>
-			<h1><?=$code . ' ' . $msg?></h1>
-		</center>
-		<hr>
-	</body>
-</html>
diff --git a/src/web/_views/template/modal.php b/src/web/_views/template/modal.php
deleted file mode 100644
index 2a041a7..0000000
--- a/src/web/_views/template/modal.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<div class="modal-container">
-	<div class="modal">
-		<div class="modal-header row">
-			<span class="modal-title"><?=$title?></span>
-			<?=ilang(
-				'action_modal_close',
-				class: 'btn btn-action modal-close',
-			)?>
-		</div>
-		<?php $this->view('modal/' . $content) ?>
-	</div>
-</div>
diff --git a/src/web/_views/template/post.php b/src/web/_views/template/post.php
deleted file mode 100644
index 48f8bb6..0000000
--- a/src/web/_views/template/post.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<div class="post card">
-	<div class="row">
-		<?=pfp($user)?>
-		<div class="col ml">
-			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
-			<span class="subtext"><?=$this->main->date($post['created'])?></span>
-		</div>
-	</div>
-	<p>
-		<?=$post['content']?>
-	</p>
-<?php
-	$self = $this->main->user();
-	$liked = $post['like_id'] ? 'btn-primary' : '';
-	$post_attrs = array(
-		'postId' => $post['id']
-	);
-	if ($post['like_id'] !== NULL) {
-		$post_attrs['likeId'] = $post['like_id'];
-	}
-?>
-	<span class="likes subtext"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
-<?php if ($self): ?>
-	<hr>
-	<div class="row">
-		<?=ilang('action_like',
-			class: 'btn grow action-like ' . $liked,
-			attrs: $post_attrs
-		)?>
-		<?=ilang('action_comment', class: 'btn grow action-comment',
-			click: '$(\'#action-new-comment-' . $post['id'] . '\').focus()'
-		)?>
-	</div>
-	<hr>
-<?php endif; ?>
-	<div class="col comments pb">
-		<?php
-			$_GET = array('id' => $post['id']);
-			$cdata = $this->comments();
-
-			$loaded = $cdata['loaded'];
-			$max = $cdata['max'];
-			$page_size = $cdata['page_size'];
-			$total = $post['comment_count'];
-
-			if ($loaded >= $page_size && $page_size < $total) {
-				ilang('action_load_comments',
-					class: 'action-load-comments btn btn-blend mt',
-					attrs: array(
-						'postId' => $post['id'],
-						'loaded' => $loaded,
-						'pageSize' => $page_size,
-						'commentCount' => $total,
-						'commentMax' => $max,
-					)
-				);
-			}
-
-		?>
-	</div>
-<?php if ($self): ?>
-	<div class="row pb">
-		<?=pfp($self)?>
-		<form class="ml action-new-comment-form row">
-			<input
-				type="hidden"
-				name="id"
-				value="<?=$post['id']?>"
-			>
-			<input
-				id="action-new-comment-<?=$post['id']?>"
-				class="action-new-comment btn grow btn-alt"
-				postId="<?=$post['id']?>"
-				autocomplete="off"
-				type="text"
-				name="text"
-				placeholder="<?=ucfirst(lang('action_new_comment_text'))?>"
-				aria-label="<?=ucfirst(lang('action_new_comment_tip'))?>"
-			>
-		</form>
-	</div>
-<?php endif; ?>
-</div>
-
-
diff --git a/src/web/_views/template/posts.php b/src/web/_views/template/posts.php
deleted file mode 100644
index ed79688..0000000
--- a/src/web/_views/template/posts.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<div id="post-container">
-<?php
-	$pdata = $this->posts();
-
-	$loaded = $pdata['loaded'];
-	$page_size = $pdata['page_size'];
-	$total = $pdata['total'];
-	$max = $pdata['max'];
-	$filterUid = $pdata['filter_uid'];
-
-	if ($loaded >= $page_size && $page_size < $total) {
-		ilang('action_load_posts',
-			id: 'action-load-posts',
-			class: 'btn btn-blend grow mb mt',
-			attrs: array(
-				'loaded' => $loaded,
-				'pageSize' => $page_size,
-				'postCount' => $total,
-				'postMax' => $max,
-				'userId' => $filterUid ? json_encode($filterUid) : ''
-			)
-		);
-	}
-?>
-</div>
diff --git a/src/web/_views/template/toast.php b/src/web/_views/template/toast.php
deleted file mode 100644
index 0a6a82f..0000000
--- a/src/web/_views/template/toast.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php /* Copyright (c) 2024 Freya Murphy */ ?>
-<?php /* vi: syntax=php */ ?>
-<?php
-	$params = array();
-
-	if ($detail) {
-		array_push($params, lang('api_column_' . $detail));
-	}
-
-	if ($hint) {
-		array_push($params, $hint);
-	}
-
-	$lang_msg = lang($msg, FALSE, sub: $params);
-
-	if(!$lang_msg) {
-		$lang_msg = $msg;
-	} else {
-		$lang_msg = ucfirst($lang_msg);
-	}
-
-?>
-<div class="toast <?=$type?>">
-	<?=$lang_msg?>
-	<?=ilang('action_close', class: 'action-close-toast')?>
-</div>
-- 
cgit v1.2.3-freya