Add the new files for the settings app
yflory
8 years ago
parent
cd9cea8fa4
commit
0a43570990
@ -0,0 +1,3 @@
|
||||
<link rel="stylesheet" type="text/css" href="main.css" />
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<div id="container"></div>
|
||||
@ -0,0 +1,2 @@
|
||||
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="cp">
|
||||
<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, 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">
|
||||
<link rel="stylesheet" type="text/css" href="main.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 class="slogan" data-localization="main_slogan"></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">
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-unstyled">
|
||||
<li>CryptPad</li>
|
||||
<li><a href="/about.html" data-localization="about"></a></li>
|
||||
<li><a href="/terms.html" data-localization="terms"></a></li>
|
||||
<li><a href="/privacy.html" data-localization="privacy"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-unstyled">
|
||||
<li data-localization="footer_applications"><li>
|
||||
<li><a href="/pad/" data-localization="main_richText"></a></li>
|
||||
<li><a href="/code/" data-localization="main_code"></a></li>
|
||||
<li><a href="/slide/" data-localization="main_slide"></a></li>
|
||||
<li><a href="/poll/" data-localization="main_poll"></a></li>
|
||||
<li><a href="/drive/" data-localization="main_drive"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-unstyled">
|
||||
<li data-localization="footer_aboutUs"><li>
|
||||
<li><a href="https://labs.xwiki.com" target="_blank" rel="noopener noreferrer">XWiki Labs</a></li>
|
||||
<li><a href="http://www.xwiki.com" target="_blank" rel="noopener noreferrer">XWiki SAS</a></li>
|
||||
<li><a href="https://www.openpass.fr/" target="_blank" rel="noopener noreferrer">OpenPaaS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-unstyled">
|
||||
<li data-localization="footer_contact"><li>
|
||||
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
|
||||
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
|
||||
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
<li><a href="/contact.html">Email</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
.cp #mainBlock {
|
||||
z-index: 1;
|
||||
width: 1000px;
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.cp #mainBlock #container .infoBlock {
|
||||
padding: 15px;
|
||||
border: 1px solid #555;
|
||||
background: #cccccc;
|
||||
}
|
||||
.cp #mainBlock #container .infoBlock .label {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cp #mainBlock #container .displayName input,
|
||||
.cp #mainBlock #container .displayName button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cp #mainBlock #container > div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
@ -0,0 +1,156 @@
|
||||
define([
|
||||
'/common/cryptpad-common.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
], function (Cryptpad) {
|
||||
var $ = window.jQuery;
|
||||
|
||||
var USERNAME_KEY = 'cryptpad.username';
|
||||
|
||||
var APP = {
|
||||
Cryptpad: Cryptpad,
|
||||
_onRefresh: []
|
||||
};
|
||||
|
||||
var redirectToMain = function () {
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
// Manage changes in the realtime object made from another page
|
||||
var onRefresh = function (h) {
|
||||
if (typeof(h) !== "function") { return; }
|
||||
if (APP._onRefresh.indexOf(h) !== -1) { return; }
|
||||
APP._onRefresh.push(h);
|
||||
};
|
||||
var refresh = APP.refresh = function () {
|
||||
console.log('chnge');
|
||||
APP._onRefresh.forEach(function (h) {
|
||||
h();
|
||||
});
|
||||
};
|
||||
|
||||
// Title block
|
||||
var createTitle = function () {
|
||||
return $('<h1>').text('Settings'); //XXX
|
||||
};
|
||||
|
||||
var createInfoBlock = function (store) {
|
||||
var obj = store.proxy;
|
||||
var $div = $('<div>', {'class': 'infoBlock'});
|
||||
|
||||
var accountName = obj.login_name;
|
||||
if (!accountName) { return; }
|
||||
var $label = $('<span>', {'class': 'label'}).text('Account name:'); // XXX
|
||||
var $name = $('<span>').text(accountName);
|
||||
$div.append($label).append($name);
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
// Create the block containing the display name field
|
||||
var createDisplayNameInput = function (store) {
|
||||
var obj = store.proxy;
|
||||
var $div = $('<div>', {'class': 'displayName'});
|
||||
var $label = $('<label>', {'for' : 'displayName'}).text('DISPLAY NAME').appendTo($div); // XXX
|
||||
$('<br>').appendTo($div);
|
||||
var $input = $('<input>', {
|
||||
'type': 'text',
|
||||
'id': 'displayName',
|
||||
'placeholder': 'ANONYMOUS'}).appendTo($div); // XXX
|
||||
var $save = $('<button>', {'class': 'btn btn-primary'}).text('SAVE').appendTo($div); // XXX
|
||||
var $ok = $('<span>', {'class': 'fa fa-check'}).appendTo($div);
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).appendTo($div);
|
||||
|
||||
$spinner.hide();
|
||||
var displayName = obj[USERNAME_KEY] || '';
|
||||
$input.val(displayName);
|
||||
|
||||
// When the display name is changed (enter or button clicked)
|
||||
var todo = function () {
|
||||
displayName = $input.val();
|
||||
obj[USERNAME_KEY] = displayName;
|
||||
$spinner.show();
|
||||
Cryptpad.whenRealtimeSyncs(store.info.realtime, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
};
|
||||
$input.on('keyup', function (e) {
|
||||
if ($input.val() !== displayName) { $ok.hide(); }
|
||||
if (e.which === 13) { todo(); }
|
||||
});
|
||||
$save.click(todo);
|
||||
|
||||
// On remote change
|
||||
var onChange = function () {
|
||||
if (obj[USERNAME_KEY] !== $input.val()) {
|
||||
$input.val(obj[USERNAME_KEY]);
|
||||
$input.focusout();
|
||||
}
|
||||
};
|
||||
onRefresh(onChange);
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createResetDrive = function (obj) {
|
||||
var $div = $('<div>', {'class': 'resetDrive'});
|
||||
var $label = $('<label>', {'for' : 'resetDrive'}).text('CLEAN MY DRIVE').appendTo($div); // XXX
|
||||
$('<br>').appendTo($div);
|
||||
var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'}).text('REMOVE ALL MY FILES AND FOLDERS').appendTo($div); // XXX
|
||||
|
||||
$button.click(function () {
|
||||
Cryptpad.prompt("Are you <b>really really</b> sure? That action is irreversible! Type `<em>I love CryptPad</em>` to confirm.", "", function (val) { // XXX
|
||||
if (val !== "I love CryptPad") { return; }
|
||||
obj.proxy.drive = Cryptpad.getStore().getEmptyObject();
|
||||
Cryptpad.alert("Your drive is now empty!"); // XXX
|
||||
});
|
||||
});
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
var andThen = function (obj) {
|
||||
APP.$container.append(createTitle());
|
||||
APP.$container.append(createInfoBlock(obj));
|
||||
APP.$container.append(createDisplayNameInput(obj));
|
||||
APP.$container.append(createResetDrive(obj));
|
||||
obj.proxy.on('change', [], refresh);
|
||||
obj.proxy.on('remove', [], refresh);
|
||||
};
|
||||
|
||||
$(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');
|
||||
|
||||
APP.$container = $('#container');
|
||||
|
||||
Cryptpad.ready(function () {
|
||||
if (!Cryptpad.getUserHash()) { return redirectToMain(); }
|
||||
|
||||
var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy
|
||||
? Cryptpad.getStore().getProxy() : undefined;
|
||||
|
||||
andThen(storeObj);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('storage', function (e) {
|
||||
var key = e.key;
|
||||
if (e.key !== Cryptpad.userHashKey) { return; }
|
||||
var o = e.oldValue;
|
||||
var n = e.newValue;
|
||||
if (o && !n) { // disconnect
|
||||
redirectToMain();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
@import '../../customize.dist/src/less/variables.less';
|
||||
|
||||
@border: 1px solid #555;
|
||||
|
||||
.cp {
|
||||
#mainBlock {
|
||||
z-index: 1;
|
||||
width: 1000px;
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
|
||||
#container {
|
||||
.infoBlock {
|
||||
padding: 15px;
|
||||
border: @border;
|
||||
background: @dark-base;
|
||||
.label {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.displayName {
|
||||
input, button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.resetDrive {
|
||||
|
||||
}
|
||||
&>div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue