Login page

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 a:hover {
+.login-box form .right{
+    float: right;
+    margin-right: 10px;
+}
+
+  
+  .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;

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
+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 + "<br>Password: " + password.value);
+}
+

WEB/src/pages/LogSign/Login.html

@@ -5,28 +5,40 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../../CSS/Login.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <script defer src="../../JS/LogIn.js"></script>
     <title>Login</title>
 </head>
 <body> 
     <div class="main">
-        <div class="login-box">
+        <div class="login-box" id="form">
             <h2>Sign in</h2>
+
             <form>
               <div class="user-box">
-                <input type="text" name="" required="">
+                <input type="text" id="username" name="" required="">
                 <label>Username</label>
               </div>
               <div class="user-box">
-                <input type="password" name="" required="">
+                <input type="password" id="password" name="" required="">
                 <label>Password</label>
               </div>
-              <a href="#">
+              <div>
+                <button class="left" type="submit">
                   <span></span>
                   <span></span> 
                   <span></span>
                   <span></span>
-                Submit
+                  Login
+                </button>
+                <a href="#" class="right">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  Sign up
                 </a>
+              </div>
             </form>
         </div>
     </div>