Auto Publish Web

by Hugo Carneiro

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<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.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- MODAL FOR TEMPLATES -->
<div class="modal fade" id="publish-web-modal" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-thin fa-2x"></i></button>
        <h3 class="modal-title" id="myModalLabel">Publish your web app</h3>
      </div>
      <div class="modal-body">
        <div class="modal-body-initial">
          <h4 class="custom-h4">Would you like help publishing your web app?</h4>
          <p>Fliplet will do the hard work and provide you with a web app link that you can use to test or promote your app.</p>
          <div class="modal-button-wrapper">
            <button type="button" class="btn btn-default no-publish">No, thank you</button>
            <button type="button" class="btn btn-primary yes-publish">Yes, please</button>
          </div>
          <div class="error-holder hidden">
            <div class="alert alert-danger" role="alert"><p></p></div>
          </div>
        </div>
        <div class="modal-body-success hidden">
          <h4 class="custom-h4">Web app URL</h4>
          <p>You have successfully published your web app. Use the link below to access it or share it with your audience.</p>
          <div class="web-app-url">
            <p><a href="#" target="_blank">https://apps.fliplet.com/</a></p>
            <button type="button" class="btn btn-default copy-url"><i class="fa fa-clipboard"></i> Copy</button>
          </div>
        </div>
     ...

CSS

body {
  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  color: #333;
}

.fa-times-thin:before {
  content: "\D7";
}

.btn-default,
.btn-default.focus,
.btn-default:focus {
  padding: 9px 12px;
  font-size: 14px;
  color: #474974;
  background-color: #eae9ec;
  transition: none;
  border-color: #eae9ec;
  outline: none;
}

.btn-default:active,
.btn-default:hover:active,
.btn-default:active:focus {
  color: #474974;
  background-color: #bebac4;
  border-color: #bebac4;
  outline: none;
}

.btn-default:hover {
  color: #474974;
  background-color: #d0ced4;
  border-color: #d0ced4;
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  padding: 9px 12px;
  font-size: 14px;
  color: #ffffff;
  background-color: #00abd1;
  transition: none;
  border-color: #00abd1;
  outline: none;
}

.btn-primary:active,
.btn-primary:hover:active,
.btn-primary:active:focus {
  color: #ffffff;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-primary:hover {
  color: #ffffff;
  background-color: #0087a6;
  border-color: #0087a6;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #00abd1;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: #474974;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h3 {
  font-size: 24px;
}

h4.custom-h4 {
  margin-top: 30px;
  color: #333;
}

/* MODAL */
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-content {
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  line-height: 65px;
  border-color: #e3e9eb;
}

.modal-header .close {
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
 ...

JavaScript

// Variables
window.dataLayer = [];
var currentUser = window.flUser || {
	id: 123
};
var currentApp = window.flUserApp || {
	id: 1,
	name: 'My new app',
	slug: null,
  users: [{
  	id: 123,
    appUser: {
    	appRoleId: 1
    }
  }]
};
var userOrganization = window.flOrganizations
	? window.flOrganizations[0]
  : {
    name: 'Fliplet',
    region: 'eu'
  };
var API_URL = {
  eu: 'https://api.fliplet.com',
  us: 'https://us.api.fliplet.com'
};
var appURL = '';

// FUNCTIONS
function parseError(error, defaultError) {
  let errorObject

  if (!error) {
    return defaultError
  }

  if (typeof error === 'string') {
    try {
      errorObject = JSON.parse(error)
      return parseError(errorObject, defaultError)
    } catch (e) {
      return error || defaultError
    }
  }

  if (typeof error !== 'object') {
    // Number, Boolean etc.
    return error
  }

  if (Array.isArray(error) && error.length === 1) {
    // Single element array
    return parseError(error[0], defaultError)
  }

  if (error.error) {
    return parseError(error.error)
  }

  if (error.body) {
    return parseError(error.body, defaultError)
  }

  if (error.responseJSON) {
    return parseError(error.responseJSON, defaultError)
  }

  if (error.description) {
    return parseError(error.description, defaultError)
  }

  if (error.message) {
    // Includes try...catch and thrown errors
    let message = error.message

    // Adds list of errors where possible. Useful for model validation errors.
    if (Array.isArray(error.errors) && error.errors.length) {
      message += ': '
      error.errors.forEach((e, i) => {
        if (i !== 0) {
          message += '; '
        }

        message += parseError(e)
      })
    }

    return message
  }

  if (error.responseText) {
    // XHR object
    return parseError(error.responseText, defaultError)
  }

  if (error.status === 0) {
    return 'Error connecting to server'
  }

  if (Object.keys(error).length === 1) {
    // Object only contains...