make register and login user clientside templates

This commit is contained in:
ansuz 2017-06-22 10:04:46 +02:00
parent ab54dcf84d
commit 118b83c420
6 changed files with 120 additions and 171 deletions

View File

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

View File

@ -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 () {});
});
}
})});
});
});

View File

@ -5,25 +5,23 @@ define([
var Pages = {};
var Msg = Cryptpad.Messages;
Pages['/about.html'] = function () {
var p2 = h('p');
p2.innerHTML = Msg.main_p2;
var setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
var hiw = h('p');
hiw.innerHTML = Msg.main_howitworks_p1;
Pages['/about.html'] = function () {
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;
});

View File

@ -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;"
}
}

View File

@ -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 data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
<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>
</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">
<div class="mainOverlay"></div>
<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>
<p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
<p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
</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>

View File

@ -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"/>
<title>Cryptpad: login</title>
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<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>
</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">
<div class="mainOverlay"></div>
<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>
<p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
<p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
</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>