document.addEventListener("DOMContentLoaded", ()=>{ var mainElem = document.getElementById("main"), userinput = document.getElementById("user"), codeinput = document.getElementById("passcode"), noteinput = document.getElementById("note"), reply = document.getElementById("reply"); var conn, PORT=8889, server = location.hostname||"localhost"; // server = "localhost"; var userInfo = { "user": null, "tmpkey": null, "skey": null, "stage": null, }; function clearStorage() { for (let key of Object.keys(localStorage)) { if (key.match(/^otp_/)) { localStorage.removeItem(key); console.log(`localStorage[${key}] cleared`); } } } function replMainHTML(HTMLtext) { mainElem.innerHTML = HTMLtext; } function getMessage(str) { console.log(`GET: ${str}`); let data = JSON.parse(str); if (data.body) { replMainHTML(data.body); } if (data.tmpkey) { userInfo.tmpkey = data.tmpkey; let codeinput = document.getElementById("passcode"); codeinput.disabled = false; codeinput.value = ""; codeinput.placeholder = "INPUT passcode"; codeinput.focus(); } else if (data.skey && data.skey > "") { // 認証成功でセッションキーをGET userInfo.skey = data.skey; localStorage.setItem("otp_skey", data.skey); document.getElementById("main").classList.remove("hidden"); document.getElementById("auth").classList.add("shrink"); } else if (data.reply) { // サーバから {"reply": 文字列} が来たらそれを表示 reply.innerText = data.reply } } function initConn() { try { let url = 'ws://' + server + ':' + PORT + '/'; if (location.href.match(/tmp.iekei/)) url = 'wss://'+location.hostname+'/otpsample'; conn = new WebSocket(url); conn.onopen = ()=>{ // WSソケットが開いたらとりあえずその時の userInfo // を送ってみる(skeyが残っていたらログインできるかも) conn.send(JSON.stringify(userInfo)); console.log(`Sending: ${JSON.stringify(userInfo)}`); }; conn.onerror = function(err) { alert('WebSocket failure: ' + err) }; conn.onmessage = function(ev) { getMessage(ev.data); }; conn.onclose = function(ev) { conn = null; }; } catch (err) { alert(`Socket Creation Error Firefoxですか? URLウィンドウに about:config と入れて Search: 窓に websocket と入れて、 network..websocket.allowInsecureFromHTTP の行をダブルクリックして true に変えてください。\n` + err); return; } userInfo["user"] = localStorage.getItem("otp_user"); userInfo["skey"] = localStorage.getItem("otp_skey"); } function initListener() { function sendUser(e) { let user = userinput.value; localStorage.setItem("otp_user", user) userInfo.user = user; if (user.match(/.+@.+\..+/)) { conn.send(JSON.stringify({"user": userInfo.user})); } } document.getElementById("senduser").addEventListener("click", sendUser); userinput.addEventListener("keypress", (e)=>{ if (e.key=="Enter") sendUser(e); }); //パスコード入力欄にヒストリがあると邪魔なので消す codeinput.value = ""; function sendPasscode(e) { let code = codeinput.value, user = localStorage.getItem("otp_user"); if (user.match(/.+@.+\..+/)) { conn.send(JSON.stringify({ "user": userInfo.user, "passcode": code, "tmpkey": userInfo.tmpkey })); } } document.getElementById("sendcode").addEventListener("click", sendPasscode); codeinput.addEventListener("keypress", (e) => { console.log(e.key); if (e.key == "Enter") sendPasscode(e); }); noteinput.addEventListener("keypress", (e) => { if (e.key == "Enter" && noteinput.value > "") { conn.send(JSON.stringify({"note": noteinput.value})); noteinput.value = "" // 送信したら消す } }); document.getElementById("clear").addEventListener( "click", clearStorage); } initConn(); initListener(); });