Preliminary Dashboard Support

2021-06-26 00:46:41 -04:00
parent 085185364a
commit 7da1d39b84
5 changed files with 146 additions and 35 deletions
@@ -22,7 +22,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-  <title>Material Design Lite</title>
+  <title>Dashboard</title>

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
@@ -66,16 +66,29 @@
 </head>

 <body onload="onLoad();">
+  <div id="main_content">
  <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
      <div class="mdl-layout__header-row">
-        <span class="mdl-layout-title">Project Explorer</span>
+        <span class="mdl-layout-title">Dashboard</span>
        <div class="mdl-layout-spacer"></div>
      </div>
    </header>
    <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
      <header class="demo-drawer-header">
-        Menu
+        <img src="" id="firebase_photo" class="demo-avatar">
+        <span id="firebase_name"></span>
+        <div class="demo-avatar-dropdown">
+          <span id="firebase_email"></span>
+          <div class="mdl-layout-spacer"></div>
+          <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+            <i class="material-icons" role="presentation">arrow_drop_down</i>
+            <span class="visuallyhidden">Options</span>
+          </button>
+          <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
+            <li class="mdl-menu__item" onclick="logOut()">Log Out</li>
+          </ul>
+        </div>
      </header>
      <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
        <a class="mdl-navigation__link" href="javascript:displayProjects('all')"><i class="mdl-color-text--blue-grey-400 material-icons"
@@ -92,6 +105,32 @@
      <div id="projects"></div>
    </main>
  </div>
+  </div>
+  <div id="login_container">
+    <div class="login-card mdl-card mdl-shadow--2dp">
+      <div class="mdl-card__title mdl-card--expand">
+        <h2 class="mdl-card__title-text">Admin Dashboard - Login</h2>
+      </div>
+      <div class="mdl-card__supporting-text">
+        Please login to enter this website.
+      </div>
+      <div class="mdl-card__actions mdl-card--border">
+        <a href="javascript:logIn();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+          Login
+        </a>
+      </div>
+    </div>
+  </div>
+  <div id="unauthorized">
+    <div class="unauthorized-card mdl-card mdl-shadow--2dp">
+      <div class="mdl-card__title mdl-card--expand">
+        <h2 class="mdl-card__title-text">Unauthorized Login</h2>
+      </div>
+      <div class="mdl-card__supporting-text">
+        You attempted to login with an improper account. If this is in error, please try reloading the page.
+      </div>
+    </div>
+  </div>
  <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="script.js"></script>
@@ -1,32 +1,8 @@
 function onLoad() {
    startFirebase()
-    displayProjects("all")
-}
-
-function displayProjects(status) {
-    document.getElementById("projects").innerHTML = ""
-    database = firebase.database().ref("projects");
-    database.once('value', function (snapshot) {
-        snapshot.forEach(function (child) {
-            firebase.database().ref("projects/" + child["key"]).on('value', function (data) {
-                var data1 = data.val();
-                var a = document.createElement("div")
-                if (data1["link"] == "") {
-                    a.innerHTML = '<div class="project-card mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">' + data1["title"].replace(/,/g, ".") + '<br>' + data1["status"] + '</h2> </div> <div class="mdl-card__supporting-text">' + data1["description"] + ' </div> </div>'
-                    //a.innerHTML = "<tr><td><div id='titles'>" + data1["title"].replace(/,/g, ".") + "</h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
-                } else {
-                    a.innerHTML = '<div class="project-card mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">' + data1["title"].replace(/,/g, ".") + '<br>' + data1["status"] + '</h2> </div> <div class="mdl-card__supporting-text">' + data1["description"] + ' </div> <div class="mdl-card__actions mdl-card--border"> <a href="' + data1["link"] + '" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> See More </a> </div> </div>'
-                    // a.innerHTML = "<tr><td><div id='titles'><a href='" + data1["link"] + "'>" + data1["title"].replace(/,/g, ".") + "</a></h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
-                }
-
-                if (status === "all") {
-                    document.getElementById("projects").appendChild(a)
-                } else if (data1["status"] === status) {
-                    document.getElementById("projects").appendChild(a)
-                }
-            })
-        })
-    });
+    document.getElementById("main_content").style.display = "none";
+    document.getElementById("unauthorized").style.display = "none";
+    checkLogin()
 }

 // Starts Firebase
@@ -43,6 +19,87 @@ function startFirebase() {
    firebase.initializeApp(config);
 }

+// Make completly sure user is authenticated.
+function verify() {
+    firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+            readData("users", function (array) {
+                if (array[firebase.auth().currentUser.uid]) {
+                    // Do nothing
+                } else {
+                    window.location.href = "unauthorized.html"
+                }
+            });
+        } else {
+            window.location.href = "unauthorized.html"
+        }
+    })
+}
+
+// Firebase Check Log In Status
+function checkLogin() {
+    firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+            readData("users", function (array) {
+                if (array[firebase.auth().currentUser.uid]) {
+                    document.getElementById("firebase_name").innerText = firebase.auth().currentUser.displayName
+                    document.getElementById("firebase_email").innerText = firebase.auth().currentUser.email
+                    document.getElementById("firebase_photo").setAttribute("src", firebase.auth().currentUser.photoURL)
+                    document.getElementById("main_content").style.display = "block";
+                    document.getElementById("login_container").style.display = "none";
+                    document.getElementById("unauthorized").style.display = "none";
+                } else {
+                    document.getElementById("main_content").innerHTML = ""
+                    document.getElementById("login_container").innerHTML = ""
+                    document.getElementById("unauthorized").style.display = "block";
+                }
+            })
+        } else {
+            document.getElementById("main_content").style.display = "none";
+            document.getElementById("login_container").style.display = "block";
+            document.getElementById("unauthorized").style.display = "none";
+        }
+    })
+}
+
+// Firebase Log In
+function logIn() {
+    firebase.auth().setPersistence("local")
+    // No user is signed in.
+    var provider = new firebase.auth.GoogleAuthProvider();
+    firebase.auth().signInWithPopup(provider).then(function (result) {
+        // This gives you a Google Access Token. You can use it to access the Google API.
+        var token = result.credential.accessToken;
+        // The signed-in user info.
+        var user = result.user;
+        readData("users", function (array) {
+            checkLogin();
+        });
+        // ...
+    }).catch(function (error) {
+        // Handle Errors here.
+        var errorCode = error.code;
+        var errorMessage = error.message;
+        // The email of the user's account used.
+        var email = error.email;
+        // The firebase.auth.AuthCredential type that was used.
+        var credential = error.credential;
+        console.log(errorCode)
+        console.log(errorMessage)
+        // ...
+    });
+}
+
+// Firebase Log Out
+function logOut() {
+    firebase.auth().signOut().then(function () {
+        checkLogin();
+    }, function (error) {
+        console.log("ERROR")
+        console.log(error)
+    });
+}
+
 // Firebase Interaction Scripts
 function readData(ref, callback) {
    var nextformation = firebase.database().ref(ref);
@@ -1,6 +1,21 @@
-.project-card {
-    width: 98.5%;
-    margin: 10px;
+.login-card {
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    margin: auto;
+    height: 20px;
+    text-align: center;
+}
+
+.unauthorized-card {
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    margin: auto;
+    height: 20px;
+    text-align: center;
+}
+
+#login_container {
+    height: 100%;
 }

 .active {color: green;}
@@ -409,7 +409,7 @@ function logIn() {
        console.log(errorMessage)
            // ...
    });
-}
+} 

 // Firebase Log Out
 function logOut() {
@@ -22,7 +22,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-  <title>Material Design Lite</title>
+  <title>Project Explorer</title>

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">