Firestore Authentication Demo

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Firestore Auth</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 148px;
    }
  </style>
</head>

<body>
  <button id="login">Login</button>
  <button id="logout">Logout</button>
  <br><br>
  <zing-grid editor-controls pager caption="Adapter">
    <zg-data adapter="firebaseSDK">
      <zg-param name="collection" value="employees"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="city"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
  <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
  <script nonce="undefined" src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    const zgRef = document.querySelector('zing-grid');

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
      authDomain: "zing-grid-demo.firebaseapp.com",
      databaseURL: "https://zing-grid-demo.firebaseio.com",
      projectId: "zing-grid-demo",
      storageBucket: "zing-grid-demo.appspot.com",
      messagingSenderId: "144536649424",
      appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
      measurementId: "G-FMNYY0H0B4"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();

    const logout = document.querySelector('#logout');
    auth.signOut();
    logout.style.display = "none";

    const login = document.querySelector('#login');

    logout.addEventListener('click', (e) => {
      e.preventDefault();
      auth.signOut();
      logout.style.display = "none";
      login.style.display = "";
      zgRef.refresh();
    });

    login.addEventListener('click', (e) => {
      e.preventDefault();
      auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
        login.style.display = "none";
        logout.style.display = "";
        zgRef.refresh();
      });
    });
  </script>
</body>

</html>

</html>

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Firestore Auth</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <button id="login">Login</button>
  <button id="logout">Logout</button>
  <br><br>
  <zing-grid editor-controls pager caption="Adapter">
    <zg-data adapter="firebaseSDK">
      <zg-param name="collection" value="employees"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="city"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>

</body>

</html>

</html>

body {
  background: #e6e6e6;
}

const zgRef = document.querySelector('zing-grid');

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
  apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
  authDomain: "zing-grid-demo.firebaseapp.com",
  databaseURL: "https://zing-grid-demo.firebaseio.com",
  projectId: "zing-grid-demo",
  storageBucket: "zing-grid-demo.appspot.com",
  messagingSenderId: "144536649424",
  appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
  measurementId: "G-FMNYY0H0B4"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

const logout = document.querySelector('#logout');
auth.signOut();
logout.style.display = "none";

const login = document.querySelector('#login');

logout.addEventListener('click', (e) => {
  e.preventDefault();
  auth.signOut();
  logout.style.display = "none";
  login.style.display = "";
  zgRef.refresh();
});

login.addEventListener('click', (e) => {
  e.preventDefault();
  auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
    login.style.display = "none";
    logout.style.display = "";
    zgRef.refresh();
  });
});