add join-box

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) => {
@@ -111,11 +117,112 @@ 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;
 
 
+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";
+    join_time = 49;
+    $("#join_time").innerText = join_time;
+    $("#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 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");
+
+      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);
+      document.removeEventListener('keydown', per);
+
+      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);
+      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) {
   let newnick = nick;
 
@@ -143,7 +250,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 +261,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 +292,8 @@ function join(channel, oldNick) {
 		hook.run("after", "disconnected", []);
 		isInChannel = false;
 		currentNick = false;
+
+		if ($("#cancel-button")) $("#cancel-button").click();
 
 		if (shouldAutoReconnect) {
 			if (wasConnected) {

src/index.html

@@ -32,6 +32,18 @@
   <audio style="display: none" id="notify-sound" preload="auto" src="audio/notify.mp3">
     <source src="audio/notify.mp3" type="audio/ogg">
   </audio>
+  <div id="join-box">
+    <p><b>Login:</b><p>
+
+    <p><label><b>[?]</b> Channel:&ensp; </label><input id="login-channel"/> <label class="r">*</label></p>
+    <p class="login-error-message" id="channel-error"><label class="login-error">The channel must be any characters between 1 and 120 characters long.</label></p>
+
+    <p><label><b>[O]</b> NickName: </label><input id="login-nickname"/> <label class="r">*</label></p>
+    <p class="login-error-message" id="nickname-error"><label class="login-error">NickName must consist of 1 to 24 characters, including letters, numbers, and underscores.</label></p>
+
+    <p><label><b>[#]</b> PassWord: </label><input type="password" id="login-password"/> <label id="showhide-pass">Show</label></p>
+    <button id="cancel-button">Cancel</button><button id="join-button">Join</button> <label>Remaining Time: </label><b><label id="join_time">0</label><label>s</label></b>
+  </div>
   <article class="container">
     <div id="messages" class="messages"></div>
     <div id="preview"></div>

src/style.css

@@ -1,4 +1,4 @@
-body {
+body {
   padding: 0;
   margin: 0;
   overflow-y: scroll;
@@ -461,4 +461,67 @@ 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;
+}
+#join-box>label, #join-box>p>label, #join-box>b>label {
+  vertical-align: 0;
 }