mirror of
https://github.com/Luzifer/password.git
synced 2024-11-09 09:50:07 +00:00
Port from coffeescript to plain ES6
- Use Babel to transpile sources - Use Webpack to include all libraries Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
73526eb8c7
commit
032281ba56
12 changed files with 4036 additions and 203 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
@ -1,4 +1,6 @@
|
|||
password
|
||||
dist
|
||||
frontend/assets/*
|
||||
js/node_modules/*
|
||||
password
|
||||
password_darwin_amd64
|
||||
PasswordGenerator.alfredworkflow
|
||||
|
|
13
Makefile
13
Makefile
|
@ -1,14 +1,19 @@
|
|||
default: pack
|
||||
|
||||
compile_coffee:
|
||||
coffee -c frontend/assets/application.coffee
|
||||
compile_js:
|
||||
docker run --rm -i \
|
||||
-v "$(CURDIR):$(CURDIR)" \
|
||||
-w "$(CURDIR)/js" \
|
||||
-u $(shell id -u) \
|
||||
node:10-alpine \
|
||||
sh -c "yarn && npx webpack"
|
||||
|
||||
debug: compile_coffee
|
||||
debug:
|
||||
go-bindata --debug frontend/...
|
||||
go run *.go serve
|
||||
open http://127.0.0.1:3000/
|
||||
|
||||
pack: compile_coffee
|
||||
pack: compile_js
|
||||
go-bindata frontend/...
|
||||
bash generateXKCDWordList.sh
|
||||
|
||||
|
|
0
frontend/assets/.keep
Normal file
0
frontend/assets/.keep
Normal file
|
@ -1,71 +0,0 @@
|
|||
if window.Storage and window.JSON
|
||||
window.$storage = (key) ->
|
||||
set: (value) ->
|
||||
localStorage.setItem(key, JSON.stringify(value))
|
||||
get: ->
|
||||
item = localStorage.getItem(key)
|
||||
JSON.parse(item) if item
|
||||
|
||||
$ ->
|
||||
window.lastLoad = now()
|
||||
window.refreshPassword = 30000
|
||||
window.tickerInterval = 200
|
||||
|
||||
window.ticker = setInterval tick, window.tickerInterval
|
||||
$('#focusedInput').bind 'click', stopRefresh
|
||||
$('#focusedInput').bind 'blur', restartRefresh
|
||||
$('#optionSave').bind 'click', saveOptions
|
||||
|
||||
loadOptions()
|
||||
loadPassword()
|
||||
|
||||
now = () ->
|
||||
d = new Date()
|
||||
d.getTime()
|
||||
|
||||
stopRefresh = () ->
|
||||
clearInterval(window.ticker)
|
||||
$('#focusedInput').select()
|
||||
false
|
||||
|
||||
restartRefresh = () ->
|
||||
window.lastLoad = now()
|
||||
window.ticker = setInterval tick, window.tickerInterval
|
||||
|
||||
setProgress = (perc) ->
|
||||
$('.progress-bar').css('width', "#{perc}%")
|
||||
|
||||
loadPassword = () ->
|
||||
options = loadOptions()
|
||||
$.get "/v1/getPassword?length=#{options.passwordLength}&special=#{options.useSpecial}&xkcd=#{options.useXKCD}", (data) ->
|
||||
$('#focusedInput').val(data)
|
||||
window.lastLoad = now()
|
||||
|
||||
saveOptions = () ->
|
||||
options =
|
||||
passwordLength: $('#passwordLengthOption').val()
|
||||
useSpecial: $('#useSpecialOption')[0].checked
|
||||
useXKCD: $('#useXKCDOption')[0].checked
|
||||
|
||||
window.$storage('SecurePasswordOptions').set(options)
|
||||
$('#settingsModal').modal('hide')
|
||||
loadPassword()
|
||||
|
||||
loadOptions = () ->
|
||||
options = window.$storage('SecurePasswordOptions').get()
|
||||
if options == undefined
|
||||
options =
|
||||
passwordLength: 20
|
||||
useSpecial: false
|
||||
useXKCD: false
|
||||
$('#passwordLengthOption').val(options.passwordLength)
|
||||
$('#useSpecialOption')[0].checked = options.useSpecial
|
||||
$('#useXKCDOption')[0].checked = options.useXKCD
|
||||
options
|
||||
|
||||
tick = () ->
|
||||
diff = now() - window.lastLoad
|
||||
perc = (window.refreshPassword - diff) / window.refreshPassword * 100
|
||||
setProgress perc
|
||||
if diff >= window.refreshPassword
|
||||
loadPassword()
|
|
@ -1,102 +0,0 @@
|
|||
// Generated by CoffeeScript 1.12.4
|
||||
(function() {
|
||||
var loadOptions, loadPassword, now, restartRefresh, saveOptions, setProgress, stopRefresh, tick;
|
||||
|
||||
if (window.Storage && window.JSON) {
|
||||
window.$storage = function(key) {
|
||||
return {
|
||||
set: function(value) {
|
||||
return localStorage.setItem(key, JSON.stringify(value));
|
||||
},
|
||||
get: function() {
|
||||
var item;
|
||||
item = localStorage.getItem(key);
|
||||
if (item) {
|
||||
return JSON.parse(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
$(function() {
|
||||
window.lastLoad = now();
|
||||
window.refreshPassword = 30000;
|
||||
window.tickerInterval = 200;
|
||||
window.ticker = setInterval(tick, window.tickerInterval);
|
||||
$('#focusedInput').bind('click', stopRefresh);
|
||||
$('#focusedInput').bind('blur', restartRefresh);
|
||||
$('#optionSave').bind('click', saveOptions);
|
||||
loadOptions();
|
||||
return loadPassword();
|
||||
});
|
||||
|
||||
now = function() {
|
||||
var d;
|
||||
d = new Date();
|
||||
return d.getTime();
|
||||
};
|
||||
|
||||
stopRefresh = function() {
|
||||
clearInterval(window.ticker);
|
||||
$('#focusedInput').select();
|
||||
return false;
|
||||
};
|
||||
|
||||
restartRefresh = function() {
|
||||
window.lastLoad = now();
|
||||
return window.ticker = setInterval(tick, window.tickerInterval);
|
||||
};
|
||||
|
||||
setProgress = function(perc) {
|
||||
return $('.progress-bar').css('width', perc + "%");
|
||||
};
|
||||
|
||||
loadPassword = function() {
|
||||
var options;
|
||||
options = loadOptions();
|
||||
return $.get("/v1/getPassword?length=" + options.passwordLength + "&special=" + options.useSpecial + "&xkcd=" + options.useXKCD, function(data) {
|
||||
$('#focusedInput').val(data);
|
||||
return window.lastLoad = now();
|
||||
});
|
||||
};
|
||||
|
||||
saveOptions = function() {
|
||||
var options;
|
||||
options = {
|
||||
passwordLength: $('#passwordLengthOption').val(),
|
||||
useSpecial: $('#useSpecialOption')[0].checked,
|
||||
useXKCD: $('#useXKCDOption')[0].checked
|
||||
};
|
||||
window.$storage('SecurePasswordOptions').set(options);
|
||||
$('#settingsModal').modal('hide');
|
||||
return loadPassword();
|
||||
};
|
||||
|
||||
loadOptions = function() {
|
||||
var options;
|
||||
options = window.$storage('SecurePasswordOptions').get();
|
||||
if (options === void 0) {
|
||||
options = {
|
||||
passwordLength: 20,
|
||||
useSpecial: false,
|
||||
useXKCD: false
|
||||
};
|
||||
}
|
||||
$('#passwordLengthOption').val(options.passwordLength);
|
||||
$('#useSpecialOption')[0].checked = options.useSpecial;
|
||||
$('#useXKCDOption')[0].checked = options.useXKCD;
|
||||
return options;
|
||||
};
|
||||
|
||||
tick = function() {
|
||||
var diff, perc;
|
||||
diff = now() - window.lastLoad;
|
||||
perc = (window.refreshPassword - diff) / window.refreshPassword * 100;
|
||||
setProgress(perc);
|
||||
if (diff >= window.refreshPassword) {
|
||||
return loadPassword();
|
||||
}
|
||||
};
|
||||
|
||||
}).call(this);
|
|
@ -4,27 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<title>Secure Password</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<style>
|
||||
body { background-color: #e2e2e2; }
|
||||
.white { background-color: #fff; }
|
||||
.center { text-align: center; }
|
||||
.faq { margin-top: 3em; }
|
||||
.progress { margin-bottom: 0px; }
|
||||
.jumbotron p { margin-bottom: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default">
|
||||
|
@ -134,10 +114,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||
<script src="assets/application.js"></script>
|
||||
<script src="assets/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
19
js/package.json
Normal file
19
js/package.json
Normal file
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "password",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/preset-env": "^7.2.3",
|
||||
"babel-loader": "^8.0.4",
|
||||
"css-loader": "^2.1.0",
|
||||
"file-loader": "^3.0.1",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^4.28.3",
|
||||
"webpack-cli": "^3.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootswatch": "^3.3.7",
|
||||
"jquery": "^3.3.1"
|
||||
}
|
||||
}
|
87
js/src/index.js
Normal file
87
js/src/index.js
Normal file
|
@ -0,0 +1,87 @@
|
|||
import 'jquery'
|
||||
import 'bootstrap'
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootswatch/paper/bootstrap.min.css'
|
||||
|
||||
import storage from './storage.js'
|
||||
|
||||
let now = () => {
|
||||
let d = new Date()
|
||||
return d.getTime()
|
||||
}
|
||||
|
||||
let stopRefresh = () => {
|
||||
clearInterval(window.ticker)
|
||||
$('#focusedInput').select()
|
||||
return false
|
||||
}
|
||||
|
||||
let restartRefresh = () => {
|
||||
window.lastLoad = now()
|
||||
window.ticker = setInterval(tick, window.tickerInterval)
|
||||
}
|
||||
|
||||
let setProgress = (perc) => {
|
||||
$('.progress-bar').css('width', `${perc}%`)
|
||||
}
|
||||
|
||||
let loadPassword = () => {
|
||||
let options = loadOptions()
|
||||
$.get(`/v1/getPassword?length=${options.passwordLength}&special=${options.useSpecial}&xkcd=${options.useXKCD}`, (data) => {
|
||||
$('#focusedInput').val(data)
|
||||
window.lastLoad = now()
|
||||
})
|
||||
}
|
||||
|
||||
let saveOptions = () => {
|
||||
let options = {
|
||||
passwordLength: $('#passwordLengthOption').val(),
|
||||
useSpecial: $('#useSpecialOption')[0].checked,
|
||||
useXKCD: $('#useXKCDOption')[0].checked,
|
||||
}
|
||||
|
||||
storage.set('SecurePasswordOptions', options)
|
||||
$('#settingsModal').modal('hide')
|
||||
|
||||
loadPassword()
|
||||
}
|
||||
|
||||
let loadOptions = () => {
|
||||
let options = storage.get('SecurePasswordOptions')
|
||||
if (!options) {
|
||||
options = {
|
||||
passwordLength: 20,
|
||||
useSpecial: false,
|
||||
useXKCD: false,
|
||||
}
|
||||
}
|
||||
$('#passwordLengthOption').val(options.passwordLength)
|
||||
$('#useSpecialOption')[0].checked = options.useSpecial
|
||||
$('#useXKCDOption')[0].checked = options.useXKCD
|
||||
|
||||
return options
|
||||
}
|
||||
|
||||
let tick = () => {
|
||||
let diff = now() - window.lastLoad
|
||||
let perc = (window.refreshPassword - diff) / window.refreshPassword * 100
|
||||
setProgress(perc)
|
||||
if (diff >= window.refreshPassword) {
|
||||
loadPassword()
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
window.lastLoad = now()
|
||||
window.refreshPassword = 30000
|
||||
window.tickerInterval = 200
|
||||
|
||||
window.ticker = setInterval(tick, window.tickerInterval)
|
||||
$('#focusedInput').bind('click', stopRefresh)
|
||||
$('#focusedInput').bind('blur', restartRefresh)
|
||||
$('#optionSave').bind('click', saveOptions)
|
||||
|
||||
loadOptions()
|
||||
loadPassword()
|
||||
})
|
9
js/src/storage.js
Normal file
9
js/src/storage.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
export default {
|
||||
set: (key, value) => {
|
||||
localStorage.setItem(key, JSON.stringify(value))
|
||||
},
|
||||
get: (key) => {
|
||||
let item = localStorage.getItem(key)
|
||||
if (item) return JSON.parse(item)
|
||||
}
|
||||
}
|
7
js/src/style.css
Normal file
7
js/src/style.css
Normal file
|
@ -0,0 +1,7 @@
|
|||
body { background-color: #e2e2e2; }
|
||||
.white { background-color: #fff; }
|
||||
.center { text-align: center; }
|
||||
.faq { margin-top: 3em; }
|
||||
.progress { margin-bottom: 0px; }
|
||||
.jumbotron p { margin-bottom: 0; }
|
||||
|
43
js/webpack.config.js
Normal file
43
js/webpack.config.js
Normal file
|
@ -0,0 +1,43 @@
|
|||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, '../frontend/assets'),
|
||||
publicPath: "assets/"
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.m?js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
|
||||
use: [
|
||||
'file-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
'jQuery': 'jquery',
|
||||
'$': 'jquery',
|
||||
})
|
||||
]
|
||||
}
|
3858
js/yarn.lock
Normal file
3858
js/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue