Ft user authentication

guard/index.html

@@ -12,6 +12,7 @@
     <title>Andela &#187; TMac Checkin</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="https://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css">
     <link href="../css/main.css" rel="stylesheet">
   </head>
 
@@ -21,27 +22,43 @@
       <div class="header clearfix">
         <nav>
           <ul class="nav nav-pills pull-right">
-            <li class="active"><a href="#"><i class="fa fa-user"></i> Profile</a></li>
+            <li id="logout" class="hide active"><a href="#"><i class="fa fa-user"></i> logout</a></li>
           </ul>
         </nav>
         <h3 class="text-muted"><strong>tmac</strong>.checkin</h3>
       </div>
 
-      <div class="row col-md-12">
+      <div id="loginForm" class="wrapper">
+        <form class="form-signin">
+        <h2 class="form-signin-heading">Please sign in</h2>
+        <label class="sr-only">Email address</label>
+        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+        <label class="sr-only">Password</label>
+        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" value="remember-me"> Remember me
+          </label>
+        </div>
+        <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">Sign in</button>
+      </form>
+    </div>
+
+      <div id="checks" class="row col-md-12">
         <div class="heading">
           <h3><i class="fa fa-check-circle"></i> Checkins Today</h3>
           <p id="date-today">May 2, 2014</p>
         </div>
         <div class="details">
-            <table class="table table-striped">
+            <table  class="table table-striped">
               <thead>
                 <tr>
-                    <th>#</th><th>Name</th><th>TMac ID</th><th>IN</th><th>OUT</th><th></th>
+                    <th>User</th><th>Tmac/ID</th><th>Action</th><th>Time</th><th>Confirm</th><th></th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="user">
                 <tr>
-                    <td>1</td><td>James Smart</td><td>AND/TMAC/3</td><td>7.30 am</td><td>4.00 pm</td><td></td>
+                    <td id="user">1</td><td id="tmac">James Smart</td><td id="macid">AND/TMAC/3</td><td id="activity">7.30 am</td><td id="activity_name">4.00 pm</td><td></td>
                 </tr>
             </tbody>
             </table>
@@ -60,5 +77,6 @@ <h3><i class="fa fa-check-circle"></i> Checkins Today</h3>
     <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
     <script src="../js/moment.min.js"></script>
     <script src="../js/main.js"></script>
+    <script src="js/app_guard.js"></script>
   </body>
 </html>

guard/js/app_guard.js

@@ -0,0 +1,75 @@
+var guardConfig = {
+    apiKey: "AIzaSyD9MoWhDZHbvaCP0V8AzBcG4fs0PK1srxw",
+    authDomain: "web-quickstart-dbad8.firebaseapp.com",
+    databaseURL: "https://web-quickstart-dbad8.firebaseio.com",
+    projectId: "web-quickstart-dbad8",
+    storageBucket: "web-quickstart-dbad8.appspot.com",
+    messagingSenderId: "951023716196"
+    };
+var guardApp = firebase.initializeApp(guardConfig, "other");
+
+
+const btnLogin = document.getElementById('login');
+const btnLogout = document.getElementById('logout');
+const tblChecks = document.getElementById('checks');
+const frmLogin = document.getElementById('loginForm');
+const txtEmail = document.getElementById('inputEmail');
+const txtPassword = document.getElementById('inputPassword');
+
+
+btnLogin.addEventListener('click', e => {
+
+  const auth_guard = guardApp.auth();
+  // const auth = firebase.auth();
+  //sign in
+  const email = document.getElementById('inputEmail').value;
+  const password = document.getElementById('inputPassword').value;
+
+  const promise = guardApp.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
+  // Handle Errors here.
+  var errorCode = error.code;
+  var errorMessage = error.message;
+  // ...
+  });
+  promise.catch(e => console.log(errorMessage));
+});
+
+
+btnLogout.addEventListener('click', e => {
+  // get email and password
+  guardApp.auth().signOut();
+});
+
+// Add Event Listener
+guardApp.auth().onAuthStateChanged(firebaseUser => {
+  if(firebaseUser) {
+    tblChecks.classList.remove('hide')
+    btnLogout.classList.remove('hide')
+    frmLogin.classList.add('hide')
+    user = firebaseUser
+    mac = user.uid
+    const table = document.getElementById('user');
+    const dbRefObject = guardApp.database().ref().child('mac').orderByKey();
+    dbRefObject.on("value", function(snapshot) {
+          snapshot.forEach(function(childSnapshot) {
+      var childData = childSnapshot.val();
+      var row = table.insertRow(0);
+      var cell1 = row.insertCell(0);
+      var cell2 = row.insertCell(1);
+      var cell3 = row.insertCell(2);
+      var cell4 = row.insertCell(3);
+      cell1.innerHTML = childData.uid
+      cell2.innerHTML = childData.macid;
+      cell3.innerHTML = 
+      console.log(childData.uid)
+    });
+});
+
+
+  }else{
+    console.log('not logged');
+    btnLogout.classList.add('hide')
+    btnLogin.classList.remove('hide')
+    tblChecks.classList.add('hide')
+  }
+});

index.html

@@ -12,6 +12,7 @@
     <title>Andela &#187; TMac Checkin</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
     <link href="css/main.css" rel="stylesheet">
   </head>
 
@@ -21,29 +22,46 @@
       <div class="header clearfix">
         <nav>
           <ul class="nav nav-pills pull-right">
-            <li class="active"><a href="#"><i class="fa fa-user"></i> Profile</a></li>
+            <li class="active"><a id='login' ><i class="fa fa-user"></i> Login</a></li>
+            <li class="active"><a id='profile' ><i class="fa fa-cogs"></i> settings </a></li>
+            <li class="active"><a id='logout' ><i class="fa fa-user"></i> Logout</a></li>
           </ul>
+
+
         </nav>
         <h3 class="text-muted"><strong>tmac</strong>.checkin</h3>
       </div>
 
       <div class="jumbotron">
         <h1>No stress</h1>
-        <p class="lead">Check in / out your Mac with ease</p>
-        <p><a class="btn btn-warning" href="#" role="button"><i class="fa fa-check"></i> Check In</a>
-            <a class="btn btn-success" href="#" role="button"><i class="fa fa-check"></i> Check Out</a>
+        <p class="lead" id='tmac'></p>
+
+         <div class="form-inline">
+          <div class="form-group">
+            <input type="text" class="form-control" id="tmacid" placeholder="">
+          </div>
+          <div class="form-group">
+            <ul class="nav nav-pills pull-right">
+            <li class=""><a id='update' ><i class="fa fa-cogs"></i> Update </a></li>
+            <li class=""><a id='cancel' ><i class="fa fa-remove"></i> Cancel </a></li>
+          </ul>
+         </div>
+         </div>
+        <p>
+          <a class="btn btn-primary" id='google-button' role="button"><i class="fa fa-sign-in"></i> Login to get started</a>
+          <a class="btn" id='check-in' role="button"><i class="fa fa-check"></i> Check In</a>
+          <a class="btn" id='check-out' role="button"><i class="fa fa-check"></i> Check Out</a>
         </p>
       </div>
 
+
       <footer class="footer">
         <p>Buily with <i class="fa fa-heart"></i> by <a href="https://github.com/AndelaOSP/tmac" target="_blank">Andelans</a></p>
       </footer>
 
     </div> <!-- /container -->
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
-    <script src="js/main.js"></script>
+    <script src="js/app.js"></script>
   </body>
 </html>

js/app.js

@@ -0,0 +1,153 @@
+var config = {
+    apiKey: "AIzaSyD9MoWhDZHbvaCP0V8AzBcG4fs0PK1srxw",
+    authDomain: "web-quickstart-dbad8.firebaseapp.com",
+    databaseURL: "https://web-quickstart-dbad8.firebaseio.com",
+    projectId: "web-quickstart-dbad8",
+    storageBucket: "web-quickstart-dbad8.appspot.com",
+    messagingSenderId: "951023716196"
+    };
+firebase.initializeApp(config);
+
+// get elements
+const btnLogin = document.getElementById('login');
+const btnLogout = document.getElementById('logout');
+const btnGoogle = document.getElementById('google-button');
+const btnCheckin = document.getElementById('check-in');
+const btnCheckout = document.getElementById('check-out');
+const btnProfile = document.getElementById('profile');
+const txtTMACID = document.getElementById('tmacid');
+const btnUpdate = document.getElementById('update');
+const btnCancel = document.getElementById('cancel');
+var user = '';
+// Adding login event
+btnLogin.addEventListener('click', e => {
+  // get email and password
+  const email = txtEmail.value;
+  const password = txtPassword.value;
+  const auth = firebase.auth();
+  //sign in
+  const promise = auth.signInWithEmailAndPassword(email, password);
+  promise.catch(e => console.log(e.message));
+});
+
+
+btnGoogle.addEventListener( 'click', e => {
+  var provider = new firebase.auth.GoogleAuthProvider();
+  firebase.auth().signInWithPopup(provider).then(function(result) {
+  redirect('/');
+  }).catch(function(error) {
+    var errorCode = error.code;
+    var errorMessage = error.message;
+    var email = error.email;
+    var credential = error.credential;
+  });
+});
+
+btnCheckin.addEventListener('click', e => {
+    var database = firebase.database();
+    var ref = database.ref('mac');
+    var userid = user.uid;
+    const macid = document.getElementById('tmac').innerHTML;
+    var data = {
+        uid : userid,
+        macid : macid,
+        checkin : Date.now()
+    }
+    ref.push(data);
+    console.log(mac);
+    btnCheckin.classList.remove('btn-warning')
+    btnCheckin.classList.add('btn-success')
+    btnCheckout.classList.remove('btn-success')
+    btnCheckout.classList.add('btn-warning')
+});
+
+btnCheckout.addEventListener('click', e => {
+    var database = firebase.database();
+    var ref = database.ref('mac');
+    var userid = user.uid;
+    const macid = document.getElementById('tmac').innerHTML;
+    var data = {
+        uid : userid,
+        macid : macid,
+        checkout : Date.now()
+    }
+    ref.push(data);
+    console.log(mac);
+    btnCheckin.classList.remove('btn-success')
+    btnCheckin.classList.add('btn-warning')
+    btnCheckout.classList.remove('btn-warning')
+    btnCheckout.classList.add('btn-success')
+});
+
+btnProfile.addEventListener('click', e => {
+    btnCancel.classList.remove('hide')
+    btnUpdate.classList.remove('hide')
+    txtTMACID.classList.remove('hide')
+});
+
+btnUpdate.addEventListener('click', e => {
+
+    var database = firebase.database();
+    var ref = database.ref('users');
+    var userid = user.uid;
+    const macid = document.getElementById('tmacid').value;   
+
+    ref.child(userid).set({MACID: macid,});
+    btnCancel.classList.add('hide')
+    btnUpdate.classList.add('hide')
+    txtTMACID.classList.add('hide')
+});
+
+btnCancel.addEventListener('click', e => {
+    btnCancel.classList.add('hide')
+    btnUpdate.classList.add('hide')
+    txtTMACID.classList.add('hide')
+});
+
+
+function authAction(){
+    firebase.auth.signInWithPopup(provider).then(function(result) {
+      redirect('/');
+    }).catch(function(error) {
+      // Handle Errors here.
+      toast(error.message);
+    });                    
+  }
+
+
+btnLogout.addEventListener('click', e => {
+  // get email and password
+  firebase.auth().signOut();
+});
+
+// Add Event Listener
+firebase.auth().onAuthStateChanged(firebaseUser => {
+  if(firebaseUser) {
+    btnLogout.classList.remove('hide')
+    btnLogin.classList.add('hide')
+    btnGoogle.classList.add('hide')
+    btnCheckin.classList.remove('hide')
+    btnCheckout.classList.remove('hide')
+    btnProfile.classList.remove('hide')
+    btnCancel.classList.add('hide')
+    btnUpdate.classList.add('hide')
+    txtTMACID.classList.add('hide')
+    user = firebaseUser
+    mac = user.uid
+    const preObject = document.getElementById('tmac');
+    const dbRefObject = firebase.database().ref().child('users');
+    const dbRefItem = dbRefObject.child(mac).child('MACID');
+    dbRefItem.on('value', snap => preObject.innerText = snap.val());
+  }else{
+    console.log('not logged');
+    btnLogout.classList.add('hide')
+    btnLogin.classList.remove('hide')
+    btnGoogle.classList.remove('hide')
+    btnCheckin.classList.add('hide')
+    btnCheckout.classList.add('hide')
+    btnProfile.classList.add('hide')
+    btnCancel.classList.add('hide')
+    btnUpdate.classList.add('hide')
+    txtTMACID.classList.add('hide')
+  }
+});