diff --git a/customize.dist/bkabout.jpg b/customize.dist/bkabout.jpg deleted file mode 100644 index d9434609e..000000000 Binary files a/customize.dist/bkabout.jpg and /dev/null differ diff --git a/customize.dist/bkregister.jpg b/customize.dist/bkregister.jpg deleted file mode 100644 index a67a3b03e..000000000 Binary files a/customize.dist/bkregister.jpg and /dev/null differ diff --git a/customize.dist/images/illustration-swallow-the-key.png b/customize.dist/images/illustration-swallow-the-key.png new file mode 100644 index 000000000..ea20e69dd Binary files /dev/null and b/customize.dist/images/illustration-swallow-the-key.png differ diff --git a/customize.dist/pages/register.js b/customize.dist/pages/register.js index b40a1425c..a178fe03e 100644 --- a/customize.dist/pages/register.js +++ b/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 = ''; + 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(), diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 0acbd49b4..a438e9890 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/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; + } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index cc319a0e4..08d03e70a 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/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-bottom: 2em; + padding:15px; + 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; - background: #fff; - border: 2px solid @cryptpad_color_blue; - border-radius: 0; - &:hover { - transform: scale(1.05); + + .cp-register-notes { + ul.cp-notes-list { + list-style: none; + margin-left: 0; + padding-left: 30px; + position: relative; + li { + margin-bottom: 10px; + &::before { + position: absolute; + left: 0; + font-family: "FontAwesome"; + content: "\f071"; + } + .red { + color: #ff0000; + } + } } } } - .cp-register-test { - margin-top: 3em; - hr { - width: 15rem; - border-top: 2px solid @cryptpad_color_blue; - margin-top: 0; - margin-bottom: 2em; - } - p { - margin-bottom: 0; - } - .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; - } } diff --git a/customize.dist/testimonial.svg b/customize.dist/testimonial.svg deleted file mode 100644 index 4c1b0074e..000000000 --- a/customize.dist/testimonial.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - -testimonial - - - - - - - diff --git a/www/register/main.js b/www/register/main.js index e2c30ea64..671400ef5 100644 --- a/www/register/main.js +++ b/www/register/main.js @@ -99,8 +99,13 @@ define([ return void UI.alert(Messages.register_mustAcceptTerms); } + // XXX + Messages.register_warning = " 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("

" + Messages.register_warning + "

", + UI.confirm("

" + Messages.register_warning + "

" + 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', - okClass: 'btn.btn-danger', + cancelClass: 'btn.cancel', + okClass: 'btn.btn-danger.btn-register-confirm', reverseOrder: true, done: function ($dialog) { $dialog.find('> div').addClass('half');