sekika/password.html

## password.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>パスワード</title>

<style type="text/css">
    fieldset {
        margin: 0; padding: 0.75em; background: #efe; border: solid 1px #999; border-bottom-width: 0; line-height: 1.3em;
        border-top-left-radius: 0.5em; -moz-border-radius-topleft: 0.5em; -webkit-border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em; -moz-border-radius-topright: 0.5em; -webkit-border-top-right-radius: 0.5em;
    }
    fieldset.siteinfo {
        line-height: 2.5em;
    }
    fieldset label { display: block; float: left; margin-right: 0.75em; }
    fieldset div.Field { overflow: hidden; }
    fieldset div.Field input {
        width: 100%; background: none; border: none; outline: none; -webkit-appearance: none;
    }
    input.Result { width: 98%; background: #ada; }
    input.Copy { width: 100%; background: #ddd; font-size: 1em; padding: 0.5em; }
</style>

<script type="text/javascript" src="https://caligatio.github.io/jsSHA/sha.js"></script>

<script type="text/javascript">
function CopyText(arg){
    element =  document.getElementById(arg)
    element.focus();
    element.setSelectionRange(0, 9999);
    document.execCommand("copy");
    element.blur();
    document.getElementById("Result").value = "コピーしました";
    document.getElementById("master").value = "";
}
function calcHash() {
try {
    var master = document.getElementById("master");

<!-- ------------------------------------------------ サイト情報 --------------------------- -->

    site = "google" <!-- Default selection -->

    var sitekey = new Object({
        "google" : ["sha512", "an", 16, "kKkMqYDUIivWLi3WSt3VndHci", "https://www.google.co.jp/",  "ユーザID: xxx", "2段階認証: "],
        "amazon" : ["sha3_384", "an", 16, "stBuQIQgT9Yp84RBK3HdllnUK", "https://www.amazon.co.jp/", "メール: xxx"],
        "twitter" : ["sha3_512", "an", 14, "UmhvSHT72smO4aI1LMYt7H2el", "https://twitter.com", "https://twitter.com/seki/"]
    });

<!-- -------------------------------------------------------------------------------------------- -->

    var seed = document.getElementsByName('seed');
    for (i = 0; i < seed.length; i++) {
        if (seed[i].checked) {
          site = seed[i].value;
        }
    }

    SiteInfo = "<fieldset class=\"siteinfo\">";
    for (var key in sitekey) {
        if (site == key) {
            checked = "checked=\"checked\" ";
        } else {
            checked = "";
        }
        SiteInfo = SiteInfo + "<input type=\"radio\" name=\"seed\" value=\"" + key + "\" " + checked + "onclick=\"calcHash()\">" + key;
    }
    SiteInfo = SiteInfo + "</fieldset>";

    site = sitekey[site];

    var hash = site[0];
    var char = site[1];
    var plen = site[2];
    var seed = site[3];

    if (site.length > 4) {
        SiteInfo = SiteInfo + "<ul>";
        for (var i = 4; i < site.length; i++) {
            var SiteInfo = SiteInfo + "<li>" + site[i].replace(/((http:|https:)\/\/[\x21-\x26\x28-\x7e]+)/gi, "<a href='$1'>$1</a>") + "</li>";
        }
        SiteInfo = SiteInfo + "</ul>"
    }

    hash = hash.replace("sha3_","SHA3-").replace("sha","SHA-"); <!-- convert from Python hashlib -->
    var Password = document.getElementById("Result");
    var SiteInfoOutput = document.getElementById("SiteInfo");

    var hashObj = new jsSHA(hash, "BYTES");
    hashObj.update(master.value + seed);

    base = hashObj.getHash("B64");

    switch (char) {
    case "base64":
        p = base;
        break;
    case "an":
        p = base.replace(/[+/=]/g,"");
        break;
    case "a":
        p = base.replace(/[0-9+/=]/g,"");
        break;
    case "n":
        p = hashObj.getHash("HEX").replace(/[a-f]/g,"");
        break;
    case "ans":
        symbol = "#[$-=?@]_!"
        p = base.replace(/=/g,"");
        a = p.charCodeAt(0) % symbol.length;
        symbol = symbol.slice(a,-1) + symbol.slice(0,a)
        for (var i = 0; i < symbol.length; i++) {
            p = p.split(p.charAt(0)).join(symbol.charAt(i)).slice(1,-1) + p.charAt(0);
        }
           break;
    default:
        p = "エラー";
        break;
    }
    Password.value = p.slice(0,plen);
    if (SiteInfo > "") {SiteInfoOutput.innerHTML = SiteInfo;}
    document.getElementById("master").focus();
    } catch(e) {
        Password.value = e.message
    }
}
</script>
</head>
<body onload="calcHash()">
<h1>パスワード生成プログラムのデモ</h1>

<form action="#" method="get">

<div id="SiteInfo"></div>

<fieldset id="PasswdField" onclick="document.getElementById('Passwd').focus();">
    <label id="PasswdLabel" for="master">マスター</label>
    <div class="Field">
        <input type="text" name="master" id="master" onkeyup="calcHash()">
    </div>
</fieldset>
<div>
    <input class="Result" type="text" name="Result" id="Result">
</div>
<div>
    <input class="Copy" type="button" name="Copy" value="コピー" onClick="CopyText('Result');">
</div>
</form>

<p>解説: <a href="http://qiita.com/sekik/items/37e283f527301ec50c98">プログラマ向けの記事</a> / <a href="https://sekika.github.io/2017/05/09/Password/">一般向けの記事</a></p>
</body>
</html>

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>パスワード</title>

	<style type="text/css">
	fieldset {
	margin: 0; padding: 0.75em; background: #efe; border: solid 1px #999; border-bottom-width: 0; line-height: 1.3em;
	border-top-left-radius: 0.5em; -moz-border-radius-topleft: 0.5em; -webkit-border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em; -moz-border-radius-topright: 0.5em; -webkit-border-top-right-radius: 0.5em;
	}
	fieldset.siteinfo {
	line-height: 2.5em;
	}
	fieldset label { display: block; float: left; margin-right: 0.75em; }
	fieldset div.Field { overflow: hidden; }
	fieldset div.Field input {
	width: 100%; background: none; border: none; outline: none; -webkit-appearance: none;
	}
	input.Result { width: 98%; background: #ada; }
	input.Copy { width: 100%; background: #ddd; font-size: 1em; padding: 0.5em; }
	</style>

	<script type="text/javascript" src="https://caligatio.github.io/jsSHA/sha.js"></script>

	<script type="text/javascript">
	function CopyText(arg){
	element = document.getElementById(arg)
	element.focus();
	element.setSelectionRange(0, 9999);
	document.execCommand("copy");
	element.blur();
	document.getElementById("Result").value = "コピーしました";
	document.getElementById("master").value = "";
	}
	function calcHash() {
	try {
	var master = document.getElementById("master");

	<!-- ------------------------------------------------ サイト情報 --------------------------- -->

	site = "google" <!-- Default selection -->

	var sitekey = new Object({
	"google" : ["sha512", "an", 16, "kKkMqYDUIivWLi3WSt3VndHci", "https://www.google.co.jp/", "ユーザID: xxx", "2段階認証: "],
	"amazon" : ["sha3_384", "an", 16, "stBuQIQgT9Yp84RBK3HdllnUK", "https://www.amazon.co.jp/", "メール: xxx"],
	"twitter" : ["sha3_512", "an", 14, "UmhvSHT72smO4aI1LMYt7H2el", "https://twitter.com", "https://twitter.com/seki/"]
	});

	<!-- -------------------------------------------------------------------------------------------- -->

	var seed = document.getElementsByName('seed');
	for (i = 0; i < seed.length; i++) {
	if (seed[i].checked) {
	site = seed[i].value;
	}
	}

	SiteInfo = "<fieldset class=\"siteinfo\">";
	for (var key in sitekey) {
	if (site == key) {
	checked = "checked=\"checked\" ";
	} else {
	checked = "";
	}
	SiteInfo = SiteInfo + "<input type=\"radio\" name=\"seed\" value=\"" + key + "\" " + checked + "onclick=\"calcHash()\">" + key;
	}
	SiteInfo = SiteInfo + "</fieldset>";

	site = sitekey[site];

	var hash = site[0];
	var char = site[1];
	var plen = site[2];
	var seed = site[3];

	if (site.length > 4) {
	SiteInfo = SiteInfo + "<ul>";
	for (var i = 4; i < site.length; i++) {
	var SiteInfo = SiteInfo + "<li>" + site[i].replace(/((http:\|https:)\/\/[\x21-\x26\x28-\x7e]+)/gi, "<a href='$1'>$1</a>") + "</li>";
	}
	SiteInfo = SiteInfo + "</ul>"
	}

	hash = hash.replace("sha3_","SHA3-").replace("sha","SHA-"); <!-- convert from Python hashlib -->
	var Password = document.getElementById("Result");
	var SiteInfoOutput = document.getElementById("SiteInfo");

	var hashObj = new jsSHA(hash, "BYTES");
	hashObj.update(master.value + seed);

	base = hashObj.getHash("B64");

	switch (char) {
	case "base64":
	p = base;
	break;
	case "an":
	p = base.replace(/[+/=]/g,"");
	break;
	case "a":
	p = base.replace(/[0-9+/=]/g,"");
	break;
	case "n":
	p = hashObj.getHash("HEX").replace(/[a-f]/g,"");
	break;
	case "ans":
	symbol = "#[$-=?@]_!"
	p = base.replace(/=/g,"");
	a = p.charCodeAt(0) % symbol.length;
	symbol = symbol.slice(a,-1) + symbol.slice(0,a)
	for (var i = 0; i < symbol.length; i++) {
	p = p.split(p.charAt(0)).join(symbol.charAt(i)).slice(1,-1) + p.charAt(0);
	}
	break;
	default:
	p = "エラー";
	break;
	}
	Password.value = p.slice(0,plen);
	if (SiteInfo > "") {SiteInfoOutput.innerHTML = SiteInfo;}
	document.getElementById("master").focus();
	} catch(e) {
	Password.value = e.message
	}
	}
	</script>
	</head>
	<body onload="calcHash()">
	<h1>パスワード生成プログラムのデモ</h1>

	<form action="#" method="get">

	<div id="SiteInfo"></div>

	<fieldset id="PasswdField" onclick="document.getElementById('Passwd').focus();">
	<label id="PasswdLabel" for="master">マスター</label>
	<div class="Field">
	<input type="text" name="master" id="master" onkeyup="calcHash()">
	</div>
	</fieldset>
	<div>
	<input class="Result" type="text" name="Result" id="Result">
	</div>
	<div>
	<input class="Copy" type="button" name="Copy" value="コピー" onClick="CopyText('Result');">
	</div>
	</form>

	<p>解説: <a href="http://qiita.com/sekik/items/37e283f527301ec50c98">プログラマ向けの記事</a> / <a href="https://sekika.github.io/2017/05/09/Password/">一般向けの記事</a></p>
	</body>
	</html>