prisme-flow/nodes/bridge/box/box.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->

<script type="text/x-red" data-template-name="box-credentials">
    <div id="node-config-box-client-keys">
        <div class="form-row">
            <p style="margin-top: 10px;"><b>1.</b>
            <span data-i18n="box.label.create"></span> <a href="https://app.box.com/developers/" target="_blank"
            style="text-decoration:underline;">Box</a></p>
        </div>
        <div class="form-row">
            <p style="margin-top: 10px;"><b>2.</b> <span data-i18n="box.label.copy"></span>:</p>
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;" for="node-config-input-clientId"><i class="fa fa-user"></i> <span>Client Id</span></label>
            <input type="password" id="node-config-input-clientId">
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;" for="node-config-input-clientSecret"><i class="fa fa-key"></i> <span>Secret</span></label>
            <input type="password" id="node-config-input-clientSecret">
        </div>
        <div class="form-row">
           <label>&nbsp;</label>
           <a class="btn" id="node-config-start-auth" href="#" target="_blank"><span>Authenticate with Box</span></a>
        </div>
    </div>
    <div id="node-config-box">
        <div class="form-row">
            <label><i class="fa fa-user"></i> <span>Box User</span></label><span id="node-config-box-displayName"
            class="input-xlarge uneditable-input"></span>
        </div>
        <input type="hidden" id="node-config-input-displayName">
    </div>
</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('box-credentials',{
        category: 'config',
        defaults: {
            displayName: {value:""}
        },
        credentials: {
            displayName: {type:"text"},
            clientId: { type: "password"},
            clientSecret: { type: "password"}
        },
        label: function() {
            return this.displayName || 'Box';
        },
        exportable: false,
        oneditprepare: function() {
            var id = this.id;
            var pathname = document.location.pathname;
            if (pathname.slice(-1) != "/") {
                pathname += "/";
            }
            var callback = location.protocol + "//" +
                           location.hostname +
                           (location.port? ":"+location.port:"")+
                           pathname + "box-credentials/auth/callback";

            function updateBoxAuthButton() {
                var v1 = $("#node-config-input-clientId").val();
                var v2 = $("#node-config-input-clientSecret").val();
                $("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0));
            }
            $("#node-config-input-clientId").on('change keydown paste input',updateBoxAuthButton);
            $("#node-config-input-clientSecret").on('change keydown paste input',updateBoxAuthButton);

            function updateBoxDisplayName(dn) {
                $("#node-config-box-client-keys").hide();
                $("#node-config-box").show();
                $("#node-config-input-displayName").val(dn);
                $("#node-config-box-displayName").html(dn);
            }

            function pollBoxCredentials() {
                $.getJSON('credentials/box-credentials/'+id,function(data) {
                    if (data.displayName) {
                        $("#node-config-dialog-ok").button("enable");
                        updateBoxDisplayName(data.displayName);
                        delete window.boxConfigNodeIntervalId;
                    } else {
                        window.boxConfigNodeIntervalId = window.setTimeout(pollBoxCredentials,2000);
                    }
                });
             }

            updateBoxAuthButton();

            if (this.displayName) {
                updateBoxDisplayName(this.displayName);
            } else {
                $("#node-config-box-client-keys").show();
                $("#node-config-box").hide();
                $("#node-config-dialog-ok").button("disable");
            }

            $("#node-config-start-auth").mousedown(function() {
                var clientId = $("#node-config-input-clientId").val();
                var clientSecret = $("#node-config-input-clientSecret").val();
                var url = 'box-credentials/auth?id='+id+'&clientId='+clientId+"&clientSecret="+clientSecret+"&callback="+encodeURIComponent(callback);
                $(this).attr("href",url);
                window.boxConfigNodeIntervalId = window.setTimeout(pollBoxCredentials,2000);
            });
            $("#node-config-start-auth").click(function(e) {
                var clientId = $("#node-config-input-clientId").val();
                var clientSecret = $("#node-config-input-clientSecret").val();
                if (clientId === "" || clientSecret === "") {
                    e.preventDefault();
                }
            });
        },
        oneditsave: function() {
            if (window.boxConfigNodeIntervalId) {
                window.clearTimeout(window.boxConfigNodeIntervalId);
                delete window.boxConfigNodeIntervalId;
            }
        },
        oneditcancel: function() {
            if (window.boxConfigNodeIntervalId) {
                window.clearTimeout(window.boxConfigNodeIntervalId);
                delete window.boxConfigNodeIntervalId;
            }
        }
    });
})();
</script>

<script type="text/x-red" data-template-name="box in">
    <div class="form-row">
        <label for="node-input-box"><i class="fa fa-user"></i>Box</label>
        <input type="text" id="node-input-box">
    </div>
    <div class="form-row node-input-filepattern">
         <label for="node-input-filepattern"><i class="fa fa-file"></i>Filename Pattern</label>
         <input type="text" id="node-input-filepattern">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i>Box</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="box in">
    <p>Box watch node. Watches for file events on Box. By default all
    file events are reported, but the filename pattern can be supplied
    to limit the events to files which have full filenames that match
    the glob pattern. The event messages consist of the full filename
    in <b>msg.payload</b> property, the filename in <b>msg.file</b>,
    the event type in <b>msg.event</b> and the full event entry as
    returned by
    the <a href="https://developers.box.com/docs/#events">event
    API</a> in <b>msg.data</b>.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('box in',{
        category: 'storage-input',
        color:"#C0DEED",
        defaults: {
            box: {type:"box-credentials",required:true},
            filepattern: {value:""},
            name: {value:""}
        },
        inputs:0,
        outputs:1,
        icon: "box.png",
        label: function() {
            return this.name||this.filepattern||'Box';
        }
    });
</script>

<script type="text/x-red" data-template-name="box">
    <div class="form-row">
        <label for="node-input-box"><i class="fa fa-user"></i>Box</label>
        <input type="text" id="node-input-box">
    </div>
    <div class="form-row node-input-filename">
         <label for="node-input-filename"><i class="fa fa-file"></i>Filename</label>
         <input type="text" id="node-input-filename">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i>Box</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="box">
    <p>Box input node. Downloads content from Box. The filename on Box is taken from the node <b>filename</b>
    property or the <b>msg.filename</b> property. The content is sent as <b>msg.payload</b> property.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('box',{
        category: 'storage-input',
        color:"#C0DEED",
        defaults: {
            box: {type:"box-credentials",required:true},
            filename: {value:""},
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "box.png",
        label: function() {
            return this.name||this.filename||'Box';
        }
    });
</script>

<script type="text/x-red" data-template-name="box out">
    <div class="form-row">
        <label for="node-input-box"><i class="fa fa-user"></i>Box</label>
        <input type="text" id="node-input-box">
    </div>
    <div class="form-row node-input-filename">
         <label for="node-input-filename"><i class="fa fa-file"></i>Filename</label>
         <input type="text" id="node-input-filename">
    </div>
    <div class="form-row node-input-localFilename">
         <label for="node-input-localFilename"><i class="fa fa-file"></i>Local Filename</label>
         <input type="text" id="node-input-localFilename"">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i>Box</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="box out">
    <p>Box out node. Uploads content to Box.</p>
    <p>The filename on Box is taken from the node <b>filename</b> property or the <code>msg.filename</code>
     property.</p>
    <p>The content is taken from either the file pointed at by the node <b>localFilename</b> property, the
    <code>msg.localFilename</code> property, or the actual contents of the <code>msg.payload</code> property.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('box out',{
        category: 'storage-output',
        color:"#C0DEED",
        defaults: {
            box: {type:"box-credentials",required:true},
            filename: {value:""},
            localFilename: {value:""},
            name: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "box.png",
        align: "right",
        label: function() {
            return this.name||this.filename||this.localFilename||'Box';
        }
    });
</script>