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 @@ ...@@ -16,4 +16,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px; 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 @@ ...@@ -8,18 +8,19 @@
<div class="welcome"> <div class="welcome">
<img src="wimage.png" alt="logo and slogan"> <img src="wimage.png" alt="logo and slogan">
<div class="form-elements" id="login"> <div class="form-elements" id="login">
<form id="loginform" onsubmit="return inputValidation()"> <form id="loginform">
<div class="form-input"> <div class="form-input">
<label for="email">Email</label> <label for="email">Email</label>
<input type="text" id="email" name="email" size="18"> <input type="text" id="email" name="email" size="18">
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="password">Password</label> <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>
<input type="submit" value="Login"> <input type="submit" value="Login">
<div id="message"></div>
</form> </form>
<form id="signupform" onsubmit="return inputValidation()"> <form id="signupform">
<h2>Sign up here</h2> <h2>Sign up here</h2>
<div class="form-input"> <div class="form-input">
<label for="fname">First name</label> <label for="fname">First name</label>
...@@ -52,19 +53,23 @@ ...@@ -52,19 +53,23 @@
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="password">Password</label> <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>
<div class="form-input"> <div class="form-input">
<label for="password2">Repeat PSW</label> <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>
<div class="form-input"> <div class="form-input">
<input type="submit" value="Sign Up"> <input type="submit" value="Sign Up">
</div> </div>
<div id="message"></div>
</form> </form>
</div> </div>
</div> </div>
</script> </script>
<script type="text/view" id="profileview">
<h1>lOGIN SIDA</h1>
</script>
</head> </head>
<body style="background-color: antiquewhite;"> <body style="background-color: antiquewhite;">
<div id="pagecontent"> <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() { displayView = function() {
// the code required to display a view // the code required to display a view
}; };
...@@ -7,38 +20,95 @@ window.onload = function() { ...@@ -7,38 +20,95 @@ window.onload = function() {
// window alert() is not allowed to be used in your implementation. // window alert() is not allowed to be used in your implementation.
//window.alert("Hello TDDD97!"); //window.alert("Hello TDDD97!");
document.getElementById("pagecontent").innerHTML = document.getElementById("welcomeview").innerText; 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) { signupform.addEventListener("submit", function(event) {
event.preventDefault(); 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;
}
}
}) })
};
loginform.addEventListener("submit", function(event) {
inputValidation = function(event) { event.preventDefault();
let allInputs = document.forms["signupform"].elements; if (inputValidation("loginform")) {
for(elem in allInputs) { var message = serverstub.signIn(loginform["email"].value, loginform["password"].value);
if(element.type === "text" && element.value === "") { console.log(message);
console.log("hejejeheh"); if(!message.success) {
return false; 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+/ var validRegex = /\w+@\w+\.\w+/
if (input.value.match(validRegex)) { var email = form["email"];
alert("Valid email address!"); if (!email.value.match(validRegex)) {
document.form1.text1.focus(); email.value = "";
return true; email.setAttribute("placeholder", "Invalid email");
} else {
alert("Invalid email address!");
document.form1.text1.focus();
return false; 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