sounisi5011/README.md

## README.md

      
    Raw
  

              README.md
            
          
    パスワード強度をzxcvbnで判定する


https://bl.ocks.org/sounisi5011/raw/1a84ef25406cea2b86097d5041ba30b6/
http://bl.ocks.org/sounisi5011/raw/1a84ef25406cea2b86097d5041ba30b6/


## index.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>パスワード強度をzxcvbnで判定する</title>
<h1>パスワード強度を<a href="https://github.com/dropbox/zxcvbn">zxcvbn</a>で判定する</h1>
<main id=main><p>JavaScriptに対応していません</main>
<footer>
  <h2>Gist</h2>
  <p><a href="https://gist.github.com/sounisi5011/1a84ef25406cea2b86097d5041ba30b6">https://gist.github.com/sounisi5011/1a84ef25406cea2b86097d5041ba30b6</a>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js" integrity="sha256-uK1n14nhBO5BLhn2zIXiks+xfK0AtMk613D2R9qbKXI=" crossorigin=anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js" integrity="sha256-Znf8FdJF85f1LV0JmPOob5qudSrns8pLPZ6qkd/+F0o=" crossorigin=anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperapp/1.2.0/hyperapp.js" integrity="sha256-nGvSTSqpX5gJdp7Jv5+4FCU1IbclUByINJqDQIbfwNc=" crossorigin=anonymous></script>
<script src="main.js"></script>

## main.js
'use strict';

function isNumber(value) {
  return typeof value === 'number';
}

/*
 * 返り値をキャッシュするzxcvbn
 */
var memoizedZxcvbn = function() {
  var hasOwnProperty = Object.prototype.hasOwnProperty;
  var cache = {};

  return function(password) {
    var key = password;
    return (
      hasOwnProperty.call(cache, key) ?
      cache[key] :
      cache[key] = zxcvbn(password)
    );
  };
}();

function main() {
  var h = hyperapp.h;
  var app = hyperapp.app;

  var state = {
    input: '',
    output: null
  };
  var actions = {
    input: function(text) {
      return function(state) {
        /*
         * 入力値が変化した場合に限り、zxcvbnを実行する
         */
        return (
          state.input !== text ?
          {
            input: text,
            output: text === '' ? null : memoizedZxcvbn(text),
          } :
          {}
        );
      };
    }
  };
  var view = function(state, actions) {
    var inputListener = function(e) {
      return actions.input(e.target.value);
    };

    var output = state.output;

    return h('p', {}, [
      h('input', {
        type: 'text',
        placeholder: 'パスワードを入力',
        oninput: inputListener,
        onchange: inputListener,
        onblur: inputListener,
        onkeyup: inputListener,
        onmouseup: inputListener,
        onpaste: inputListener
      }),
      !output ? null : h('table', {}, [
        h('tr', {}, [
          h('th', {}, 'スコア'),
          h('td', {}, output.score)
        ])
      ])
    ]);
  };

  app(state, actions, view, document.getElementById('main'));
}

main();
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>パスワード強度をzxcvbnで判定する</title>
	<h1>パスワード強度を<a href="https://github.com/dropbox/zxcvbn">zxcvbn</a>で判定する</h1>
	<main id=main><p>JavaScriptに対応していません</main>
	<footer>
	<h2>Gist</h2>
	<p><a href="https://gist.github.com/sounisi5011/1a84ef25406cea2b86097d5041ba30b6">https://gist.github.com/sounisi5011/1a84ef25406cea2b86097d5041ba30b6</a>
	</footer>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js" integrity="sha256-uK1n14nhBO5BLhn2zIXiks+xfK0AtMk613D2R9qbKXI=" crossorigin=anonymous></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js" integrity="sha256-Znf8FdJF85f1LV0JmPOob5qudSrns8pLPZ6qkd/+F0o=" crossorigin=anonymous></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperapp/1.2.0/hyperapp.js" integrity="sha256-nGvSTSqpX5gJdp7Jv5+4FCU1IbclUByINJqDQIbfwNc=" crossorigin=anonymous></script>
	<script src="main.js"></script>
	'use strict';

	function isNumber(value) {
	return typeof value === 'number';
	}

	/*
	* 返り値をキャッシュするzxcvbn
	*/
	var memoizedZxcvbn = function() {
	var hasOwnProperty = Object.prototype.hasOwnProperty;
	var cache = {};

	return function(password) {
	var key = password;
	return (
	hasOwnProperty.call(cache, key) ?
	cache[key] :
	cache[key] = zxcvbn(password)
	);
	};
	}();

	function main() {
	var h = hyperapp.h;
	var app = hyperapp.app;

	var state = {
	input: '',
	output: null
	};
	var actions = {
	input: function(text) {
	return function(state) {
	/*
	* 入力値が変化した場合に限り、zxcvbnを実行する
	*/
	return (
	state.input !== text ?
	{
	input: text,
	output: text === '' ? null : memoizedZxcvbn(text),
	} :
	{}
	);
	};
	}
	};
	var view = function(state, actions) {
	var inputListener = function(e) {
	return actions.input(e.target.value);
	};

	var output = state.output;

	return h('p', {}, [
	h('input', {
	type: 'text',
	placeholder: 'パスワードを入力',
	oninput: inputListener,
	onchange: inputListener,
	onblur: inputListener,
	onkeyup: inputListener,
	onmouseup: inputListener,
	onpaste: inputListener
	}),
	!output ? null : h('table', {}, [
	h('tr', {}, [
	h('th', {}, 'スコア'),
	h('td', {}, output.score)
	])
	])
	]);
	};

	app(state, actions, view, document.getElementById('main'));
	}

	main();