Skip to content

Commit

Permalink
Merge pull request #24 from alexvansande/master
Browse files Browse the repository at this point in the history 
New Style
  • Loading branch information
Kirill Pimenov committed Jul 30, 2020
2 parents 90d8bf6 + edb1395 commit 56af377
Show file tree
Hide file tree
Showing 7 changed files with 608 additions and 286 deletions.
119 changes: 90 additions & 29 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,140 @@
<template>
<div id="app">
<ForkMe url="https://github.com/paritytech/banana_split"/>
<GeneralInfo/>
<ForkMe url="https://github.com/paritytech/banana_split" />
<GeneralInfo />
<div v-if="secure">
<router-view/>
<router-view />
<nav>
<router-link to="/share">Share</router-link> |
<router-link to="/combine">Combine</router-link>
<router-link to="/share">Create</router-link>
<router-link to="/combine">Restore </router-link>
</nav>
</div>
<SavePageInfo v-else-if="!localFile"/>
<GoOfflineInfo v-else-if="isOnline"/>
<p class="version-footer">BananaSplit version {{version}}, git revision {{gitRevision}}</p>
<SavePageInfo v-else-if="!localFile" />
<GoOfflineInfo v-else-if="isOnline" />
<p class="version-footer">
BananaSplit version {{ version }}, git revision {{ gitRevision }}
</p>
</div>
</template>

<script>
import GeneralInfo from './components/GeneralInfo'
import GoOfflineInfo from './components/GoOfflineInfo'
import SavePageInfo from './components/SavePageInfo'
import ForkMe from './components/ForkMe'
import GeneralInfo from "./components/GeneralInfo";
import GoOfflineInfo from "./components/GoOfflineInfo";
import SavePageInfo from "./components/SavePageInfo";
import ForkMe from "./components/ForkMe";
import {version} from '../package.json';
import { version } from "../package.json";
export default {
name: 'App',
components: {GeneralInfo, GoOfflineInfo, SavePageInfo, ForkMe},
name: "App",
components: { GeneralInfo, GoOfflineInfo, SavePageInfo, ForkMe },
computed: {
localFile: function() {
return (window.location.protocol === 'file:')
return window.location.protocol === "file:";
},
secure: function() {
if (process.env.NODE_ENV === 'production') {
if (process.env.NODE_ENV === "production") {
return this.localFile && !this.isOnline;
} else {
return true
return true;
}
},
version: function() {
return version
return version;
},
gitRevision: function() {
return process.env.GIT_REVISION;
}
}
}
};
</script>


<style>
body {
margin: 0;
color: #49494b;
background: #ebe8e3;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: "Avenir Next Condensed", "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding: 0 0 200px 0;
}
p {
font-family: "Avenir", Helvetica, Arial, sans-serif;
}
nav {
padding: 30px;
padding: 20px;
background: linear-gradient(rgba(235, 232, 226, 0), #ebe8e3);
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 1.5em;
}
nav a {
font-weight: bold;
color: #2c3e50;
font-weight: 600;
font-size: 1.5em;
color: #49494b;
border: 2px solid #49494b;
padding: 10px 20px;
flex: 1;
text-transform: uppercase;
text-decoration: none;
background: #ebe8e3;
}
nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right-width: 1px;
}
nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left-width: 1px;
}
nav a.router-link-exact-active {
color: #42b983;
text-decoration: none;
background: #49494b;
color: #ebe8e3;
}
button {
padding: 10px 20px;
margin: 10px 0;
border-radius: 5px;
font-family: "Avenir Next Condensed", "Avenir", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 1.5em;
text-transform: uppercase;
background: #49494b;
color: #ebe8e3;
}
canvas {
/* border: 2px solid #49494b; */
/* padding: 20px; */
margin: 10px 0;
border-radius: 5px;
}
@media print {
#app {
display: none;
display: none;
}
}
Expand Down
103 changes: 69 additions & 34 deletions src/components/GeneralInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,70 @@
<template>
<div class="fold">
<h1>Banana split</h1>
<input id="fold-header" type="checkbox" name="fold" v-model="unfolded">
<label for="fold-header">
<h2 v-if="unfolded">Shamir Secret Sharing for people with friends</h2>
<p v-else>What is this?</p>
</label>
<div class="fold-content">
<p>Banana Split uses <a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing">Shamir's secret sharing</a> to make your paper backups more resilient and secure.</p>
<p>After you type in your secret into Banana Split, it will be encrypted with a autogenerated passphrase and split into N QR-codes, ready to be printed out. You'll need N/2+1 of those printouts to reconstruct the secret, and then the passphrase to decrypt it.</p>
<p>Banana Split tries to protect your secret from the attack vectors like "attacker is able to intercept everything you're sending to your printer", and that's why you'll have to write down the passphrase on your printouts by hand.</p>
<p>Banana Split is a self-contained HTML page, and should only be opened from your local Documents folder, while browser is in the Offline mode — this way the risk of compromise will be minimal.</p>
<p>Recovery can be done on any device with a webcam — just show your QR codes to the webcam and follow the notifications on screen in the process.</p>
</div>
<div class="fold">
<h1 class="main-title">Banana split</h1>
<input id="fold-header" type="checkbox" name="fold" v-model="unfolded" />
<label for="fold-header">
<h2 v-if="unfolded">Shamir Secret Sharing for people with friends</h2>
<p v-else>What is this?</p>
</label>
<div class="fold-content">
<p>
Banana Split uses
<a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing"
>Shamir's secret sharing</a
>
to make your paper backups more resilient and secure.
</p>
<p>
After you type in your secret into Banana Split, it will be encrypted
with a autogenerated passphrase and split into N QR-codes, ready to be
printed out. You'll need N/2+1 of those printouts to reconstruct the
secret, and then the passphrase to decrypt it.
</p>
<p>
Banana Split tries to protect your secret from the attack vectors like
"attacker is able to intercept everything you're sending to your
printer", and that's why you'll have to write down the passphrase on
your printouts by hand.
</p>
<p>
Banana Split is a self-contained HTML page, and should only be opened
from your local Documents folder, while browser is in the Offline mode —
this way the risk of compromise will be minimal.
</p>
<p>
Recovery can be done on any device with a webcam — just show your QR
codes to the webcam and follow the notifications on screen in the
process.
</p>
</div>
</div>
</template>

<script>
export default {
name: 'GeneralInfo',
data: function () {
return { unfolded: true }
},
created: function() {
var self = this;
this.$eventHub.$on("foldGeneralInfo", function() {
self.unfolded = false
})
}
}
name: "GeneralInfo",
data: function() {
return { unfolded: true };
},
created: function() {
var self = this;
this.$eventHub.$on("foldGeneralInfo", function() {
self.unfolded = false;
});
}
};
</script>

<style>
.main-title::before,
.main-title::after {
display: inline-block;
padding: 0 20px;
content: "\1F34C\1F368";
}
.main-title::after {
transform: scaleX(-1);
}
.fold {
position: relative;
overflow: hidden;
Expand All @@ -46,28 +79,30 @@ export default {
cursor: pointer;
}
.fold label * {
display: inline-block;
display: inline-block;
}
.fold-content {
max-height: 0;
padding: 10px 30px;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
-webkit-transition: max-height 0.35s;
-o-transition: max-height 0.35s;
transition: max-height 0.35s;
text-align: left;
}
.fold input:checked ~ .fold-content {
max-height: 100vh;
}
.fold label::before {
display: inline;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
-webkit-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}
.fold input[type=checkbox]:not(:checked) + label::before {
.fold input[type="checkbox"]:not(:checked) + label::before {
content: "▶";
}
.fold input[type=checkbox]:checked + label::before {
.fold input[type="checkbox"]:checked + label::before {
content: "▼";
}
</style>
35 changes: 24 additions & 11 deletions src/components/GoOfflineInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
<template>
<div class="warning">
<h1>Please go offline, so your secrets won't leak accidentally</h1>
<div>
<h1>Please go offline, so your secrets won't leak accidentally</h1>
<div>
<p>This application doesn't require Internet access, and you shouldn't be using it from a brower which has one.</p>
<p>It's really trivial to accidentally upload your unencrypted secrets somewhere, with a help of your browser spellchecker, webpage translation extension and such.</p>
<p>In Firefox, please go to Menu→More→Work Offline.</p>
<p>In Chrome, you'll have to open DevTools (Ctrl+Shift+I), then in the Network tab there check the "Offline" checkbox. (DON'T CLOSE DEVELOPER TOOLS AFTER THAT!)</p>
</div>
<p>
This application doesn't require Internet access, and you shouldn't be
using it from a brower which has one.
</p>
<p>
It's really trivial to accidentally upload your unencrypted secrets
somewhere, with a help of your browser spellchecker, webpage translation
extension and such.
</p>
<p>In Firefox, please go to Menu→More→Work Offline.</p>
<p>
In Chrome, you'll have to open DevTools (Ctrl+Shift+I), then in the
Network tab there check the "Offline" checkbox. (DON'T CLOSE DEVELOPER
TOOLS AFTER THAT!)
</p>
</div>
</div>
</template>

<script>
export default {
name: 'GoOfflineInfo'
}
name: "GoOfflineInfo"
};
</script>

<style>
.warning {
background: #ffbbb3;
border: solid #e87f73 7px;
}
</style>
19 changes: 11 additions & 8 deletions src/components/SavePageInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
<template>
<div class="warning">
<h1>Please save this page to your local drive before use</h1>
<div>
<h1>Please save this page to your local drive before use</h1>
<div>
Please <a href="." download="BananaSplit.html">save this html file</a> to a folder on your local drive,
and then open the file from there.
</div>
Please <a href="." download="BananaSplit.html">save this html file</a> to
a folder on your local drive, and then open the file from there.
</div>
</div>
</template>

<script>
export default {
name: 'SavePageInfo'
}
name: "SavePageInfo"
};
</script>

<style>
.warning {
background: #ffbbb3;
border: solid #e87f73 7px;
}
</style>

0 comments on commit 56af377

Please sign in to comment.