From 708594d32ffe779cf547c816fa7cdd19d095be2e Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Mon, 20 May 2024 17:11:38 -0400
Subject: v2 done

---
 src/web/_views/apps/profile/main.php  |   2 +-
 src/web/_views/apps/settings/main.php | 151 ++++++++++++++++++++++++++++++++++
 src/web/_views/footer.php             |   2 +-
 src/web/_views/header.php             |  17 +++-
 src/web/_views/modal/about.php        |  28 +++++++
 src/web/_views/template/toast.php     |   2 +-
 6 files changed, 197 insertions(+), 5 deletions(-)
 create mode 100644 src/web/_views/apps/settings/main.php
 create mode 100644 src/web/_views/modal/about.php

(limited to 'src/web/_views')

diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php
index 919b190..21b3b46 100644
--- a/src/web/_views/apps/profile/main.php
+++ b/src/web/_views/apps/profile/main.php
@@ -3,7 +3,7 @@
 <div id="main-content">
 	<div id="profile-header-container">
 		<div id="profile-header" class="col">
-			<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner')?>
+			<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
 			<div class="info row">
 				<div class="pfp-wrapper">
 					<?=pfp($user)?>
diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php
new file mode 100644
index 0000000..0cdc4f2
--- /dev/null
+++ b/src/web/_views/apps/settings/main.php
@@ -0,0 +1,151 @@
+<?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=\"rel 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
+	});
+
+}
+
+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>
+
+<div id="main-content">
+	<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')?>
+		<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-blue"
+					onclick="updateMedia('avatar')"
+				><?=ucfirst(lang('update'))?></button>
+				<button
+					class="btn btn-alt btn-blue 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-blue"
+					onclick="updateMedia('banner')"
+				><?=ucfirst(lang('update'))?></button>
+				<button
+					class="btn btn-alt btn-blue mt"
+					onclick="resetMedia('banner')"
+				><?=ucfirst(lang('reset'))?></button>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php
index 9040c3a..bc9b3a2 100644
--- a/src/web/_views/footer.php
+++ b/src/web/_views/footer.php
@@ -1,7 +1,7 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
 	<footer>
-		Freya Murphy © 2023 | <a href="https://freya.cat">freya.cat</a>
+		<?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a>
 	</footer>
 	<body>
 
diff --git a/src/web/_views/header.php b/src/web/_views/header.php
index 97eb435..98fcf81 100644
--- a/src/web/_views/header.php
+++ b/src/web/_views/header.php
@@ -55,7 +55,7 @@
 				</script>
 				<?=pfp($self, FALSE, 'toggleUserMenu()')?>
 				<div class="card col hidden" id="user-menu">
-					<span class="row" id="user-menu-header">
+					<span class="row mr" id="user-menu-header">
 						<?=pfp($self, FALSE)?>
 						<span class="col">
 							<strong><?=$this->format_model->name($self)?></strong>
@@ -65,16 +65,25 @@
 					<hr>
 					<?=ilang(
 						'action_profile',
+						id: 'action-profile',
 						class: 'btn',
 						href: '/profile?id=' . $self['id']
 					)?>
+					<?=ilang(
+						'action_xssbook_about',
+						id: 'action-xssbook-about',
+						class: 'btn',
+						click: 'viewAbout'
+					)?>
 					<?=ilang(
 						'action_settings',
+						id: 'action-settings',
 						class: 'btn',
 						href: '/settings'
 					)?>
 					<?=ilang(
 						'action_logout',
+						id: 'action-logout',
 						class: 'btn',
 						href: '/auth/logout'
 					)?>
@@ -84,6 +93,11 @@
 			<?php endif; ?>
 			</div>
 			<script>
+				$('#action-xssbook-about').on('click', function() {
+					$.get( "/modal/about", function (data) {
+						$(document.body).append(data);
+					});
+				})
 				$('#action-hamburger').on('click', function() {
 					let menu = $('.nav-center');
 					menu.toggleClass('visible');
@@ -94,7 +108,6 @@
 			userMenu = $('#user-menu');
 			var nav = $('.nav');
 			document.onclick = function(event) {
-				console.log(event.target, nav[0]);
 				let outside = !(nav[0].contains(event.target));
 				if (outside) {
 					userMenu.addClass('hidden');
diff --git a/src/web/_views/modal/about.php b/src/web/_views/modal/about.php
new file mode 100644
index 0000000..746607e
--- /dev/null
+++ b/src/web/_views/modal/about.php
@@ -0,0 +1,28 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div id="about-modal-body">
+	<span class="logo">xssbook</span>
+	<hr>
+	<span class="mb"><?=ucfirst(lang('version'))?></span>
+	<span><?=ucfirst(lang('copyright'))?></span>
+	<hr>
+	<a class="btn btn-blue" href="https://g.freya.cat/freya/xssbook2">Source Code</a>
+</div>
+<style>
+#about-modal-body {
+	display: flex;
+	margin-top: 50px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-weight: bold;
+	font-size: 1.1rem;
+	padding: 1rem;
+}
+#about-modal-body .logo {
+	color: var(--blue);
+	font-family: facebook;
+	font-size: 2.25rem;
+	margin-bottom: 1rem;
+}
+</style>
diff --git a/src/web/_views/template/toast.php b/src/web/_views/template/toast.php
index ae2e7d8..0a6a82f 100644
--- a/src/web/_views/template/toast.php
+++ b/src/web/_views/template/toast.php
@@ -20,7 +20,7 @@
 	}
 
 ?>
-<div class="toast error">
+<div class="toast <?=$type?>">
 	<?=$lang_msg?>
 	<?=ilang('action_close', class: 'action-close-toast')?>
 </div>
-- 
cgit v1.2.3-freya