Invite users

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div class="main-holder">
  <div class="app-share">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#testers" data-toggle="tab" data-context="tester">
          <span>Invite testers</span>
          <span>with viewing only access</span>
        </a>
      </li>
      <li>
        <a href="#collaborators" data-toggle="tab" data-context="editor">
          <span>Invite collaborators</span>
          <span>with editing rights</span>
        </a>
      </li>
      <li>
        <a href="#manage" data-toggle="tab" data-context="manage">
          <span>Manage access</span>
          <span>configure access rights</span>
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="testers">
        <div class="callout callout-warning callout-upgrade callout-sm hidden">
          <div class="callout-body">
            <h4 class="not-limit">Your app has <span class="users-invited">2</span> of <span class="users-limit">3</span> app users</h4>
            <h4 class="limit-reached hidden">You have reached the limit of app collaborators you can invite</h4>
            <p class="description">Replace an existing app users with someone else,
              or upgrade your app plan to invite as many users as you need.</p>
          </div>
          <div class="btn btn-warning btn-upgrade">Upgrade</div>
        </div>
        <h5>Invite team members or add new users to help you test your...

CSS

/* Studio styles */
body {
  color: #333;
}

a,
a:hover,
a:focus,
a:active {
  color: #00abd1;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
  user-select: none;
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  color: #fff;
  background-color: #00abd1;
}

.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.open>.btn-primary.dropdown-toggle {
  color: #fff;
  border: 1px solid transparent;
  background-color: #00819e;
}

.btn-default,
.btn-default.focus,
.btn-default:focus {
  color: #474974;
  background-color: #eae9ec;
}

.btn-default.active,
.btn-default:active,
.btn-default:hover,
.open>.btn-default.dropdown-toggle {
  color: #474974;
  border: 1px solid transparent;
  background-color: #d0ced4;
}

.nav-tabs {
  padding: 0 2rem;
  font-size: 1.6rem;
  border-bottom: 1px solid #ddd;
  border-bottom-color: rgba(51, 51, 51, .1);
  user-select: none;
  margin-bottom: 1em;
}

.nav-tabs>li {
  margin-right: 2px;
  cursor: pointer;
}

.nav-tabs>li>a {
  color: rgba(51, 51, 51, .7);
  padding: 0 1em;
  line-height: 2.5;
  border: none;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  margin-right: 0;
}

.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
  background: none;
  color: #333;
  border-bottom-color: transparent;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  background: none;
  border: none;
  border-bottom: 4px solid #00abd1;
  color: #333;
  font-weight: 600;
}

.form-control {
  padding: 9px 12px;
  height: 40px;
}

.main-holder {
  padding: 60px;
}

.app-share .app-share-users .users {
  max-height: 45vh;
  overflow: auto;
  overflow-x: hidden;
}

.app-share .app-share-users .users .user {
 ...

JavaScript

var devEnv = true;
var API_URL = {
  eu: 'https://api.fliplet.com',
  us: 'https://us.api.fliplet.com',
  ca: 'https://ca.api.fliplet.com'
};
var organizations = window.flOrganizations || [{
  id: 1,
  name: 'My Organization',
  region: 'eu',
  type: 'free',
  settings: {
    plan: {
      id: 'sub_IOvIwoByLZGJcI',
      name: 'team',
      items: [{
        id: 'si_K6yDvWZBNJplwb',
        plan: {
          active: true,
          amount: null,
          product: 'prod_K6yDIjluskR6RV',
          currency: 'gbp',
          interval: 'month'
        },
        price: 'price_1JSkH4JNczvHKhMAldgaXBuy',
        quantity: 1
      }],
      active: false,
      createdAt: 1605532154,
      expiresAt: 1642342252,
      startedAt: 1642338554
    }
  },
  users: [{
      fullName: "Ibby Al-Faraj",
      id: 123456,
      firstName: "Ibby",
      lastName: "Al-Faraj",
      email: "[email protected]",
      createdAt: "2021-06-08T12:10:24.613Z",
      userRoleId: 1
    },
    {
      fullName: "Craig Lappin-Smith",
      id: 123456,
      firstName: "Craig",
      lastName: "Lappin-Smith",
      email: "[email protected]",
      createdAt: "2021-08-23T15:12:02.941Z",
      userRoleId: 1
    },
    {
      fullName: "Nicholas Valbusa",
      id: 123456,
      firstName: "Nicholas",
      lastName: "Valbusa",
      email: "[email protected]",
      createdAt: "2016-09-16T09:19:40.834Z",
      userRoleId: 1
    },
    {
      fullName: "Hugo Carneiro",
      id: 123456,
      firstName: "Hugo",
      lastName: "Carneiro",
      email: "[email protected]",
      createdAt: "2018-03-28T16:07:52.490Z",
      userRoleId: 1
    },
    {
      fullName: "Tony Wu",
      id: 1234567,
      firstName: "Tony",
      lastName: "Wu",
      email: "[email protected]",
      createdAt: "2017-03-08T08:50:03.207Z",
      userRoleId: 1
    }
  ]
}];
var organizationUsers = organizations[0].users;
var currentApp = window.flUser && window.flUser.currentApp || {
  id: 13119,
  name:...