Merge pull request #58 from danieldupriest/frontend-registration
Frontend registration
This commit is contained in:
commit
ca333a6047
8 changed files with 82 additions and 35 deletions
|
@ -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">
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="container pt-3">
|
||||
<p>Welcome to Reimbursinator</p>
|
||||
</div>
|
||||
<script src="js/logout.js"></script>
|
||||
|
|
|
@ -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,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/";
|
||||
|
|
|
@ -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('');
|
||||
const password1 = document.getElementById("password1");
|
||||
const password2 = document.getElementById("password2");
|
||||
|
||||
function validatePassword() {
|
||||
if (password1.value != password2.value) {
|
||||
password2.setCustomValidity("Passwords don't match");
|
||||
} else {
|
||||
password2.setCustomValidity('');
|
||||
}
|
||||
}
|
||||
password.onchange = validatePassword;
|
||||
confirm_password.onkeyup = validatePassword;
|
||||
password1.onchange = validatePassword;
|
||||
password2.onkeyup = validatePassword;
|
||||
|
||||
function validateEmail(email)
|
||||
{
|
||||
if(email.validity.patternMismatch)
|
||||
function validateEmail(email) {
|
||||
if (email.validity.patternMismatch) {
|
||||
email.setCustomValidity('Please input correct email');
|
||||
else
|
||||
} 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("REGISTRATION 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);
|
||||
|
|
|
@ -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,12 +24,12 @@
|
|||
<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="email">Email:</label>
|
||||
<input class="form-control" id="email" type="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="formGroupPassword">Password:</label>
|
||||
<input class="form-control" id="formGroupPassword" type="password" name="password" required>
|
||||
<label for="password">Password:</label>
|
||||
<input class="form-control" id="password" type="password" name="password" required>
|
||||
</div>
|
||||
<p id="errorLogin" style="color:red"></p>
|
||||
<button type="submit" class="btn btn-primary pull-right">Submit</button>
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="container pt-3">
|
||||
<p>Create a new report</p>
|
||||
</div>
|
||||
<script src="js/logout.js"></script>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue