Ivan/commento
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: Make signup/login/passwordreset/forgot forms submittable

Browse Source 
Fixes #117
This commit is contained in:
Johannes Zellner 2019-03-02 20:37:35 +01:00
parent 9d6955b81e
commit b4790397c9
8 changed files with 86 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/forgot.html
View File

@ -17,16 +17,22 @@
<div class="auth-form-container"> <div class="auth-form-container">
<div class="auth-form"> <div class="auth-form">
<div class="form-title"> <form onsubmit="window.commento.sendResetHex(event)">
Reset your Password <div class="form-title">
</div> Reset your Password
<div class="row"> </div>
<div class="label">Email Address</div>
<input class="input" type="text" name="email" id="email" placeholder="example@example.com"> <div class="row">
</div> <div class="label">Email Address</div>
<div class="err" id="err"></div> <input class="input" type="text" name="email" id="email" placeholder="example@example.com">
<div class="msg" id="msg"></div> </div>
<button id="reset-button" class="button" onclick="window.commento.sendResetHex()">Send Reset Password Link</button>
<div class="err" id="err"></div>
<div class="msg" id="msg"></div>
<button id="reset-button" class="button" type="submit">Send Reset Password Link</button>
</form>
<a class="link" href="[[[.Origin]]]/login">Suddenly remembered your password? Login.</a> <a class="link" href="[[[.Origin]]]/login">Suddenly remembered your password? Login.</a>
</div> </div>
</div> </div>

4
frontend/js/forgot.js
View File

@ -4,7 +4,9 @@
(document); (document);
// Talks to the API and sends an reset email. // Talks to the API and sends an reset email.
global.sendResetHex = function() { global.sendResetHex = function(event) {
event.preventDefault();
var allOk = global.unfilledMark(["#email"], function(el) { var allOk = global.unfilledMark(["#email"], function(el) {
el.css("border-bottom", "1px solid red"); el.css("border-bottom", "1px solid red");
}); });

4
frontend/js/login.js
View File

@ -43,7 +43,9 @@
// Logs the user in and redirects to the dashboard. // Logs the user in and redirects to the dashboard.
global.login = function() { global.login = function(event) {
event.preventDefault();
var allOk = global.unfilledMark(["#email", "#password"], function(el) { var allOk = global.unfilledMark(["#email", "#password"], function(el) {
el.css("border-bottom", "1px solid red"); el.css("border-bottom", "1px solid red");
}); });

4
frontend/js/reset.js
View File

@ -1,7 +1,9 @@
(function (global, document) { (function (global, document) {
"use strict"; "use strict";
global.resetPassword = function() { global.resetPassword = function(event) {
event.preventDefault();
var allOk = global.unfilledMark(["#password", "#password2"], function(el) { var allOk = global.unfilledMark(["#password", "#password2"], function(el) {
el.css("border-bottom", "1px solid red"); el.css("border-bottom", "1px solid red");
}); });

4
frontend/js/signup.js
View File

@ -4,7 +4,9 @@
// Signs up the user and redirects to either the login page or the email // Signs up the user and redirects to either the login page or the email
// confirmation, depending on whether or not SMTP is configured in the // confirmation, depending on whether or not SMTP is configured in the
// backend. // backend.
global.signup = function() { global.signup = function(event) {
event.preventDefault();
if ($("#password").val() !== $("#password2").val()) { if ($("#password").val() !== $("#password2").val()) {
global.textSet("#err", "The two passwords don't match"); global.textSet("#err", "The two passwords don't match");
return; return;

30
frontend/login.html
View File

@ -25,24 +25,26 @@
<div class="auth-form-container"> <div class="auth-form-container">
<div class="auth-form"> <div class="auth-form">
<div class="form-title"> <form onsubmit="window.commento.login(event)">
Login to continue <div class="form-title">
</div> Login to continue
</div>
<div class="row"> <div class="row">
<div class="label">Email Address</div> <div class="label">Email Address</div>
<input class="input" type="text" name="email" id="email" placeholder="example@example.com"> <input class="input" type="text" name="email" id="email" placeholder="example@example.com">
</div> </div>
<div class="row"> <div class="row">
<div class="label">Password</div> <div class="label">Password</div>
<input class="input" type="password" name="password" id="password" placeholder=""> <input class="input" type="password" name="password" id="password" placeholder="">
</div> </div>
<div class="err" id="err"></div> <div class="err" id="err"></div>
<div class="msg" id="msg"></div> <div class="msg" id="msg"></div>
<button id="button" class="button" onclick="window.commento.login()">Login</button> <button id="button" class="button" type="submit">Login</button>
</form>
<a class="link" href="[[[.Origin]]]/forgot">Trouble logging in? Reset your password.</a> <a class="link" href="[[[.Origin]]]/forgot">Trouble logging in? Reset your password.</a>
<a class="link" href="[[[.Origin]]]/signup">Don't have an account yet? Sign up.</a> <a class="link" href="[[[.Origin]]]/signup">Don't have an account yet? Sign up.</a>

30
frontend/reset-password.html
View File

@ -17,23 +17,25 @@
<div class="auth-form-container"> <div class="auth-form-container">
<div class="auth-form"> <div class="auth-form">
<div class="form-title"> <form onsubmit="window.commento.resetPassword(event)">
Reset your Password <div class="form-title">
</div> Reset your Password
</div>
<div class="row"> <div class="row">
<div class="label">New Password</div> <div class="label">New Password</div>
<input class="input" type="password" name="password" id="password" placeholder=""> <input class="input" type="password" name="password" id="password" placeholder="">
</div> </div>
<div class="row"> <div class="row">
<div class="label">Confirm Password</div> <div class="label">Confirm Password</div>
<input class="input" type="password" name="password2" id="password2" placeholder=""> <input class="input" type="password" name="password2" id="password2" placeholder="">
</div> </div>
<div class="err" id="err"></div> <div class="err" id="err"></div>
<div class="msg" id="msg"></div> <div class="msg" id="msg"></div>
<button id="reset-button" class="button" onclick="window.commento.resetPassword()">Reset Password</button> <button id="reset-button" class="button" type="submit">Reset Password</button>
</form>
</div> </div>
</div> </div>

50
frontend/signup.html
View File

@ -24,38 +24,40 @@
<div class="auth-form-container"> <div class="auth-form-container">
<div class="auth-form"> <div class="auth-form">
<div class="form-title"> <form onsubmit="window.commento.signup(event)">
Create an account <div class="form-title">
</div> Create an account
</div>
<div class="row"> <div class="row">
<div class="label">Email Address</div> <div class="label">Email Address</div>
<input class="input" type="text" name="email" id="email" placeholder="example@example.com"> <input class="input" type="text" name="email" id="email" placeholder="example@example.com">
</div> </div>
<div class="row"> <div class="row">
<div class="label">Full Name</div> <div class="label">Full Name</div>
<input class="input" type="text" name="name" id="name" placeholder="Full Name"> <input class="input" type="text" name="name" id="name" placeholder="Full Name">
</div> </div>
<div class="row"> <div class="row">
<div class="label">Password</div> <div class="label">Password</div>
<input class="input" type="password" name="password" id="password" placeholder=""> <input class="input" type="password" name="password" id="password" placeholder="">
</div> </div>
<div class="row"> <div class="row">
<div class="label">Confirm Password</div> <div class="label">Confirm Password</div>
<input class="input" type="password" name="password2" id="password2" placeholder=""> <input class="input" type="password" name="password2" id="password2" placeholder="">
</div> </div>
<input type="hidden" name="plan" id="plan" value=""> <input type="hidden" name="plan" id="plan" value="">
<div class="err" id="err"></div> <div class="err" id="err"></div>
<p class="cent"> <p class="cent">
</p> </p>
<button id="signup-button" class="button" onclick="window.commento.signup()">Sign up</button> <button id="signup-button" class="button" type="submit">Sign up</button>
</form>
<a class="link" href="[[[.Origin]]]/login">Already have an account? Login instead.</a> <a class="link" href="[[[.Origin]]]/login">Already have an account? Login instead.</a>
</div> </div>