From e96d54e655f183abdbdaf7767e9e79bf16f395ad Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 7 Dec 2017 18:51:50 +0100
Subject: [PATCH 1/2] Add a pad creation page

---
 customize.dist/application_config.js          |   2 +
 .../src/less2/include/creation.less           |  36 +++++
 www/code/app-code.less                        |   2 +
 www/common/common-ui-elements.js              |  77 +++++++++-
 www/common/cryptpad-common.js                 |   9 +-
 www/common/outer/async-store.js               |   3 +
 www/common/outer/chainpad-netflux-worker.js   |  10 ++
 www/common/sframe-app-framework.js            |   8 +-
 www/common/sframe-chainpad-netflux-outer.js   |   8 +-
 www/common/sframe-common-history.js           |   2 +-
 www/common/sframe-common-outer.js             | 134 +++++++++++++-----
 www/common/sframe-common.js                   |   1 +
 www/common/sframe-protocol.js                 |   5 +-
 13 files changed, 256 insertions(+), 41 deletions(-)
 create mode 100644 customize.dist/src/less2/include/creation.less

diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js
index 079c36eab..6e6bb803d 100644
--- a/customize.dist/application_config.js
+++ b/customize.dist/application_config.js
@@ -65,5 +65,7 @@ define(function() {
         contacts: 'fa-users',
     };
 
+    config.displayCreationScreen = true;
+
     return config;
 });
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
new file mode 100644
index 000000000..d82c47adf
--- /dev/null
+++ b/customize.dist/src/less2/include/creation.less
@@ -0,0 +1,36 @@
+@import (once) "./colortheme-all.less";
+
+.creation_main() {
+    #cp-creation {
+        position: fixed;
+        z-index: 10000000; // #loading
+        top: 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        background: @colortheme_loading-bg;
+        color: @colortheme_loading-color;
+        text-align: center;
+        font-size: 1.5em;
+        .cp-loading-container {
+            margin-top: 50vh;
+            transform: translateY(-50%);
+        }
+        .cp-loading-cryptofist {
+            margin-left: auto;
+            margin-right: auto;
+            height: 300px;
+            margin-bottom: 2em;
+            @media screen and (max-height: @browser_media-short-screen) {
+                display: none;
+            }
+        }
+        .cp-loading-spinner-container {
+            position: relative;
+            height: 100px;
+            > div {
+                height: 100px;
+            }
+        }
+    }
+}
diff --git a/www/code/app-code.less b/www/code/app-code.less
index 592078086..b3b327c0c 100644
--- a/www/code/app-code.less
+++ b/www/code/app-code.less
@@ -4,6 +4,7 @@
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/creation.less';
 
 @_cp-toolbar-color-warn: @colortheme_code-warn;
 
@@ -11,6 +12,7 @@
 .fileupload_main();
 .alertify_main();
 .tokenfield_main();
+.creation_main();
 
 // body
 &.cp-app-code {
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c22cd28a4..e9487859f 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -387,7 +387,6 @@ define([
         common.getAttribute(['general', 'markdown-help'], function (e, data) {
             if (e) { return void console.error(e); }
             if (data === true && $toolbarButton.length && tbState) {
-                console.log($toolbar.is(':visible'));
                 $toolbarButton.click();
             }
         });
@@ -1120,5 +1119,81 @@ define([
         });
     };
 
+    UIElements.getPadCreationScreen = function (common, Toolbar, cb) {
+        if (!common.isLoggedIn()) { return void cb(); }
+        var sframeChan = common.getSframeChannel();
+        var metadataMgr = common.getMetadataMgr();
+
+        var $body = $('body');
+        var $creation = $('<div>', { id: 'cp-creation' }).appendTo($body);
+        var $bar = $('<div>', {'class': 'cp-toolbar'}).appendTo($creation);
+
+        // Create a toolbar?
+        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
+        var configTb = {
+            displayed: displayed,
+            hideDisplayName: true,
+            $container: $bar,
+            metadataMgr: metadataMgr,
+            sfCommon: common,
+            pageTitle: 'Pad creation BETA'
+        };
+        var toolbar = Toolbar.create(configTb);
+        toolbar.$rightside.html('');
+
+        // Create the pad
+        var create = function (template) {
+            sframeChan.query("Q_CREATE_PAD", {
+                owned: true, // TODO
+                expire: false, // TODO
+                template: template
+            }, function () {
+                $creation.remove();
+                cb();
+            });
+        };
+
+        // Pick a template?
+        var type = metadataMgr.getMetadataLazy().type;
+        sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
+            if (!data) { return; }
+            var $templateButton = $('<button>').text('Create pad from template')
+                                               .appendTo($creation);
+
+            var pickerCfg = {
+                types: [type],
+                where: ['template'],
+                hidden: true
+            };
+            common.openFilePicker(pickerCfg);
+
+            $templateButton.click(function () {
+                // Show the template picker
+                delete pickerCfg.hidden;
+                common.openFilePicker(pickerCfg);
+                var first = true; // We can only pick a template once (for a new document)
+                var fileDialogCfg = {
+                    onSelect: function (data) {
+                        if (data.type === type && first) {
+                            //UI.addLoadingScreen({hideTips: true});
+                            create(data.href);
+                            first = false;
+                            /*sframeChan.query('Q_TEMPLATE_USE', data.href, function () {
+                                UI.removeLoadingScreen();
+                                Feedback.send('TEMPLATE_USED');
+                            });*/
+                            //if (focus) { focus.focus(); }
+                            //return;
+                        }
+                    }
+                };
+                common.initFilePicker(fileDialogCfg);
+            });
+        });
+
+        var $button = $('<button>').text('Create pad').appendTo($creation);
+        $button.click();
+    };
+
     return UIElements;
 });
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 0b02d2c18..c8f6f1dae 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -402,13 +402,15 @@ define([
         });
     };
 
-    common.useTemplate = function (href, Crypt, cb) {
+    common.useTemplate = function (href, Crypt, cb, opts) {
+        // opts is used to overrides options for chainpad-netflux in cryptput
+        // it allows us to add owners and expiration time if it is a new file
         var parsed = Hash.parsePadUrl(href);
         if(!parsed) { throw new Error("Cannot get template hash"); }
         Crypt.get(parsed.hash, function (err, val) {
             if (err) { throw new Error(err); }
             var p = Hash.parsePadUrl(window.location.href);
-            Crypt.put(p.hash, val, cb);
+            Crypt.put(p.hash, val, cb, opts);
         });
     };
 
@@ -750,7 +752,8 @@ define([
         }).nThen(function (waitFor) {
             // Load the new pad when the hash has changed
             var oldHref  = document.location.href;
-            window.onhashchange = function () {
+            window.onhashchange = function (ev) {
+                if (ev && ev.reset) { oldHref = document.location.href; return; }
                 var newHref = document.location.href;
                 var parsedOld = Hash.parsePadUrl(oldHref).hashData;
                 var parsedNew = Hash.parsePadUrl(newHref).hashData;
diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js
index 912d74061..9aaba8627 100644
--- a/www/common/outer/async-store.js
+++ b/www/common/outer/async-store.js
@@ -742,6 +742,9 @@ define([
             }, // post EV_PAD_DISCONNECT
             channel: data.channel,
             validateKey: data.validateKey,
+            owners: data.owners,
+            password: data.password,
+            expire: data.expire,
             network: store.network,
             readOnly: data.readOnly,
             onConnect: function (wc, sendMessage) {
diff --git a/www/common/outer/chainpad-netflux-worker.js b/www/common/outer/chainpad-netflux-worker.js
index 7ca8a4104..c5d22c96e 100644
--- a/www/common/outer/chainpad-netflux-worker.js
+++ b/www/common/outer/chainpad-netflux-worker.js
@@ -33,6 +33,9 @@ define([], function () {
         var onLeave = conf.onLeave;
         var onReady = conf.onReady;
         var onDisconnect = conf.onDisconnect;
+        var owners = conf.owners;
+        var password = conf.password;
+        var expire = conf.expire;
         conf = undefined;
 
         var initializing = true;
@@ -177,6 +180,13 @@ define([], function () {
                 });
                 network.historyKeeper = hk;
 
+                var cfg = {
+                    validateKey: validateKey,
+                    lastKnownHash: lastKnownHash,
+                    owners: owners,
+                    expire: expire,
+                    password: password
+                };
                 var msg = ['GET_HISTORY', wc.id];
                 // Add the validateKey if we are the channel creator and we have a validateKey
                 msg.push(validateKey);
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index b5620ca6f..e9739d178 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -373,13 +373,19 @@ define([
         nThen(function (waitFor) {
             UI.addLoadingScreen();
             SFCommon.create(waitFor(function (c) { common = c; }));
+        }).nThen(function (waitFor) {
+            if (!AppConfig.displayCreationScreen) { return; }
+            if (common.getMetadataMgr().getPrivateData().isNewFile) {
+                console.log('newFile');
+                common.getPadCreationScreen(Toolbar, waitFor());
+            }
         }).nThen(function (waitFor) {
             cpNfInner = common.startRealtime({
                 // really basic operational transform
                 patchTransformer: options.patchTransformer || ChainPad.SmartJSONTransformer,
 
                 // cryptpad debug logging (default is 1)
-                // logLevel: 0,
+                // logLevel: 2,
                 validateContent: options.validateContent || function (content) {
                     try {
                         JSON.parse(content);
diff --git a/www/common/sframe-chainpad-netflux-outer.js b/www/common/sframe-chainpad-netflux-outer.js
index 7d991a273..4fd3a2c61 100644
--- a/www/common/sframe-chainpad-netflux-outer.js
+++ b/www/common/sframe-chainpad-netflux-outer.js
@@ -27,6 +27,9 @@ define([], function () {
         var readOnly = conf.readOnly || false;
         var padRpc = conf.padRpc;
         var sframeChan = conf.sframeChan;
+        var password = conf.password;
+        var owners = conf.owners;
+        var expire = conf.expire;
         var onConnect = conf.onConnect || function () { };
         conf = undefined;
 
@@ -98,7 +101,10 @@ define([], function () {
         padRpc.joinPad({
             channel: channel || null,
             validateKey: validateKey,
-            readOnly: readOnly
+            readOnly: readOnly,
+            owners: owners,
+            password: password,
+            expire: expire
         }, function(data) {
             onOpen(data);
         });
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 58a30782b..dd80cf884 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -36,7 +36,7 @@ define([
                 //patchTransformer: ChainPad.NaiveJSONTransformer,
                 //logLevel: 0,
                 //transformFunction: JsonOT.validate,
-                logLevel: config.debug ? 1 : 0,
+                logLevel: config.debug ? 2 : 0,
                 noPrune: true
             });
         };
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 19e4f315c..1e12a91f4 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -12,6 +12,7 @@ define([
         var network;
         var secret;
         var hashes;
+        var isNewFile;
         var CpNfOuter;
         var Cryptpad;
         var Crypto;
@@ -19,10 +20,10 @@ define([
         var SFrameChannel;
         var sframeChan;
         var FilePicker;
-        //var Messenger;
         var Messaging;
         var Notifier;
         var Utils = {};
+        var AppConfig;
 
         nThen(function (waitFor) {
             // Load #2, the loading screen is up so grab whatever you need...
@@ -41,11 +42,12 @@ define([
                 '/common/common-constants.js',
                 '/common/common-feedback.js',
                 '/common/outer/local-store.js',
+                '/customize/application_config.js',
                 '/common/outer/network-config.js',
                 '/bower_components/netflux-websocket/netflux-client.js',
             ], waitFor(function (_CpNfOuter, _Cryptpad, _Crypto, _Cryptget, _SFrameChannel,
             _FilePicker,  _Messaging, _Notifier, _Hash, _Util, _Realtime,
-            _Constants, _Feedback, _LocalStore, NetConfig, Netflux) {
+            _Constants, _Feedback, _LocalStore, _AppConfig, NetConfig, Netflux) {
                 CpNfOuter = _CpNfOuter;
                 Cryptpad = _Cryptpad;
                 Crypto = _Crypto;
@@ -60,6 +62,7 @@ define([
                 Utils.Constants = _Constants;
                 Utils.Feedback = _Feedback;
                 Utils.LocalStore = _LocalStore;
+                AppConfig = _AppConfig;
 
                 if (localStorage.CRYPTPAD_URLARGS !== ApiConfig.requireConf.urlArgs) {
                     console.log("New version, flushing cache");
@@ -131,13 +134,25 @@ define([
                 }
                 Cryptpad.getShareHashes(secret, waitFor(function (err, h) { hashes = h; }));
             }
-
+        }).nThen(function (waitFor) {
+            // Check if the pad exists on server
+            if (!window.location.hash) { isNewFile = true; return; }
+            Cryptpad.getFileSize(window.location.href, waitFor(function (err, size) {
+                console.log(size);
+                if (size) {
+                    isNewFile = false;
+                    return;
+                }
+                isNewFile = true;
+            }));
         }).nThen(function () {
+            console.log(isNewFile);
             var readOnly = secret.keys && !secret.keys.editKeyStr;
             if (!secret.keys) { secret.keys = secret.key; }
             var parsed = Utils.Hash.parsePadUrl(window.location.href);
             if (!parsed.type) { throw new Error(); }
             var defaultTitle = Utils.Hash.getDefaultName(parsed);
+            var edPublic;
             var updateMeta = function () {
                 //console.log('EV_METADATA_UPDATE');
                 var metaObj, isTemplate;
@@ -145,6 +160,7 @@ define([
                     Cryptpad.getMetadata(waitFor(function (err, m) {
                         if (err) { console.log(err); }
                         metaObj = m;
+                        edPublic = metaObj.priv.edPublic; // needed to create an owned pad
                     }));
                     Cryptpad.isTemplate(window.location.href, waitFor(function (err, t) {
                         if (err) { console.log(err); }
@@ -169,7 +185,8 @@ define([
                         accounts: {
                             donateURL: Cryptpad.donateURL,
                             upgradeURL: Cryptpad.upgradeURL
-                        }
+                        },
+                        isNewFile: isNewFile
                     };
                     for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 
@@ -540,43 +557,94 @@ define([
                 });
             }
 
-            sframeChan.ready();
 
-            Utils.Feedback.reportAppUsage();
 
-            if (!realtime) { return; }
+            // Join the netflux channel
+            var rtStarted = false;
+            var startRealtime = function () {
+                rtStarted = true;
+                var replaceHash = function (hash) {
+                    if (window.history && window.history.replaceState) {
+                        if (!/^#/.test(hash)) { hash = '#' + hash; }
+                        void window.history.replaceState({}, window.document.title, hash);
+                        if (typeof(window.onhashchange) === 'function') {
+                            window.onhashchange();
+                        }
+                        return;
+                    }
+                    window.location.hash = hash;
+                };
 
-            var replaceHash = function (hash) {
-                if (window.history && window.history.replaceState) {
-                    if (!/^#/.test(hash)) { hash = '#' + hash; }
-                    void window.history.replaceState({}, window.document.title, hash);
-                    if (typeof(window.onhashchange) === 'function') {
-                        window.onhashchange();
+                CpNfOuter.start({
+                    sframeChan: sframeChan,
+                    channel: secret.channel,
+                    padRpc: Cryptpad.padRpc,
+                    validateKey: secret.keys.validateKey || undefined,
+                    readOnly: readOnly,
+                    crypto: Crypto.createEncryptor(secret.keys),
+                    onConnect: function (wc) {
+                        if (window.location.hash && window.location.hash !== '#') {
+                            window.location = parsed.getUrl({
+                                present: parsed.hashData.present,
+                                embed: parsed.hashData.embed
+                            });
+                            return;
+                        }
+                        if (readOnly || cfg.noHash) { return; }
+                        replaceHash(Utils.Hash.getEditHashFromKeys(wc, secret.keys));
                     }
-                    return;
-                }
-                window.location.hash = hash;
+                });
             };
 
-            CpNfOuter.start({
-                sframeChan: sframeChan,
-                channel: secret.channel,
-                padRpc: Cryptpad.padRpc,
-                validateKey: secret.keys.validateKey || undefined,
-                readOnly: readOnly,
-                crypto: Crypto.createEncryptor(secret.keys),
-                onConnect: function (wc) {
-                    if (window.location.hash && window.location.hash !== '#') {
-                        window.location = parsed.getUrl({
-                            present: parsed.hashData.present,
-                            embed: parsed.hashData.embed
-                        });
-                        return;
-                    }
-                    if (readOnly || cfg.noHash) { return; }
-                    replaceHash(Utils.Hash.getEditHashFromKeys(wc, secret.keys));
+            sframeChan.on('Q_CREATE_PAD', function (data, cb) {
+                if (!isNewFile || rtStarted) { return; }
+                // Create a new hash
+                var newHash = Utils.Hash.createRandomHash();
+                secret = Utils.Hash.getSecrets(parsed.type, newHash);
+
+                // Update the hash in the address bar
+                var ohc = window.onhashchange;
+                window.onhashchange = function () {};
+                window.location.hash = newHash;
+                window.onhashchange = ohc;
+                ohc({reset: true});
+
+                // Update metadata values and send new metadata inside
+                parsed = Utils.Hash.parsePadUrl(window.location.href);
+                defaultTitle = Utils.Hash.getDefaultName(parsed);
+                readOnly = false;
+                updateMeta();
+
+                var rtConfig = {};
+                console.log(edPublic);
+                if (data.owned) {
+                    //rtConfig.owners = [edPublic];
                 }
+
+                if (data.template) {
+                    // Pass rtConfig to useTemplate because Cryptput will create the file and
+                    // we need to have the owners and expiration time in the first line on the
+                    // server
+                    Cryptpad.useTemplate(data.template, Cryptget, function () {
+                        startRealtime();
+                        cb();
+                    }, rtConfig);
+                    return;
+                };
+                // Start realtime outside the iframe and callback
+                console.log(data);
+                startRealtime(rtConfig);
+                cb();
             });
+
+            sframeChan.ready();
+
+            Utils.Feedback.reportAppUsage();
+
+            if (!realtime) { return; }
+            if (isNewFile && AppConfig.displayCreationScreen) { return; }
+
+            startRealtime();
         });
     };
 
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 089102ea5..634b0506a 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -90,6 +90,7 @@ define([
     funcs.updateTags = callWithCommon(UIElements.updateTags);
     funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
     funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
+    funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
 
     // Thumb
     funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);
diff --git a/www/common/sframe-protocol.js b/www/common/sframe-protocol.js
index 7db1a561a..7bada3c42 100644
--- a/www/common/sframe-protocol.js
+++ b/www/common/sframe-protocol.js
@@ -209,5 +209,8 @@ define({
 
     // Notifications about connection and disconnection from the network
     'EV_NETWORK_DISCONNECT': true,
-    'EV_NETWORK_RECONNECT': true
+    'EV_NETWORK_RECONNECT': true,
+
+    // Pad creation screen: create a pad with the selected attributes (owned, expire)
+    'Q_CREATE_PAD': true,
 });

From 1922dbfd757bd3ed156e09b349f462b49f36f086 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 11 Dec 2017 12:19:44 +0100
Subject: [PATCH 2/2] Creation page with mobile support

---
 .../src/less2/include/creation.less           | 157 +++++++++++++++---
 customize.dist/translations/messages.js       |  19 +++
 www/common/common-ui-elements.js              | 149 +++++++++++++----
 www/common/sframe-app-framework.js            |   5 +-
 www/common/sframe-common-outer.js             |   6 +-
 5 files changed, 280 insertions(+), 56 deletions(-)

diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index d82c47adf..4bc5f2d80 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -1,35 +1,146 @@
 @import (once) "./colortheme-all.less";
+@import (once) "./tools.less";
 
 .creation_main() {
-    #cp-creation {
-        position: fixed;
-        z-index: 10000000; // #loading
-        top: 0px;
-        bottom: 0px;
-        left: 0px;
-        right: 0px;
+    .tippy-popper {
+        z-index: 100000001 !important;
+    }
+    #cp-creation-container {
+        //position: fixed;
+        z-index: 100000000; // #loading * 10
+        //top: 0px;
+        //bottom: 0px;
+        //left: 0px;
+        //right: 0px;
         background: @colortheme_loading-bg;
         color: @colortheme_loading-color;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        @media screen and (max-height: 600px), screen and (max-width: 500px) {
+            align-items: baseline;
+        }
+    }
+    #cp-creation {
         text-align: center;
-        font-size: 1.5em;
-        .cp-loading-container {
-            margin-top: 50vh;
-            transform: translateY(-50%);
+        font: @colortheme_app-font;
+        width: 100%;
+        & > div {
+            width: 60vw;
+            max-width: 100%;
+            margin: 40px auto;
+            text-align: left;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            h2, p {
+                width: 100%;
+            }
+            h2 {
+                display: flex;
+                justify-content: space-between;
+                .cp-creation-help {
+                    display: none;
+                }
+            }
+            @media screen and (max-width: 500px) {
+                width: ~"calc(100% - 30px)";
+            }
+            @media screen and (max-height: 600px), screen and (max-width: 500px) {
+                h2 .cp-creation-help {
+                    display: inline;
+                }
+                p {
+                    display: none;
+                }
+            }
+            @media screen and (min-height: 601px) {
+                @media screen and (min-width: 501px) {
+                    p {
+                        display: block !important;
+                    }
+                }
+            }
         }
-        .cp-loading-cryptofist {
-            margin-left: auto;
-            margin-right: auto;
-            height: 300px;
-            margin-bottom: 2em;
-            @media screen and (max-height: @browser_media-short-screen) {
-                display: none;
+
+        .cp-creation-create{
+            button {
+                .tools_unselectable();
+                padding: 15px;
+                background: darken(@colortheme_loading-bg, 10%);
+                color: @colortheme_loading-color;
+                margin: 3px 10px;
+                border: none;
+                cursor: pointer;
+                &:hover {
+                    background: darken(@colortheme_loading-bg, 5%);
+                }
+            }
+        }
+
+        input[type="radio"] {
+            display: none;
+            &:checked {
+                & + label {
+                    font-weight: bold;
+                    background-color: lighten(@colortheme_loading-bg, 20%);
+                    cursor: default;
+                    border: 1px solid #c1158e;
+                    &:hover {
+                        background-color: lighten(@colortheme_loading-bg, 20%);
+                    }
+                }
             }
         }
-        .cp-loading-spinner-container {
-            position: relative;
-            height: 100px;
-            > div {
-                height: 100px;
+        input[type="radio"] + label {
+            .tools_unselectable();
+            padding: 15px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 200px;
+            height: 50px;
+            padding: 5px;
+            margin: 0 20px;
+            border: 1px solid @colortheme_loading-color;
+            cursor: pointer;
+            &:hover {
+                background-color: lighten(@colortheme_loading-bg, 10%);
+            }
+        }
+        .cp-creation-expire {
+            #cp-creation-expire-true {
+                display: none;
+                &:checked {
+                    & + label {
+                        height: 100px;
+                        .cp-creation-expire-picker {
+                            display: inline;
+                        }
+                    }
+                }
+            }
+            label[for="cp-creation-expire-true"] {
+                flex-wrap: wrap;
+                .cp-creation-expire-picker {
+                    display: none;
+                }
+                input {
+                    width: 70px;
+                }
+                select {
+                    width: 100px;
+                }
+                input, select {
+                    border: none;
+                    height: 30px;
+                    background: @colortheme_loading-bg;
+                    color: @colortheme_loading-color;
+                    border-radius: 3px;
+                }
             }
         }
     }
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 90ce1871e..d39d09326 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -787,5 +787,24 @@ define(function () {
     out.feedback_privacy = "We care about your privacy, and at the same time we want CryptPad to be very easy to use.  We use this file to figure out which UI features matter to our users, by requesting it along with a parameter specifying which action was taken.";
     out.feedback_optout = "If you would like to opt out, visit <a href='/settings/'>your user settings page</a>, where you'll find a checkbox to enable or disable user feedback";
 
+    // Creation page
+    out.creation_404 = "This pad not longer exists. Use the following form to create a new pad";
+    out.creation_ownedTitle = "Type of pad";
+    out.creation_ownedTrue = "Owned pad";
+    out.creation_ownedFalse = "Open pad";
+    out.creation_owned1 = "An <b>owned</b> pad is a pad that you can delete from the server whenever you want. Once it is deleted, no one else can access it, even if it is stored in their CryptDrive.";
+    out.creation_owned2 = "An <b>open</b> pad doesn't have any owner and thus, it can't be deleted from the server unless it has reached its expiration time.";
+    out.creation_expireTitle = "Life time";
+    out.creation_expireTrue = "Add a life time";
+    out.creation_expireFalse = "Unlimited";
+    out.creation_expireHours = "Hours";
+    out.creation_expireDays = "Days";
+    out.creation_expireMonths = "Months";
+    out.creation_expire1 = "By default, a pad stored by a registered users will never be removed from the server, unless it is requested by its owner.";
+    out.creation_expire2 = "If you prefer, you can set a life time to make sure the pad will be permanently deleted from the server and unavailable after the specified date.";
+    out.creation_createTitle = "Create a pad";
+    out.creation_createFromTemplate = "From template";
+    out.creation_createFromScratch = "From scratch";
+
     return out;
 });
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index e9487859f..cfdb221a8 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -6,11 +6,12 @@ define([
     '/common/common-language.js',
     '/common/common-interface.js',
     '/common/common-feedback.js',
+    '/common/hyperscript.js',
     '/common/media-tag.js',
     '/customize/messages.js',
 
     'css!/common/tippy.css',
-], function ($, Config, Util, Hash, Language, UI, Feedback, MediaTag, Messages) {
+], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages) {
     var UIElements = {};
 
     // Configure MediaTags to use our local viewer
@@ -1119,33 +1120,124 @@ define([
         });
     };
 
-    UIElements.getPadCreationScreen = function (common, Toolbar, cb) {
+    UIElements.getPadCreationScreen = function (common, cb) {
         if (!common.isLoggedIn()) { return void cb(); }
         var sframeChan = common.getSframeChannel();
         var metadataMgr = common.getMetadataMgr();
+        var type = metadataMgr.getMetadataLazy().type;
 
         var $body = $('body');
-        var $creation = $('<div>', { id: 'cp-creation' }).appendTo($body);
-        var $bar = $('<div>', {'class': 'cp-toolbar'}).appendTo($creation);
-
-        // Create a toolbar?
-        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
-        var configTb = {
-            displayed: displayed,
-            hideDisplayName: true,
-            $container: $bar,
-            metadataMgr: metadataMgr,
-            sfCommon: common,
-            pageTitle: 'Pad creation BETA'
+        var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
+        var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
+
+        var setHTML = function (e, html) {
+            e.innerHTML = html;
+            return e;
+        };
+
+        // Title
+        $creation.append(h('h1.cp-creation-title', Messages['button_new'+type]));
+
+        // Deleted pad warning
+        if (metadataMgr.getPrivateData().isDeleted) {
+            $creation.append(h('div.cp-creation-deleted', Messages.creation_404));
+        }
+
+        var createHelper = function (text) {
+            var q = h('span.cp-creation-help.fa.fa-question', {
+                title: text
+            });
+            return q;
         };
-        var toolbar = Toolbar.create(configTb);
-        toolbar.$rightside.html('');
+
+        // Owned pads
+        var owned = h('div.cp-creation-owned', [
+            h('h2', [
+                Messages.creation_ownedTitle,
+                createHelper(Messages.creation_owned1 + '\n' + Messages.creation_owned2)
+            ]),
+            setHTML(h('p'), Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
+            h('input#cp-creation-owned-true.cp-creation-owned-value', {
+                type: 'radio',
+                name: 'cp-creation-owned',
+                value: 1,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue),
+            h('input#cp-creation-owned-false.cp-creation-owned-value', {
+                type: 'radio',
+                name: 'cp-creation-owned',
+                value: 0
+            }),
+            h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse)
+        ]);
+        $creation.append(owned);
+
+        // Life time
+        var expire = h('div.cp-creation-expire', [
+            h('h2', [
+                Messages.creation_expireTitle,
+                createHelper(Messages.creation_expire1, Messages.creation_expire2)
+            ]),
+            setHTML(h('p'), Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
+            h('input#cp-creation-expire-false.cp-creation-expire-value', {
+                type: 'radio',
+                name: 'cp-creation-expire',
+                value: 0,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse),
+            h('input#cp-creation-expire-true.cp-creation-expire-value', {
+                type: 'radio',
+                name: 'cp-creation-expire',
+                value: 1
+            }),
+            h('label', { 'for': 'cp-creation-expire-true' }, [
+                Messages.creation_expireTrue,
+                h('span.cp-creation-expire-picker', [
+                    h('input#cp-creation-expire-val', {
+                        type: "number",
+                        min: 1,
+                        max: 100,
+                        value: 3
+                    }),
+                    h('select#cp-creation-expire-unit', [
+                        h('option', { value: 'hour' }, Messages.creation_expireHours),
+                        h('option', { value: 'day' }, Messages.creation_expireDays),
+                        h('option', {
+                            value: 'month',
+                            selected: 'selected'
+                        }, Messages.creation_expireMonths)
+                    ])
+                ])
+            ])
+        ]);
+        $creation.append(expire);
 
         // Create the pad
         var create = function (template) {
+            // Type of pad
+            var ownedVal = parseInt($('input[name="cp-creation-owned"]:checked').val());
+            // Life time
+            var expireVal = 0;
+            if(parseInt($('input[name="cp-creation-expire"]:checked').val())) {
+                var unit = 0;
+                switch ($('#cp-creation-expire-unit').val()) {
+                    case "hour" : unit = 3600;           break;
+                    case "day"  : unit = 3600 * 24;      break;
+                    case "month": unit = 3600 * 24 * 30; break;
+                    default: unit = 0;
+                }
+                expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
+            }
+
+            // TODO remove these lines
+            ownedVal = undefined;
+            expire = undefined;
+
             sframeChan.query("Q_CREATE_PAD", {
-                owned: true, // TODO
-                expire: false, // TODO
+                owned: ownedVal,
+                expire: expireVal,
                 template: template
             }, function () {
                 $creation.remove();
@@ -1153,12 +1245,14 @@ define([
             });
         };
 
+        var $create = $(h('div.cp-creation-create', [
+            h('h2', Messages.creation_createTitle)
+        ])).appendTo($creation);
         // Pick a template?
-        var type = metadataMgr.getMetadataLazy().type;
         sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
             if (!data) { return; }
-            var $templateButton = $('<button>').text('Create pad from template')
-                                               .appendTo($creation);
+            var $templateButton = $('<button>').text(Messages.creation_createFromTemplate)
+                                               .appendTo($create);
 
             var pickerCfg = {
                 types: [type],
@@ -1175,15 +1269,8 @@ define([
                 var fileDialogCfg = {
                     onSelect: function (data) {
                         if (data.type === type && first) {
-                            //UI.addLoadingScreen({hideTips: true});
                             create(data.href);
                             first = false;
-                            /*sframeChan.query('Q_TEMPLATE_USE', data.href, function () {
-                                UI.removeLoadingScreen();
-                                Feedback.send('TEMPLATE_USED');
-                            });*/
-                            //if (focus) { focus.focus(); }
-                            //return;
                         }
                     }
                 };
@@ -1191,8 +1278,10 @@ define([
             });
         });
 
-        var $button = $('<button>').text('Create pad').appendTo($creation);
-        $button.click();
+        var $button = $('<button>').text(Messages.creation_createFromScratch).appendTo($create);
+        $button.click(function () {
+            create();
+        });
     };
 
     return UIElements;
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index e9739d178..76bfe45eb 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -373,11 +373,12 @@ define([
         nThen(function (waitFor) {
             UI.addLoadingScreen();
             SFCommon.create(waitFor(function (c) { common = c; }));
+        }).nThen(function (waitFor) {
+            common.getSframeChannel().onReady(waitFor());
         }).nThen(function (waitFor) {
             if (!AppConfig.displayCreationScreen) { return; }
             if (common.getMetadataMgr().getPrivateData().isNewFile) {
-                console.log('newFile');
-                common.getPadCreationScreen(Toolbar, waitFor());
+                common.getPadCreationScreen(waitFor());
             }
         }).nThen(function (waitFor) {
             cpNfInner = common.startRealtime({
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 1e12a91f4..74c2f56c9 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -186,7 +186,8 @@ define([
                             donateURL: Cryptpad.donateURL,
                             upgradeURL: Cryptpad.upgradeURL
                         },
-                        isNewFile: isNewFile
+                        isNewFile: isNewFile,
+                        isDeleted: window.location.hash.length > 0
                     };
                     for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 
@@ -620,6 +621,9 @@ define([
                 if (data.owned) {
                     //rtConfig.owners = [edPublic];
                 }
+                if (data.expire) {
+                    //rtConfig.expire = data.expire;
+                }
 
                 if (data.template) {
                     // Pass rtConfig to useTemplate because Cryptput will create the file and