interface.html

<form class="form-horizontal">
  <header>
    <p>
      Configure chat
      <a href="https://help.fliplet.com/chat-component/" class="help-icon" target="_blank">
        <i class="fa fa-question-circle-o"></i>
      </a>
    </p>
  </header>

  <ul class="nav nav-tabs">
    <li class="active" id="chat-contacts-settings"><a href="#chat-contacts-tab" data-toggle="tab">Contacts</a></li>
    <li class="" id="chat-security-settings"><a href="#chat-settings-tab" data-toggle="tab">Security settings</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="chat-contacts-tab">
      <h2><small>Contacts Data</small></h2>
      <p class="text-helper">Chat requires you to provide a contact list data source. This will be a list of the users with access to chat.</p>
      <div class="form-group clearfix">
        <div id="dataSourceProvider" class="col-sm-8">
        </div>
      </div>
      <div class="column-selection">
        <div class="form-group clearfix">
          <div class="col-sm-4 control-label">
            <label for="emailColumn">Select the user's email address field</label>
          </div>
          <div class="col-sm-8">
            <select name="emailAddress" id="emailColumn" data-label="select" class="hidden-select form-control" disabled>
              <option value="">-- Please wait...</option>
            </select>
          </div>
        </div>
        <div class="form-group clearfix full-name-field">
          <div class="col-sm-4 control-label">
            <label for="fullName">Select the user's full name field</label>
          </div>
          <div class="col-sm-8">
            <select name="fullName" id="fullName" data-label="select" class="hidden-select form-control" disabled>
              <option value="">-- Please wait...</option>
            </select>
            <small id="show-seperate-name-fields" class=""><a href="#">Or select the first and last names separately</a></small>
          </div>
        </div>
        <div class="first-last-names-holder hidden">
          <div class="form-group clearfix">
            <div class="col-sm-4 control-label">
              <label for="firstName">Select the user's first name field</label>
            </div>
            <div class="col-sm-8">
              <select name="firstName" id="firstName" data-label="select" class="hidden-select form-control" disabled>
                <option value="">-- Please wait...</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix">
            <div class="col-sm-4 control-label">
              <label for="lastName">Select the user's last name field</label>
            </div>
            <div class="col-sm-8">
              <select name="lastName" id="lastName" data-label="select" class="hidden-select form-control" disabled>
                <option value="">-- Please wait...</option>
              </select>
              <small id="show-full-name-field" class=""><a href="#">Back to select the full name field</a></small>
            </div>
          </div>
        </div>
        <div class="form-group clearfix">
          <div class="col-sm-4 control-label">
            <label for="titleName">Select the user's job title field (optional)</label>
          </div>
          <div class="col-sm-8">
            <select name="titleName" id="titleName" data-label="select" class="hidden-select form-control" disabled>
              <option value="">-- Please wait...</option>
            </select>
          </div>
        </div>
        <div class="form-group clearfix">
          <div class="col-sm-4 control-label">
            <label for="avatarColumn">Select the user's image field (optional)</label>
          </div>
          <div class="col-sm-8">
            <select name="avatar" id="avatarColumn" data-label="select" class="hidden-select form-control" disabled>
              <option value="">-- Please wait...</option>
            </select>
          </div>
        </div>
        <div class="form-group clearfix contacts-number">
          <div class="col-sm-4 control-label">
            <label>Number of contacts to show in the contacts list</label>
            <p><small>Shows the first X amount of list items. We recommend using this option if you have a large list of contacts.</small></p>
          </div>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="contacts-number">
            <p class="text-muted field-text-info">Leave it blank to show all or enter a number.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="chat-settings-tab">
      <h2><small>Security screen</small></h2>
      <div class="row">
        <div class="col-xs-12">
          <p>Redirect logged out users to a login screen</p>
          <p class="text-helper">If a screen isn't selected, users will be redirected to the app launch screen.</p>
        </div>
      </div>
      <div id="security-screen"></div>
    </div>
  </div>
</form>