Register page and confirm dialog

customize.dist/pages/register.js

@@ -1,26 +1,32 @@
 define([
+    '/api/config',
     'jquery',
     '/common/hyperscript.js',
     '/common/common-interface.js',
     '/customize/messages.js',
     '/customize/pages.js'
-], function ($, h, UI, Msg, Pages) {
+], function (Config, $, h, UI, Msg, Pages) {
     return function () {
+        var urlArgs = Config.requireConf.urlArgs;
+
+        // XXX
+        Msg.register_header = "Register"; // existing key
+        Msg.register_notes_title = "Important notes";
+        Msg.register_notes = '<ul class="cp-notes-list"><li>Your password is your secret key which encrypts all of your pads. <span class="red">If you lose it there is no way we can recover your data.</span></li><li>If you are using a shared computer, <span class="red">remember to log out</span> when you are done. Only closing the browser window leaves your documents exposed. </li><li>To keep the documents you created and/or stored without being logged in, tick "Import documents from your anonymous session". </li></ul>';
+        Msg.register_importRecent = "Import documents from your anonymous session" // existing key
+        // XXX remove Msg.register_explanation
+
         return [h('div#cp-main', [
             Pages.infopageTopbar(),
-            h('div.container-fluid.cp-register-wel',[
-                h('div.container',[
-                    h('div.row',[
-                        h('div.col-12',[
-                            h('h1.text-center', Msg.register_header)
-                        ])
-                    ])
-                ])
-            ]),
             h('div.container.cp-container', [
+                h('div.row.cp-page-title', h('h1', Msg.register_header)),
                 h('div.row.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
-                    Pages.setHTML(h('p.register-explanation'), Msg.register_explanation)
+                    h('img.img-fluid', {
+                        src: '/customize/images/illustration-swallow-the-key.png?' + urlArgs
+                    }),
+                    h('h2', Msg.register_notes_title),
+                    Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
                 ]),
                 h('div#userForm.form-group.hidden.col-md-6', [
                     h('a', {
@@ -49,16 +55,9 @@ define([
                     h('div.checkbox-container', [
                         $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
                     ]),
-                    h('button#register.btn.cp-login-register', Msg.login_register)
+                    h('button#register', Msg.login_register)
                 ])
                 ]),
-                h('div.row.cp-register-test',[
-                    h('hr'),
-                    h('div.col-12', [
-                        Pages.setHTML(h('p.test-details'), " \"Tools like Etherpad and Google Docs [...] all share a weakness, which is that whomever owns the document server can see everything you're typing. Cryptpad is a free/open project that uses some of the ideas behind blockchain to implement a \"zero-knowledge\" version of a collaborative document editor, ensuring that only the people working on a document can see it.\" "),
-                        h('a.cp-test-source.pull-right', { href : 'http://boingboing.net/2016/09/26/cryptpad-a-freeopen-end-to.html'}, "Cory Doctorow")
-                    ])
-                ])
             ]),
 
             Pages.infopageFooter(),

customize.dist/src/less2/include/forms.less

@@ -177,6 +177,9 @@
                 background-color: fade(@colortheme_alertify-cancel-border, 25%);
             }
         }
+        &.btn-register-confirm {
+            margin-bottom: 10px !important;
+        }
 
 
 

customize.dist/src/less2/pages/page-register.less

@@ -39,48 +39,16 @@
             display: none;
         }
     }
-    .cp-register-wel {
-        padding-top: 6em;
-        padding-bottom: 20em;
-        background-image: url(/customize/bkregister.jpg);
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        h1 {
-            font-weight: 700;
-            color: #fff;
-            text-shadow: 0 1px 5px rgba(0,0,0,.2);
-        }
-    }
 
     .cp-register-det {
-        margin-top: -7em;
-        background: #fff;
-        box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
-
         #data {
-            // Old browsers
-            background: #4591C4;
-
-            // Chrome 10-25, Safari 5.1-6
-            background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
 
-            // W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
-            background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
-
-            padding-top: 3em;
-            padding-bottom: 7em;
-            padding-left: 30px;
-            padding-right: 30px;
             p {
-                color: #fff;
                 li {
                     margin-bottom: 1em;
                 }
                 .fa {
-                    font-size: 1.5em;
                     padding-right: 10px;
-                    color: #000;
                 }
             }
             h3 {
@@ -89,12 +57,14 @@
             }
         }
         #userForm {
-            padding-top: 3em;
+            padding:15px;
-            padding-bottom: 2em;
+            background-color: white;
+            height: min-content; // XXX why does the form expand without this?
+            .cp-shadow();
             .form-control {
                 border-radius: 0;
                 color: @cryptpad_text_col;
-                margin-top: 1em;
+                margin-top: 5px;
                 &:focus {
                     border-color: @cryptpad_color_blue;
                 }
@@ -103,42 +73,27 @@
                 color: @cryptpad_text_col;
             }
         }
-        .cp-login-register {
+
-            color: @cryptpad_color_blue;
+        .cp-register-notes {
-            background: #fff;
+            ul.cp-notes-list {
-            border: 2px solid @cryptpad_color_blue;
+                list-style: none;
-            border-radius: 0;
+                margin-left: 0;
-            &:hover {
+                padding-left: 30px;
-                transform: scale(1.05);
+                position: relative;
-            }
+                li {
-        }
+                    margin-bottom: 10px;
-    }
+                    &::before {
-    .cp-register-test {
+                        position: absolute;
-        margin-top: 3em;
+                        left: 0;
-        hr {
+                        font-family: "FontAwesome";
-            width: 15rem;
+                        content: "\f071";
-            border-top: 2px solid @cryptpad_color_blue;
-            margin-top: 0;
-            margin-bottom: 2em;
                     }
-        p {
+                    .red {
-            margin-bottom: 0;
+                        color: #ff0000;
                     }
-        .cp-test-source {
-            font-style: italic;
                 }
-        .test-details {
-            padding-left: 4em;
-            background-image: url(/customize/testimonial.svg);
-            background-repeat: no-repeat;
-            background-position: left top;
-            background-size: 3em;
-            color: @cryptpad_text_col;
             }
-
         }
-    #cp-main {
-        background: #fff;
     }
 }
 

customize.dist/testimonial.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 26 25" style="enable-background:new 0 0 26 25;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#4591C4;}
-</style>
-<title>testimonial</title>
-<g id="Layer_2">
-	<g id="_25_Quote_Quotation_Text_Sample">
-		<path class="st0" d="M8.5,12l-4.1,0c0.5-3.5,2.9-6.5,6.2-7.7l0.2,0c1-0.4,1.6-1.5,1.2-2.6c-0.4-1-1.5-1.6-2.6-1.2l-0.2,0
-			c-5.3,2-8.8,7.1-8.8,12.7l0,7.4l0,0c-0.1,2,1.4,3.8,3.5,3.9c0.1,0,0.3,0,0.4,0l4,0c2,0.1,3.7-1.5,3.8-3.6c0,0,0-0.1,0-0.1l0-5l0,0
-			C12.1,13.8,10.5,12.1,8.5,12z M8.2,20.6l-3.9,0l0-4.7l3.9,0L8.2,20.6z"/>
-		<path class="st0" d="M25.5,15.8c0-2.1-1.7-3.8-3.8-3.8c0,0-0.1,0-0.1,0l-3.8,0c0.5-3.5,2.9-6.5,6.2-7.7h0.2c1-0.4,1.6-1.5,1.2-2.6
-			S24,0.2,22.9,0.5l-0.2,0c-5.3,2-8.8,7.1-8.8,12.7l0,7.6c0.1,2,1.7,3.6,3.7,3.7l4.1,0c2,0.1,3.8-1.4,3.9-3.5c0-0.1,0-0.3,0-0.4
-			L25.5,15.8L25.5,15.8z M21.7,20.7l-3.9,0l0-4.8l3.9,0l0,4.6V20.7z"/>
-	</g>
-</g>
-</svg>

www/register/main.js

@@ -99,8 +99,13 @@ define([
                 return void UI.alert(Messages.register_mustAcceptTerms);
             }
 
+            // XXX
+            Messages.register_warning = "<i class='fa fa-warning'></i> Warning"; // existing key
+            Messages.register_warning_note = "Due to the encrypted nature of CrytpPad even the the service administrators will not be able to recover data in case the username and/or password are forgotten. Please save them in a safe place.";
+            Messages.register_cancel = "Cancel"; // XXX existing key
+
             setTimeout(function () {
-            UI.confirm("<h2 class='bright msg'>" + Messages.register_warning + "</h2>",
+            UI.confirm("<h2 class='msg'>" + Messages.register_warning + "</h2>" + Messages.register_warning_note,
             function (yes) {
                 if (!yes) { return; }
 
@@ -118,8 +123,8 @@ define([
 /*  If we're certain that we aren't using these "*Class" APIs
     anywhere else then we can deprecate them and make this a
     custom modal in common-interface (or here).  */
-                cancelClass: 'btn.btn-safe',
+                cancelClass: 'btn.cancel',
-                okClass: 'btn.btn-danger',
+                okClass: 'btn.btn-danger.btn-register-confirm',
                 reverseOrder: true,
                 done: function ($dialog) {
                     $dialog.find('> div').addClass('half');