mirror of https://github.com/keeweb/keeweb.git
fix settings view markup and events
This commit is contained in:
Antelle
parent
a8b1b86b02
commit
9f05100026
|
|
@ -14,7 +14,8 @@ var SettingsAboutView = Backbone.View.extend({
|
|||
'click .settings__file-button-export-xml': 'exportAsXml',
|
||||
'click .settings__file-button-save-dropbox': 'saveToDropbox',
|
||||
'change #settings__file-key-file': 'keyfileChange',
|
||||
'focus #settings__file-master-pass': 'focusMasterPass'
|
||||
'focus #settings__file-master-pass': 'focusMasterPass',
|
||||
'blur #settings__file-master-pass': 'blurMasterPass'
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
|
@ -76,6 +77,13 @@ var SettingsAboutView = Backbone.View.extend({
|
|||
},
|
||||
|
||||
focusMasterPass: function(e) {
|
||||
e.target.value = '';
|
||||
},
|
||||
|
||||
blurMasterPass: function(e) {
|
||||
if (!e.target.value) {
|
||||
e.target.value = PasswordDisplay.present(this.model.get('passwordLength'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ fieldset {
|
|||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select {
|
||||
display: block;
|
||||
font-family: $base-font-family;
|
||||
|
|
@ -16,6 +15,9 @@ select {
|
|||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
font-weight: 600;
|
||||
margin-bottom: $small-spacing / 2;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,61 +1,63 @@
|
|||
<h1><i class="fa fa-info"></i> About KeeWeb v<%= version %></h1>
|
||||
<p>This is an open-source app created by <a href="http://antelle.net" target="_blank">Antelle</a> and licensed under
|
||||
<a href="http://github.com/antelle/keepass-web/MIT-LICENSE.txt" target="_blank">MIT</a>.
|
||||
The source code and issues are <a href="http://github.com/antelle/keepass-web" target="_blank">on GitHub <i class="fa fa-github-alt"></i></a>.</p>
|
||||
<p>This app is built with these awesome tools:</p>
|
||||
<h3>Libraries</h3>
|
||||
<ul>
|
||||
<li><a href="http://electron.atom.io/" target="_blank">electron</a><span class="muted-color">, cross-platform desktop apps framework</span></li>
|
||||
<li><a href="http://backbonejs.org/" target="_blank">backbone</a><span class="muted-color">, JavaScript framework</span></li>
|
||||
<li><a href="http://underscorejs.org/" target="_blank">underscore</a><span class="muted-color">, utility-belt library for JavaScript</span></li>
|
||||
<li><a href="http://zeptojs.com/" target="_blank">zepto.js</a><span class="muted-color">, a minimalist JavaScript library for modern browsers,
|
||||
with a jQuery-compatible API</span></li>
|
||||
<li><a href="https://github.com/dropbox/dropbox-js" target="_blank">dropbox-js</a><span class="muted-color">, unofficial JavaScript library for
|
||||
the Dropbox Core API</span></li>
|
||||
</ul>
|
||||
<div>
|
||||
<h1><i class="fa fa-info"></i> About KeeWeb v<%= version %></h1>
|
||||
<p>This is an open-source app created by <a href="http://antelle.net" target="_blank">Antelle</a> and licensed under
|
||||
<a href="http://github.com/antelle/keepass-web/MIT-LICENSE.txt" target="_blank">MIT</a>.
|
||||
The source code and issues are <a href="http://github.com/antelle/keepass-web" target="_blank">on GitHub <i class="fa fa-github-alt"></i></a>.</p>
|
||||
<p>This app is built with these awesome tools:</p>
|
||||
<h3>Libraries</h3>
|
||||
<ul>
|
||||
<li><a href="http://electron.atom.io/" target="_blank">electron</a><span class="muted-color">, cross-platform desktop apps framework</span></li>
|
||||
<li><a href="http://backbonejs.org/" target="_blank">backbone</a><span class="muted-color">, JavaScript framework</span></li>
|
||||
<li><a href="http://underscorejs.org/" target="_blank">underscore</a><span class="muted-color">, utility-belt library for JavaScript</span></li>
|
||||
<li><a href="http://zeptojs.com/" target="_blank">zepto.js</a><span class="muted-color">, a minimalist JavaScript library for modern browsers,
|
||||
with a jQuery-compatible API</span></li>
|
||||
<li><a href="https://github.com/dropbox/dropbox-js" target="_blank">dropbox-js</a><span class="muted-color">, unofficial JavaScript library for
|
||||
the Dropbox Core API</span></li>
|
||||
</ul>
|
||||
|
||||
<h3>Core components</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/antelle/kdbxweb" target="_blank">kdbxweb</a><span class="muted-color">, web kdbx library</span></li>
|
||||
<li><a href="https://github.com/vibornoff/asmcrypto.js/" target="_blank">asmcrypto</a><span class="muted-color">, JavaScript cryptographic library
|
||||
with performance in mind</span></li>
|
||||
<li><a href="http://nodeca.github.io/pako/" target="_blank">pako</a><span class="muted-color">, zlib port to JavaScript, very fast</span></li>
|
||||
<li><a href="https://github.com/jindw/xmldom" target="_blank">xmldom</a><span class="muted-color">, a pure js W3C standard based DOMParser
|
||||
and XMLSerializer</span></li>
|
||||
</ul>
|
||||
<h3>Core components</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/antelle/kdbxweb" target="_blank">kdbxweb</a><span class="muted-color">, web kdbx library</span></li>
|
||||
<li><a href="https://github.com/vibornoff/asmcrypto.js/" target="_blank">asmcrypto</a><span class="muted-color">, JavaScript cryptographic library
|
||||
with performance in mind</span></li>
|
||||
<li><a href="http://nodeca.github.io/pako/" target="_blank">pako</a><span class="muted-color">, zlib port to JavaScript, very fast</span></li>
|
||||
<li><a href="https://github.com/jindw/xmldom" target="_blank">xmldom</a><span class="muted-color">, a pure js W3C standard based DOMParser
|
||||
and XMLSerializer</span></li>
|
||||
</ul>
|
||||
|
||||
<h3>UI components</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/Diokuz/baron" target="_blank">baron</a><span class="muted-color">, native scroll with custom scrollbar</span></li>
|
||||
<li><a href="http://dbushell.github.io/Pikaday/" target="_blank">pikaday</a><span class="muted-color">, a refreshing JavaScript datepicker</span></li>
|
||||
<li><a href="https://github.com/eligrey/FileSaver.js" target="_blank">filesaver.js</a><span class="muted-color">, HTML5 saveAs FileSaver implementation</span></li>
|
||||
</ul>
|
||||
<h3>UI components</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/Diokuz/baron" target="_blank">baron</a><span class="muted-color">, native scroll with custom scrollbar</span></li>
|
||||
<li><a href="http://dbushell.github.io/Pikaday/" target="_blank">pikaday</a><span class="muted-color">, a refreshing JavaScript datepicker</span></li>
|
||||
<li><a href="https://github.com/eligrey/FileSaver.js" target="_blank">filesaver.js</a><span class="muted-color">, HTML5 saveAs FileSaver implementation</span></li>
|
||||
</ul>
|
||||
|
||||
<h3>Styles</h3>
|
||||
<ul>
|
||||
<li><a href="http://sass-lang.com/" target="_blank">sass</a><span class="muted-color">, syntactically awesome stylesheets</span></li>
|
||||
<li><a href="http://bourbon.io/" target="_blank">bourbon</a><span class="muted-color">, a simple and lightweight mixin library for Sass</span></li>
|
||||
<li><a href="http://bitters.bourbon.io/" target="_blank">bitters</a><span class="muted-color">, styles, variables and structure for
|
||||
Bourbon projects</span></li>
|
||||
<li><a href="https://necolas.github.io/normalize.css/" target="_blank">normaize.css</a><span class="muted-color">, a modern, HTML5-ready alternative
|
||||
to CSS resets</span></li>
|
||||
</ul>
|
||||
<h3>Styles</h3>
|
||||
<ul>
|
||||
<li><a href="http://sass-lang.com/" target="_blank">sass</a><span class="muted-color">, syntactically awesome stylesheets</span></li>
|
||||
<li><a href="http://bourbon.io/" target="_blank">bourbon</a><span class="muted-color">, a simple and lightweight mixin library for Sass</span></li>
|
||||
<li><a href="http://bitters.bourbon.io/" target="_blank">bitters</a><span class="muted-color">, styles, variables and structure for
|
||||
Bourbon projects</span></li>
|
||||
<li><a href="https://necolas.github.io/normalize.css/" target="_blank">normaize.css</a><span class="muted-color">, a modern, HTML5-ready alternative
|
||||
to CSS resets</span></li>
|
||||
</ul>
|
||||
|
||||
<h3>Graphics</h3>
|
||||
<ul>
|
||||
<li><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">fontawesome</a><span class="muted-color">, the iconic font
|
||||
and CSS toolkit</span></li>
|
||||
</ul>
|
||||
<h3>Graphics</h3>
|
||||
<ul>
|
||||
<li><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">fontawesome</a><span class="muted-color">, the iconic font
|
||||
and CSS toolkit</span></li>
|
||||
</ul>
|
||||
|
||||
<h2>License</h2>
|
||||
<p>The app itself and all included components which are not in public domain are licensed under MIT license:</p>
|
||||
<p></p>
|
||||
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
||||
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
||||
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
||||
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
|
||||
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
|
||||
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
|
||||
THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
|
||||
<h2>License</h2>
|
||||
<p>The app itself and all included components which are not in public domain are licensed under MIT license:</p>
|
||||
<p></p>
|
||||
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
||||
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
||||
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
||||
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
|
||||
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
|
||||
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
|
||||
THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,40 @@
|
|||
<h1><i class="fa fa-lock"></i> <%- name %></h1>
|
||||
<p>This database is opened as local file. To enable auto-save and saving with shortcut <%= cmd %>S,
|
||||
please, save it to Dropbox.</p>
|
||||
<div>
|
||||
<h1><i class="fa fa-lock"></i> <%- name %></h1>
|
||||
<p>This database is opened as local file. To enable auto-save and saving with shortcut <%= cmd %>S,
|
||||
please, save it to Dropbox.</p>
|
||||
|
||||
<div class="settings__file-buttons">
|
||||
<button class="settings__file-button-save-file btn-silent">Save to file</button>
|
||||
<button class="settings__file-button-export-xml btn-silent">Export to XML</button>
|
||||
<button class="settings__file-button-save-dropbox btn-silent">Sync with Dropbox</button>
|
||||
<div class="settings__file-buttons">
|
||||
<button class="settings__file-button-save-file btn-silent">Save to file</button>
|
||||
<button class="settings__file-button-export-xml btn-silent">Export to XML</button>
|
||||
<button class="settings__file-button-save-dropbox btn-silent">Sync with Dropbox</button>
|
||||
</div>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<label for="settings__file-master-pass">Master key:</label>
|
||||
<input type="text" class="settings__input" required id="settings__file-master-pass" value="<%= password %>" />
|
||||
<label for="settings__file-key-file">Key file:</label>
|
||||
<select class="settings__select" id="settings__file-key-file">
|
||||
<option value="">Don't use key file</option>
|
||||
<option value="ex">Use existing key file</option>
|
||||
<option value="gen">Generate new key file</option>
|
||||
<option value="sel">Select a key file</option>
|
||||
</select>
|
||||
|
||||
<h2>Names</h2>
|
||||
<label for="settings__file-name">Name:</label>
|
||||
<input type="text" class="settings__input" id="settings__file-name" value="<%- name %>" required />
|
||||
<label for="settings__file-def-user">Default username:</label>
|
||||
<input type="text" class="settings__input" id="settings__file-def-user" value="<%- defaultUser %>" />
|
||||
|
||||
<h2>History</h2>
|
||||
<input type="checkbox" class="settings__input" id="settings__file-trash" <%- recycleBinEnabled ? 'checked' : '' %> />
|
||||
<label for="settings__file-trash">Enable trash</label>
|
||||
<label for="settings__file-hist-len">History length, keep last records per entry:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-len" value="<%= historyMaxItems %>" />
|
||||
<label for="settings__file-hist-size">History size, total MB per file:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-size" value="<%= historyMaxSize %>" />
|
||||
|
||||
<h2>Advanced</h2>
|
||||
<label for="settings__file-key-rounds">Key encryption rounds:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-key-rounds" value="<%= keyEncryptionRounds %>" />
|
||||
</div>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<label for="settings__file-master-pass">Master key:</label>
|
||||
<input type="text" class="settings__input" required id="settings__file-master-pass" value="<%= password %>" />
|
||||
<label for="settings__file-key-file">Key file:</label>
|
||||
<select class="settings__select" id="settings__file-key-file">
|
||||
<option value="">Don't use key file</option>
|
||||
<option value="ex">Use existing key file</option>
|
||||
<option value="gen">Generate new key file</option>
|
||||
<option value="sel">Select a key file</option>
|
||||
</select>
|
||||
|
||||
<h2>Names</h2>
|
||||
<label for="settings__file-name">Name:</label>
|
||||
<input type="text" class="settings__input" id="settings__file-name" value="<%- name %>" required />
|
||||
<label for="settings__file-def-user">Default username:</label>
|
||||
<input type="text" class="settings__input" id="settings__file-def-user" value="<%- defaultUser %>" />
|
||||
|
||||
<h2>History</h2>
|
||||
<input type="checkbox" class="settings__input" id="settings__file-trash" <%- recycleBinEnabled ? 'checked' : '' %> />
|
||||
<label for="settings__file-trash">Enable trash</label>
|
||||
<label for="settings__file-hist-len">History length, keep last records per entry:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-len" value="<%= historyMaxItems %>" />
|
||||
<label for="settings__file-hist-size">History size, total MB per file:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-size" value="<%= historyMaxSize %>" />
|
||||
|
||||
<h2>Advanced</h2>
|
||||
<label for="settings__file-key-rounds">Key encryption rounds:</label>
|
||||
<input type="text" pattern="\d*" required class="settings__input" id="settings__file-key-rounds" value="<%= keyEncryptionRounds %>" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<h1><i class="fa fa-cog"></i> General Settings</h1>
|
||||
<div>
|
||||
<label for="settings__general-theme">Theme:</label>
|
||||
<select class="settings__general-theme settings__select" id="settings__general-theme">
|
||||
<% _.forEach(themes, function(name, key) { %>
|
||||
<option value="<%= key %>" <%= key === activeTheme ? 'selected' : '' %>><%- name %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
<h1><i class="fa fa-cog"></i> General Settings</h1>
|
||||
<div>
|
||||
<label for="settings__general-theme">Theme:</label>
|
||||
<select class="settings__general-theme settings__select" id="settings__general-theme">
|
||||
<% _.forEach(themes, function(name, key) { %>
|
||||
<option value="<%= key %>" <%= key === activeTheme ? 'selected' : '' %>><%- name %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<h1><i class="fa fa-question"></i> Help</h1>
|
||||
<h2>File Format</h2>
|
||||
<p>This is a port of <a href="http://keepass.info/" target="_blank">KeePass</a> app built with web technologies.
|
||||
It understands files in KeePass format (kdbx). You can create such files (password databases) either in KeePass, or in this app.
|
||||
The file format is 100% compatible and should be understood by both apps.
|
||||
</p>
|
||||
<h2>Problems?</h2>
|
||||
<p>If something goes wrong, please, <a href="https://github.com/antelle/keeweb/issues/new?body=<%= issueBody %>" target="_blank">open an issue on GitHub</a>
|
||||
or <a href="http://antelle.net/" target="_blank">connect a developer</a> directly.
|
||||
</p>
|
||||
<p>App information:</p>
|
||||
<pre class="settings__pre"><%= appInfo %></pre>
|
||||
<div>
|
||||
<h1><i class="fa fa-question"></i> Help</h1>
|
||||
<h2>File Format</h2>
|
||||
<p>This is a port of <a href="http://keepass.info/" target="_blank">KeePass</a> app built with web technologies.
|
||||
It understands files in KeePass format (kdbx). You can create such files (password databases) either in KeePass, or in this app.
|
||||
The file format is 100% compatible and should be understood by both apps.
|
||||
</p>
|
||||
<h2>Problems?</h2>
|
||||
<p>If something goes wrong, please, <a href="https://github.com/antelle/keeweb/issues/new?body=<%= issueBody %>" target="_blank">open an issue on GitHub</a>
|
||||
or <a href="http://antelle.net/" target="_blank">connect a developer</a> directly.
|
||||
</p>
|
||||
<p>App information:</p>
|
||||
<pre class="settings__pre"><%= appInfo %></pre>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<h1><i class="fa fa-keyboard-o"></i> Shortcuts</h1>
|
||||
<div><span class="shortcut"><%= cmd %>A</span> or <span class="shortcut"><%= alt %>A</span> show all items</div>
|
||||
<div><span class="shortcut"><%= alt %>C</span> show items with colors</div>
|
||||
<div><span class="shortcut"><%= alt %>D</span> go to trash</div>
|
||||
<div><span class="shortcut"><%= cmd %>F</span> search, or just start typing</div>
|
||||
<div><span class="shortcut">esc</span> clear search</div>
|
||||
<div><span class="shortcut">⏎</span> go to entry</div>
|
||||
<div><span class="shortcut"><%= cmd %>C</span> copy password or selected field</div>
|
||||
<div><span class="shortcut">↑</span> go to previous item</div>
|
||||
<div><span class="shortcut">↓</span> go to next item</div>
|
||||
<div><span class="shortcut"><%= alt %>N</span> create entry</div>
|
||||
<div><span class="shortcut"><%= cmd %>O</span> open / new</div>
|
||||
<div><span class="shortcut"><%= cmd %>S</span> save</div>
|
||||
<div><span class="shortcut"><%= cmd %>G</span> generate</div>
|
||||
<div>
|
||||
<h1><i class="fa fa-keyboard-o"></i> Shortcuts</h1>
|
||||
<div><span class="shortcut"><%= cmd %>A</span> or <span class="shortcut"><%= alt %>A</span> show all items</div>
|
||||
<div><span class="shortcut"><%= alt %>C</span> show items with colors</div>
|
||||
<div><span class="shortcut"><%= alt %>D</span> go to trash</div>
|
||||
<div><span class="shortcut"><%= cmd %>F</span> search, or just start typing</div>
|
||||
<div><span class="shortcut">esc</span> clear search</div>
|
||||
<div><span class="shortcut">⏎</span> go to entry</div>
|
||||
<div><span class="shortcut"><%= cmd %>C</span> copy password or selected field</div>
|
||||
<div><span class="shortcut">↑</span> go to previous item</div>
|
||||
<div><span class="shortcut">↓</span> go to next item</div>
|
||||
<div><span class="shortcut"><%= alt %>N</span> create entry</div>
|
||||
<div><span class="shortcut"><%= cmd %>O</span> open / new</div>
|
||||
<div><span class="shortcut"><%= cmd %>S</span> save</div>
|
||||
<div><span class="shortcut"><%= cmd %>G</span> generate</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue