Commit e7b93304 authored by Bob Hageman's avatar Bob Hageman

many additions and changes: webworker at registration, added terms, switched...

many additions and changes: webworker at registration, added terms, switched ipfs-mini with self created async ipfs-minime fork
parent 0724f3a9
......@@ -123,13 +123,16 @@ gulp.task('html', () => {
// Bundle and minify javascript files
gulp.task('javascript', function () {
// app.js
// set up the browserify instance on a task basis
var b = browserify({
entries: config.base.src + 'scripts/app.js',
debug: false
});
return b.bundle()
b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
......@@ -139,6 +142,27 @@ gulp.task('javascript', function () {
.pipe(sourcemaps.write('./'))
//.pipe(gulp.dest(config.base.src + 'assets/js/')) // a copy to src
.pipe(gulp.dest(config.base.dist + 'assets/js/'));
// worker.js
var c = browserify({
entries: config.base.src + 'scripts/worker.js',
debug: false
});
return c.bundle()
.pipe(source('worker.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(terser(config.tersercfg))
.on('error', log.error)
.pipe(sourcemaps.write('./'))
//.pipe(gulp.dest(config.base.src + 'assets/js/')) // a copy to src
.pipe(gulp.dest(config.base.dist + 'assets/js/'));
});
// Bundle and minify CSS files
......
This diff is collapsed.
{
"name": "Schluss.app",
"title": "Personal locker - Powered by Schluss technology",
"name": "schluss.app",
"title": "Schluss.app",
"description": "Personal locker - Powered by Schluss technology",
"version": "0.0.1",
"repository": {
"type": "git",
......@@ -17,16 +18,16 @@
"cryptico": "^1.0.2",
"crypto-js": "^3.1.9-1",
"gulp-replace-template": "^0.1.2",
"ipfs-mini": "^1.1.2",
"ipfs-minime": "git+https://gitlab.com/schluss/ipfs-minime.git",
"jquery": "^3.3.1",
"jquery-pinlogin": "https://github.com/bobhageman/jquery-pinlogin/tarball/master",
"jquery-toast-plugin": "^1.3.2",
"localforage": "^1.7.1",
"localforage": "^1.7.3",
"natives": "^1.1.6",
"sammy": "^0.7.6"
},
"devDependencies": {
"browserify": "^16.2.2",
"browserify": "^16.2.3",
"gulp": "^3.9.1",
"gulp-clean": "^0.4.0",
"gulp-htmlmin": "^5.0.1",
......
......@@ -92,6 +92,13 @@ body.pink h2
h3
{}
a
{
color:#7c859a;
text-decoration:none;
}
.centered
{
text-align:center;
......@@ -120,6 +127,8 @@ header
-webkit-user-select: none;
user-select: none;
position:relative;
z-index:999;
}
......@@ -461,6 +470,12 @@ body.pink p.light
color:#fdadbc;
}
body.pink p.light a
{
color:#fdadbc;
text-decoration:underline;
}
label, input
{
display:block;
......@@ -501,6 +516,9 @@ input
}
.waiting span {
font-size:1.5em;
/**
* Use the blink animation, which is defined above
*/
......
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 400.004 400.004" style="enable-background:new 0 0 400.004 400.004;" xml:space="preserve">
<g>
<path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757 c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072 c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315 C400.004,190.438,392.251,182.686,382.688,182.686z" fill="#7c859a"/>
</g>
</svg>
......@@ -21,7 +21,7 @@ require('sammy/lib/plugins/sammy.title.js');
// storage
var localforage = require('localforage');
var IPFS = require('ipfs-mini');
var IPFS = require('ipfs-minime');
// crypto
global.CryptoJS = require('crypto-js');
......@@ -89,14 +89,21 @@ $(function(){
$('#contextdata ul').append('<br/><h3>Mijn gegevens</h3>');
// IPFS GET
context.index.iterate(function(value, key, iterationNumber){
context.index.iterate(async function(value, key, iterationNumber){
let doc = await context.getDoc(value.hash);
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
$('#contextdata ul').append('<li><a href="#/explore/'+key+'">' + decrypted + '</a></li>');
/* old callback way
context.getDoc(value.hash, function(doc) {
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
$('#contextdata ul').append('<li><a href="#/explore/'+key+'">' + decrypted + '</a></li>');
});
});*/
});
......@@ -283,6 +290,14 @@ $(function(){
});
});
this.get('#/terms', function(e){
e.partial('views/terms.tpl', function(t){
tools.setTheme('white');
tools.setLayout('wizard');
});
});
this.get('#/register-wait-test', function(e){
e.partial('views/register-wait.tpl', null, function(t){
......@@ -466,6 +481,48 @@ $(function(){
}
/// end template javascript code
// register registration worker
var worker = new Worker('/assets/js/worker.js');
worker.onmessage = function(result){
if (result.data.action == 'register' && result.data.type == 'finished')
{
// create a session right away
entity.created = true;
// vault created, show overlay
$('#doneOverlay').addClass('show');
// do not autologin user, let them enter their pincode once again
// this makes it easier to remember and gives a more secure feeling
window.setTimeout(function(){
e.redirect('#/');
}, 2000);
/*
// autologin user
entity.login(e.params['pin'], function(result){
//alert('redirect');
// and where done, so redirect.
window.setTimeout(function(){
e.redirect('#/');
}, 1000);
});
*/
}
};
// start async registration process
worker.postMessage({action : 'register', params : e.params['pin']});
/*
// timeout provides that template is loaded first and then the key generation process starts
window.setTimeout(async function(){
......@@ -491,6 +548,7 @@ $(function(){
}
}, 100);
*/
});
});
......@@ -533,10 +591,11 @@ $(function(){
});
this.post('#/add', function(e){
this.post('#/add', async function(e){
var encrypted = CryptoJS.AES.encrypt(e.params['content'], entity.key);//.toString(CryptoJS.enc.Utf8);
/* callback
context.setDoc({content : encrypted.toString()},function(datahash){
context.setItem('index', e.params['name'], { name : e.params['name'], hash : datahash, app : 'self', type : 'textarea' ,timestamp: Math.round(new Date().getTime()/1000), version : '0.1' }).then(function(result){
......@@ -544,14 +603,25 @@ $(function(){
t.redirect('#/');
});
});*/
let docHash = await context.setDoc({content : encrypted.toString()});
context.setItem('index', e.params['name'], { name : e.params['name'], hash : docHash, app : 'self', type : 'textarea' ,timestamp: Math.round(new Date().getTime()/1000), version : '0.1' }).then(function(result){
var t = e;
t.redirect('#/');
});
});
this.get('#/explore/:key', function(e) {
this.get('#/explore/:key', async function(e) {
context.getItem('index', e.params['key']).then(function(index){
context.getItem('index', e.params['key']).then(async function(index){
// IPFS STORAGE
/* old callback way
context.getDoc(index.hash, function(doc) {
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
......@@ -563,6 +633,18 @@ $(function(){
});
});
*/
let doc = await context.getDoc(index.hash);
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
e.partial('views/explore.tpl', { index : index, doc : doc, data : decrypted}, function(t){
var frm = '<input type="'+index.type+'" name="" value="'+decrypted+'" />';
$('#formcontent').append(frm);
});
})
});
......@@ -659,9 +741,9 @@ $(function(){
var e = this;
// always, exept login|register|welcome|our-promise|connect
// always, exept login|register|terms|welcome|our-promise|connect
// note: connect url does not match with contextMatchesOptions, so used a hack in the if...
if (app.contextMatchesOptions(this, {except: {path: ['#/login', '#/register', '#/welcome', '#/our-promise', '#/connect']}}) && this.path.indexOf('#/connect/') === -1)
if (app.contextMatchesOptions(this, {except: {path: ['#/login', '#/register', '#/terms', '#/welcome', '#/our-promise', '#/connect']}}) && this.path.indexOf('#/connect/') === -1)
{
//console.log ('around triggered: always, exept login|register|connect');
context.init(function(){
......
var localforage = require('localforage');
var IPFS = require('ipfs-mini');
var IPFS = require('ipfs-minime');
const config = require('./config.js');
var context = {
......@@ -59,8 +59,10 @@ const config = require('./config.js');
//description : 'schluss index storage'
});
this.ipfs = new IPFS(config.ipfs);
//this.ipfs = new IPFS(config.ipfs);
//this.ipfs = new IPFS({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });
this.ipfs = IPFS;
this.ipfs.setProvider(config.ipfs);
this.docs = localforage.createInstance({
name : 'schluss',
......@@ -115,6 +117,27 @@ const config = require('./config.js');
},
// ipfs methods
setDoc : async function(contentJSON){
return await this.ipfs.addJSON(contentJSON);
//return res;
},
getDoc : async function(hash){
return await this.ipfs.catJSON(hash);
//return res;
},
statDoc : async function(hash)
{
return await this.ipfs.stat(hash);
//return res;
}
/* the old callback way
setDoc : function(contentJSON, callback)
{
this.ipfs.addJSON(contentJSON, function(err, result) {
......@@ -152,7 +175,7 @@ const config = require('./config.js');
this.ipfs.stat(hash, function(err, result) {
console.log(err, result);
});
}
}*/
};
module.exports = context;
\ No newline at end of file
......@@ -15,7 +15,7 @@ var config = require('./config.js');
return new Promise(function(resolve, reject){
//showpopup('Sleutels genereren... Dit kan even duren');
//console.log('registreren');
console.log('registreren');
// hash pin
var pincodeHash = CryptoJS.SHA256(pin);
......@@ -51,6 +51,7 @@ var config = require('./config.js');
// all done, call back!
//callback();
console.log('rsa key generated');
resolve(true);
});
......
......@@ -41,7 +41,7 @@
provider.scopedata[provider.settings.scope[i].name] = provider.settings.scope[i];
context.getItem('index', provider.settings.scope[i].name).then(function(index){
context.getItem('index', provider.settings.scope[i].name).then(async function(index){
if (index == null)
{
......@@ -53,6 +53,8 @@
else
{
// IPFS GET
/* old callback way
context.getDoc(index.hash, function(doc){
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
......@@ -65,6 +67,20 @@
if (count === 0)
callback(true);
});
*/
let doc = await context.getDoc(index.hash);
var decrypted = CryptoJS.AES.decrypt(doc.content, entity.key).toString(CryptoJS.enc.Utf8);
provider.scopedata[index.name].value = decrypted;
provider.scopedata[index.name].hash = index.hash;
count--;
if (count === 0)
callback(true);
}
......@@ -166,7 +182,7 @@
Object.keys(formParams.val).forEach(function(key) {
setTimeout(function() {
setTimeout(async function() {
// IPFS STORE
......@@ -174,6 +190,8 @@
var encrypted = CryptoJS.AES.encrypt(formParams.val[key].value, entity.key);
// store data
/* old ipfs callback way
context.setDoc({content : encrypted.toString()}, function(datahash)
{
// store in index
......@@ -195,7 +213,31 @@
//callback();
}
});
});
});*/
/* new
let datahash = await context.setDoc({content : encrypted.toString()});
// store in index
context.setItem('index', key, { name : key, hash : datahash, app : provider.settings.appname, type : provider.scopedata[key].type ,timestamp: Math.round(new Date().getTime()/1000), version : '0.1' }).then(function(result){
if ('share' in formParams.val[key])
{
console.log (key + ' is shared with 3rd party, so send it');
// send post to provider api to share the data
provider.shareDataToProvider(datahash, key, formParams.val[key].value);
}
count -= 1;
if (count === 0)
{
console.log('every field processed');
// call your callback here
//callback();
}
});
*/
}, 0);
});
......
// general webworker (for now)
/* Call a method:
worker.postMessage({action : 'register'})
*/
// config
var config = require('./config.js');
// crypto
global.CryptoJS = require('crypto-js');
global.cryptico = require('cryptico');
global.context = require('./context.js');
global.tools = require('./tools.js');
// worker messages
onmessage = function(e) {
if (e.data.action == 'register')
worker.register(e.data.params);
}
var worker = (function(){
var x = {};
x.register = async function(pin){
//console.log(global);
//return new Promise(function(resolve, reject){
// hash pin
var pincodeHash = CryptoJS.SHA256(pin);
// generate unique and random key
var key = tools.hash(64); // 256bits hash
// encrypt key with pincodeHash
var encrypted = CryptoJS.AES.encrypt(key, pincodeHash.toString());
// create RSA key pair
var RSAPrivateKey = cryptico.generateRSAKey(key, 2048); // 2048 preferred, but takes a lot of time (so this quicker testing, change in production version!)
global.context.init(function(){
// create a new 'app' instance
global.context.setItem('db','app', {version : '1.0', name : 'Schluss'})
.then(function(){
// store key
return global.context.setItem('db','key', encrypted.toString());
})
.then(function(){
// store rsa private key
return global.context.setItem('db','rsakey', RSAPrivateKey);
})
.then(function(){
// return the resulting package
//postMessage({action : 'register', type: 'finished', key : encrypted.toString(), rsakey : RSAPrivateKey});
postMessage({action : 'register', type: 'finished'});
// create a session right away
//entity.created = true;
resolve(true);
});
});
//resolve(true);
//)};
};
return x;
}());
\ No newline at end of file
......@@ -8,8 +8,8 @@
<div class="frame">
<div class="logo">
<img src="assets/img/logo-pink.svg" alt="logo"/>
<div class="logo" style="float:left;">
<img src="assets/img/logo-pink.svg" alt="logo" width="49" />
</div>
<nav id="mainnav">
......@@ -17,7 +17,7 @@
<div id="slider">
<div class="logo">
<a href="#/"><img src="assets/img/logo-white.svg" alt="logo"/></a>
<a href="#/"><img src="assets/img/logo-white.svg" alt="logo" width="49" /></a>
</div>
<ul class="">
......
......@@ -2,6 +2,9 @@
<main>
<div class="frame">
<div class="row">
<div class="column">
<h1>Dashboard</h1>
......@@ -21,6 +24,8 @@
</div>
</div>
</div>
</main>
<footer>
......
......@@ -10,7 +10,7 @@
padding: 5px;
margin: 0 10px;
margin: 0 5px;
/*border:1px solid #fdadbc;*/
......@@ -55,8 +55,6 @@
</style>
<form action="#/login" method="post" id="loginForm" autocomplete="off">
<input type="hidden" name="pin" id="pin" />
<header>
<div class="frame centered">
......@@ -69,21 +67,24 @@
</header>
<main>
<form action="#/login" method="post" id="loginForm" autocomplete="off">
<input type="hidden" name="pin" id="pin" />
<div class="frame">
<div class="centered">
<h1>Log in met je persoonlijke pincode</h1>
<h1>Welkom bij Schluss</h1>
<p class="light"><img src="assets/img/padlock.svg" alt="lock" width="16"/> Je pincode en gegevens zijn veilig. Door gebruik van Schluss-encryptie.</p>
<p class="light">Login met je pincode</p>
</div>
<br/>
<div id="pinwrapper"></div>
<div id="pinwrapper" class="centered"></div>
</div>
</form>
</main>
<footer></footer>
</form>
\ No newline at end of file
<footer class="centered">
<p class="light"><a href="#/welcome">Account aanmaken</a></p>
</footer>
......@@ -91,7 +91,7 @@
<br/>
<p class="light">By signing up you agree to the terms</p>
<p class="light">By signing up you agree to the <a href="#/terms">terms</a></p>
</div>
......
<header>
<div class="centered">
<div style="position:absolute;left:2em;top:25px;"><a href="#/register"><img src="assets/img/left-arrow.svg" width="18" style="vertical-align:middle;" alt=""/>&nbsp; Terug</a></div>
<div class="logo">
<img src="assets/img/logo-pink.svg" alt="logo" width="49"/>
</div>
</div>
</header>
<main>
<div class="frame">
<br/>
<h1>Terms</h1>
<p><b>1. General...</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam facilisis dui. Duis vitae ante auctor, mollis ipsum sit amet, pulvinar enim. Nunc interdum urna vel mauris posuere, sit amet faucibus lacus imperdiet. Nulla non ligula a eros pulvinar molestie vel id lectus. Ut a maximus odio, sit amet molestie felis. Quisque pulvinar non massa non elementum. Curabitur scelerisque risus vel neque gravida dictum. Nunc condimentum quam id felis efficitur, eu hendrerit orci fermentum. Duis ultricies molestie massa, ornare bibendum quam volutpat et. Etiam mauris leo, blandit in faucibus sed, vehicula vitae lacus. Vivamus viverra viverra ornare. Mauris tortor est, vehicula vel tempor et, aliquam vel dolor. Praesent elit sem, lobortis lobortis luctus mollis, dapibus non mauris. Donec vel libero vitae ex tempor ultricies.</p>
<br/>
<p><b>2. More...</b></p>
<p>In quis dui vitae nunc finibus gravida. Curabitur molestie pharetra tellus id dapibus. Cras rhoncus libero at felis viverra auctor. Vivamus efficitur condimentum nibh. Quisque elementum dignissim vulputate. Maecenas eu molestie nulla. Curabitur ante tortor, tempus non dui sodales, finibus consequat diam. Donec a cursus velit, sit amet vehicula leo.</p>
<br/>
<p><b>3. And more...</b></p>
<p>Integer hendrerit, nisl nec fermentum porttitor, lectus lectus suscipit nunc, id suscipit leo dolor vel lacus. Nulla velit sem, aliquam non gravida eleifend, dignissim vel ipsum. Ut semper consectetur ligula, tempus varius nibh aliquet in. Praesent interdum risus in nisi hendrerit, at semper elit pretium. Aenean sed lectus posuere tellus eleifend commodo. Integer lacinia justo non ultrices hendrerit. Aliquam erat volutpat. Vestibulum magna mi, suscipit eget interdum non, volutpat ac tellus. Vestibulum vestibulum libero vel lectus viverra fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras gravida, magna eget eleifend scelerisque, nisi felis rutrum mauris, sit amet semper felis justo convallis leo. Proin scelerisque egestas dignissim. Maecenas vitae massa venenatis, vestibulum eros eu, hendrerit tortor. Mauris ornare scelerisque neque a bibendum. Praesent nec purus nulla. Fusce consectetur tellus lacus, ut efficitur libero mollis nec.</p>
<br/>
<p><b>4. And more...</b></p>
<p>In hac habitasse platea dictumst. Phasellus et libero quam. Quisque auctor imperdiet dui ac cursus. Sed dignissim nec augue at dapibus. Maecenas sit amet venenatis ante. Proin vulputate tortor at magna hendrerit, a fermentum neque consequat. Curabitur accumsan mi sit amet turpis tincidunt feugiat. Morbi quam turpis, porttitor sit amet nulla sed, mollis gravida nunc. Quisque imperdiet sapien quis nulla faucibus lobortis. Nam nec lacinia diam. Suspendisse at laoreet nibh. Phasellus elementum viverra risus vitae ultricies. Phasellus lobortis, nisi in hendrerit viverra, justo nisi finibus nunc, et fringilla nunc quam id risus. Praesent at diam posuere, eleifend enim eu, congue lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id pulvinar quam, in posuere metus.</p>
</div>
</main>
<footer>
</footer>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment