From 3a82baec9d793edf81ac2b151b0f4d4159641375 Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Mon, 1 Apr 2024 11:09:25 -0400
Subject: login and register, liking on homepage

---
 src/web/_views/apps/auth/login.php  |  86 ++++++++++++++++++
 src/web/_views/apps/error/main.php  |   6 ++
 src/web/_views/apps/home/main.php   |  27 ++++++
 src/web/_views/footer.php           |   8 ++
 src/web/_views/header.php           |  62 +++++++++++++
 src/web/_views/header_empty.php     |  23 +++++
 src/web/_views/modal/new_post.php   |  59 ++++++++++++
 src/web/_views/modal/register.php   | 173 ++++++++++++++++++++++++++++++++++++
 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/pfp.php     |   8 ++
 src/web/_views/template/post.php    |  86 ++++++++++++++++++
 src/web/_views/template/posts.php   |  23 +++++
 src/web/_views/template/toast.php   |  26 ++++++
 15 files changed, 628 insertions(+)
 create mode 100644 src/web/_views/apps/auth/login.php
 create mode 100644 src/web/_views/apps/error/main.php
 create mode 100644 src/web/_views/apps/home/main.php
 create mode 100644 src/web/_views/footer.php
 create mode 100644 src/web/_views/header.php
 create mode 100644 src/web/_views/header_empty.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/pfp.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

(limited to 'src/web/_views')

diff --git a/src/web/_views/apps/auth/login.php b/src/web/_views/apps/auth/login.php
new file mode 100644
index 0000000..d7f326b
--- /dev/null
+++ b/src/web/_views/apps/auth/login.php
@@ -0,0 +1,86 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div id="main-content">
+	<div class="branding col">
+		<h1>xssbook</h1>
+		<span><?=lang('login_branding')?></span>
+	</div>
+	<div class="form card col">
+		<form id="action-login" class="col" action="">
+			<div class="rel mb">
+				<input
+					type="text"
+					name="username"
+					id="login-username"
+					placeholder=" "
+				>
+				<label for="username">
+					<?=lang('ph_username')?>
+				</label>
+			</div>
+			<div class="rel mb">
+				<input
+					type="password"
+					name="password"
+					id="login-password"
+					placeholder=" "
+				>
+				<label for="password">
+					<?=lang('ph_password')?>
+				</label>
+			</div>
+			<?=ilang('action_login',
+				class: 'btn btn-submit btn-wide',
+				button: TRUE,
+				attrs: array('type' => 'submit')
+			)?>
+			<?=ilang('action_forgot_passwd',
+				class: 'btn btn-line btn-blue btn-wide mt'
+			)?>
+		</form>
+		<hr>
+		<?=ilang('action_create_account',
+			id: 'action-register',
+			class: 'btn btn-success btn-wide',
+			button: TRUE,
+			attrs: array('type' => 'submit')
+		)?>
+	</div>
+	<script>
+
+		var 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>
+</div>
diff --git a/src/web/_views/apps/error/main.php b/src/web/_views/apps/error/main.php
new file mode 100644
index 0000000..dde39cf
--- /dev/null
+++ b/src/web/_views/apps/error/main.php
@@ -0,0 +1,6 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div id="main-content">
+	<h1><?=$title?></h1>
+	<span><?=$msg?></span>
+</div>
diff --git a/src/web/_views/apps/home/main.php b/src/web/_views/apps/home/main.php
new file mode 100644
index 0000000..29bf7c3
--- /dev/null
+++ b/src/web/_views/apps/home/main.php
@@ -0,0 +1,27 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<div id="main-content">
+<?php if ($self): ?>
+	<div id="new-post" class="card">
+		<div class="row grow">
+			<?php $this->view('template/pfp', array('user' => $self))?>
+			<a
+				id="action-new-post"
+				class="btn btn-alt btn-wide ml"
+				autocomplete="off"
+				aria-label="<?=lang('action_new_post_tip')?>"
+			>
+				<?=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(); ?>
+</div>
diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php
new file mode 100644
index 0000000..9040c3a
--- /dev/null
+++ b/src/web/_views/footer.php
@@ -0,0 +1,8 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+	<footer>
+		Freya Murphy © 2023 | <a href="https://freya.cat">freya.cat</a>
+	</footer>
+	<body>
+
+</html>
diff --git a/src/web/_views/header.php b/src/web/_views/header.php
new file mode 100644
index 0000000..7c60197
--- /dev/null
+++ b/src/web/_views/header.php
@@ -0,0 +1,62 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<?php
+	$self = $this->main->user();
+	$this->view('header_empty', $data);
+?>
+		<header class="nav">
+			<div class="nav-left">
+				<span class="logo">xssbook</span>
+			</div>
+			<div class="nav-center" :class="{hidden: !visible}">
+				<a
+					id="action-home"
+					class="btn"
+					href="/home"
+					title="<?=lang('action_home_tip')?>"
+				>
+					<i class="mi mi-lg">home</i>
+					<span><?=lang('action_home_text')?></span>
+				</a>
+				<a
+					id="action-people"
+					class="btn"
+					href="/people"
+					title="<?=lang('action_people_tip')?>"
+				>
+					<i class="mi mi-lg">people</i>
+					<span><?=lang('action_people_text')?></span>
+				</a>
+				<a
+					id="action-chat"
+					class="btn"
+					href="/chat"
+					title="<?=lang('action_chat_tip')?>"
+				>
+					<i class="mi mi-lg">chat</i>
+					<span><?=lang('action_chat_text')?></span>
+				</a>
+			</div>
+			<div class="nav-right">
+				<button
+					id="action-hamburger"
+					title="<?=lang('action_hamburger_tip')?>"
+				>
+					<i class="mi mi-lg">menu</i>
+				</button>
+			<?php if($self): ?>
+				<?php $this->view('template/pfp', array(
+					'user' => $self,
+					'class' => 'pfp-sm ml',
+				)); ?>
+			<?php else: ?>
+				<?=ilang('action_login', class: 'btn', href: '/auth/login')?>
+			<?php endif; ?>
+			</div>
+			<script>
+				$('#action-hamburger').on('click', function() {
+					let menu = $('.nav-center');
+					menu.toggleClass('visible');
+				});
+			</script>
+		</header>
diff --git a/src/web/_views/header_empty.php b/src/web/_views/header_empty.php
new file mode 100644
index 0000000..75f6f17
--- /dev/null
+++ b/src/web/_views/header_empty.php
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script>
+		<?php if ($this->main->session): ?>
+			var jwtStr = <?=json_encode($this->main->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);
+		}
+	?>
+		<title><?=$title?></title>
+	</head>
+	<body>
+		<div id="toast-container">
+		</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..50b9b84
--- /dev/null
+++ b/src/web/_views/modal/new_post.php
@@ -0,0 +1,59 @@
+<?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">
+		<?php $this->view('template/pfp', array('user' => $user))?>
+		<div class="col ml">
+			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
+				<span class="dim"><?=lang('now')?></span>
+		</div>
+	</div>
+	<textarea
+		type="text"
+		name="content"
+		id="new-post-content"
+		placeholder="<?=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-wide btn-submit',
+			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
new file mode 100644
index 0000000..f4d364a
--- /dev/null
+++ b/src/web/_views/modal/register.php
@@ -0,0 +1,173 @@
+
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<form id="register-form">
+<div class="modal-content register-modal col">
+	<label class="static">
+		<?=lang('ph_basic_info')?>
+	</label>
+	<div class="row mt">
+		<div class="rel btn-wide">
+			<input
+				type="text"
+				name="first_name"
+				id="register-first-name"
+				placeholder=" "
+			>
+			<label for="first_name">
+				<?=lang('ph_first_name')?>
+			</label>
+		</div>
+		<div class="rel ml btn-wide">
+			<input
+				type="text"
+				name="last_name"
+				id="register-last-name"
+				placeholder=" "
+			>
+			<label for="last_name">
+				<?=lang('ph_last_name')?>
+			</label>
+		</div>
+	</div>
+	<div class="rel mt">
+		<input
+			type="text"
+			name="username"
+			id="register-username"
+			placeholder=" "
+		>
+		<label for="username">
+			<?=lang('ph_username')?>
+		</label>
+	</div>
+	<div class="rel mt">
+		<input
+			type="password"
+			name="password"
+			id="register-password"
+			placeholder=" "
+		>
+		<label for="password">
+			<?=lang('ph_password')?>
+		</label>
+	</div>
+	<div class="rel mt">
+		<input
+			type="text"
+			name="email"
+			id="register-email"
+			placeholder=" "
+		>
+		<label for="email">
+			<?=lang('ph_email')?>
+		</label>
+	</div>
+	<label for="birth_date" class="mt static">
+		<?=lang('ph_birth_date')?>
+	</label>
+	<input
+		class="mt"
+		type="date"
+		name="birth_date"
+		id="register-birth-date"
+	>
+	<label for="gender" class="mt static">
+		<?=lang('ph_gender')?>
+	</label>
+	<div class="row mt" data-type="radio" data-name="gender-wrapper">
+		<div class="rel radio mr">
+			<input
+				type="radio"
+				id="register-gender-male"
+				name="gender"
+				value="male"
+			>
+			<label
+				for="register-gender-male"
+				class="static"
+			>
+				<?=lang('ph_gender_male')?>
+			</label>
+		</div>
+		<div class="rel radio mr">
+			<input
+				type="radio"
+				id="register-gender-female"
+				name="gender"
+				value="female"
+			>
+			<label
+				for="register-gender-female"
+				class="static"
+			>
+				<?=lang('ph_gender_female')?>
+			</label>
+		</div>
+		<div class="rel radio">
+			<input
+				type="radio"
+				id="register-gender-lettuce"
+				name="gender"
+				value="lettuce"
+			>
+			<label
+				for="register-gender-lettuce"
+				class="static"
+			>
+				<?=lang('ph_gender_lettuce')?>
+			</label>
+		</div>
+	</div>
+</div>
+<div class="modal-footer">
+		<?=ilang('action_register',
+			id: 'register-submit',
+			class: 'btn btn-wide btn-success',
+			attrs: array('type' => 'submit'),
+			button: TRUE
+		)?>
+</div>
+</form>
+<script>
+	$('#register-form').submit(function(e) {
+		e.preventDefault();
+
+		const form = event.target;
+		const 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 = () => {
+			$.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..3ff473b
--- /dev/null
+++ b/src/web/_views/template/comment.php
@@ -0,0 +1,15 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<?php
+	$format_model = $this->load->model('format');
+?>
+<div class="comment row mt">
+	<?php $this->view('template/pfp', array('user' => $user))?>
+	<div class="ml col sub-card">
+		<div class="row">
+			<strong><?=$format_model->name($user)?></strong>
+			<span class="dim ml"><?=$format_model->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..e3ce6fe
--- /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">
+			<?=$title?>
+			<?=ilang(
+				'action_modal_close',
+				class: 'float-right btn btn-action modal-close',
+			)?>
+		</div>
+		<?php $this->view('modal/' . $content) ?>
+	</div>
+</div>
diff --git a/src/web/_views/template/pfp.php b/src/web/_views/template/pfp.php
new file mode 100644
index 0000000..aec7318
--- /dev/null
+++ b/src/web/_views/template/pfp.php
@@ -0,0 +1,8 @@
+<?php /* Copyright (c) 2024 Freya Murphy */ ?>
+<?php /* vi: syntax=php */ ?>
+<?php
+	$class = isset($class) ? $class : '';
+?>
+<a class="image-loading pfp <?=$class?>" href="/profile?id=<?=$user['id']?>">
+	<img src="/api/rpc/avatar?user_id=<?=$user['id']?>" />
+</a>
diff --git a/src/web/_views/template/post.php b/src/web/_views/template/post.php
new file mode 100644
index 0000000..83a72bf
--- /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">
+		<?php $this->view('template/pfp', array('user' => $user))?>
+		<div class="col ml">
+			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
+			<span class="dim"><?=$post['created']?></span>
+		</div>
+	</div>
+	<p>
+		<?=$post['content']?>
+	</p>
+<?php
+	$self = $this->main->user();
+	$liked = $post['like_id'] ? 'btn-blue' : '';
+	$post_attrs = array(
+		'postId' => $post['id']
+	);
+	if ($post['like_id'] !== NULL) {
+		$post_attrs['likeId'] = $post['like_id'];
+	}
+?>
+<?php if ($self): ?>
+	<hr>
+	<div class="row">
+		<?=ilang('action_like',
+			class: 'btn btn-wide action-like ' . $liked,
+			attrs: $post_attrs
+		)?>
+		<?=ilang('action_comment', class: 'btn btn-wide 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-line mt',
+					attrs: array(
+						'postId' => $post['id'],
+						'loaded' => $loaded,
+						'pageSize' => $page_size,
+						'commentCount' => $total,
+						'commentMax' => $max,
+					)
+				);
+			}
+
+		?>
+	</div>
+<?php if ($self): ?>
+	<div class="row pb">
+		<?php $this->view('template/pfp', array('user' => $user))?>
+		<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 btn-wide btn-alt"
+				postId="<?=$post['id']?>"
+				autocomplete="off"
+				type="text"
+				name="text"
+				placeholder="<?=lang('action_new_comment_text')?>"
+				aria-label="<?=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..5e9156c
--- /dev/null
+++ b/src/web/_views/template/posts.php
@@ -0,0 +1,23 @@
+<div id="post-container">
+<?php
+	$pdata = $this->posts();
+
+	$loaded = $pdata['loaded'];
+	$page_size = $pdata['page_size'];
+	$total = $pdata['total'];
+	$max = $pdata['max'];
+
+	if ($loaded >= $page_size && $page_size < $total) {
+		ilang('action_load_posts',
+			id: 'action-load-posts',
+			class: 'btn btn-line btn-wide mb',
+			attrs: array(
+				'loaded' => $loaded,
+				'pageSize' => $page_size,
+				'postCount' => $total,
+				'postMax' => $max,
+			)
+		);
+	}
+?>
+</div>
diff --git a/src/web/_views/template/toast.php b/src/web/_views/template/toast.php
new file mode 100644
index 0000000..ae2e7d8
--- /dev/null
+++ b/src/web/_views/template/toast.php
@@ -0,0 +1,26 @@
+<?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 error">
+	<?=$lang_msg?>
+	<?=ilang('action_close', class: 'action-close-toast')?>
+</div>
-- 
cgit v1.2.3-freya