make register and login user clientside templates

.jshintignore

@@ -13,3 +13,4 @@ www/common/media-tag.js
 www/scratch
 
 www/common/toolbar.js
+www/common/hyperscript.js

customize.dist/main2.js

@@ -15,7 +15,7 @@ $(function () {
     var rightLink = function (ref, loc, txt) {
         return h('span.link.right', [
             h('a', { href: ref, 'data-localization': loc}, txt)
-        ])
+        ]);
     };
 
     var $topbar = $(h('div#cryptpadTopBar', [
@@ -42,7 +42,7 @@ $(function () {
             })
         ])
         ]
-    ))
+    ));
 
     var $main = $(h('div#mainBlock.hidden',
         typeof(Pages[location.pathname]) === 'function'?
@@ -59,7 +59,7 @@ $(function () {
                     return h('li', [ l ]);
                 }))
             )
-        ])
+        ]);
     };
 
     var footLink = function (ref, loc, text) {
@@ -117,9 +117,14 @@ $(function () {
     } else if (/^\/user\//.test(location.pathname)) {
         // do nothing. bogus app.
         require([ '/user/main.js'], function () {});
+    } else if (/^\/register\//.test(location.pathname)) {
+        require([ '/register/main.js' ], function () {});
+    } else if (/^\/login\//.test(location.pathname)) {
+        require([ '/login/main.js' ], function () {});
     } else {
         setTimeout(function () {
             require([ '/customize/main.js', ], function () {});
         });
     }
-})});
+});
+});

customize.dist/pages.js

@@ -5,25 +5,23 @@ define([
     var Pages = {};
     var Msg = Cryptpad.Messages;
 
-    Pages['/about.html'] = function () {
+    var setHTML = function (e, html) {
-        var p2 = h('p');
+        e.innerHTML = html;
-        p2.innerHTML = Msg.main_p2;
+        return e;
+    };
 
-        var hiw = h('p');
+    Pages['/about.html'] = function () {
-        hiw.innerHTML = Msg.main_howitworks_p1;
         return h('div#main_other', [
             h('center', [
                 h('h1', Msg.about)
             ]),
-            p2,
+            setHTML(h('p'), Msg.main_p2),
             h('h2', Msg.main_howitworks),
-            hiw
+            setHTML(h('p', Msg.main_howitworks_p1))
         ]);
     };
 
     Pages['/privacy.html'] = function () {
-        var vpn = h('p');
-        vpn.innerHTML = Msg.policy_choices_vpn;
         return h('div#main_other', [
             h('center', h('h1', Msg.policy_title)),
             h('h2', Msg.policy_whatweknow),
@@ -44,7 +42,7 @@ define([
 
             h('h2', Msg.policy_choices),
             h('p', Msg.policy_choices_open),
-            vpn,
+            setHTML(h('p'), Msg.policy_choices_vpn),
 
             h('br')
         ]);
@@ -62,12 +60,10 @@ define([
     };
 
     Pages['/contact.html'] = function () {
-        var about = h('p');
-        about.innerHTML = Msg.main_about_p2;
         return h('div#main_other', [
             h('center', h('h1', Msg.contact)),
-            about
+            setHTML(h('p'), Msg.main_about_p2)
-        ])
+        ]);
     };
 
     var userForm = function () {
@@ -110,8 +106,6 @@ define([
     };
 
     var indexContent = function () {
-        var mainZK = h('p');
-        mainZK.innerHTML = Msg.main_zeroKnowledge_p;
         return [
             h('div.page.category.first#knowmore', [
                 h('center', [
@@ -128,7 +122,7 @@ define([
                     ]),
                     h('div.right', [
                         h('h2', Msg.main_zeroKnowledge),
-                        mainZK
+                        setHTML(h('p'), Msg.main_zeroKnowledge_p)
                     ])
                 ])
             ]),
@@ -178,9 +172,6 @@ define([
     };
 
     var appButton = function (alt, h2, img, p, url, btn, id) {
-        var P = h('p');
-        P.innerHTML = p;
-
         return h('div.app', [
             h('center', [
                 h('h2', h2),
@@ -189,7 +180,7 @@ define([
                     src: img,
                 })
             ]),
-            P,
+            setHTML(h('p'), p),
             h('p.buttons', [
                 h('a#' + id, {
                     href: url,
@@ -241,19 +232,17 @@ define([
                     ])
                 ])
             ])
-        ]
+        ];
     };
 
     Pages['/'] = Pages['/index.html'] = function () {
-        var slogan = h('p.left');
-        slogan.innerHTML = Msg.main_info;
         return [
             h('div#main', [
                 h('div.mainOverlay'),
                 h('div#align-container', [
                     h('div#main-container', [
                         h('div#data.hidden', [
-                            slogan
+                            setHTML(h('p.left'), Msg.main_info),
                         ]),
                         userForm(),
                         h('div#loggedIn.hidden', [
@@ -269,8 +258,8 @@ define([
                 ]),
             ])
         ]
-        .concat(indexContent())
+        .concat(tryIt())
-        .concat(tryIt());
+        .concat(indexContent());
     };
 
     Pages['/settings/'] = Pages['/settings/index.html'] = function () {
@@ -281,5 +270,86 @@ define([
         return h('div#container');
     };
 
+    Pages['/register/'] = Pages['/register/index.html'] = function () {
+        return [h('div#main', [
+            h('div.mainOverlay'),
+            h('div#align-container', [
+                h('div#data.hidden', [
+                    h('h1', Msg.register_header),
+                    h('br'),
+                    setHTML(h('p.left.register-explanation'), Msg.register_explanation)
+                ]),
+                h('div#userForm.form-group.hidden', [
+                    h('input.form-control#username', {
+                        type: 'text',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        autocapitalize: 'off',
+                        spellcheck: false,
+                        placeholder: Msg.login_username,
+                        autofocus: true,
+                    }),
+                    h('input.form-control#password', {
+                        type: 'password',
+                        placeholder: Msg.login_password,
+                    }),
+                    h('input.form-control#password-confirm', {
+                        type: 'password',
+                        placeholder: Msg.login_confirm,
+                    }),
+                    h('input#import-recent', {
+                        type: 'checkbox',
+                        checked: true
+                    }),
+                    h('label', {
+                        'for': 'import-recent',
+                    }, Msg.register_importRecent),
+                    h('br'),
+                    h('input#accept-terms', {
+                        type: 'checkbox'
+                    }),
+                    setHTML(h('label', {
+                        'for': 'accept-terms',
+                    }), Msg.register_acceptTerms),
+                    h('br'),
+                    h('button#register.btn.btn-primary', Msg.login_register)
+                ])
+            ])
+        ])];
+    };
+
+    Pages['/login/'] = Pages['/login/index.html'] = function () {
+        return [h('div#main', [
+            h('div.mainOverlay'),
+            h('div#align-container',
+                h('div#main-container', [
+                    h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)),
+                    h('div#userForm.form-group.hidden', [
+                        h('input.form-control#name', {
+                            name: 'name',
+                            type: 'text',
+                            autocomplete: 'off',
+                            autocorrect: 'off',
+                            autocapitalize: 'off',
+                            spellcheck: false,
+                            placeholder: Msg.login_username,
+                            autofocus: true,
+                        }),
+                        h('input.form-control#password', {
+                            type: 'password',
+                            'name': 'password',
+                            placeholder: Msg.login_password,
+                        }),
+                        h('button.btn.btn-primary.login.first', Msg.login_login),
+                        h('div.extra', [
+                            h('p', Msg.login_notRegistered),
+                            h('button#register.btn.btn-success.register.first', Msg.login_register)
+                        ])
+                    ])
+                ])
+            )
+        ])];
+    };
+
     return Pages;
 });

package.json

@@ -19,6 +19,6 @@
     "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
     "test": "node TestSelenium.js",
     "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css && lessc ./www/file/file.less > ./www/file/file.css && lessc ./www/code/code.less > ./www/code/code.css",
-    "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../about.html ../contact.html ../../www/settings/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;"
+    "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../about.html ../contact.html ../../www/login/index.html ../../www/register/index.html ../../www/settings/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;"
   }
 }

www/login/index.html

@@ -1,76 +1,16 @@
 <!DOCTYPE html>
 <html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
 <head>
-    <title data-localization="main_title">Cryptpad: Log in</title>
+    <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" type="text/css" href="/customize/main.css" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
-    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <script async data-bootload="/customize/main2.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
 </head>
 <body class="html">
-    <div id="cryptpadTopBar">
-    <span>
-        <a class="gotoMain" href="/">
-            <img src="/customize/cryptofist_mini.png" class="cryptpad-logo" alt="" /> CryptPad
-        </a>
-    </span>
-
-    <span id="user-menu" class="right dropdown-bar"></span>
-    <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
-        <a href="/about.html" data-localization="about">About</a>
-    </span>
-    <span class="right">
-        <a href="/privacy.html" data-localization="privacy">Privacy</a>
-    </span>
-    <span class="right">
-        <a href="/terms.html" data-localization="terms">ToS</a>
-    </span>
-    <span class="right">
-        <a href="/contact.html" data-localization="contact">Contact</a>
-    </span>
-</div>
     <noscript>
-        <div id="noscriptContainer">
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
-            <div class="mainOverlay"></div>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
-            <div id="noscript">
-              <p>
-                <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
-              </p>
-              <hr>
-              <p>
-                <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
-              </p>
-            </div>
-        </div>
     </noscript>
-
-    <div id="mainBlock" class="hidden">
-
-<div id="main">
-    <div class="mainOverlay"></div>
-    <div id="align-container">
-    <div id="main-container">
-        <div id="data" class="hidden">
-            <p class="left" data-localization="main_info"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
-        </div>
-
-        <div id="userForm" class="form-group hidden">
-            <input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus>
-            <input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password">
-            <button class="btn btn-primary login first" data-localization="login_login"></button>
-            <div class="extra">
-                <p data-localization="login_notRegistered"></p>
-                <button id="register" class="btn btn-success register first" data-localization="login_register"></button>
-            </div>
-        </div>
-    </div>
-    </div>
-</div>
-    </div>
-
-</body>
 </html>

www/register/index.html

@@ -1,83 +1,16 @@
 <!DOCTYPE html>
 <html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
 <head>
+    <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Cryptpad: login</title>
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
+    <script async data-bootload="/customize/main2.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="stylesheet" href="/customize/main.css" />
-    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
 </head>
 <body class="html">
-    <div id="cryptpadTopBar">
-    <span>
-        <a class="gotoMain" href="/">
-            <img src="/customize/cryptofist_mini.png" class="cryptpad-logo" alt="" /> CryptPad
-        </a>
-    </span>
-
-    <span id="user-menu" class="right dropdown-bar"></span>
-    <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
-        <a href="/about.html" data-localization="about">About</a>
-    </span>
-    <span class="right">
-        <a href="/privacy.html" data-localization="privacy">Privacy</a>
-    </span>
-    <span class="right">
-        <a href="/terms.html" data-localization="terms">ToS</a>
-    </span>
-    <span class="right">
-        <a href="/contact.html" data-localization="contact">Contact</a>
-    </span>
-</div>
     <noscript>
-        <div id="noscriptContainer">
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
-            <div class="mainOverlay"></div>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
-            <div id="noscript">
-              <p>
-                <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
-              </p>
-              <hr>
-              <p>
-                <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
-              </p>
-            </div>
-        </div>
     </noscript>
-
-    <div id="mainBlock" class="hidden">
-
-<div id="main">
-    <div class="mainOverlay"></div>
-    <div id="align-container">
-    <div id="main-container">
-        <div id="data" class="hidden">
-            <h1 data-localization="register_header"></h1><br />
-            <p class="left register-explanation" data-localization="register_explanation"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
-        </div>
-
-        <div id="userForm" class="form-group hidden">
-            <input class="form-control" id="username" type="text" autocomplete="off" autocorrect="off"
-                autocapitalize="off" spellcheck="false" data-localization-placeholder="login_username" autofocus/>
-            <input class="form-control" id="password" type="password" data-localization-placeholder="login_password"/>
-            <input class="form-control" id="password-confirm" type="password" data-localization-placeholder="login_confirm"/>
-
-
-            <!-- TODO translate labels -->
-                <input id="import-recent" type="checkbox" checked />
-                <label for="import-recent" data-localization="register_importRecent"></label><br />
-
-                <input id="accept-terms" type="checkbox" />
-                <label for="accept-terms" data-localization="register_acceptTerms"></label><br />
-
-                <button id="register" class="btn btn-primary" data-localization="login_register"></button>
-        </div>
-    </div>
-    </div>
-</div>
-    </div>
-
-</body>
 </html>