diff --git a/src/main/webapp/css/index.css b/src/main/webapp/css/index.css index b4b8b66b0eee400863cf390b8b3fe30c8d3985ff..32b16a4030bdaf726029c4d9ee38e0752ea85821 100644 --- a/src/main/webapp/css/index.css +++ b/src/main/webapp/css/index.css @@ -25,6 +25,11 @@ a:hover { color: #2C303C; } align-self: center; justify-self: center; } +.login { + display:flex; + flex-direction: column; + justify-content: space-between; +} .loginInput { align-self: center; @@ -34,6 +39,7 @@ a:hover { color: #2C303C; } padding: 2px; margin: 2px; box-sizing: border-box; + margin-bottom:10px; } .loginBtn { diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index a437e70b8e4cce1c16ed3dfe53aebc5200e47e3b..3d8a13987befcc8d978cd6749eaa3eb88c184df3 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -8,16 +9,24 @@ <link rel="stylesheet" href="css/app.css" /> <title>ChatPage</title> </head> + <body> <div class="container"> <div class="navbar"> <h1 class="header">Meldingsapplikasjon</h1> </div> - <form class="main" id="loginForm" onsubmit="login(event)"> + <form class="main login" id="loginForm" onsubmit="login(event)"> <input class="loginInput" placeholder="Brukernavn..." id="username" required pattern="([\w]+)"> + <input class="loginInput" type="password" placeholder="Passord..." id="password" required pattern="[\s\S]*"> <button class="loginBtn">Logg inn</button> </form> </div> -<script type="text/javascript" src="./js/index.js"></script> + <script type="text/javascript" src="./js/index.js"></script> </body> + +</html>> + +</html>index.js"></script> +</body> + </html> \ No newline at end of file diff --git a/src/main/webapp/js/index.js b/src/main/webapp/js/index.js index 60d5a1f6a82d5eb71a3920cb936b7eb1f3789cd7..87c0ac47e7274baae2a6f544d6cf3f1e7afe823b 100644 --- a/src/main/webapp/js/index.js +++ b/src/main/webapp/js/index.js @@ -1,5 +1,5 @@ let inputfield = document.getElementById('username'); -inputfield.addEventListener("input",function () { +inputfield.addEventListener("input", function () { if (inputfield.validity.patternMismatch) { inputfield.setCustomValidity("Ugyldig tegn, bruk kun bokstaver (a-z) og tall (0-9)"); } else { @@ -12,10 +12,11 @@ inputfield.addEventListener("input",function () { * Function called when pressing login-button. Makes a HTTP POST request to server. * On success it calls loadApplication(). */ -function login(event){ +function login(event) { event.preventDefault(); let user = { - "username": document.getElementById('username').value + "username": document.getElementById('username').value, + "password": document.getElementById('password').value }; fetch('../api/user', { @@ -27,7 +28,7 @@ function login(event){ }) .then(response => response.json()) .then(user => { - if(user.userId === 0) alert("Feil brukernavn og/eller passord"); + if (user.userId === 0) alert("Feil brukernavn og/eller passord"); else loadApplication(user); }) .catch(error => console.error(error)); @@ -38,9 +39,11 @@ function login(event){ * Adds user information to sessionStorage and redirects to app.html * @param user contains user information as a JSON object */ -function loadApplication(user){ +function loadApplication(user) { sessionStorage.setItem("userId", user.userId); sessionStorage.setItem("username", user.username); window.location.href = "../app.html" +}ion.href = "../app.html" + } \ No newline at end of file