contacts.html

<!-- Base Stitch Browser SDK -->
<script src='https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.14/stitch.js'></script>

<div class='results-bar'>
  <p>Count of Results:</p>
  <span id='num-results' class='results-bar__count'></span>
</div>
<div class='input-form'>
  <label for='first_name'>First Name:</label>
  <input class='form-control' name='first_name'>
  <label for='last_name'>Last Name:</label>
  <input class='form-control' name='last_name'>
  <label for='email'>Email:</label>
  <input class='form-control' name='email'>
  <label for='ip_address'>IP Address:</label>
  <input class='form-control' name='ip_address'>
</div>
<table class='table table-striped'>
  <thead class='thead'>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Gender</th>
      <th>IP Address</th>
    </tr>
  </thead>
  <tbody id='contacts'></tbody>
</table>

<script lang=javascript>
  const {
      Stitch,
      RemoteMongoClient,
      UserPasswordCredential
  } = stitch;
  const stitchClient = Stitch.initializeDefaultAppClient('calhacks-ssiva');

login('Michael.lynn@mongodb.com', 'Password123').then(() => {
  // Initialize a MongoDB Service Client
  const mongodb = stitchClient.getServiceClient(
    RemoteMongoClient.factory,
    'mongodb-atlas'
  );
  // Get a hook to the employees collection
  const contacts = mongodb.db('calhacks').collection('contacts');
  
  return contacts.find({}, {
    // limit: 3,
    // sort: { 'salary': -1 }
  })
    .asArray();
})
  .then(displayContacts)

function login(email, password) {
  const credential = new UserPasswordCredential(email, password);
  return stitchClient.auth.loginWithCredential(credential);
}

// Renders the the contacts' information in the table
function displayContacts(contacts) {
  const contactsTableBody = document.getElementById('contacts');
  const numResultsEl = document.getElementById('num-results');
  const tableRows = contacts.map(contact => {
    return `
      <tr>
        <td>${contact.first_name}, ${contact.last_name}</td>
        <td>${contact.email}</td>
        <td>${contact.gender}</td>
        <td>${contact.ip_address}</td>
      </tr>
    `;
  });
  contactsTableBody.innerHTML = tableRows.join('');
  numResultsEl.innerHTML = contacts.length;
}

</script>