Skip to content
Snippets Groups Projects
Commit 1b5acb7b authored by Oliver Green's avatar Oliver Green
Browse files

signup mechanism

parent 97fc6636
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client.css
+ 4
− 0
View file @ 1b5acb7b
......@@ -16,4 +16,8 @@
display: flex;
justify-content: space-between;
gap: 10px;
}
input[type=text]:focus {
background-color: white;
}
\ No newline at end of file
client.html
+ 10
− 5
View file @ 1b5acb7b
......@@ -8,18 +8,19 @@
<div class="welcome">
<img src="wimage.png" alt="logo and slogan">
<div class="form-elements" id="login">
<form id="loginform" onsubmit="return inputValidation()">
<form id="loginform">
<div class="form-input">
<label for="email">Email</label>
<input type="text" id="email" name="email" size="18">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="text" id="password" name="password" size="18">
<input type="password" id="password" name="password" size="18">
</div>
<input type="submit" value="Login">
<div id="message"></div>
</form>
<form id="signupform" onsubmit="return inputValidation()">
<form id="signupform">
<h2>Sign up here</h2>
<div class="form-input">
<label for="fname">First name</label>
......@@ -52,19 +53,23 @@
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="text" id="password" name="password" size="18">
<input type="password" id="password" name="password" size="18">
</div>
<div class="form-input">
<label for="password2">Repeat PSW</label>
<input type="text" id="password2" name="password2" size="18">
<input type="password" id="password2" name="password2" size="18">
</div>
<div class="form-input">
<input type="submit" value="Sign Up">
</div>
<div id="message"></div>
</form>
</div>
</div>
</script>
<script type="text/view" id="profileview">
<h1>lOGIN SIDA</h1>
</script>
</head>
<body style="background-color: antiquewhite;">
<div id="pagecontent">
......
client.js
+ 94
− 24
View file @ 1b5acb7b
class SignUp {
constructor(email, password, fname, lname, gender, city, country) {
this.email = email;
this.password = password;
this.firstname = fname;
this.familyname = lname;
this.gender = gender;
this.city = city;
this.country = country;
}
}
displayView = function() {
// the code required to display a view
};
......@@ -7,38 +20,95 @@ window.onload = function() {
// window alert() is not allowed to be used in your implementation.
//window.alert("Hello TDDD97!");
document.getElementById("pagecontent").innerHTML = document.getElementById("welcomeview").innerText;
var signupform = document.forms["signupform"]
var loginform = document.forms["loginform"];
var signupform = document.forms["signupform"];
signupform.addEventListener("submit", function(event) {
event.preventDefault();
inputValidation(event);
if(inputValidation("signupform")) {
var signupObject = new SignUp(signupform["email"].value,
signupform["password"].value,
signupform["fname"].value,
signupform["lname"].value,
signupform["gender"].value,
signupform["city"].value,
signupform["country"].value);
var message = serverstub.signUp(signupObject);
console.log(message);
if (!message.success) {
signupform["email"].value = "";
signupform["email"].setAttribute("placeholder", message.message);
} else {
document.getElementById("pagecontent").innerHTML = "";
document.getElementById("pagecontent").innerText = "";
document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText;
}
}
})
};
inputValidation = function(event) {
let allInputs = document.forms["signupform"].elements;
for(elem in allInputs) {
if(element.type === "text" && element.value === "") {
console.log("hejejeheh");
return false;
loginform.addEventListener("submit", function(event) {
event.preventDefault();
if (inputValidation("loginform")) {
var message = serverstub.signIn(loginform["email"].value, loginform["password"].value);
console.log(message);
if(!message.success) {
loginform["email"].value = "";
loginform["password"].value = "";
loginform["email"].setAttribute("placeholder", message.message);
} else {
document.getElementById("pagecontent").innerHTML = "";
document.getElementById("pagecontent").innerText = "";
document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText;
}
}
}
let emailText = document.forms["loginform"]["email"].value;
if (!validateEmail(emailText)) {
return false;
}
})
};
inputValidation = function(formID) {
var form = document.forms[formID];
let allInputs = form.querySelectorAll("input");
var valid = true;
allInputs.forEach(function(elem) {
if(elem.type === "text" && elem.value === "") {
elem.setAttribute("placeholder", "Don't leave blank");
valid = false;
} })
if (!validateEmail(form)) {
valid = false;
}
valid = validatePassword(form, formID);
return valid;
}
function validateEmail(input) {
function validateEmail(form) {
var validRegex = /\w+@\w+\.\w+/
if (input.value.match(validRegex)) {
alert("Valid email address!");
document.form1.text1.focus();
return true;
} else {
alert("Invalid email address!");
document.form1.text1.focus();
var email = form["email"];
if (!email.value.match(validRegex)) {
email.value = "";
email.setAttribute("placeholder", "Invalid email");
return false;
}
}
return true;
}
function validatePassword(form, formID) {
if(formID == "signupform" && form["password"].value != form["password2"].value) {
form["password"].value = "";
form["password2"].value = "";
form["password"].setAttribute("placeholder", "Passwords must match");
form["password2"].setAttribute("placeholder", "Passwords must match");
return false;
}
if(formID == "signupform" && form["password"].value.length < 8) {
form["password"].value = "";
form["password2"].value = "";
form["password"].setAttribute("placeholder", "Password must be 8 characters or longer");
return false;
}
if(formID == "loginform" && form["password"].value.length < 8) {
form["password"].value = "";
form["password"].setAttribute("placeholder", "Wrong password");
return false;
}
return true;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment