From 25a3572a02216d5c2051065c8b9add0feb53a396 Mon Sep 17 00:00:00 2001 From: nathan boileau Date: Fri, 14 Oct 2022 19:54:45 +0200 Subject: [PATCH] Login page --- WEB/src/CSS/Login.css | 33 +++++++++++------ WEB/src/JS/LogIn.js | 63 +++++++++++++++++++++++++++++++- WEB/src/pages/LogSign/Login.html | 34 +++++++++++------ 3 files changed, 106 insertions(+), 24 deletions(-) diff --git a/WEB/src/CSS/Login.css b/WEB/src/CSS/Login.css index ecc3c683..476bc8f0 100644 --- a/WEB/src/CSS/Login.css +++ b/WEB/src/CSS/Login.css @@ -83,25 +83,36 @@ body { .login-box .user-box input:valid ~ label { top: -20px; left: 0; - color: #03e9f4; + color: #6090d1 ; font-size: 12px; } - .login-box form a { + .login-box form a, .login-box form button { + margin-left: 10px; position: relative; - display: inline-block; - padding: 10px 20px; + width: 120px; + display: inline-flex; + justify-content: center; + padding: 10px 0px; color: #6090d1; + background: transparent; + border: none; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; - letter-spacing: 4px + letter-spacing: 3px } + +.login-box form .right{ + float: right; + margin-right: 10px; +} + - .login-box a:hover { + .login-box a:hover, .login-box button:hover { background: #6090d1; color: #fff; border-radius: 5px; @@ -111,12 +122,12 @@ body { 0 0 100px #6090d1; } - .login-box a span { + .login-box a span, .login-box button span { position: absolute; display: block; } - .login-box a span:nth-child(1) { + .login-box a span:nth-child(1), .login-box button span:nth-child(1) { top: 0; left: -100%; width: 100%; @@ -134,7 +145,7 @@ body { } } - .login-box a span:nth-child(2) { + .login-box a span:nth-child(2), .login-box button span:nth-child(2) { top: -100%; right: 0; width: 2px; @@ -153,7 +164,7 @@ body { } } - .login-box a span:nth-child(3) { + .login-box a span:nth-child(3), .login-box button span:nth-child(3) { bottom: 0; right: -100%; width: 100%; @@ -172,7 +183,7 @@ body { } } - .login-box a span:nth-child(4) { + .login-box a span:nth-child(4), .login-box button span:nth-child(4) { bottom: -100%; left: 0; width: 2px; diff --git a/WEB/src/JS/LogIn.js b/WEB/src/JS/LogIn.js index cc921ce6..827bbc79 100644 --- a/WEB/src/JS/LogIn.js +++ b/WEB/src/JS/LogIn.js @@ -1,2 +1,61 @@ -// Make a Log in page for the user to log in to the system -// With a Log in button and a Cancel button \ No newline at end of file +const form = document.getElementById('form'); +const username = document.getElementById('username'); +const password = document.getElementById('password'); + +form.addEventListener('submit', e => { + e.preventDefault(); + + checkInputs(); + printForm(); +}); + +const setErrorFor = (element, message) => { + const inputControl = element.parentElement; + + inputControl.classList.add('error'); + inputControl.classList.remove('success'); +} + +const setSuccessFor = (element) => { + const inputControl = element.parentElement; + + inputControl.classList.add('success'); + inputControl.classList.remove('error'); +}; + + + +function checkInputs() { + // trim to remove the whitespaces + const usernameValue = username.value.trim(); + const passwordValue = password.value.trim(); + + if (usernameValue === '') { + setErrorFor(username, 'Username cannot be blank'); + } + else { + setSuccessFor(username); + } + + if (passwordValue === '') { + setErrorFor(password, 'Password cannot be blank'); + } + else if(passwordValue.length < 8) { + setErrorFor(password, 'Password must be at least 8 characters'); + } + else { + setSuccessFor(password); + } + + if (usernameValue === 'admin' && passwordValue === 'admin') { + window.location.href = 'http://localhost:8080/WEB/Welcome.html'; + } +} + +//Open a new blank page and print the usename and password + +function printForm() { + var myWindow = window.open("", "MsgWindow", "width=200,height=100"); + myWindow.document.write("Username: " + username.value + "
Password: " + password.value); +} + diff --git a/WEB/src/pages/LogSign/Login.html b/WEB/src/pages/LogSign/Login.html index 31a17fac..aaafc3a1 100644 --- a/WEB/src/pages/LogSign/Login.html +++ b/WEB/src/pages/LogSign/Login.html @@ -5,28 +5,40 @@ + + Login - +
-