pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Easy form generation. TODO: parse forms

Browse Source
This commit is contained in:
Wim Brand
2019-02-22 00:04:57 +01:00
parent 19067a5616
commit 185cc4dc60
6 changed files with 288 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
res/template/account/user_password.html Normal file
View File

@@ -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}}

102
res/template/fragments/form.html Normal file
View File

@@ -0,0 +1,102 @@
{{define "form"}}
<h1>{{.Title}}</h1>
{{.PreFormHTML}}
<br/><br/>
{{if eq .Submit true}}
{{if eq .SubmitSuccess true}}
<div id="submit_result" class="highlight_green border_top border_bottom">
{{index .SubmitMessages 0}}
</div>
{{else}}
<div id="submit_result" class="highlight_red border_top border_bottom">
Something went wrong, please correct these errors before continuing:<br/>
<ul>
{{range $msg := .SubmitMessages}}
<li>{{$msg}}</li>
{{end}}
</ul>
</div>
{{end}}
{{end}}
<form class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
{{range $index, $field := .Fields}}
<tr class="form">
<td>{{$field.Label}}</td>
<td>
{{if eq $field.Type "text"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" class="form_input"/>
{{else if eq $field.Type "username"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" autocomplete="username" class="form_input"/>
{{else if eq $field.Type "email"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="email" autocomplete="email" class="form_input"/>
{{else if eq $field.Type "current-password"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="current-password" class="form_input"/>
{{else if eq $field.Type "new-password"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="new-password" class="form_input"/>
{{else if eq $field.Type "captcha"}}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{$field.CaptchaSiteKey}}"></div>
{{end}}
</td>
{{if ne $field.Description ""}}
<tr class="form">
<td colspan="2">{{$field.Description}}</td>
</tr>
{{end}}
{{if eq $field.Separator true}}
<tr class="form"><td colspan="2"><hr/></td></tr>
{{end}}
</tr>
{{end}}
<tr class="form">
{{if eq .BackLink ""}}
<td colspan="2" style="text-align: right;">
{{if eq .SubmitRed true}}
<input type="submit" value="{{.SubmitLabel}}" class="button_red"/>
{{else}}
<input type="submit" value="{{.SubmitLabel}}" class="button_highlight"/>
{{end}}
</td>
{{else}}
<td style="text-align: left;">
<a href="{{.BackLink}}" class="button button_red"/>Back</a>
</td>
<td style="text-align: right;">
{{if eq .SubmitRed true}}
<input type="submit" value="{{.SubmitLabel}}" class="button_red"/>
{{else}}
<input type="submit" value="{{.SubmitLabel}}" class="button_highlight"/>
{{end}}
</td>
{{end}}
</tr>
</table>
</form>
<br/>
{{.PostFormHTML}}
<br/>
{{end}}
{{define "form_page"}}
<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" .Title}}
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
{{template "form" .Form}}
{{template "footer"}}
</div>
{{template "analytics"}}
</body>
</html>
{{end}}