fix: always load firebase login container

jkklapp · May 23, 2022 · 0e5eab2 · 0e5eab2
1 parent 2a44744
commit 0e5eab2
Showing 1 changed file with 28 additions and 34 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,36 +24,13 @@
     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
     <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
     <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
-    <script type="text/javascript">
-      document.addEventListener('DOMContentLoaded', function() {
-        let app = firebase.app();
-        var uiConfig = {
-          signInSuccessUrl: '/',
-          signInOptions: [
-            firebase.auth.EmailAuthProvider.PROVIDER_ID,
-          ],
-          // tosUrl and privacyPolicyUrl accept either url string or a callback
-          // function.
-          // Terms of service url/callback.
-          tosUrl: '',
-          // Privacy policy url/callback.
-          privacyPolicyUrl: function() {
-            window.location.assign('');
-          }
-        };
-
-        // Initialize the FirebaseUI Widget using Firebase.
-        var ui = new firebaseui.auth.AuthUI(firebase.auth());
-        // The start method will wait until the DOM is loaded.
-        ui.start('#firebaseui-auth-container', uiConfig);
-      });
-    </script>
     <script type="module">
       import { createApp } from 'https://unpkg.com/petite-vue?module'
 
       const initApp = function() {
+        var app = firebase.app();
+
         firebase.auth().onAuthStateChanged(function(user) {
-          console.log(user);
           if (user) {
             // User is signed in.
             var displayName = user.displayName;
@@ -73,20 +50,37 @@
                 uid: uid,
                 accessToken: accessToken,
                 providerData: providerData,
-                show: false,
-                hide: true,
+                loggedIn: true,
                 logout: function() {
                   firebase.auth().signOut();
                 }
               }).mount('#app')
             });
           } else {
             createApp({
-              show: true,
-              hide: false,
-            }).mount('#app')
+              loggedIn: false,
+            }).mount('#app');
+
+            var uiConfig = {
+              signInSuccessUrl: '/',
+              signInOptions: [
+                firebase.auth.EmailAuthProvider.PROVIDER_ID
+              ],
+              // tosUrl and privacyPolicyUrl accept either url string or a callback
+              // function.
+              // Terms of service url/callback.
+              tosUrl: '',
+              // Privacy policy url/callback.
+              privacyPolicyUrl: function() {
+                window.location.assign('');
+              }
+            };
+
+            // Initialize the FirebaseUI Widget using Firebase.
+            var ui = new firebaseui.auth.AuthUI(firebase.auth());
+            // The start method will wait until the DOM is loaded.
+            ui.start('#firebaseui-auth-container', uiConfig);
           }
-
         }, function(error) {
           console.log(error);
         });
@@ -99,9 +93,9 @@
   </head>
   <body>
     <div id="app">
-      <h1>Welcome to My Awesome App</h1>
-      <div v-if="show" id="firebaseui-auth-container"></div>
-      <pre v-if="hide" id="account-details">
+      <h1>Welcome to WSNE</h1>
+      <div id="firebaseui-auth-container"></div>
+      <pre v-if="loggedIn" id="account-details">
         <h2>Username {{ displayName }}</h2>
         <button @click="logout">Logout</button>
       </pre>