• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Firestore Auth</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 148px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <button id="login">Login</button>
    21.   <button id="logout">Logout</button>
    22.   <br><br>
    23.   <zing-grid editor-controls pager caption="Adapter">
    24.     <zg-data adapter="firebaseSDK">
    25.       <zg-param name="collection" value="employees"></zg-param>
    26.     </zg-data>
    27.     <zg-colgroup>
    28.       <zg-column index="name"></zg-column>
    29.       <zg-column index="city"></zg-column>
    30.     </zg-colgroup>
    31.   </zing-grid>
    32.  
    33.   <!-- The core Firebase JS SDK is always required and must be listed first -->
    34.   <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
    35.   <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
    36.   <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    37.  
    38.   <script>
    39.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    40.     const zgRef = document.querySelector('zing-grid');
    41.  
    42.     // Your web app's Firebase configuration
    43.     // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    44.     var firebaseConfig = {
    45.       apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
    46.       authDomain: "zing-grid-demo.firebaseapp.com",
    47.       databaseURL: "https://zing-grid-demo.firebaseio.com",
    48.       projectId: "zing-grid-demo",
    49.       storageBucket: "zing-grid-demo.appspot.com",
    50.       messagingSenderId: "144536649424",
    51.       appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
    52.       measurementId: "G-FMNYY0H0B4"
    53.     };
    54.     // Initialize Firebase
    55.     firebase.initializeApp(firebaseConfig);
    56.     const auth = firebase.auth();
    57.  
    58.     const logout = document.querySelector('#logout');
    59.     auth.signOut();
    60.     logout.style.display = "none";
    61.  
    62.     const login = document.querySelector('#login');
    63.  
    64.     logout.addEventListener('click', (e) => {
    65.       e.preventDefault();
    66.       auth.signOut();
    67.       logout.style.display = "none";
    68.       login.style.display = "";
    69.       zgRef.refresh();
    70.     });
    71.  
    72.     login.addEventListener('click', (e) => {
    73.       e.preventDefault();
    74.       auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
    75.         login.style.display = "none";
    76.         logout.style.display = "";
    77.         zgRef.refresh();
    78.       });
    79.     });
    80.   </script>
    81. </body>
    82.  
    83. </html>
    84.  
    85. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Firestore Auth</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <button id="login">Login</button>
    12.   <button id="logout">Logout</button>
    13.   <br><br>
    14.   <zing-grid editor-controls pager caption="Adapter">
    15.     <zg-data adapter="firebaseSDK">
    16.       <zg-param name="collection" value="employees"></zg-param>
    17.     </zg-data>
    18.     <zg-colgroup>
    19.       <zg-column index="name"></zg-column>
    20.       <zg-column index="city"></zg-column>
    21.     </zg-colgroup>
    22.   </zing-grid>
    23.  
    24.   <!-- The core Firebase JS SDK is always required and must be listed first -->
    25.   <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
    26.   <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
    27.   <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    28.  
    29. </body>
    30.  
    31. </html>
    32.  
    33. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. const zgRef = document.querySelector('zing-grid');
    2.  
    3. // Your web app's Firebase configuration
    4. // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    5. var firebaseConfig = {
    6.   apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
    7.   authDomain: "zing-grid-demo.firebaseapp.com",
    8.   databaseURL: "https://zing-grid-demo.firebaseio.com",
    9.   projectId: "zing-grid-demo",
    10.   storageBucket: "zing-grid-demo.appspot.com",
    11.   messagingSenderId: "144536649424",
    12.   appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
    13.   measurementId: "G-FMNYY0H0B4"
    14. };
    15. // Initialize Firebase
    16. firebase.initializeApp(firebaseConfig);
    17. const auth = firebase.auth();
    18.  
    19. const logout = document.querySelector('#logout');
    20. auth.signOut();
    21. logout.style.display = "none";
    22.  
    23. const login = document.querySelector('#login');
    24.  
    25. logout.addEventListener('click', (e) => {
    26.   e.preventDefault();
    27.   auth.signOut();
    28.   logout.style.display = "none";
    29.   login.style.display = "";
    30.   zgRef.refresh();
    31. });
    32.  
    33. login.addEventListener('click', (e) => {
    34.   e.preventDefault();
    35.   auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
    36.     login.style.display = "none";
    37.     logout.style.display = "";
    38.     zgRef.refresh();
    39.   });
    40. });