Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add frontend registration functionality

Browse source
This commit is contained in:
Preston Doman 2019-02-06 15:31:15 -08:00
parent 830509e8d4
commit 10c2a3e150
8 changed files with 80 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
front/static/edit_report.html
View file

@ -36,7 +36,7 @@
</ul>
</div>
</nav>
<div class="container pt-5">
<div class="container pt-3">
<div class="row">
<div class="col-sm-8 mx-auto">
<div class="card bg-light text-dark">

2
front/static/home.html
View file

@ -35,7 +35,7 @@
</ul>
</div>
</nav>
<div class="container">
<div class="container pt-5">
<p>Welcome to Reimbursinator</p>
</div>
<script src="js/logout.js"></script>

2
front/static/index.html
View file

@ -27,7 +27,7 @@
</ul>
</div>
</nav>
<div class="container">
<div class="container pt-3">
<div class="jumbotron">
<h1>Reimbursinator</h1>
<p class="lead">An open source expense management solution sponsored by the Software Freedom Conservancy</p>

2
front/static/js/login.js
View file

@ -2,7 +2,7 @@ function postToLoginEndpoint(event) {
event.preventDefault();
const credentials = {
"username" : this.elements.username.value,
"email" : this.elements.email.value,
"password" : this.elements.password.value
}
const url = "https://" + window.location.hostname + ":8444/api/v1/account/login/";

80
front/static/js/signupPage.js
View file

@ -1,20 +1,64 @@
const password = document.getElementById("password");
const confirm_password = document.getElementById("confirmPassword");
function validatePassword(){
if(password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
}
else {
confirm_password.setCustomValidity('');
}
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");
function validateEmail(email)
{
if(email.validity.patternMismatch)
email.setCustomValidity('Please input correct email');
else
email.setCustomValidity('');
function validatePassword() {
if (password1.value != password2.value) {
password2.setCustomValidity("Passwords don't match");
} else {
password2.setCustomValidity('');
}
}
password1.onchange = validatePassword;
password2.onkeyup = validatePassword;
function validateEmail(email) {
if (email.validity.patternMismatch) {
email.setCustomValidity('Please input correct email');
} else {
email.setCustomValidity('');
}
}
function postToRegistrationEndpoint(event) {
event.preventDefault();
const credentials = {
"email" : this.elements.email.value,
"first_name" : this.elements.first_name.value,
"last_name" : this.elements.last_name.value,
"password1" : this.elements.password1.value,
"password2" : this.elements.password2.value
}
const url = "https://" + window.location.hostname + ":8444/api/v1/account/register/";
const xhr = new XMLHttpRequest();
console.log("Attempting a connection to the following endpoint: " + url);
console.log("User credentials:\n" + JSON.stringify(credentials));
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 201) {
console.log("REGISTRATION SUCCESS!");
console.log("Server response:\n" + this.response);
token = JSON.parse(this.response).key;
localStorage.setItem("token", token);
window.location.replace("home.html");
} else {
console.error("LOGIN FAILURE!");
console.error("Server status: " + this.status);
console.error("Server response:\n" + this.response);
}
}
};
xhr.onerror = function() {
alert("Error connecting to the authentication server!");
};
xhr.send(JSON.stringify(credentials));
}
const form = document.querySelector("form");
form.addEventListener("submit", postToRegistrationEndpoint);

6
front/static/login.html
View file

@ -14,7 +14,7 @@
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand">Reimbursinator</div>
</nav>
<div class="container pt-5">
<div class="container pt-3">
<div class="row">
<div class="col-sm-6 mx-auto">
<div class="card bg-light text-dark">
@ -24,8 +24,8 @@
<div class="card-body">
<form class="form" autocomplete="off">
<div class="form-group">
<label for="formGroupUsername">Username:</label>
<input class="form-control" id="formGroupUsername" type="text" name="username" required autofocus>
<label for="formGroupPassword">Email:</label>
<input class="form-control" id="formGroupPassword" type="email" name="email">
</div>
<div class="form-group">
<label for="formGroupPassword">Password:</label>

2
front/static/new_report.html
View file

@ -35,7 +35,7 @@
</ul>
</div>
</nav>
<div class="container">
<div class="container pt-5">
<p>Create a new report</p>
</div>
<script src="js/logout.js"></script>

23
front/static/signup.html
View file

@ -14,7 +14,7 @@
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand">Reimbursinator</div>
</nav>
<div class="container pt-5">
<div class="container pt-3">
<div class="row">
<div class="col-sm-6 mx-auto">
<div class="card bg-light text-dark">
@ -23,21 +23,25 @@
</div>
<div class="card-body">
<form class="form signup" autocomplete="off" action="index.html">
<div class="form-group">
<label for="userName">Username:</label>
<input class="form-control" id="userName" type="text" name="username" minlength="4" size="10" required autofocus>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input class="form-control" type="password" id="password" minlength="4" size="10" required>
<label for="first_name">First Name:</label>
<input class="form-control" id="first_name" type="text" name="first_name" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input class="form-control" type="password" id="confirmPassword" required>
<label for="last_name">Last Name:</label>
<input class="form-control" id="last_name" type="text" name="last_name" required>
</div>
<div class="form-group">
<label for="password1">Password:</label>
<input class="form-control" type="password" id="password1" name="password1" minlength="8" required>
</div>
<div class="form-group">
<label for="password2">Confirm Password:</label>
<input class="form-control" type="password" id="password2" name="password2" minlength="8" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
@ -51,5 +55,4 @@
</div>
</body>
<script src="js/signupPage.js"></script>
<!--Still need to check if user exist and if email exist test-->
</html>