Merge filepicker and share iframes
This commit is contained in:
yflory
96
www/secureiframe/app-secure.less
Normal file
96
www/secureiframe/app-secure.less
Normal file
@@ -0,0 +1,96 @@
|
||||
@import (reference) '../../customize/src/less2/include/colortheme-all.less';
|
||||
@import (reference) '../../customize/src/less2/include/modal.less';
|
||||
@import (reference) '../../customize/src/less2/include/icon-colors.less';
|
||||
@import (reference) '../../customize/src/less2/include/fileupload.less';
|
||||
@import (reference) '../../customize/src/less2/include/alertify.less';
|
||||
@import (reference) '../../customize/src/less2/include/tippy.less';
|
||||
@import (reference) '../../customize/src/less2/include/checkmark.less';
|
||||
@import (reference) '../../customize/src/less2/include/password-input.less';
|
||||
@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
|
||||
@import (reference) '../../customize/src/less2/include/usergrid.less';
|
||||
|
||||
&.cp-app-secureiframe {
|
||||
.modals-ui-elements_main();
|
||||
.iconColors_main();
|
||||
.fileupload_main();
|
||||
.alertify_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
.password_main();
|
||||
.modal_main();
|
||||
.usergrid_main();
|
||||
|
||||
#cp-filepicker-dialog {
|
||||
display: none;
|
||||
.cp-modal {
|
||||
.cp-filepicker-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cp-loading-spinner-container {
|
||||
height: 100px;
|
||||
.cp-spinner {
|
||||
border-color: @colortheme_logo-2;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-filepicker-content-element {
|
||||
width: 125px;
|
||||
//min-width: 200px;
|
||||
//height: 1em;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
|
||||
display: inline-flex;
|
||||
flex-flow: column;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
text-align: left;
|
||||
line-height: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: @colortheme_modal-bg;
|
||||
|
||||
border: 1px solid @colortheme_logo-2;
|
||||
color: @colortheme_logo-2;
|
||||
|
||||
transition: all 0.1s;
|
||||
|
||||
&:hover {
|
||||
color: @colortheme_modal-fg;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cp-filepicker-content-element-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: 5px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.fa, .cptools {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 70px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
www/secureiframe/inner.html
Normal file
28
www/secureiframe/inner.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height: 100%; background: transparent;">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<script async data-bootload="/secureiframe/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
.loading-hidden { display: none; }
|
||||
body #cp-loading {
|
||||
position: absolute;
|
||||
top: 15vh;
|
||||
bottom: 15vh;
|
||||
left: 10vw;
|
||||
right: 10vw;
|
||||
z-index: 200000;
|
||||
overflow: hidden;
|
||||
}
|
||||
body #cp-loading .cp-loading-container {
|
||||
margin-top: 35vh;
|
||||
}
|
||||
body #cp-loading .cp-loading-cryptofist {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="cp-app-secureiframe" style="background: transparent;">
|
||||
</body>
|
||||
</html>
|
||||
|
||||
238
www/secureiframe/inner.js
Normal file
238
www/secureiframe/inner.js
Normal file
@@ -0,0 +1,238 @@
|
||||
define([
|
||||
'jquery',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/common-ui-elements.js',
|
||||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/common/hyperscript.js',
|
||||
'json.sortify',
|
||||
'/customize/messages.js',
|
||||
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/secureiframe/app-secure.less',
|
||||
], function (
|
||||
$,
|
||||
Crypto,
|
||||
nThen,
|
||||
SFCommon,
|
||||
UI,
|
||||
UIElements,
|
||||
Util,
|
||||
Hash,
|
||||
h,
|
||||
Sortify,
|
||||
Messages)
|
||||
{
|
||||
var APP = window.APP = {};
|
||||
|
||||
var andThen = function (common) {
|
||||
var metadataMgr = common.getMetadataMgr();
|
||||
var privateData = metadataMgr.getPrivateData();
|
||||
var sframeChan = common.getSframeChannel();
|
||||
var $body = $('body');
|
||||
|
||||
var hideIframe = function () {
|
||||
sframeChan.event('EV_SECURE_IFRAME_CLOSE');
|
||||
};
|
||||
|
||||
var displayed;
|
||||
var create = {};
|
||||
create['share'] = function (data) {
|
||||
var priv = metadataMgr.getPrivateData();
|
||||
var f = (data && data.file) ? UIElements.createFileShareModal
|
||||
: UIElements.createShareModal;
|
||||
|
||||
var friends = common.getFriends();
|
||||
|
||||
var _modal;
|
||||
var modal = f({
|
||||
origin: priv.origin,
|
||||
pathname: priv.pathname,
|
||||
password: priv.password,
|
||||
isTemplate: priv.isTemplate,
|
||||
hashes: priv.hashes,
|
||||
common: common,
|
||||
title: data.title,
|
||||
friends: friends,
|
||||
onClose: function () {
|
||||
if (_modal && _modal.close) { _modal.close(); }
|
||||
hideIframe();
|
||||
},
|
||||
fileData: {
|
||||
hash: priv.hashes.fileHash,
|
||||
password: priv.password
|
||||
}
|
||||
});
|
||||
$('button.cancel').click(); // Close any existing alertify
|
||||
_modal = UI.openCustomModal(modal);
|
||||
displayed = modal;
|
||||
};
|
||||
|
||||
// File uploader
|
||||
var onFilePicked = function (data) {
|
||||
var privateData = metadataMgr.getPrivateData();
|
||||
var parsed = Hash.parsePadUrl(data.url);
|
||||
if (displayed && displayed.hide) { displayed.hide(); }
|
||||
hideIframe();
|
||||
if (parsed.type === 'file') {
|
||||
var secret = Hash.getSecrets('file', parsed.hash, data.password);
|
||||
var fileHost = privateData.fileHost || privateData.origin;
|
||||
var src = fileHost + Hash.getBlobPathFromHex(secret.channel);
|
||||
var key = Hash.encodeBase64(secret.keys.cryptKey);
|
||||
sframeChan.event("EV_SECURE_ACTION", {
|
||||
type: parsed.type,
|
||||
src: src,
|
||||
name: data.name,
|
||||
key: key
|
||||
});
|
||||
return;
|
||||
}
|
||||
sframeChan.event("EV_SECURE_ACTION", {
|
||||
type: parsed.type,
|
||||
href: data.url,
|
||||
name: data.name
|
||||
});
|
||||
};
|
||||
var fmConfig = {
|
||||
body: $('body'),
|
||||
noHandlers: true,
|
||||
onUploaded: function (ev, data) {
|
||||
onFilePicked(data);
|
||||
}
|
||||
};
|
||||
APP.FM = common.createFileManager(fmConfig);
|
||||
create['filepicker'] = function (_filters) {
|
||||
var updateContainer = function () {};
|
||||
|
||||
var filters = _filters;
|
||||
var types = filters.types || [];
|
||||
var data = {
|
||||
FM: APP.FM
|
||||
};
|
||||
|
||||
// Create modal
|
||||
var modal = UI.createModal({
|
||||
$body: $body,
|
||||
onClose: function () {
|
||||
hideIframe();
|
||||
}
|
||||
});
|
||||
displayed = modal;
|
||||
modal.show();
|
||||
|
||||
// Set the fixed content
|
||||
modal.$modal.attr('id', 'cp-filepicker-dialog');
|
||||
var $block = modal.$modal.find('.cp-modal');
|
||||
|
||||
// Description
|
||||
var text = Messages.filePicker_description;
|
||||
if (types && types.length === 1 && types[0] !== 'file') {
|
||||
text = Messages.selectTemplate;
|
||||
}
|
||||
$block.append(h('p', text));
|
||||
|
||||
// Add filter input
|
||||
var $filter = $(h('p.cp-modal-form')).appendTo($block);
|
||||
var to;
|
||||
var $input = $('<input>', {
|
||||
type: 'text',
|
||||
'class': 'cp-filepicker-filter',
|
||||
'placeholder': Messages.filePicker_filter
|
||||
}).appendTo($filter).on('keypress', function () {
|
||||
if (to) { window.clearTimeout(to); }
|
||||
to = window.setTimeout(updateContainer, 300);
|
||||
});
|
||||
|
||||
// If file, display the upload button
|
||||
if (types.indexOf('file') !== -1 && common.isLoggedIn()) {
|
||||
var f = (filters && filters.filter) || {};
|
||||
delete data.accept;
|
||||
if (Array.isArray(f.fileType)) {
|
||||
data.accept = f.fileType.map(function (val) {
|
||||
if (/^[a-z]+\/$/.test(val)) {
|
||||
val += '*';
|
||||
}
|
||||
return val;
|
||||
});
|
||||
}
|
||||
$filter.append(common.createButton('upload', false, data));
|
||||
}
|
||||
|
||||
var $container = $(h('span.cp-filepicker-content', [
|
||||
h('div.cp-loading-spinner-container', h('span.cp-spinner'))
|
||||
])).appendTo($block);
|
||||
|
||||
// Update the files list when needed
|
||||
updateContainer = function () {
|
||||
var filter = $input.val().trim();
|
||||
var todo = function (err, list) {
|
||||
if (err) { return void console.error(err); }
|
||||
$container.html('');
|
||||
Object.keys(list).forEach(function (id) {
|
||||
var data = list[id];
|
||||
var name = data.filename || data.title || '?';
|
||||
if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
|
||||
return;
|
||||
}
|
||||
var $span = $('<span>', {
|
||||
'class': 'cp-filepicker-content-element',
|
||||
'title': name,
|
||||
}).appendTo($container);
|
||||
$span.append(UI.getFileIcon(data));
|
||||
$('<span>', {'class': 'cp-filepicker-content-element-name'}).text(name)
|
||||
.appendTo($span);
|
||||
$span.click(function () {
|
||||
if (typeof onFilePicked === "function") {
|
||||
onFilePicked({url: data.href, name: name, password: data.password});
|
||||
}
|
||||
});
|
||||
|
||||
// Add thumbnail if it exists
|
||||
common.displayThumbnail(data.href, data.channel, data.password, $span);
|
||||
});
|
||||
$input.focus();
|
||||
};
|
||||
common.getFilesList(filters, todo);
|
||||
};
|
||||
updateContainer();
|
||||
};
|
||||
|
||||
sframeChan.on('EV_REFRESH', function (data) {
|
||||
if (!data) { return; }
|
||||
var type = data.modal;
|
||||
if (!create[type]) { return; }
|
||||
if (displayed && displayed.close) { displayed.close(); }
|
||||
else if (displayed && displayed.hide) { displayed.hide(); }
|
||||
displayed = undefined;
|
||||
create[type](data);
|
||||
});
|
||||
|
||||
UI.removeLoadingScreen();
|
||||
};
|
||||
|
||||
var main = function () {
|
||||
var common;
|
||||
var _andThen = Util.once(andThen);
|
||||
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor(function () {
|
||||
UI.addLoadingScreen({hideTips: true, hideLogo: true});
|
||||
}));
|
||||
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
var metadataMgr = common.getMetadataMgr();
|
||||
if (metadataMgr.getMetadataLazy() !== 'uninitialized') {
|
||||
_andThen(common);
|
||||
return;
|
||||
}
|
||||
metadataMgr.onChange(function () {
|
||||
_andThen(common);
|
||||
});
|
||||
});
|
||||
};
|
||||
main();
|
||||
});
|
||||
181
www/secureiframe/main.js
Normal file
181
www/secureiframe/main.js
Normal file
@@ -0,0 +1,181 @@
|
||||
// Load #1, load as little as possible because we are in a race to get the loading screen up.
|
||||
define([
|
||||
'/bower_components/nthen/index.js',
|
||||
'/api/config',
|
||||
'jquery',
|
||||
'/common/requireconfig.js',
|
||||
], function (nThen, ApiConfig, $, RequireConfig) {
|
||||
var requireConfig = RequireConfig();
|
||||
|
||||
var ready = false;
|
||||
|
||||
var create = function (config) {
|
||||
// Loaded in load #2
|
||||
var sframeChan;
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor());
|
||||
}).nThen(function (waitFor) {
|
||||
var req = {
|
||||
cfg: requireConfig,
|
||||
req: [ '/common/loading.js' ],
|
||||
pfx: window.location.origin
|
||||
};
|
||||
window.rc = requireConfig;
|
||||
window.apiconf = ApiConfig;
|
||||
$('#sbox-secure-iframe').attr('src',
|
||||
ApiConfig.httpSafeOrigin + '/secureiframe/inner.html?' + requireConfig.urlArgs +
|
||||
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||
|
||||
// This is a cheap trick to avoid loading sframe-channel in parallel with the
|
||||
// loading screen setup.
|
||||
var done = waitFor();
|
||||
var onMsg = function (msg) {
|
||||
var data = JSON.parse(msg.data);
|
||||
if (data.q !== 'READY') { return; }
|
||||
window.removeEventListener('message', onMsg);
|
||||
var _done = done;
|
||||
done = function () { };
|
||||
_done();
|
||||
};
|
||||
window.addEventListener('message', onMsg);
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
var Cryptpad = config.modules.Cryptpad;
|
||||
var Utils = config.modules.Utils;
|
||||
|
||||
nThen(function (waitFor) {
|
||||
// The inner iframe tries to get some data from us every ms (cache, store...).
|
||||
// It will send a "READY" message and wait for our answer with the correct txid.
|
||||
// First, we have to answer to this message, otherwise we're going to block
|
||||
// sframe-boot.js. Then we can start the channel.
|
||||
var msgEv = Utils.Util.mkEvent();
|
||||
var iframe = $('#sbox-secure-iframe')[0].contentWindow;
|
||||
var postMsg = function (data) {
|
||||
iframe.postMessage(data, '*');
|
||||
};
|
||||
var w = waitFor();
|
||||
var whenReady = function (msg) {
|
||||
if (msg.source !== iframe) { return; }
|
||||
var data = JSON.parse(msg.data);
|
||||
if (!data.txid) { return; }
|
||||
// Remove the listener once we've received the READY message
|
||||
window.removeEventListener('message', whenReady);
|
||||
// Answer with the requested data
|
||||
postMsg(JSON.stringify({ txid: data.txid, language: Cryptpad.getLanguage(), localStore: window.localStore, cache: window.cpCache }));
|
||||
|
||||
// Then start the channel
|
||||
window.addEventListener('message', function (msg) {
|
||||
if (msg.source !== iframe) { return; }
|
||||
msgEv.fire(msg);
|
||||
});
|
||||
config.modules.SFrameChannel.create(msgEv, postMsg, waitFor(function (sfc) {
|
||||
sframeChan = sfc;
|
||||
}));
|
||||
w();
|
||||
};
|
||||
window.addEventListener('message', whenReady);
|
||||
}).nThen(function () {
|
||||
var updateMeta = function () {
|
||||
//console.log('EV_METADATA_UPDATE');
|
||||
var metaObj;
|
||||
nThen(function (waitFor) {
|
||||
Cryptpad.getMetadata(waitFor(function (err, n) {
|
||||
if (err) {
|
||||
waitFor.abort();
|
||||
return void console.log(err);
|
||||
}
|
||||
metaObj = n;
|
||||
}));
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
metaObj.doc = {};
|
||||
var additionalPriv = {
|
||||
fileHost: ApiConfig.fileHost,
|
||||
loggedIn: Utils.LocalStore.isLoggedIn(),
|
||||
origin: window.location.origin,
|
||||
pathname: window.location.pathname,
|
||||
feedbackAllowed: Utils.Feedback.state,
|
||||
hashes: config.data.hashes,
|
||||
password: config.data.password,
|
||||
isTemplate: config.data.isTemplate,
|
||||
file: config.data.file,
|
||||
};
|
||||
for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
|
||||
|
||||
sframeChan.event('EV_METADATA_UPDATE', metaObj);
|
||||
});
|
||||
};
|
||||
Cryptpad.onMetadataChanged(updateMeta);
|
||||
sframeChan.onReg('EV_METADATA_UPDATE', updateMeta);
|
||||
|
||||
config.addCommonRpc(sframeChan);
|
||||
|
||||
sframeChan.on('EV_CACHE_PUT', function (x) {
|
||||
Object.keys(x).forEach(function (k) {
|
||||
localStorage['CRYPTPAD_CACHE|' + k] = x[k];
|
||||
});
|
||||
});
|
||||
sframeChan.on('EV_LOCALSTORE_PUT', function (x) {
|
||||
Object.keys(x).forEach(function (k) {
|
||||
if (typeof(x[k]) === "undefined") {
|
||||
delete localStorage['CRYPTPAD_STORE|' + k];
|
||||
return;
|
||||
}
|
||||
localStorage['CRYPTPAD_STORE|' + k] = x[k];
|
||||
});
|
||||
});
|
||||
|
||||
sframeChan.on('Q_GET_FILES_LIST', function (types, cb) {
|
||||
Cryptpad.getSecureFilesList(types, function (err, data) {
|
||||
cb({
|
||||
error: err,
|
||||
data: data
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
sframeChan.on('EV_SECURE_ACTION', function (data) {
|
||||
config.onAction(data);
|
||||
});
|
||||
sframeChan.on('Q_UPLOAD_FILE', function (data, cb) {
|
||||
config.onFileUpload(sframeChan, data, cb);
|
||||
});
|
||||
|
||||
sframeChan.on('Q_GET_FILES_LIST', function (types, cb) {
|
||||
Cryptpad.getSecureFilesList(types, function (err, data) {
|
||||
cb({
|
||||
error: err,
|
||||
data: data
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
sframeChan.on('EV_SECURE_IFRAME_CLOSE', function () {
|
||||
config.onClose();
|
||||
});
|
||||
|
||||
sframeChan.onReady(function () {
|
||||
if (ready === true) { return; }
|
||||
if (typeof ready === "function") {
|
||||
ready();
|
||||
}
|
||||
ready = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
var refresh = function (data, cb) {
|
||||
if (!ready) {
|
||||
ready = function () {
|
||||
refresh(data, cb);
|
||||
};
|
||||
return;
|
||||
}
|
||||
sframeChan.event('EV_REFRESH', data);
|
||||
cb();
|
||||
};
|
||||
return {
|
||||
refresh: refresh
|
||||
};
|
||||
};
|
||||
return {
|
||||
create: create
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user