use bootstrap for login and register pages
This commit is contained in:
ansuz
parent
c556f78562
commit
b5b2454f0b
@ -845,8 +845,8 @@ html.cp,
|
|||||||
.cp #main_other #userForm {
|
.cp #main_other #userForm {
|
||||||
float: right;
|
float: right;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 350px;
|
width: 400px;
|
||||||
max-width: 35%;
|
max-width: 40%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: lato, Helvetica, sans-serif;
|
font-family: lato, Helvetica, sans-serif;
|
||||||
|
|||||||
@ -389,8 +389,8 @@ body.html {
|
|||||||
#userForm {
|
#userForm {
|
||||||
float: right;
|
float: right;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 350px;
|
width: 400px;
|
||||||
max-width: 35%;
|
max-width: 40%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: lato, Helvetica, sans-serif;
|
font-family: lato, Helvetica, sans-serif;
|
||||||
|
|||||||
81
www/login/index.html
Normal file
81
www/login/index.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="cp">
|
||||||
|
<head>
|
||||||
|
<title data-localization="main_title">Cryptpad: Log in</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"/>
|
||||||
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||||
|
<script src="/bower_components/requirejs/require.js"></script>
|
||||||
|
<script>
|
||||||
|
require.config({
|
||||||
|
waitSeconds: 60,
|
||||||
|
});
|
||||||
|
</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="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>
|
||||||
|
|
||||||
|
<div id="noscriptContainer">
|
||||||
|
<div class="mainOverlay"></div>
|
||||||
|
<div id="noscript">
|
||||||
|
<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>
|
||||||
|
</noscript>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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_p1"><!-- 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
96
www/login/main.js
Normal file
96
www/login/main.js
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
define([
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/customize/languageSelector.js',
|
||||||
|
'/common/login.js',
|
||||||
|
'/bower_components/jquery/dist/jquery.min.js',
|
||||||
|
], function (Cryptpad, LS, Login) {
|
||||||
|
var $ = window.$;
|
||||||
|
|
||||||
|
var APP = window.APP = {
|
||||||
|
Cryptpad: Cryptpad,
|
||||||
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
var $main = $('#mainBlock');
|
||||||
|
|
||||||
|
// Language selector
|
||||||
|
var $sel = $('#language-selector');
|
||||||
|
Cryptpad.createLanguageSelector(undefined, $sel);
|
||||||
|
$sel.find('button').addClass('btn').addClass('btn-secondary');
|
||||||
|
$sel.show();
|
||||||
|
|
||||||
|
$(window).click(function () {
|
||||||
|
$('.cryptpad-dropdown').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// main block is hidden in case javascript is disabled
|
||||||
|
$main.removeClass('hidden');
|
||||||
|
|
||||||
|
// Make sure we don't display non-translated content (empty button)
|
||||||
|
$main.find('#data').removeClass('hidden');
|
||||||
|
|
||||||
|
if (Cryptpad.isLoggedIn()) {
|
||||||
|
// already logged in, redirect to drive
|
||||||
|
document.location.href = '/drive/';
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$main.find('#userForm').removeClass('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Log in UI */
|
||||||
|
// deferred execution to avoid unnecessary asset loading
|
||||||
|
var loginReady = function (cb) {
|
||||||
|
if (Login) {
|
||||||
|
if (typeof(cb) === 'function') { cb(); }
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
require([
|
||||||
|
], function (_Login) {
|
||||||
|
Login = Login || _Login;
|
||||||
|
if (typeof(cb) === 'function') { cb(); }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
loginReady();
|
||||||
|
|
||||||
|
var $uname = $('#name');
|
||||||
|
|
||||||
|
var $passwd = $('#password')
|
||||||
|
// background loading of login assets
|
||||||
|
// enter key while on password field clicks signup
|
||||||
|
.on('keyup', function (e) {
|
||||||
|
if (e.which !== 13) { return; } // enter
|
||||||
|
$('button.login').click();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('button.login').click(function (e) {
|
||||||
|
loginReady(function () {
|
||||||
|
var uname = $uname.val();
|
||||||
|
var passwd = $passwd.val();
|
||||||
|
|
||||||
|
Login.loginOrRegister(uname, passwd, false, function (err, result) {
|
||||||
|
if (!err) {
|
||||||
|
// successful validation and user already exists
|
||||||
|
// set user hash in localStorage and redirect to drive
|
||||||
|
localStorage.User_hash = result.userHash;
|
||||||
|
document.location.href = '/drive/';
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (err) {
|
||||||
|
case 'NO_SUCH_USER':
|
||||||
|
Cryptpad.alert('Invalid username or password. Try again, or sign up'); // XXX
|
||||||
|
break;
|
||||||
|
case 'INVAL_USER':
|
||||||
|
Cryptpad.alert('Username required'); // XXX
|
||||||
|
break;
|
||||||
|
case 'INVAL_PASS':
|
||||||
|
Cryptpad.alert('Password required'); // XXX
|
||||||
|
break;
|
||||||
|
default: // UNHANDLED ERROR
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
@ -6,62 +6,80 @@
|
|||||||
<title>Cryptpad: login</title>
|
<title>Cryptpad: login</title>
|
||||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||||
<link rel="stylesheet" href="/customize/main.css" />
|
<link rel="stylesheet" href="/customize/main.css" />
|
||||||
<style>
|
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||||
html, body{
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
height: 100% !important;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
padding: 45px;
|
|
||||||
}
|
|
||||||
div.panel{
|
|
||||||
width: 70%;
|
|
||||||
margin: auto;
|
|
||||||
border: 1px solid black;
|
|
||||||
padding: 15px;
|
|
||||||
display: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
div.panel { width: 90%; }
|
|
||||||
}
|
|
||||||
input[type="text"], input[type="password"] {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr.choice {
|
|
||||||
margin-top: 45px;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notice-panel {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body id="main">
|
<body class="html">
|
||||||
|
<div id="cryptpadTopBar">
|
||||||
|
<span>
|
||||||
|
<a class="gotoMain" href="/">
|
||||||
|
<img src="/customize/cryptofist_mini.png" class="cryptpad-logo" alt="" /> CryptPad
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
<div id="login-panel" class="panel" style="display:block;">
|
<span id="language-selector" class="right dropdown-bar"></span>
|
||||||
<input id="username" type="text" autocomplete="off" autocorrect="off"
|
<span class="right">
|
||||||
autocapitalize="off" spellcheck="false" data-localization-placeholder="login_username" autofocus/><br />
|
<a href="/about.html" data-localization="about">About</a>
|
||||||
|
</span>
|
||||||
<input id="password" type="password" data-localization-placeholder="login_password"/><br />
|
<span class="right">
|
||||||
<input id="password-confirm" type="password" data-localization-placeholder="login_confirm"/><br />
|
<a href="/privacy.html" data-localization="privacy">Privacy</a>
|
||||||
|
</span>
|
||||||
<!-- TODO translate labels -->
|
<span class="right">
|
||||||
<input id="import-recent" type="checkbox" /><label for="import-recent">Import recent pads from your browser (Optional)</label><br />
|
<a href="/terms.html" data-localization="terms">ToS</a>
|
||||||
<input id="accept-terms" type="checkbox" /><label for="accept-terms">Accept the terms and conditions</label><br />
|
</span>
|
||||||
<input id="promise" type="checkbox" /><label for="promise">I promise to remember my username and password</label><br />
|
<span class="right">
|
||||||
|
<a href="/contact.html" data-localization="contact">Contact</a>
|
||||||
<button id="register" class="btn btn-primary" data-localization="login_login">Sign up</button>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="noscriptContainer">
|
||||||
|
<div class="mainOverlay"></div>
|
||||||
|
<div id="noscript">
|
||||||
|
<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>
|
||||||
|
</noscript>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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_p1"><!-- 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">Import pad history (Recommended)</label><br />
|
||||||
|
|
||||||
|
<input id="accept-terms" type="checkbox" />
|
||||||
|
<label for="accept-terms">I accept <a href="/terms.html">the terms</a></label><br />
|
||||||
|
|
||||||
|
<input id="promise" type="checkbox" />
|
||||||
|
<label for="promise">I will remember my username and password</label><br />
|
||||||
|
|
||||||
|
<button id="register" class="btn btn-primary" data-localization="login_login">Sign up</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -10,6 +10,34 @@ define([
|
|||||||
Login: Login,
|
Login: Login,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
var $main = $('#mainBlock');
|
||||||
|
|
||||||
|
// Language selector
|
||||||
|
var $sel = $('#language-selector');
|
||||||
|
Cryptpad.createLanguageSelector(undefined, $sel);
|
||||||
|
$sel.find('button').addClass('btn').addClass('btn-secondary');
|
||||||
|
$sel.show();
|
||||||
|
|
||||||
|
$(window).click(function () {
|
||||||
|
$('.cryptpad-dropdown').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// main block is hidden in case javascript is disabled
|
||||||
|
$main.removeClass('hidden');
|
||||||
|
|
||||||
|
// Make sure we don't display non-translated content (empty button)
|
||||||
|
$main.find('#data').removeClass('hidden');
|
||||||
|
|
||||||
|
if (Cryptpad.isLoggedIn()) {
|
||||||
|
// already logged in, redirect to drive
|
||||||
|
document.location.href = '/drive/';
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$main.find('#userForm').removeClass('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// text and password input fields
|
// text and password input fields
|
||||||
var $uname = $('#username');
|
var $uname = $('#username');
|
||||||
var $passwd = $('#password');
|
var $passwd = $('#password');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user