From 49178a76c176a41f56f312343c537109be3ecb3d Mon Sep 17 00:00:00 2001 From: cmd1152 Date: Sun, 8 Sep 2024 22:33:26 +0800 Subject: [PATCH 1/4] add join-box --- src/client.js | 90 ++++++++++++++++++++++++++++++++++++++++++++++++-- src/index.html | 12 +++++++ src/style.css | 62 +++++++++++++++++++++++++++++++++- 3 files changed, 161 insertions(+), 3 deletions(-) diff --git a/src/client.js b/src/client.js index 4ff847e..77c93da 100644 --- a/src/client.js +++ b/src/client.js @@ -39,6 +39,12 @@ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } +function shakeEl(element) { + element.classList.add('shake'); + setTimeout(()=>{ + element.classList.remove('shake'); + }, 820); +} // 笑死，还是变成了内置函数 window.camoFetch = (url, options) => { @@ -116,6 +122,81 @@ var shouldAutoReconnect = true; var isAnsweringCaptcha = false; +function $all(e) { return document.querySelectorAll(e) }; +$all(".login-error-message").forEach(el=>el.style.display = "none"); + +function verChannel(c) { + if ( + typeof c !== 'string' || + c === '' || + c.length > 120 + ) return false; + + return true; +} +$("#showhide-pass").onclick = () => { + if ($("#showhide-pass").innerText == "Show") { + $("#showhide-pass").innerText = "Hide"; + $("#login-password").type = ''; + } else { + $("#showhide-pass").innerText = "Show"; + $("#login-password").type = 'password'; + } +} + +function joinBox_prompt(channel,mynick) { + return new Promise((resolve, reject) => { + + $("#join-box").style.top = "0"; + $("#login-channel").value = channel || ""; + + let l_pass = mynick.split("#"); + let l_nick = l_pass.shift(); + l_pass = l_pass.join("#"); + + $("#login-nickname").value = l_nick || ""; + $("#login-password").value = l_pass || ""; + + if ($("#showhide-pass").innerText != "Show") $("#showhide-pass").click(); + function rej() { + $all(".login-error-message").forEach(el=>el.style.display = "none"); + + let err = false + if (!verChannel(channel)) { + err = true; + $("#channel-error").style.display = "block"; + [$("#login-channel"), $("#channel-error")].forEach(shakeEl); + } + if (!/^[a-zA-Z0-9_]{1,24}$/.test($("#login-nickname").value)) { + err = true; + $("#nickname-error").style.display = "block"; + + [$("#login-nickname"), $("#nickname-error")].forEach(shakeEl); + } + if (err) return; + + $("#join-box").style.top = "-120px"; + $("#cancel-button").removeEventListener('click', cal); + $("#join-button").removeEventListener('click', rej); + resolve({ + channel: $("#login-channel").value, + nick: `${$("#login-nickname").value}#${$("#login-password").value}` + }); + } + + function cal() { + $("#join-box").style.top = "-120px"; + $("#cancel-button").removeEventListener('click', cal); + $("#join-button").removeEventListener('click', rej); + resolve({ + channel: channel, + nick: null + }); + } + $("#join-button").addEventListener('click', rej); + $("#cancel-button").addEventListener('click', cal); + }); +} function getNewNick(nick) { let newnick = nick; @@ -143,7 +224,7 @@ function join(channel, oldNick) { wasConnected = false; - ws.onopen = function () { + ws.onopen = async function () { hook.run("before", "connect", []) var shouldConnect = true; if (!wasConnected) { @@ -154,7 +235,10 @@ function join(channel, oldNick) { myNick = oldNick; } } else { - var newNick = prompt(i18ntranslate('Nickname:', 'prompt'), myNick); + // var newNick = prompt(i18ntranslate('Nickname:', 'prompt'), myNick); + var req = await joinBox_prompt(channel,myNick); + var newNick = req.nick; + channel = req.channel; if (newNick !== null) { myNick = newNick; } else { @@ -182,6 +266,8 @@ function join(channel, oldNick) { hook.run("after", "disconnected", []); isInChannel = false; currentNick = false; + + if ($("#cancel-button")) $("#cancel-button").click(); if (shouldAutoReconnect) { if (wasConnected) { diff --git a/src/index.html b/src/index.html index 5c95212..7b9b212 100644 --- a/src/index.html +++ b/src/index.html @@ -32,6 +32,18 @@ +
+

Login:

+ +

+ + +

+ + +

+ +
diff --git a/src/style.css b/src/style.css index c8c19eb..0a046df 100644 --- a/src/style.css +++ b/src/style.css @@ -1,4 +1,4 @@ -body { +body { padding: 0; margin: 0; overflow-y: scroll; @@ -461,4 +461,64 @@ dialog { #menu::-webkit-scrollbar { display: none; /* Chrome, Safari �� Opera */ +} + +@keyframes shake { + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + 40%, 60% { + transform: translate3d(4px, 0, 0); + } +} +.shake { + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; +} +.login-error,.r { + color: #ff2020; + font-weight: bold; +} +#join-box { + position: fixed; + top: -120px; + left: 0; + right: 0; + padding: 8px; + background: #ffffff10; + border-bottom: solid 2px #444; + transition: all 0.5s; +} +#join-box>p { + margin: 2px 5px +} + +#join-box>button { + border: 0; + background: #444; + color: #fff; + padding: 2px 10px; + box-shadow: 2px 2px 0px 0px #333; +} +#join-box>button:hover { + border: 0; + background: #555; + color: #fff; + padding: 2px 10px; + box-shadow: 3px 3px 0px 0px #444; +} +#join-box>p>input { + background: #ffffff10; + outline: 0; + border: 0; + color: #eee; + width: calc(100% - 200px); +} +.login-error-message { + display: none; } \ No newline at end of file From 9c3005233b4fe05bd7e1b322e974bf5d4479a375 Mon Sep 17 00:00:00 2001 From: cmd1152 Date: Sun, 8 Sep 2024 23:22:01 +0800 Subject: [PATCH 2/4] fix: join-box can't use ESC/ENTER to do --- src/client.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/client.js b/src/client.js index 77c93da..438fd49 100644 --- a/src/client.js +++ b/src/client.js @@ -142,7 +142,7 @@ $("#showhide-pass").onclick = () => { $("#showhide-pass").innerText = "Show"; $("#login-password").type = 'password'; } -} +}; function joinBox_prompt(channel,mynick) { return new Promise((resolve, reject) => { @@ -158,6 +158,16 @@ function joinBox_prompt(channel,mynick) { $("#login-password").value = l_pass || ""; if ($("#showhide-pass").innerText != "Show") $("#showhide-pass").click(); + + function per(event) { + if (event.key === 'Enter') { + $("#join-button").click(); + event.preventDefault(); + } else if (event.key === 'Escape') { + $("#cancel-button").click(); + event.preventDefault(); + } + } function rej() { $all(".login-error-message").forEach(el=>el.style.display = "none"); @@ -178,6 +188,8 @@ function joinBox_prompt(channel,mynick) { $("#join-box").style.top = "-120px"; $("#cancel-button").removeEventListener('click', cal); $("#join-button").removeEventListener('click', rej); + document.removeEventListener('keydown', per); + resolve({ channel: $("#login-channel").value, nick: `${$("#login-nickname").value}#${$("#login-password").value}` @@ -188,13 +200,18 @@ function joinBox_prompt(channel,mynick) { $("#join-box").style.top = "-120px"; $("#cancel-button").removeEventListener('click', cal); $("#join-button").removeEventListener('click', rej); + document.removeEventListener('keydown', per); + resolve({ channel: channel, nick: null }); } + $("#join-button").addEventListener('click', rej); $("#cancel-button").addEventListener('click', cal); + document.addEventListener('keydown', per); + }); } function getNewNick(nick) { From d34dad526b06f63308eee9d1e22f6c2dcc02f1bc Mon Sep 17 00:00:00 2001 From: cmd1152 Date: Sun, 8 Sep 2024 23:34:13 +0800 Subject: [PATCH 3/4] add Remaining Time and fix align error --- src/client.js | 8 ++++++++ src/index.html | 2 +- src/style.css | 3 +++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/client.js b/src/client.js index 438fd49..9513267 100644 --- a/src/client.js +++ b/src/client.js @@ -117,6 +117,13 @@ var isInChannel = false; var purgatory = false; var currentNick = false; +var join_time = 0; + +setInterval(()=>{ + join_time = Math.max(0, join_time - 1); + $("#join_time").innerText = join_time; +}, 1000) + var shouldAutoReconnect = true; var isAnsweringCaptcha = false; @@ -148,6 +155,7 @@ function joinBox_prompt(channel,mynick) { return new Promise((resolve, reject) => { $("#join-box").style.top = "0"; + join_time = 50; $("#login-channel").value = channel || ""; let l_pass = mynick.split("#"); diff --git a/src/index.html b/src/index.html index 7b9b212..f1f5ef1 100644 --- a/src/index.html +++ b/src/index.html @@ -42,7 +42,7 @@

- +
diff --git a/src/style.css b/src/style.css index 0a046df..e13904f 100644 --- a/src/style.css +++ b/src/style.css @@ -521,4 +521,7 @@ dialog { } .login-error-message { display: none; +} +#join-box>label, #join-box>p>label, #join-box>b>label { + vertical-align: 0; } \ No newline at end of file From 1de32cbbdb0609ee202e00ab3f3007705088fd99 Mon Sep 17 00:00:00 2001 From: cmd1152 Date: Sun, 8 Sep 2024 23:36:29 +0800 Subject: [PATCH 4/4] fix join_time add updatetime --- src/client.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/client.js b/src/client.js index 9513267..704e6c5 100644 --- a/src/client.js +++ b/src/client.js @@ -155,7 +155,8 @@ function joinBox_prompt(channel,mynick) { return new Promise((resolve, reject) => { $("#join-box").style.top = "0"; - join_time = 50; + join_time = 49; + $("#join_time").innerText = join_time; $("#login-channel").value = channel || ""; let l_pass = mynick.split("#");