From 1b5acb7b5e17748e7c973186b9375cf215c0edfa Mon Sep 17 00:00:00 2001
From: Oliver Gren <oligr161@student.liu.se>
Date: Thu, 19 Jan 2023 11:23:24 +0100
Subject: [PATCH] signup mechanism
---
client.css | 4 ++
client.html | 15 ++++---
client.js | 118 +++++++++++++++++++++++++++++++++++++++++-----------
3 files changed, 108 insertions(+), 29 deletions(-)
diff --git a/client.css b/client.css
index 14e6e60..857198a 100644
--- a/client.css
+++ b/client.css
@@ -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
diff --git a/client.html b/client.html
index a799d1f..08ac700 100644
--- a/client.html
+++ b/client.html
@@ -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">
diff --git a/client.js b/client.js
index 162bf88..d19ba73 100644
--- a/client.js
+++ b/client.js
@@ -1,3 +1,16 @@
+
+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
--
GitLab