login and register, liking on homepage

1 files changed, 86 insertions, 0 deletions

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>