Easy form generation. TODO: parse forms

2019-02-22 00:04:57 +01:00
parent 19067a5616
commit 185cc4dc60
6 changed files with 288 additions and 3 deletions
--- a/res/template/account/user_password.html
+++ b/res/template/account/user_password.html
@@ -0,0 +1,83 @@
+{{define "user_password"}}<!DOCTYPE html>
+<html>
+	<head>
+		{{template "meta_tags" "Updating Password"}}
+		{{template "user_style"}}
+		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
+	</head>
+	<body>
+		<div id='body' class="body">
+			{{template "menu" .}}
+
+			<h1>Update Password</h1>
+			<div id="submit_result"></div>
+			<form id="the_form" class="highlight_dark border_top border_bottom">
+				<input type="text" autocomplete="username" value="{{.Username}}" style="display: none;"/>
+				<table class="form">
+					<tr class="form">
+						<td>Old Password</td>
+						<td><input id="old_password" type="password" autocomplete="current-password" class="form_input"/></td>
+					</tr>
+
+					<tr class="form">
+						<td>New Password</td>
+						<td><input id="new_password1" type="password" autocomplete="new-password" class="form_input"/></td>
+					</tr>
+					<tr class="form">
+						<td>New password verification</td>
+						<td><input id="new_password2" type="password" autocomplete="new-password" class="form_input"/></td>
+					</tr>
+					<tr class="form">
+						<td style="text-align: left;"><a href="/user" class="button button_red"/>Back</a>
+						<td style="text-align: right;"><input type="submit" value="Confirm" class="button_highlight"/></td>
+					</tr>
+				</table>
+			</form>
+			<br/>
+			{{template "footer"}}
+		</div>
+
+		<script type="text/javascript">
+		document.getElementById("the_form").onsubmit = function(){
+			var oldpasswd = document.getElementById("old_password");
+			var passwd1   = document.getElementById("new_password1");
+			var passwd2   = document.getElementById("new_password2");
+
+			if (passwd1.value !== passwd2.value) {
+				alert("Passwords do not match! Good thing we checked.");
+				return false;
+			}
+
+			var req = new XMLHttpRequest();
+			req.onreadystatechange = function(){
+				if (this.readyState === 4) {
+					var response = JSON.parse(req.responseText);
+					var resultDiv = document.getElementById("submit_result");
+					if (response.success) {
+						resultDiv.className = "border_top border_bottom highlight_green";
+						resultDiv.innerHTML = 'Success! Your password has been updated';
+						oldpasswd.value = "";
+						passwd1.value = "";
+						passwd2.value = "";
+					} else {
+						resultDiv.className = "border_top border_bottom highlight_red";
+						resultDiv.innerHTML = response.message;
+					}
+
+					console.log(response);
+				}
+			}
+
+			var data = new FormData();
+			data.append("old_password", oldpasswd.value);
+			data.append("new_password", passwd1.value);
+
+			req.open("PUT", apiEndpoint+"/user/password", true);
+			req.send(data);
+
+			return false;
+		}
+		</script>
+	</body>
+</html>
+{{end}}