v2 done

2 files changed, 152 insertions, 1 deletions

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>