Overhaul the credentials popup page, including some base styles

typotter · Sep 1, 2017 · 2456ce8 · 2456ce8
1 parent ca7676c
commit 2456ce8
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 50 deletions.
diff --git a/credentials.html b/credentials.html
@@ -1,43 +1,26 @@
 <!DOCTYPE html>
-<!--
-Copyright (c) 2016 Google Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
 <html>
 <head>
   <meta charset=utf-8 />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Google Sign In in Chrome Extensions Example</title>
+  <title>Prairie Dog Brewing Technology Department</title>
 
+  <link rel="stylesheet" href="pdb-styles.css">
   <link rel="stylesheet" href="main.css">
-
-  <!-- ***************************************************************************************
-       * TODO(DEVELOPER): Make sure you are importing the latest version of the Firebase JS. *
-       *************************************************************************************** -->
   <script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
   <script src="credentials.js"></script>
 </head>
 <body>
-  <h3>Firebase Authentication</h3>
-
-  <div class="quickstart-user-details-container">
-    <button id="quickstart-button">Sign-in with Google</button>
-    <p>
-      Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
-      <div>Firebase auth <code>currentUser</code> object value:</div>
-      <pre><code id="quickstart-account-details">null</code></pre>
+  <img src="pdb-logo-big.png" class="header-image">
+  <h3>Prairie Dog Brewing</h3>
+  <h4>Technology Department</h3>
+  <div class="quickstart-user-details-container" id="signin">
+    <p id="enjoy" style="display:none;">
+      You are now authenticated with the <strong>Prairie Dog Brewing Technology
+      Department</strong>. We are pleased to bring you tools and enhancements to
+      the EKOS Brewmaster website. Additional Data nodes coming soon.
     </p>
+    <button id="quickstart-button">Sign-in</button>
   </div>
 </body>
 </html>
diff --git a/credentials.js b/credentials.js
@@ -1,4 +1,3 @@
-// TODO(DEVELOPER): Change the values below using values from the initialization snippet: Firebase Console > Overview > Add Firebase to your web app.
 // Initialize Firebase
 var config = {
   apiKey: "AIzaSyCfHp6dkivD_7EUQyiCn3ulSoJo5L_qoE8",
@@ -9,17 +8,7 @@ firebase.initializeApp(config);
 
 /**
  * initApp handles setting up the Firebase context and registering
- * callbacks for the auth status.
- *
- * The core initialization is in firebase.App - this is the glue class
- * which stores configuration. We provide an app name here to allow
- * distinguishing multiple app instances.
- *
- * This method also registers a listener with firebase.auth().onAuthStateChanged.
- * This listener is called when the user is signed in or out, and that
- * is where we update the UI.
- *
- * When signed in, we also authenticate to the Firebase Realtime Database.
+ * a callback for the auth status.
  */
 function initApp() {
   // Listen for auth state changes.
@@ -36,8 +25,7 @@ function initApp() {
       var providerData = user.providerData;
       // [START_EXCLUDE]
       document.getElementById('quickstart-button').textContent = 'Sign out';
-      document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
-      document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, '  ');
+      document.getElementById('enjoy').style.display = 'block';
       // [END_EXCLUDE]
 
       firebase.database().ref("/batches/PB0057").once('value').then(function(response) {
@@ -47,9 +35,8 @@ function initApp() {
     } else {
       // Let's try to get a Google auth token programmatically.
       // [START_EXCLUDE]
-      document.getElementById('quickstart-button').textContent = 'Sign-in with Google';
-      document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
-      document.getElementById('quickstart-account-details').textContent = 'null';
+      document.getElementById('quickstart-button').textContent = 'Sign-in';
+      document.getElementById('enjoy').style.display = 'none';
       // [END_EXCLUDE]
     }
     document.getElementById('quickstart-button').disabled = false;

diff --git a/main.css b/main.css
@@ -52,9 +52,16 @@ code {
   white-space: pre-wrap;
   word-break: break-all;
 }
-h3 {
-  background: url('firebase-logo.png') no-repeat;
-  background-size: 40px;
-  padding-left: 50px;
-  line-height: 40px;
+
+
+.header-image {
+  height: 240px;
+  display: block;
+  margin: 0px auto;
 }
+
+#quickstart-button {
+  display: block;
+  margin: 0px auto;
+}
+
diff --git a/pdb-logo-big.png b/pdb-logo-big.png
diff --git a/pdb-styles.css b/pdb-styles.css
@@ -0,0 +1,26 @@
+@font-face {font-family: "After Disaster";
+    src: url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.eot");
+    src: url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.eot?#iefix") format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.woff2") format("woff2"),
+    url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.woff") format("woff"),
+    url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.ttf") format("truetype"),
+    url("//db.onlinewebfonts.com/t/a41479893690030a24b109401e1f7b10.svg#After Disaster") format("svg");
+}
+
+p {
+  font-face: Roboto Condensed Bold;
+  color: #5A4638;
+}
+
+
+h3, h4 {
+  color: #5A4638;
+  font-family: After Disaster;
+  text-align: center;
+}
+h3 {
+  font-size: 3em;
+}
+h4 {
+  font-size: 2em;
+}