diff --git a/client.css b/client.css index a314e002c79599f13905a1f8c33984c8159c1e5d..ca5ed7618de673f31c70c9e5419e17f05169f064 100644 --- a/client.css +++ b/client.css @@ -19,6 +19,13 @@ } .form-input { + width: 300px; + display: flex; + justify-content: space-between; + gap: 10px; +} + +.form-input-welcome { display: flex; justify-content: space-between; gap: 10px; @@ -82,4 +89,36 @@ input[type=text]:focus { textarea { overflow: hidden; resize: none; +} + +.message-board { + background-color: #f0e3d1; + overflow-y: scroll; + padding: 10px; + max-height: 40vh; + border-left: solid deeppink; + border-top-style: hidden; + border-right-style: hidden; + border-bottom-style: hidden; +} + +/* width */ +::-webkit-scrollbar { + width: 5px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: none; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + border-radius:5px; + background: #888; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; } \ No newline at end of file diff --git a/client.html b/client.html index 6da8250e23173ec99c9d8c0855183bb4469986e5..681316697d4c20ade6ee267f8874c013789592f2 100644 --- a/client.html +++ b/client.html @@ -11,11 +11,11 @@ <div class="form-elements" id="login"> <form id="loginform"> <h2>Login</h2> - <div class="form-input"> + <div class="form-input-welcome"> <label for="email">Email</label> <input type="text" id="email" name="email" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="password">Password</label> <input type="password" id="password" name="password" size="18"> </div> @@ -24,15 +24,15 @@ </form> <form id="signupform"> <h2>Sign up here</h2> - <div class="form-input"> + <div class="form-input-welcome"> <label for="fname">First name</label> <input type="text" id="fname" name="fname" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="lname">Family name</label> <input type="text" id="lname" name="lname" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="gender">Gender</label> <select id="gender" name="gender" style="width:169;"> <option value="male">Male</option> @@ -41,27 +41,27 @@ </select> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="city">City</label> <input type="text" id="city" name="city" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="country">Country</label> <input type="text" id="country" name="country" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="email">Email</label> <input type="text" id="email" name="email" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="password">Password</label> <input type="password" id="password" name="password" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <label for="password2">Repeat PSW</label> <input type="password" id="password2" name="password2" size="18"> </div> - <div class="form-input"> + <div class="form-input-welcome"> <input type="submit" value="Sign Up"> </div> <div id="message"></div> @@ -102,7 +102,7 @@ <div id="message3"></div> <button id="reloadbutton">Reload board</button> - <div id="home-message-board"> + <div id="home-message-board" class="message-board"> </div> @@ -137,7 +137,7 @@ <div id="message4"></div> <button id="browse-reloadbutton">Reload board</button> - <div id="browse-message-board"> + <div id="browse-message-board" class="message-board"> </div> </div> </div> diff --git a/client.js b/client.js index 384df4c61995f3a6221dbb3bbb39efa55f5a4dfb..ee0ec501c03b903f9795f955518409ff371c1467 100644 --- a/client.js +++ b/client.js @@ -13,14 +13,15 @@ class SignUp { displayView = function() { // the code required to display a view -}; -window.onload = function() { if (localStorage.getItem("logintoken") != null) { loadProfileView(); } else { loadWelcomeView(); } }; +window.onload = function() { + displayView(); +}; loadWelcomeView = function() { document.getElementById("pagecontent").innerHTML = ""; @@ -49,7 +50,7 @@ loadWelcomeView = function() { signupform["email"].setAttribute("placeholder", message.message); } else { localStorage.setItem("logintoken", message.data); - loadProfileView(); + displayView(); } } } @@ -58,6 +59,7 @@ loadWelcomeView = function() { loginform.addEventListener("submit", function(event) { event.preventDefault(); +<<<<<<< HEAD var message = serverstub.signIn(loginform["email"].value, loginform["password"].value); console.log(message); if(!message.success) { @@ -68,6 +70,20 @@ loadWelcomeView = function() { localStorage.setItem("logintoken", message.data); loadProfileView(); } +======= + 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 { + localStorage.setItem("logintoken", message.data); + displayView(); + } + } +>>>>>>> 4c58f2373c357a402d439c148abe89d13737eddd }) } @@ -107,7 +123,7 @@ loadProfileView = function() { } else { localStorage.removeItem("logintoken"); } - loadWelcomeView(); + displayView(); }) var userData = serverstub.getUserDataByToken(localStorage.getItem('logintoken')).data @@ -224,9 +240,6 @@ reloadBoard = function(board, email=null) { messageHTML.appendChild(document.createElement('br')); boardBox.appendChild(messageHTML); - boardBox.style.backgroundColor = "white"; - boardBox.style.overflowY= "scroll"; - boardBox.style.maxHeight = "45vh"; } }