Commit c9880ee4fe3c93b8f7cb8c05078abebb502e097c
add key import/export from minbase
Ev Bogue committed on 5/27/2018, 7:03:52 PMParent: 0eb4374b336f60d5f9befb4eb57507275cd4f86c
Files changed
| style.css | changed |
| style.css.json | changed |
| views.js | changed |
| style.css | ||
|---|---|---|
| @@ -28,8 +28,17 @@ | ||
| 28 | 28 … | font-size: 1.2em; |
| 29 | 29 … | margin-top: .35ex; |
| 30 | 30 … | } |
| 31 | 31 … | |
| 32 … | +hr { | |
| 33 … | + border: solid #222; | |
| 34 … | + clear: both; | |
| 35 … | + border-width: 1px 0 0; | |
| 36 … | + height: 0; | |
| 37 … | + margin-bottom: .9em; | |
| 38 … | +} | |
| 39 … | + | |
| 40 … | + | |
| 32 | 41 … | p { |
| 33 | 42 … | margin-top: .35ex; |
| 34 | 43 … | margin-bottom: 10px; |
| 35 | 44 … | } |
| @@ -149,9 +158,9 @@ | ||
| 149 | 158 … | height: 1.4em; |
| 150 | 159 … | margin-right: .2em; |
| 151 | 160 … | } |
| 152 | 161 … | |
| 153 | -.compose { | |
| 162 … | +.compose, textarea { | |
| 154 | 163 … | font-family: sans-serif; |
| 155 | 164 … | font-size: 14px; |
| 156 | 165 … | line-height: 20px; |
| 157 | 166 … | background: #111; |
| style.css.json | ||
|---|---|---|
| @@ -1,1 +1,1 @@ | ||
| 1 | -"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: none;\n *border: 1px solid #252525;\n border-radius: 3px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n" | |
| 1 … | +"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose, textarea {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: none;\n *border: 1px solid #252525;\n border-radius: 3px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n" | |
| views.js | ||
|---|---|---|
| @@ -6,8 +6,10 @@ | ||
| 6 | 6 … | var h = require('hyperscript') |
| 7 | 7 … | var render = require('./render') |
| 8 | 8 … | var ref = require('ssb-ref') |
| 9 | 9 … | |
| 10 … | +var config = require('./config')() | |
| 11 … | + | |
| 10 | 12 … | var fs = require('fs') |
| 11 | 13 … | |
| 12 | 14 … | var compose = require('./compose') |
| 13 | 15 … | |
| @@ -25,9 +27,9 @@ | ||
| 25 | 27 … | function createStream (opts) { |
| 26 | 28 … | return pull( |
| 27 | 29 … | More(sbot.userStream, opts, ['value', 'sequence']), |
| 28 | 30 … | pull.map(function (msg) { |
| 29 | - return h('div', render(msg)) | |
| 31 … | + return render(msg) | |
| 30 | 32 … | }) |
| 31 | 33 … | ) |
| 32 | 34 … | } |
| 33 | 35 … | |
| @@ -56,15 +58,15 @@ | ||
| 56 | 58 … | sbot.get(root, function (err, data) { |
| 57 | 59 … | if (err) { console.log('could not find root')} |
| 58 | 60 … | data.value = data |
| 59 | 61 … | data.key = root |
| 60 | - content.appendChild(h('div', render(data))) | |
| 62 … | + content.appendChild(render(data)) | |
| 61 | 63 … | pull( |
| 62 | 64 … | sbot.links({rel: 'root', dest: root, values: true, keys: true, live: true}), |
| 63 | 65 … | pull.drain(function (msg) { |
| 64 | 66 … | console.log(msg) |
| 65 | 67 … | if (msg.value) |
| 66 | - content.appendChild(h('div', render(msg))) | |
| 68 … | + content.appendChild(render(msg)) | |
| 67 | 69 … | }) |
| 68 | 70 … | ) |
| 69 | 71 … | }) |
| 70 | 72 … | }) |
| @@ -78,18 +80,54 @@ | ||
| 78 | 80 … | |
| 79 | 81 … | var content = h('div.content', about) |
| 80 | 82 … | |
| 81 | 83 … | screen.appendChild(hyperscroll(content)) |
| 82 | - } | |
| 83 | - else { | |
| 84 … | + } | |
| 85 … | + | |
| 86 … | + else if (src == 'key') { | |
| 87 … | + var screen = document.getElementById('screen') | |
| 88 … | + | |
| 89 … | + var importKey = h('textarea.import', {placeholder: 'Import a new public/private key', name: 'textarea', style: 'width: 97%; height: 100px;'}) | |
| 90 … | + | |
| 91 … | + var content = h('div.content', | |
| 92 … | + h('div.message#key', | |
| 93 … | + h('h1', 'Your Key'), | |
| 94 … | + h('p', {innerHTML: 'Your public/private key is: <pre><code>' + localStorage[config.caps.shs + '/secret'] + '</code></pre>'}, | |
| 95 … | + h('button.btn', {onclick: function (e){ | |
| 96 … | + localStorage[config.caps.shs +'/secret'] = '' | |
| 97 … | + alert('Your public/private key has been deleted') | |
| 98 … | + e.preventDefault() | |
| 99 … | + location.hash = "" | |
| 100 … | + location.reload() | |
| 101 … | + }}, 'Delete Key') | |
| 102 … | + ), | |
| 103 … | + h('hr'), | |
| 104 … | + h('form', | |
| 105 … | + importKey, | |
| 106 … | + h('button.btn', {onclick: function (e){ | |
| 107 … | + if(importKey.value) { | |
| 108 … | + localStorage[config.caps.shs + '/secret'] = importKey.value.replace(/\s+/g, ' ') | |
| 109 … | + e.preventDefault() | |
| 110 … | + alert('Your public/private key has been updated') | |
| 111 … | + } | |
| 112 … | + location.hash = "" | |
| 113 … | + location.reload() | |
| 114 … | + }}, 'Import key'), | |
| 115 … | + ) | |
| 116 … | + ) | |
| 117 … | + ) | |
| 118 … | + | |
| 119 … | + screen.appendChild(hyperscroll(content)) | |
| 120 … | + | |
| 121 … | + } else { | |
| 84 | 122 … | var content = h('div.content') |
| 85 | 123 … | var screen = document.getElementById('screen') |
| 86 | 124 … | screen.appendChild(hyperscroll(content)) |
| 87 | 125 … | function createStream (opts) { |
| 88 | 126 … | return pull( |
| 89 | 127 … | More(sbot.createLogStream, opts), |
| 90 | 128 … | pull.map(function (msg) { |
| 91 | - return h('div', render(msg)) | |
| 129 … | + return render(msg) | |
| 92 | 130 … | }) |
| 93 | 131 … | ) |
| 94 | 132 … | } |
| 95 | 133 … | |
Built with git-ssb-web