okpush

10 files changed, 927 insertions, 0 deletions

diff --git a/lib/okpush/apn.js b/lib/okpush/apn.js
new file mode 100644
index 0000000..c143001
--- /dev/null
+++ b/lib/okpush/apn.js
@@ -0,0 +1,62 @@
+
+var apn = require('apn')
+var db = require('./db')
+var apnProvider, apnFeedback
+
+function init (data) {
+  var apn_config = data.production ? data.apn_production : data.apn_development
+  config = {}
+  config.key = apn_config.key
+  config.cert = apn_config.cert
+  config.production = data.production
+  apnProvider = new apn.Provider(config)
+}
+
+function push (channel, note) {
+  db.getAllIOSTokens(channel, function(err, tokens){
+    if (err) {
+      console.error("Error fetching devices:", err)
+      return
+    }
+    // console.log(note, tokens)
+    apnProvider.send(note, tokens).then( function (response) {
+      // response.sent.forEach( function (token) {
+      //   notificationSent(user, token)
+      // })
+      response.failed.forEach( function (failure) {
+        if (failure.error) {
+          // A transport-level error occurred (e.g. network problem)
+          // notificationError(user, token, failure.error);
+        } else if (failure.status == 410) {
+          // `failure.status` is the HTTP status code
+          // `failure.response` is the JSON payload 
+          // notificationFailed(token, failure.status, failure.response);
+          console.log(failure)
+          // db.removeToken(token)
+        }
+      })
+    })
+  })
+}
+
+function buildPayload (options, bundleId) {
+  var note = new apn.Notification()
+  note.topic = bundleId
+  if (options.expiry)
+    note.expiry = Math.floor(Date.now() / 1000) + options.expiry
+  if (options.alert)
+    note.alert = options.alert
+  if (options.badge)
+    note.badge = options.badge
+  if (options.payload)
+    note.payload = options.payload
+  if (options.sound)
+    note.sound = options.sound
+  return note
+}
+
+module.exports = {
+  init: init,
+  push: push,
+  buildPayload: buildPayload
+}
diff --git a/lib/okpush/db.js b/lib/okpush/db.js
new file mode 100644
index 0000000..09afdf3
--- /dev/null
+++ b/lib/okpush/db.js
@@ -0,0 +1,156 @@
+var mongoose = require('mongoose')
+var findOrCreate = require('mongoose-findorcreate')
+var _ = require('lodash')
+var db, PushToken, Notification, Channel
+
+mongoose.Promise = require('bluebird')
+
+function init (config) {
+  db = mongoose.connect(config.mongodbUrl)
+  mongoose.connection.on('error', errorHandler)
+
+  var pushTokenSchema = new db.Schema({
+    platform: {
+      type: 'String',
+      required: true,
+      lowercase: true,
+      enum: ['ios', 'android'],
+    },
+    token: {
+      type: 'String',
+      required: true,
+      unique: true,
+    },
+    channel: {
+      type: 'String',
+      required: true,
+    },
+  })
+
+  var channelSchema = new db.Schema({
+    channel: {
+      type: 'String',
+      required: true,
+      lowercase: true,
+    },
+    last_push: {
+      type: 'Date',
+      required: true,
+    }
+  })
+  channelSchema.plugin(findOrCreate);
+
+  var notificationSchema = new db.Schema({
+    channel: {
+      type: 'String',
+      required: true,
+      lowercase: true,
+    },
+    date: {
+      type: 'Date',
+      required: true,
+    }
+  })
+
+  module.exports.PushToken = PushToken = db.model('PushToken', pushTokenSchema)
+  module.exports.Notification = Notification = db.model('Notification', notificationSchema)
+  module.exports.Channel = Channel = db.model('Channel', channelSchema)
+}
+
+function errorHandler (error) {
+  console.error('ERROR: ' + error)
+}
+
+/* devices / tokens */
+
+function addToken (data) {
+  return new PushToken(data).save()
+}
+function getAllIOSTokens (channel, cb) {
+  PushToken.distinct("token", { channel: channel, platform: 'ios' }, function (err, tokens) {
+    if (err) return cb(err, [])
+    return cb(null, tokens)
+  })
+}
+function getAllAndroidTokens (channel, cb) {
+  PushToken.distinct("token", { channel: channel, platform: 'android' }, function (err, tokens) {
+    if (err) return cb(err, [])
+    return cb(null, tokens)
+  })
+}
+function getAllTokens (channel, cb) {
+  PushToken.find({ channel: channel }, function (err, items) {
+    if (err) return cb(err, [])
+    var items = items.map(function (item) {
+      return { platform: item.get('platform'), token: item.get('token') }
+    })
+    return cb(null, items)
+  })
+}
+function removeToken (data) {
+  PushToken.find(data).remove().exec()
+}
+function getDeviceCount (channels, cb) {
+  var countz = {}
+  get_next()
+  function get_next() {
+    var channel = channels.pop()
+    PushToken.distinct("token", { channel: channel }, function(err, tokens){
+      countz[channel] = tokens.length
+      if (channels.length) {
+        return get_next()
+      }
+      else {
+        cb(countz)
+      }
+    })
+  }
+}
+
+/* notifications */
+
+function addNotification (channel, cb) {
+  var now = new Date
+  Channel.findOrCreate({channel: channel}, {last_push: now}, function(err, note, created) {
+    if (err) {
+      console.error("Error finding/creating notification", err)
+      cb(err, false)
+      return
+    }
+    else if (! created) {
+      note.last_push = now
+      note.save()
+    }
+    cb(null, note)
+  })
+  new Notification ({
+    channel: channel,
+    date: now,
+  }).save()
+}
+
+function getNotifications (cb) {
+  Notification.find(function (err, items) {
+    if (err) return cb(err, null)
+
+    var items = _.map(items, function (item) {
+      return _.pick(item, ['channel', 'last_push'])
+    })
+
+    return cb(null, items)
+  })
+}
+
+/* wrap functions for some reason */
+
+module.exports = {
+  init: init,
+  addToken: addToken,
+  removeToken: removeToken,
+  getAllTokens: getAllTokens,
+  getAllIOSTokens: getAllIOSTokens,
+  getAllAndroidTokens: getAllAndroidTokens,
+  getDeviceCount: getDeviceCount,
+  addNotification: addNotification,
+  getNotifications: getNotifications,
+}
diff --git a/lib/okpush/index.js b/lib/okpush/index.js
new file mode 100644
index 0000000..36588aa
--- /dev/null
+++ b/lib/okpush/index.js
@@ -0,0 +1,136 @@
+/**
+ * OKPush - Handles basic broadcast push notifications, as well as keeping track of tokens.
+ */
+
+var path = require('path')
+var passport = require('passport')
+var DigestStrategy = require('passport-http').DigestStrategy;
+var bodyParser = require('body-parser')
+var OKTemplate = require('../../node_modules/okcms/app/node_modules/oktemplate')
+var apn = require('./apn')
+var db = require('./db')
+
+passport.use(new DigestStrategy({qop: 'auth'}, function authenticate(username, done) {
+  if (!process.env.OK_USER || !process.env.OK_PASS) {
+    return done(new Error('No user or pass configured on server'))
+  } else {
+    return done(null, process.env.OK_USER, process.env.OK_PASS)
+  }
+}))
+
+function OKPush (options) {
+  if (!(this instanceof OKPush)) return new OKPush(options)
+  options = options || {}
+  if (!options.express)
+    throw new Error('Express not provided to OKPush')
+  if (!options.config)
+    throw new Error('Configuration not provided to OKPush')
+  if (!options.config.notifications)
+    throw new Error('Notifications not provided to OKPush')
+  if (!options.config.bundleId)
+    throw new Error('bundleId not provided to OKPush')
+  if (!options.config.mongodbUrl)
+    throw new Error('mongodbUrl not provided to OKPush')
+  
+  var express = options.express
+  var router = express.Router()
+  var config = options.config
+  var meta = options.meta
+  var error = options.errorHandler
+  // var okcms_db = options.db
+
+  var templateProvider = this._templateProvider = new OKTemplate({
+    root: path.join(__dirname, './templates'),
+    debug: meta.debug
+  })
+
+  var templates = {}
+  templates['index'] = templateProvider.getTemplate('index')
+
+  apn.init(config)
+  db.init(config)
+
+  router.use('/admin/', passport.initialize())
+  router.use('/public/', express.static(path.join(__dirname, './public')));
+
+  // monkeypatch because of app.use(router) .. obnoxious
+  router.all('/admin/(:path*)?', function (req, res, next) {
+    console.log(req.url)
+    req.newUrl = req.url
+    req.url = req.originalUrl
+    next()
+  })
+  router.all('/admin/(:path*)?', passport.authenticate('digest', {
+    session: false
+  }))
+  router.all('/admin/(:path*)?', function (req, res, next) {
+    req.url = req.newUrl
+    next()
+  })
+
+  // pass in admin middleware!
+  router.get('/admin', function (req, res) {
+    db.getNotifications(function(err, notes){
+      var channels = Object.keys(config.notifications)
+      db.getDeviceCount(channels, function(count){
+        var data = {
+          meta: meta,
+          notifications: config.notifications,
+        }
+        notes.forEach(function(note){
+          if (note.key in data.notifications) {
+            data.notifications[ note.key ].last_push = note.last_push
+          }
+        })
+        Object.keys(count).forEach(function(key){
+          data.notifications[ key ].count = count[key]
+        })
+        templates['index'].render(data).then(function(rendered) {
+          res.send(rendered);
+        }).fail(error(req, res, 500))
+      })
+    })
+  })
+  
+  router.get('/list', function(req, res){
+    db.getAllTokens("hub", function(err, hubz){
+      res.json(hubz)
+    })
+  })
+
+  router.post('/send', bodyParser.urlencoded({ extended: false }), function (req, res) {
+    var channel = req.body.channel
+    var opt = options.config.notifications[channel]
+    var note = apn.buildPayload(opt, options.config.bundleId)
+    apn.push(channel, note)
+    db.addNotification(channel, function(){
+      res.sendStatus(200)
+    })
+  })
+
+  // should work without middleware
+  router.post('/add', bodyParser.urlencoded({ extended: false }), function (req, res) {
+    db.addToken({
+      token: req.body.registrationId,
+      channel: req.body.channel,
+      platform: req.body.platform,
+    })
+    res.sendStatus(200)
+  })
+  
+  router.post('/remove', bodyParser.urlencoded({ extended: false }), function (req, res) {
+    db.removeToken({
+      token: req.body.registrationId,
+      channel: req.body.channel,
+    })
+    res.sendStatus(200)
+  })
+
+  this._router = router
+}
+
+OKPush.prototype.middleware = function () {
+  return this._router
+}
+
+module.exports = OKPush
diff --git a/lib/okpush/package.json b/lib/okpush/package.json
new file mode 100644
index 0000000..87ca92c
--- /dev/null
+++ b/lib/okpush/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "okpush",
+  "version": "1.0.0",
+  "description": "push notification service",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "okfocus <frontdesk@okfoc.us>",
+  "license": "LNT",
+  "dependencies": {
+    "apn": "^2.1.1",
+    "bluebird": "^3.4.6",
+    "body-parser": "^1.15.2",
+    "lodash": "^4.16.3",
+    "mongoose": "^4.6.2",
+    "mongoose-findorcreate": "^0.1.2",
+    "passport": "^0.3.2",
+    "passport-http": "^0.3.0"
+  }
+}
diff --git a/lib/okpush/public/push.js b/lib/okpush/public/push.js
new file mode 100644
index 0000000..e75fc7f
--- /dev/null
+++ b/lib/okpush/public/push.js
@@ -0,0 +1,34 @@
+$(function(){
+  var confirm_msg = "This will send the notification {{key}} to {{count}} people. Click OK to confirm.";
+  $(".notifications button").click(function(){
+    var $el = $(this)
+    var data = $el.data()
+    var msg = confirm_msg.replace("{{key}}", capitalize(data.key)).replace("{{count}}", data.count)
+    if (! confirm(msg)) return
+    $.ajax({
+      type: "POST",
+      url: "/_services/push/send",
+      data: { channel: data.key },
+      success: function(){
+        alert("Push notification sent.")
+        var now = new Date()
+        // "%a %d-%b-%Y %H:%M"
+        var months = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" ")
+        var days = "Sun Mon Tue Wed Thu Fri Sat".split(" ")
+        var date = days[ now.getDay() ]
+        date += " " + now.getDate()
+        date += "-" + months[now.getMonth()]
+        date += "-" + now.getFullYear()
+        date += " " + now.getHours()
+        var mins = now.getMinutes()
+        if (mins < 10) mins = "0" + mins
+        date += ":" + mins
+        $el.closest("tr").find(".notification-date").html(date)
+      }
+    })
+  })
+})
+
+function capitalize (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
\ No newline at end of file
diff --git a/lib/okpush/templates/index.liquid b/lib/okpush/templates/index.liquid
new file mode 100644
index 0000000..124fb4e
--- /dev/null
+++ b/lib/okpush/templates/index.liquid
@@ -0,0 +1,76 @@
+{% include 'partials/head' %}
+
+{% include 'partials/flash' %}
+
+<style>
+th {
+  min-width: 100px;
+  text-align: left;
+  background: #ddd;
+}
+th:nth-child(2) {
+  min-width: 300px;
+}
+th:nth-child(3) {
+  min-width: 170px;
+}
+table,tr,th,td {
+  margin: 0;
+  padding: 0;
+}
+th,td {
+  padding: 5px;
+}
+tr:nth-child(2n+1) {
+  background: #f8f8f8;
+}
+</style>
+
+<nav class="resource-nav">
+  <a href="/admin/" class="btn">Back</a>
+</nav>
+
+<section class="main resource">
+
+  <h2>Push Notifications</h2>
+
+  <table class="notifications" cellpadding="0" cellspacing="0">
+    <tr>
+      <th>Key</th>
+      <th>Message</th>
+      <th>Last Push</th>
+      <th>Tokens</th>
+      <th></th>
+    </tr>
+  {% for pair in notifications %}
+    {% assign name = pair[0] %}
+    {% assign spec = pair[1] %}
+    <tr>
+      <td>
+        {{name | capitalize}}
+      </td>
+      <td>
+        {{spec.alert}}
+      </td>
+      <td class="notification-date">
+        {% unless spec.last_push %}
+          Never
+        {% else %}
+          {{ spec.last_push | date: "%a %d-%b-%Y %H:%M" }}
+        {% endunless %}
+      </td>
+      <td>
+        {{spec.count}}
+      </td>
+      <td>
+        <button data-key="{{name}}" data-count="{{spec.count}}" class="btn">send</button>
+      </td>
+    </tr>
+  {% endfor %}
+  </table>
+
+</section>
+
+{% include 'partials/tail' %}
+
+<script src="public/push.js"></script>
\ No newline at end of file
diff --git a/lib/okpush/templates/partials/flash.liquid b/lib/okpush/templates/partials/flash.liquid
new file mode 100644
index 0000000..e51a86b
--- /dev/null
+++ b/lib/okpush/templates/partials/flash.liquid
@@ -0,0 +1,20 @@
+{% if success.length > 0 %}
+<div class="success">
+  <div class="message">Changes saved.</div>
+  <!--
+  {% for info in success %}
+    <div class="message">{{info.action}}</div>
+  {% endfor %}
+  -->
+</div>
+{% endif %}
+
+{% if errors.length > 0 %}
+<div class="errors">
+  {% for error in errors %}
+    <div class="error">
+      <div class="message">{{error.message}}</div>
+    </div>
+  {% endfor %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/lib/okpush/templates/partials/head.liquid b/lib/okpush/templates/partials/head.liquid
new file mode 100644
index 0000000..e9c27dc
--- /dev/null
+++ b/lib/okpush/templates/partials/head.liquid
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>{{meta.project}} Admin</title>
+    <link rel="stylesheet" href="{{meta.static}}/css/main.css">
+  </head>
+  <body>
+    <header class="admin-header">
+      <span class="breadcrumb"><b>{{meta.project}}</b> Admin</span>
+      <a class="site-link" href="/">View Site</a>
+    </header>
+    <div class="container">
\ No newline at end of file
diff --git a/lib/okpush/templates/partials/inputs.liquid b/lib/okpush/templates/partials/inputs.liquid
new file mode 100644
index 0000000..60466de
--- /dev/null
+++ b/lib/okpush/templates/partials/inputs.liquid
@@ -0,0 +1,395 @@
+{% for pair in resource.spec %}
+  {% assign name = pair[0] %}
+  {% assign spec = pair[1] %}
+  {% assign type = spec.type %}
+
+  <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}"
+       data-name="{{name}}">
+    <label for="{{name}}">{{name | capitalize}}</label>
+
+    {% if type == 'string' %}
+      <input
+        name="{{name}}" type="text" value="{{spec.value | escape}}">
+    {% elsif type == 'text' %}
+      <textarea
+        name="{{name}}">{{spec.value | escape}}</textarea>
+    {% elsif type == 'number' %}
+      <input
+        type="number"
+        name="{{name}}" value="{{spec.value | escape}}">
+    {% elsif type == 'enum' or type == 'foreign-key' %}
+      <select
+        name="{{name}}">
+        {% for option in spec.options %}
+          {% if option.length == 2 %}
+            <option value="{{option[0]}}" {% if option[0] == spec.value %}selected{% endif %}>{{option[1] | capitalize}}</option>
+          {% else %}
+            <option value="{{option}}" {% if option == spec.value %}selected{% endif %}>{{option | capitalize}}</option>
+          {% endif %}
+        {% endfor %}
+      </select>
+    {% elsif type == 'video' %}
+      <div class="video group {% if spec.value.url %}loaded{% endif %}">
+        <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
+        <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden>
+        <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden>
+        <input name="{{name}}[width]" value="{{spec.value.width}}" type="hidden" class="video-width" hidden>
+        <input name="{{name}}[height]" value="{{spec.value.height}}" type="hidden" class="video-height" hidden>
+        <label>Title</label>
+        <input name="{{name}}[title]" type="text" value="{{spec.value.title | escape}}" class="video-title">
+        <label>Thumbnail</label>
+        <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb | escape}}" class="video-thumb">
+      </div>
+    {% elsif type == 'image' %}
+      <div class="image group {% if spec.value.uri %}loaded{% endif %}">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*">
+            <button>+ Add image</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+        <div class="image-element">
+          <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
+          <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption | escape}}</textarea>
+          <input type="hidden" name="{{name}}[width]" value="{{spec.value.width}}" class="image-width">
+          <input type="hidden" name="{{name}}[height]" value="{{spec.value.height}}" class="image-height">
+          <img src="{{spec.value.uri}}" alt="{{spec.value.caption | escape}}">
+          <button class="remove">x</button>
+        </div>
+      </div>
+
+    {% elsif type == 'date' %}
+
+      <div class="date">
+        <input name="{{name}}"
+               type="date"
+               {% if spec.value %}
+                 value="{{spec.value | date: '%Y-%m-%d'}}"
+               {% endif %}
+               >
+      </div>
+
+    {% elsif type == 'flag' %}
+
+      <div class="flag">
+        <input name="{{name}}"
+               type="checkbox"
+               {% if spec.value %}
+                checked="true"
+               {% endif %}
+               value="true">
+      </div>
+
+    {% elsif type == 'tag-list' %}
+      <div class="tag-list">
+        <input name="{{name}}"
+               value="{{spec.value | escape}}"
+               placeholder="Enter a comma separated list of tags.">
+      </div>
+
+    {% elsif type == 'link-list' %}
+      <div class="link-list group">
+        <ol class="links">
+          {% for link in spec.value %}
+            <li>
+              <div class="handle"></div>
+              <input
+                  name="{{name}}[{{forloop.index0}}][text]"
+                  value="{{link.text | escape}}"
+                  type="text"
+                  class="link-input link-text">
+              <input
+                  name="{{name}}[{{forloop.index0}}][uri]"
+                  value="{{link.uri | escape}}"
+                  type="text"
+                  class="link-input link-uri">
+              <button class="remove-link-btn btn">
+                -
+              </button>
+            </li>
+          {% endfor %}
+        </ol>
+        
+        <div class="handle"></div>
+        <input type="text"
+               class="link-input-new link-text"
+               placeholder="{% if spec.textLabel %}{{ spec.textLabel }}{% else %}Link text{% endif %}">
+        <input type="text"
+               class="link-input-new link-uri"
+               placeholder="{% if spec.linkLabel %}{{ spec.linkLabel }}{% else %}http://www.example.com{% endif %}">
+        <button class="add-link-btn btn">+</button>
+
+        <script type="text/html" class="link-template">
+          <li>
+            <div class="handle"></div>
+            <input
+                name="{{name}}[][text]"
+                value=""
+                type="text"
+                placeholder="{% if spec.textLabel %}{{ spec.textLabel }}{% else %}Link text{% endif %}"
+                class="link-input link-text">
+            <input
+                name="{{name}}[][uri]"
+                value=""
+                type="text"
+                placeholder="{% if spec.linkLabel %}{{ spec.linkLabel }}{% else %}http://www.example.com{% endif %}"
+                class="link-input link-uri">
+            <button class="remove-link-btn btn">
+              -
+            </button>
+          </li>
+        </script>
+
+      </div>
+
+    {% elsif type == 'media-list' or type == 'media' %}
+      <div class="media-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" multiple>
+            <button>+ Add media</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <label>Caption</label>
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]"></textarea>
+            <input type="hidden" name="{{name}}[][type]" value="image">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
+            <img>
+            <button class="remove">x</button>
+          </li>
+        </script>
+
+        <script type="text/html" class="video-template">
+          <li class="video-element">
+            <div style="float: left">
+            <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
+            <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
+            <input name="{{name}}[][uri]" type="hidden" class="video-uri" hidden>
+            <input name="{{name}}[][width]" type="hidden" class="video-width" hidden>
+            <input name="{{name}}[][height]" type="hidden" class="video-height" hidden>
+            <label>Caption</label>
+            <input name="{{name}}[][title]" type="text" class="video-title">
+            <label>Thumbnail</label>
+            <input name="{{name}}[][thumb]" type="text" class="video-thumb">
+            <span class="checkboxes">
+              <input name="{{name}}[][autoplay]" value="{{image.autoplay}}" type="checkbox" class="video-autoplay flag">
+              <label>Autoplay</label>
+              <input name="{{name}}[][loop]" value="{{image.loop}}" type="checkbox" class="video-loop flag">
+              <label>Loop</label>
+            </span>
+            </div>
+            <img>
+            <button class="remove">x</button>
+          </li>
+        </script>
+
+        <script type="text/html" class="audio-template">
+          <li class="audio-element">
+            <div style="float: left">
+            <input name="{{name}}[][type]" type="hidden" class="audio-type" hidden>
+            <input name="{{name}}[][token]" type="hidden" class="audio-token" hidden>
+            <input name="{{name}}[][uri]" type="hidden" class="audio-uri" hidden>
+            <input name="{{name}}[][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+            <label>Caption</label>
+            <input name="{{name}}[][title]" type="text" class="audio-title">
+            <label>Thumbnail</label>
+            <input name="{{name}}[][thumb]" type="text" class="audio-thumb">
+            </div>
+            <img>
+            <button class="remove">x</button>
+          </li>
+        </script>
+
+        <script type="text/html" class="link-template">
+          <li class="link-element">
+            <input class="uri" type="text" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption"></textarea>
+            <input type="hidden" name="{{name}}[][type]" value="link">
+            <button class="remove">x</button>
+          </li>
+        </script>
+        
+        <ol>
+          {% for image in spec.value %}
+            {% if image.type and (image.type == "vimeo" or image.type == "youtube" or image.type == "video") %}
+              <li class="video-element">
+                <div style="float: left">
+                <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
+                <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
+                <input name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}" type="hidden" class="video-uri" hidden>
+                <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
+                <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
+                <label>Caption</label>
+                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="video-title">
+                <label>Thumbnail</label>
+                <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
+                <span class="checkboxes">
+                  <input name="{{name}}[{{forloop.index0}}][autoplay]" value="true" {% if image.autoplay == "true" %}checked="true"{% endif %} type="checkbox" class="flag video-autoplay">
+                  <label>Autoplay</label>
+                  <input name="{{name}}[{{forloop.index0}}][loop]" value="true" {% if image.loop == "true" %}checked="true"{% endif %} type="checkbox" class="flag video-loop">
+                  <label>Loop</label>
+                </span>
+                </div>
+                <img src="{{image.thumb}}">
+                <button class="remove">x</button>
+              </li>
+            {% elsif image.type and (image.type == "audio" or image.type == "soundcloud") %}
+              <li class="audio-element">
+                <div style="float: left">
+                <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="audio-type" hidden>
+                <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="audio-token" hidden>
+                <input name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}" type="hidden" class="audio-uri" hidden>
+                <input name="{{name}}[{{forloop.index0}}][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+                <label>Caption</label>
+                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="audio-title">
+                <label>Thumbnail</label>
+                <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="audio-thumb">
+                </div>
+                <img src="{{image.thumb}}">
+                <button class="remove">x</button>
+              </li>
+            {% elsif image.type and image.type == "link" %}
+              <li class="link-element">
+                <input class="uri" type="text" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+                <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]" placeholder="Caption">{{image.caption | escape}}</textarea>
+                <input type="hidden" name="{{name}}[{{forloop.index0}}][type]" value="link">
+                <button class="remove">x</button>
+              </li>
+            {% else %}
+              <li class="image-element">
+                <label>Caption</label>
+                <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+                <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="image-width" hidden>
+                <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="image-height" hidden>
+                <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
+                <input type="hidden" name="{{name}}[{{forloop.index0}}][type]" value="image">
+                <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
+                <button class="remove">x</button>
+              </li>
+            {% endif %}
+          {% endfor %}
+        </ol>
+      </div>
+    {% elsif type == 'captioned-image-list' or type == 'gallery' %}
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
+            <textarea class="caption" name="{{name}}[][caption]"></textarea>
+            <img>
+            <button class="remove">x</button>
+          </li>
+        </script>
+
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
+              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
+              <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
+              <button class="remove">x</button>
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
+    {% elsif type == 'double-captioned-image-list' %}
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <img>
+            <button class="remove">x</button>
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width">
+            <input type="hidden" name="{{name}}[][height]" class="image-height">
+            <input class="caption" name="{{name}}[][label]" placeholder="Name">
+            <input class="caption" name="{{name}}[][caption]" placeholder="Email">
+          </li>
+        </script>
+
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
+              <button class="remove">x</button>
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Email">
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
+    {% elsif type == 'triple-captioned-image-list' %}
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <img>
+            <button class="remove">x</button>
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width">
+            <input type="hidden" name="{{name}}[][height]" class="image-height">
+            <input class="caption" name="{{name}}[][label]" placeholder="Label">
+            <input class="caption" name="{{name}}[][caption]" placeholder="Caption">
+            <input class="caption" name="{{name}}[][code]" placeholder="Code">
+          </li>
+        </script>
+
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
+              <button class="remove">x</button>
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Label">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Caption">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][code]" value="{{image.code | escape}}"  placeholder="Code">
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
+    {% elsif type == 'meta' %}
+      <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">
+    {% else %}
+      <p><pre style="color: red">Admin template doesn't support '{{type}}' properties!</pre></p>
+    {% endif %}
+  </div>
+
+{% endfor %}
diff --git a/lib/okpush/templates/partials/tail.liquid b/lib/okpush/templates/partials/tail.liquid
new file mode 100644
index 0000000..522023b
--- /dev/null
+++ b/lib/okpush/templates/partials/tail.liquid
@@ -0,0 +1,14 @@
+    </div> {% comment %} closes container tag {% endcomment %}
+    <div id="progress"></div>
+    <div id="uploadConfig"
+      data-image-maxbytes="{{meta.services.s3.image.maxbytes}}"
+      data-audio-maxbytes="{{meta.services.s3.audio.maxbytes}}"
+      data-video-maxbytes="{{meta.services.s3.video.maxbytes}}"></div>
+  </body>
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
+  <script src="/admin/js/jqueryui-draggable.js"></script>
+  <script src="/admin/js/upload.js"></script>
+  <script src="/admin/js/parser.js"></script>
+  <script src="/admin/js/app.js"></script>
+</html>