frontend: add password reset functionality
This commit is contained in:
Adhityaa
parent
5f23706003
commit
a9b235ef0b
@ -63,6 +63,8 @@ func initStaticRouter(router *mux.Router) error {
|
||||
|
||||
pages := []string{
|
||||
"login",
|
||||
"forgot",
|
||||
"reset-password",
|
||||
"signup",
|
||||
"dashboard",
|
||||
"logout",
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
SHELL = bash
|
||||
|
||||
# list of JS files to be built
|
||||
JS_BUILD = jquery.js vue.js highlight.js chartist.js login.js signup.js dashboard.js logout.js commento.js
|
||||
JS_BUILD = jquery.js vue.js highlight.js chartist.js login.js forgot.js reset.js signup.js dashboard.js logout.js commento.js
|
||||
|
||||
jquery.js = jquery.js
|
||||
vue.js = vue.js
|
||||
highlight.js = highlight.js
|
||||
chartist.js = chartist.js
|
||||
login.js = utils.js http.js auth-common.js login.js
|
||||
forgot.js = utils.js http.js forgot.js
|
||||
reset.js = utils.js http.js reset.js
|
||||
signup.js = utils.js http.js auth-common.js signup.js
|
||||
dashboard.js = utils.js http.js errors.js self.js dashboard.js dashboard-setting.js dashboard-domain.js dashboard-installation.js dashboard-general.js dashboard-moderation.js dashboard-statistics.js dashboard-import.js dashboard-danger.js
|
||||
logout.js = utils.js logout.js
|
||||
|
||||
54
frontend/forgot.html
Normal file
54
frontend/forgot.html
Normal file
@ -0,0 +1,54 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1.0">
|
||||
<script src="<<<.CdnPrefix>>>/js/jquery.js"></script>
|
||||
<script src="<<<.CdnPrefix>>>/js/forgot.js"></script>
|
||||
<link rel="stylesheet" href="<<<.CdnPrefix>>>/css/auth.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:200,300,400,700" rel="stylesheet">
|
||||
<title>Commento: Reset your Password</title>
|
||||
</head>
|
||||
|
||||
<div class="navbar">
|
||||
<a href="/" class="navbar-item navbar-logo-text"><img src="/images/logo.svg" class="navbar-logo">Commento</a>
|
||||
<a href="/login" class="navbar-item">Login</a>
|
||||
<a href="/signup" class="navbar-item">Signup</a>
|
||||
</div>
|
||||
|
||||
<div class="auth-form-container">
|
||||
<div class="auth-form">
|
||||
<div class="form-title">
|
||||
Reset your Password
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="label">Email Address</div>
|
||||
<input class="input" type="text" name="email" id="email" placeholder="example@example.com">
|
||||
</div>
|
||||
<div class="err" id="err"></div>
|
||||
<div class="msg" id="msg"></div>
|
||||
<button id="reset-button" class="button" onclick="sendResetHex()">Send Reset Password Link</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="links">
|
||||
<div class="link-group">
|
||||
<div class="header">Your Installation</div>
|
||||
<a class="link" href="/login">Login</a>
|
||||
<a class="link" href="/signup">Signup</a>
|
||||
<a class="link" href="/dashboard">Dashboard</a>
|
||||
</div>
|
||||
<div class="link-group">
|
||||
<div class="header">Documentation</div>
|
||||
<a class="link" href="https://docs.commento.io/">Documentation</a>
|
||||
<a class="link" href="https://gitlab.com/commento">Open Source</a>
|
||||
</div>
|
||||
<div class="link-group">
|
||||
<div class="header">About</div>
|
||||
<a class="link" href="https://commento.io">About Commento</a>
|
||||
<a class="link" href="https://commento.io/help">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
33
frontend/js/forgot.js
Normal file
33
frontend/js/forgot.js
Normal file
@ -0,0 +1,33 @@
|
||||
(function (global, document) {
|
||||
|
||||
// Talks to the API and sends an reset email.
|
||||
global.sendResetHex = function() {
|
||||
var all_ok = global.unfilledMark(["#email"], function(el) {
|
||||
el.css("border-bottom", "1px solid red");
|
||||
});
|
||||
|
||||
if (!all_ok) {
|
||||
global.textSet("#err", "Please make sure all fields are filled.");
|
||||
return;
|
||||
}
|
||||
|
||||
var json = {
|
||||
"email": $("#email").val(),
|
||||
};
|
||||
|
||||
global.buttonDisable("#reset-button");
|
||||
global.post(global.commento_origin + "/api/owner/send-reset-hex", json, function(resp) {
|
||||
global.buttonEnable("#reset-button");
|
||||
|
||||
global.textSet("#err", "");
|
||||
if (!resp.success) {
|
||||
global.textSet("#err", resp.message);
|
||||
return
|
||||
}
|
||||
|
||||
$("#msg").html("If that email is a registered account, you will receive an email with instructions on how to reset your password.");
|
||||
$("#reset-button").hide();
|
||||
});
|
||||
}
|
||||
|
||||
} (window, document));
|
||||
37
frontend/js/reset.js
Normal file
37
frontend/js/reset.js
Normal file
@ -0,0 +1,37 @@
|
||||
(function (global, document) {
|
||||
|
||||
global.resetPassword = function() {
|
||||
var all_ok = global.unfilledMark(["#password", "#password2"], function(el) {
|
||||
el.css("border-bottom", "1px solid red");
|
||||
});
|
||||
|
||||
if (!all_ok) {
|
||||
global.textSet("#err", "Please make sure all fields are filled.");
|
||||
return;
|
||||
}
|
||||
|
||||
if ($("#password").val() != $("#password2").val()) {
|
||||
global.textSet("#err", "The two passwords do not match.");
|
||||
return;
|
||||
}
|
||||
|
||||
var json = {
|
||||
"resetHex": paramGet("hex"),
|
||||
"password": $("#password").val(),
|
||||
};
|
||||
|
||||
global.buttonDisable("#reset-button");
|
||||
global.post(global.commento_origin + "/api/owner/reset-password", json, function(resp) {
|
||||
global.buttonEnable("#reset-button");
|
||||
|
||||
global.textSet("#err", "");
|
||||
if (!resp.success) {
|
||||
global.textSet("#err", resp.message);
|
||||
return
|
||||
}
|
||||
|
||||
document.location = "/login?changed=true";
|
||||
});
|
||||
}
|
||||
|
||||
} (window, document));
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
<button id="button" class="button" onclick="window.login()">Login</button>
|
||||
|
||||
<a class="link" href="/forgot">Trouble logging in? Reset your password.</a>
|
||||
<a class="link" href="/reset">Trouble logging in? Reset your password.</a>
|
||||
<a class="link" href="/signup">Don't have an account yet? Sign up.</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
62
frontend/reset-password.html
Normal file
62
frontend/reset-password.html
Normal file
@ -0,0 +1,62 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1.0">
|
||||
<script src="<<<.CdnPrefix>>>/js/jquery.js"></script>
|
||||
<script src="<<<.CdnPrefix>>>/js/reset.js"></script>
|
||||
<link rel="stylesheet" href="<<<.CdnPrefix>>>/css/auth.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:200,300,400,700" rel="stylesheet">
|
||||
<title>Commento: Reset your Password</title>
|
||||
</head>
|
||||
|
||||
<div class="navbar">
|
||||
<a href="/" class="navbar-item navbar-logo-text"><img src="/images/logo.svg" class="navbar-logo">Commento</a>
|
||||
<a href="/login" class="navbar-item">Login</a>
|
||||
<a href="/signup" class="navbar-item">Signup</a>
|
||||
</div>
|
||||
|
||||
<div class="auth-form-container">
|
||||
<div class="auth-form">
|
||||
<div class="form-title">
|
||||
Reset your Password
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="label">New Password</div>
|
||||
<input class="input" type="password" name="password" id="password" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="label">Confirm Password</div>
|
||||
<input class="input" type="password" name="password2" id="password2" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="err" id="err"></div>
|
||||
<div class="msg" id="msg"></div>
|
||||
<button id="reset-button" class="button" onclick="resetPassword()">Reset Password</button>
|
||||
<a class="link" href="/login">Suddenly remembered your password? Login.</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="links">
|
||||
<div class="link-group">
|
||||
<div class="header">Your Installation</div>
|
||||
<a class="link" href="/login">Login</a>
|
||||
<a class="link" href="/signup">Signup</a>
|
||||
<a class="link" href="/dashboard">Dashboard</a>
|
||||
</div>
|
||||
<div class="link-group">
|
||||
<div class="header">Documentation</div>
|
||||
<a class="link" href="https://docs.commento.io/">Documentation</a>
|
||||
<a class="link" href="https://gitlab.com/commento">Open Source</a>
|
||||
</div>
|
||||
<div class="link-group">
|
||||
<div class="header">About</div>
|
||||
<a class="link" href="https://commento.io">About Commento</a>
|
||||
<a class="link" href="https://commento.io/help">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user