diff options
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | login/index.html | 82 | ||||
| -rw-r--r-- | shared/css/main.css | 3 | ||||
| -rw-r--r-- | shared/js/Login.js | 19 |
4 files changed, 93 insertions, 13 deletions
@@ -88,6 +88,6 @@ <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase.js"></script> <script src="shared/firebaseConfig.js"></script> - <script src="shared/Login.js"></script> + <script src="shared/LoginCheck.js"></script> </body> </html> diff --git a/login/index.html b/login/index.html new file mode 100644 index 0000000..4556d30 --- /dev/null +++ b/login/index.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta content="width=device-width, initial-scale=1.0" name="viewport"> + <meta content="ie=edge" http-equiv="X-UA-Compatible"> + <title>Firebase ECommerce Solution</title> + <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet"> + <link href="../shared/css/main.css" rel="stylesheet"> + </head> + <body> + <div style="position: absolute; top: 75px; z-index: 99; right: 10px;"> + <div class="toast" data-autohide="false"> + <div class="toast-header"> + <strong id="message" class="mr-auto">Message</strong> + <button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button"> + <span aria-hidden="true">×</span> + </button> + </div> + <div id="body" class="toast-body"> + Hello, world! This is a toast message. + </div> + </div> + </div> + <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> + <a class="navbar-brand" href="#">Firebase ECommerce</a> + <button aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarText" data-toggle="collapse" type="button"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarText"> + <form class="mx-2 my-auto d-inline w-100"> + <div class="input-group"> + <input class="form-control" id="searchbox" placeholder="Search for Products" type="text"> + </div> + </form> + <span class="navbar-text"> + <a class="nav-link" href="#" id="sign" style="display: block; width: 100%; padding: .25rem 1.5rem; text-align: inherit; + white-space: nowrap;">Sign In/ Register</a> + <div class="nav-item dropdown"> + <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button" style="display: none;"> + My Account + </a> + <div + aria-labelledby="navbarDropdown" class="dropdown-menu" style="left: -40px;"> + <!-- <h6 style="font-size: 1em; font-weight: 700; padding: .25rem 1.5rem; display: block; width: 100%; -webkit-user-select: none;">Account Management</h6> --> + <a class="dropdown-item item-black" href="#" style="color:black;">My Account</a> + <a class="dropdown-item item-black" href="#" style="color:black;">My Products</a> + <a class="dropdown-item item-black" href="#" style="color:black;">My Orders</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item item-black" href="#" style="color:black;">SignOut</a> + </div> + </div> + </span> + </div> + </nav> + <div class="container-fluid padded-top"> + <div class="card"> + <div class="card-header"> + Login to Firebase ECommerce + </div> + <div class="card-body"> + <div class="form-group"> + <label for="email">Email address</label> + <input aria-describedby="emailHelp" class="form-control" id="email" placeholder="Enter email" type="email"> + <small class="form-text text-muted" id="emailHelp">We'll never share your email with anyone else.</small> + </div> + <div class="form-group"> + <label for="password">Password</label> + <input class="form-control" id="password" placeholder="Password" type="password"> + </div> + <button class="btn btn-primary" id="login">Login</button> + </div> + </div> + </div> + <script src="../shared/js/jquery.js"></script> + <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> + <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> + <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase.js"></script> + <script src="../shared/js/firebaseConfig.js"></script> + <script src="../shared/js/Login.js"></script> + </body> +</html> diff --git a/shared/css/main.css b/shared/css/main.css index 9b97325..5b21812 100644 --- a/shared/css/main.css +++ b/shared/css/main.css @@ -1,6 +1,9 @@ .padded { padding: 0px 0px 30px 0px; } +.padded-top{ + padding: 50px; +} .padded-bar { padding: 10px 0px 5px 10px; } diff --git a/shared/js/Login.js b/shared/js/Login.js index d8352eb..e1b9d3c 100644 --- a/shared/js/Login.js +++ b/shared/js/Login.js @@ -1,25 +1,20 @@ $(document).ready(function(){ - function showAlert(message) { - // Get the snackbar DIV - var x = document.getElementById("snackbar"); - $('#snackbar').text(message) - // Add the "show" class to DIV - x.className = "show"; - - // After 3 seconds, remove the show class from DIV - setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); - } + function showAlert(message, body) { + $('#message').text(message); + $('#body').text(body) + $('.toast').toast('show') + } $('#login').click(function(){ var email = $("#email").val() var password = $("#password").val() if(email === '' || password === '') { - showAlert('Please fill in all the fields') + showAlert('Error', 'Please fill in all the fields') } else { firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; - showAlert(errorMessage) + showAlert('Error',errorMessage) // ... }); } |