From 01d727b51aebcad2d55e55a1c95e7a175745d575 Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Thu, 4 Apr 2024 12:25:40 +0900 Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20signin=20text?= =?UTF-8?q?=20validation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 7 +++++++ scripts/auth/valText.js | 32 ++++++++++++++++++++++++++++++++ styles/auth/style.css | 7 +++++++ 3 files changed, 46 insertions(+) create mode 100644 scripts/auth/valText.js diff --git a/pages/signin/index.html b/pages/signin/index.html index 1d1d74bcf..739eb0c00 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -22,6 +22,9 @@ placeholder="이메일을 입력해주세요" required /> +
controlpwd
+
@@ -52,5 +58,6 @@
+ diff --git a/scripts/auth/valText.js b/scripts/auth/valText.js new file mode 100644 index 000000000..3d33be410 --- /dev/null +++ b/scripts/auth/valText.js @@ -0,0 +1,32 @@ +const emailValText = () => { + const email = document.getElementById("email"); + let valText = document.getElementById("emailValMessage"); + + email.addEventListener("focusout", () => { + if (email.value === "") { + email.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + email.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +const pwdValText = () => { + const pwd = document.getElementById("pwd"); + let valText = document.getElementById("pwdValMessage"); + + pwd.addEventListener("focusout", () => { + if (pwd.value === "") { + pwd.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + pwd.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +emailValText(); +pwdValText(); diff --git a/styles/auth/style.css b/styles/auth/style.css index 2f54c0032..7267ddab2 100644 --- a/styles/auth/style.css +++ b/styles/auth/style.css @@ -68,6 +68,13 @@ form button:hover { cursor: pointer; } +.error_message { + color: var(--error-red); + font-size: 15px; + margin-top: -16px; + margin-left: 16px; +} + .pwd_container { position: relative; } From 3c7d4db49fef72177e26cdd142c91fcc3085736e Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Thu, 4 Apr 2024 13:52:09 +0900 Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20signup=20text?= =?UTF-8?q?=20validation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 2 +- pages/signup/index.html | 17 +++++ .../auth/{valText.js => val-signin-text.js} | 0 scripts/auth/val-signup-text.js | 65 +++++++++++++++++++ 4 files changed, 83 insertions(+), 1 deletion(-) rename scripts/auth/{valText.js => val-signin-text.js} (100%) create mode 100644 scripts/auth/val-signup-text.js diff --git a/pages/signin/index.html b/pages/signin/index.html index 739eb0c00..1768a56fc 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -58,6 +58,6 @@ - + diff --git a/pages/signup/index.html b/pages/signup/index.html index a8ccb777c..ea550750f 100644 --- a/pages/signup/index.html +++ b/pages/signup/index.html @@ -22,6 +22,9 @@ placeholder="이메일을 입력해주세요" required /> + +
controlpwd
+
controlpwd
+
@@ -71,5 +87,6 @@
+ diff --git a/scripts/auth/valText.js b/scripts/auth/val-signin-text.js similarity index 100% rename from scripts/auth/valText.js rename to scripts/auth/val-signin-text.js diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js new file mode 100644 index 000000000..e4a2f81e1 --- /dev/null +++ b/scripts/auth/val-signup-text.js @@ -0,0 +1,65 @@ +const emailValText = () => { + const email = document.getElementById("email"); + let valText = document.getElementById("emailValMessage"); + + email.addEventListener("focusout", () => { + if (email.value === "") { + email.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + email.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +const nicknameValText = () => { + const nickname = document.getElementById("nickname"); + let valText = document.getElementById("nicknameValMessage"); + + nickname.addEventListener("focusout", () => { + if (nickname.value === "") { + nickname.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + nickname.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +const pwdValText = () => { + const pwd = document.getElementById("pwd"); + let valText = document.getElementById("pwdValMessage"); + + pwd.addEventListener("focusout", () => { + if (pwd.value === "") { + pwd.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + pwd.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +const pwdchkValText = () => { + const pwd = document.getElementById("pwd"); + const pwdchk = document.getElementById("pwdchk"); + let valText = document.getElementById("pwdchkValMessage"); + + pwdchk.addEventListener("focusout", () => { + if (pwdchk.value !== pwd.value) { + pwdchk.style.outline = "2px solid var(--error-red)"; + valText.style.display = "block"; + } else { + pwdchk.style.outline = "none"; + valText.style.display = "none"; + } + }); +}; + +emailValText(); +nicknameValText(); +pwdValText(); +pwdchkValText(); From b05ad75231f9899ef090422a59db6cc3f207b887 Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Thu, 4 Apr 2024 15:09:29 +0900 Subject: [PATCH 03/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20validate=20for?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 2 +- pages/signup/index.html | 2 +- scripts/auth/val-signin-text.js | 19 ++++++++++++++++++- scripts/auth/val-signup-text.js | 29 ++++++++++++++++++++++++++++- styles/auth/style.css | 4 ---- 5 files changed, 48 insertions(+), 8 deletions(-) diff --git a/pages/signin/index.html b/pages/signin/index.html index 1768a56fc..1f6297ef7 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -39,7 +39,7 @@ - +
간편 로그인하기 diff --git a/pages/signup/index.html b/pages/signup/index.html index ea550750f..5b52e9a4d 100644 --- a/pages/signup/index.html +++ b/pages/signup/index.html @@ -68,7 +68,7 @@ - +
간편 로그인하기 diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js index 3d33be410..d6a8e2315 100644 --- a/scripts/auth/val-signin-text.js +++ b/scripts/auth/val-signin-text.js @@ -1,15 +1,29 @@ +let emailVal = false; +let pwdVal = false; + +const validateForm = () => { + const submitBtn = document.getElementById("submitBtn"); + + if (emailVal && pwdVal) { + submitBtn.style.backgroundColor = "var(--btn-blue1)"; + } +}; + const emailValText = () => { const email = document.getElementById("email"); let valText = document.getElementById("emailValMessage"); email.addEventListener("focusout", () => { - if (email.value === "") { + if (email.value === "" || !email.checkValidity()) { email.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + emailVal = false; } else { email.style.outline = "none"; valText.style.display = "none"; + emailVal = true; } + validateForm(); }); }; @@ -21,10 +35,13 @@ const pwdValText = () => { if (pwd.value === "") { pwd.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + pwdVal = false; } else { pwd.style.outline = "none"; valText.style.display = "none"; + pwdVal = true; } + validateForm(); }); }; diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index e4a2f81e1..90b0fd142 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -1,15 +1,33 @@ +let emailVal = false; +let nicknameVal = false; +let pwdVal = false; +let pwdchkVal = false; + +const validateForm = () => { + const submitBtn = document.getElementById("submitBtn"); + + console.log(emailVal, nicknameVal, pwdVal, pwdchkVal); + + if (emailVal && nicknameVal && pwdVal && pwdchkVal) { + submitBtn.style.backgroundColor = "var(--btn-blue1)"; + } +}; + const emailValText = () => { const email = document.getElementById("email"); let valText = document.getElementById("emailValMessage"); email.addEventListener("focusout", () => { - if (email.value === "") { + if (email.value === "" || !email.checkValidity()) { email.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + emailVal = false; } else { email.style.outline = "none"; valText.style.display = "none"; + emailVal = true; } + validateForm(); }); }; @@ -21,10 +39,13 @@ const nicknameValText = () => { if (nickname.value === "") { nickname.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + nicknameVal = false; } else { nickname.style.outline = "none"; valText.style.display = "none"; + nicknameVal = true; } + validateForm(); }); }; @@ -36,10 +57,13 @@ const pwdValText = () => { if (pwd.value === "") { pwd.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + pwdVal = false; } else { pwd.style.outline = "none"; valText.style.display = "none"; + pwdVal = true; } + validateForm(); }); }; @@ -52,10 +76,13 @@ const pwdchkValText = () => { if (pwdchk.value !== pwd.value) { pwdchk.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; + pwdchkVal = false; } else { pwdchk.style.outline = "none"; valText.style.display = "none"; + pwdchkVal = true; } + validateForm(); }); }; diff --git a/styles/auth/style.css b/styles/auth/style.css index 7267ddab2..ffc2d7e92 100644 --- a/styles/auth/style.css +++ b/styles/auth/style.css @@ -61,10 +61,6 @@ form button { border: none; background-color: var(--cool-gray400); color: #ffffff; -} - -form button:hover { - background-color: var(--btn-blue1); cursor: pointer; } From 58b36b8bc5082e7f04d58836a158f2fa5f3d87cd Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Thu, 4 Apr 2024 15:58:47 +0900 Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20password=20visi?= =?UTF-8?q?bility=20control?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/btn_visibility_on.png | Bin 0 -> 720 bytes pages/signin/index.html | 8 +++++++- pages/signup/index.html | 16 ++++++++++++++-- scripts/auth/val-signin-text.js | 13 +++++++++++++ scripts/auth/val-signup-text.js | 28 ++++++++++++++++++++++++++-- styles/auth/style.css | 23 +++++++++++++---------- 6 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 images/btn_visibility_on.png diff --git a/images/btn_visibility_on.png b/images/btn_visibility_on.png new file mode 100644 index 0000000000000000000000000000000000000000..32765f0b2c9af2a51208296273b255d5298f4aff GIT binary patch literal 720 zcmV;>0x$iEP)8~qW#7Ihzvm3lHZ)M1t6Q9 zj(WjA6IfQWuzd8h35X2@DBR&TXNul%5cuvw`V`BD zEh1>IldMV;H#pwnkN4UqMf6T}1$)<}U~F(Xwd zzN&4d?M%QiDgA}*7%Kwbdp9Lk8acd?(fJ2Askt!L37E#VNi8Oy``^=cszgin>Z|8Y zR|N4v@G2=&HaZPZr6`u`C1p$c< zU5@d1)PJ51o;4)5_CS%)(aneXj@r;-xmrSC<~0g^)pYCNNDre>Hq~4Yo=Fe~vkx7* zX~mfmkq~h5ILc2InPna6zqHWMG^o%^?}Xc6D0=ZctO>KRv;5&JkymWKtgFp35JEc2aW@+)D5O0000 - controlpwd +
-
+ logo_l
- + { let valText = document.getElementById("pwdValMessage"); pwd.addEventListener("focusout", () => { - if (pwd.value === "") { + if (pwd.value.length < 8) { pwd.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; pwdVal = false; diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index b970ca9c7..454051985 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -78,7 +78,7 @@ const pwdValText = () => { let valText = document.getElementById("pwdValMessage"); pwd.addEventListener("focusout", () => { - if (pwd.value === "") { + if (pwd.value.length < 8) { pwd.style.outline = "2px solid var(--error-red)"; valText.style.display = "block"; pwdVal = false; From 23f496975aa41ab00a8d894aedb88b00d6f3be42 Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Fri, 5 Apr 2024 11:11:29 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20empty=20validat?= =?UTF-8?q?ion=20and=20button=20validation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 10 ++++++++-- pages/signup/index.html | 10 ++++++++-- scripts/auth/val-signin-text.js | 24 ++++++++++++++++++++++-- scripts/auth/val-signup-text.js | 24 ++++++++++++++++++++++-- 4 files changed, 60 insertions(+), 8 deletions(-) diff --git a/pages/signin/index.html b/pages/signin/index.html index ca6c9b810..9e82c4c6a 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -22,8 +22,11 @@ placeholder="이메일을 입력해주세요" required /> +
@@ -42,10 +45,13 @@ />
+ - +
간편 로그인하기 diff --git a/pages/signup/index.html b/pages/signup/index.html index 24773d531..67e0b27c2 100644 --- a/pages/signup/index.html +++ b/pages/signup/index.html @@ -22,8 +22,11 @@ placeholder="이메일을 입력해주세요" required /> +
+ @@ -80,7 +86,7 @@ - +
간편 로그인하기 diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js index c564a6a9f..901451fd0 100644 --- a/scripts/auth/val-signin-text.js +++ b/scripts/auth/val-signin-text.js @@ -19,20 +19,32 @@ const validateForm = () => { if (emailVal && pwdVal) { submitBtn.style.backgroundColor = "var(--btn-blue1)"; + submitBtn.disabled = false; + } else { + submitBtn.style.backgroundColor = "var(--cool-gray400)"; + submitBtn.disabled = true; } }; const emailValText = () => { const email = document.getElementById("email"); + let isValText = document.getElementById("isEmailValMessage"); let valText = document.getElementById("emailValMessage"); email.addEventListener("focusout", () => { - if (email.value === "" || !email.checkValidity()) { + if (email.value === "") { + email.style.outline = "2px solid var(--error-red)"; + valText.style.display = "none"; + isValText.style.display = "block"; + emailVal = false; + } else if (!email.checkValidity()) { email.style.outline = "2px solid var(--error-red)"; + isValText.style.display = "none"; valText.style.display = "block"; emailVal = false; } else { email.style.outline = "none"; + isValText.style.display = "none"; valText.style.display = "none"; emailVal = true; } @@ -42,15 +54,23 @@ const emailValText = () => { const pwdValText = () => { const pwd = document.getElementById("pwd"); + let isValText = document.getElementById("isPwdValMessage"); let valText = document.getElementById("pwdValMessage"); pwd.addEventListener("focusout", () => { - if (pwd.value.length < 8) { + if (pwd.value === "") { + pwd.style.outline = "2px solid var(--error-red)"; + valText.style.display = "none"; + isValText.style.display = "block"; + pwdVal = false; + } else if (pwd.value.length < 8) { pwd.style.outline = "2px solid var(--error-red)"; + isValText.style.display = "none"; valText.style.display = "block"; pwdVal = false; } else { pwd.style.outline = "none"; + isValText.style.display = "none"; valText.style.display = "none"; pwdVal = true; } diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index 454051985..fcd3c50ef 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -34,20 +34,32 @@ const validateForm = () => { if (emailVal && nicknameVal && pwdVal && pwdchkVal) { submitBtn.style.backgroundColor = "var(--btn-blue1)"; + submitBtn.disabled = false; + } else { + submitBtn.style.backgroundColor = "var(--cool-gray400)"; + submitBtn.disabled = true; } }; const emailValText = () => { const email = document.getElementById("email"); + let isValText = document.getElementById("isEmailValMessage"); let valText = document.getElementById("emailValMessage"); email.addEventListener("focusout", () => { - if (email.value === "" || !email.checkValidity()) { + if (email.value === "") { + email.style.outline = "2px solid var(--error-red)"; + valText.style.display = "none"; + isValText.style.display = "block"; + emailVal = false; + } else if (!email.checkValidity()) { email.style.outline = "2px solid var(--error-red)"; + isValText.style.display = "none"; valText.style.display = "block"; emailVal = false; } else { email.style.outline = "none"; + isValText.style.display = "none"; valText.style.display = "none"; emailVal = true; } @@ -75,15 +87,23 @@ const nicknameValText = () => { const pwdValText = () => { const pwd = document.getElementById("pwd"); + let isValText = document.getElementById("isPwdValMessage"); let valText = document.getElementById("pwdValMessage"); pwd.addEventListener("focusout", () => { - if (pwd.value.length < 8) { + if (pwd.value === "") { + pwd.style.outline = "2px solid var(--error-red)"; + valText.style.display = "none"; + isValText.style.display = "block"; + pwdVal = false; + } else if (pwd.value.length < 8) { pwd.style.outline = "2px solid var(--error-red)"; + isValText.style.display = "none"; valText.style.display = "block"; pwdVal = false; } else { pwd.style.outline = "none"; + isValText.style.display = "none"; valText.style.display = "none"; pwdVal = true; } From 8f9d861ff91fc16f029d3ef7a83fbe6611aff1b4 Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Tue, 9 Apr 2024 10:56:16 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20change?= =?UTF-8?q?=20to=20descriptive=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 20 +++- pages/signup/index.html | 28 ++++-- scripts/auth/val-signin-text.js | 104 +++++++++++---------- scripts/auth/val-signup-text.js | 161 +++++++++++++++++--------------- 4 files changed, 176 insertions(+), 137 deletions(-) diff --git a/pages/signin/index.html b/pages/signin/index.html index 9e82c4c6a..0aa49f977 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -22,10 +22,14 @@ placeholder="이메일을 입력해주세요" required /> - -
@@ -45,10 +49,18 @@ />
- - diff --git a/pages/signup/index.html b/pages/signup/index.html index 67e0b27c2..f59f51f70 100644 --- a/pages/signup/index.html +++ b/pages/signup/index.html @@ -22,10 +22,14 @@ placeholder="이메일을 입력해주세요" required /> - - @@ -37,7 +41,7 @@ required />
- -
@@ -83,7 +95,11 @@ />
- diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js index 901451fd0..5408a709c 100644 --- a/scripts/auth/val-signin-text.js +++ b/scripts/auth/val-signin-text.js @@ -1,78 +1,80 @@ -let emailVal = false; -let pwdVal = false; +let isEmailValid = false; +let isPasswordValid = false; const showPwd = () => { - const pwd = document.getElementById("pwd"); - const showPwd = document.getElementById("pwdimg"); + const passwordInput = document.getElementById("pwd"); + const passwordVisibilityButton = document.getElementById("pwdimg"); - if (pwd.type === "password") { - pwd.type = "text"; - showPwd.src = "/images/btn_visibility_on.png"; + if (passwordInput.type === "password") { + passwordInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - pwd.type = "password"; - showPwd.src = "/images/btn_visibility.png"; + passwordInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } }; const validateForm = () => { - const submitBtn = document.getElementById("submitBtn"); + const submitButton = document.getElementById("submitBtn"); - if (emailVal && pwdVal) { - submitBtn.style.backgroundColor = "var(--btn-blue1)"; - submitBtn.disabled = false; + if (isEmailValid && isPasswordValid) { + submitButton.style.backgroundColor = "var(--btn-blue1)"; + submitButton.disabled = false; } else { - submitBtn.style.backgroundColor = "var(--cool-gray400)"; - submitBtn.disabled = true; + submitButton.style.backgroundColor = "var(--cool-gray400)"; + submitButton.disabled = true; } }; const emailValText = () => { - const email = document.getElementById("email"); - let isValText = document.getElementById("isEmailValMessage"); - let valText = document.getElementById("emailValMessage"); + const emailInput = document.getElementById("email"); + let emailEmptyMessage = document.getElementById("emailEmptyMessage"); + let emailInvalidMessage = document.getElementById("emailInvalidMessage"); - email.addEventListener("focusout", () => { - if (email.value === "") { - email.style.outline = "2px solid var(--error-red)"; - valText.style.display = "none"; - isValText.style.display = "block"; - emailVal = false; - } else if (!email.checkValidity()) { - email.style.outline = "2px solid var(--error-red)"; - isValText.style.display = "none"; - valText.style.display = "block"; - emailVal = false; + emailInput.addEventListener("focusout", () => { + if (emailInput.value === "") { + emailInput.style.outline = "2px solid var(--error-red)"; + emailInvalidMessage.style.display = "none"; + emailEmptyMessage.style.display = "block"; + isEmailValid = false; + } else if (!emailInput.checkValidity()) { + emailInput.style.outline = "2px solid var(--error-red)"; + emailEmptyMessage.style.display = "none"; + emailInvalidMessage.style.display = "block"; + isEmailValid = false; } else { - email.style.outline = "none"; - isValText.style.display = "none"; - valText.style.display = "none"; - emailVal = true; + emailInput.style.outline = "none"; + emailEmptyMessage.style.display = "none"; + emailInvalidMessage.style.display = "none"; + isEmailValid = true; } validateForm(); }); }; const pwdValText = () => { - const pwd = document.getElementById("pwd"); - let isValText = document.getElementById("isPwdValMessage"); - let valText = document.getElementById("pwdValMessage"); + const passwordInput = document.getElementById("pwd"); + let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); + let passwordInvalidMessage = document.getElementById( + "passwordInvalidMessage" + ); - pwd.addEventListener("focusout", () => { - if (pwd.value === "") { - pwd.style.outline = "2px solid var(--error-red)"; - valText.style.display = "none"; - isValText.style.display = "block"; - pwdVal = false; - } else if (pwd.value.length < 8) { - pwd.style.outline = "2px solid var(--error-red)"; - isValText.style.display = "none"; - valText.style.display = "block"; - pwdVal = false; + passwordInput.addEventListener("focusout", () => { + if (passwordInput.value === "") { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordInvalidMessage.style.display = "none"; + passwordEmptyMessage.style.display = "block"; + isPasswordValid = false; + } else if (passwordInput.value.length < 8) { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordEmptyMessage.style.display = "none"; + passwordInvalidMessage.style.display = "block"; + isPasswordValid = false; } else { - pwd.style.outline = "none"; - isValText.style.display = "none"; - valText.style.display = "none"; - pwdVal = true; + passwordInput.style.outline = "none"; + passwordEmptyMessage.style.display = "none"; + passwordInvalidMessage.style.display = "none"; + isPasswordValid = true; } validateForm(); }); diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index fcd3c50ef..88da895b7 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -1,67 +1,72 @@ -let emailVal = false; -let nicknameVal = false; -let pwdVal = false; -let pwdchkVal = false; +let isEmailValid = false; +let isNicknameValid = false; +let isPasswordValid = false; +let isPasswordCheckValid = false; const showPwd = () => { - const pwd = document.getElementById("pwd"); - const showPwd = document.getElementById("pwdimg"); + const passwordInput = document.getElementById("pwd"); + const passwordVisibilityButton = document.getElementById("pwdimg"); - if (pwd.type === "password") { - pwd.type = "text"; - showPwd.src = "/images/btn_visibility_on.png"; + if (passwordInput.type === "password") { + passwordInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - pwd.type = "password"; - showPwd.src = "/images/btn_visibility.png"; + passwordInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } }; const showPwdchk = () => { - const pwdchk = document.getElementById("pwdchk"); - const showPwdchk = document.getElementById("pwdchkimg"); + const passwordCheckInput = document.getElementById("pwdchk"); + const passwordVisibilityButton = document.getElementById("pwdchkimg"); - if (pwdchk.type === "password") { - pwdchk.type = "text"; - showPwdchk.src = "/images/btn_visibility_on.png"; + if (passwordCheckInput.type === "password") { + passwordCheckInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - pwdchk.type = "password"; - showPwdchk.src = "/images/btn_visibility.png"; + passwordCheckInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } }; const validateForm = () => { - const submitBtn = document.getElementById("submitBtn"); + const submitButton = document.getElementById("submitBtn"); - if (emailVal && nicknameVal && pwdVal && pwdchkVal) { - submitBtn.style.backgroundColor = "var(--btn-blue1)"; - submitBtn.disabled = false; + if ( + isEmailValid && + isNicknameValid && + isPasswordValid && + isPasswordCheckValid + ) { + submitButton.style.backgroundColor = "var(--btn-blue1)"; + submitButton.disabled = false; } else { - submitBtn.style.backgroundColor = "var(--cool-gray400)"; - submitBtn.disabled = true; + submitButton.style.backgroundColor = "var(--cool-gray400)"; + submitButton.disabled = true; } }; const emailValText = () => { - const email = document.getElementById("email"); - let isValText = document.getElementById("isEmailValMessage"); - let valText = document.getElementById("emailValMessage"); + const emailInput = document.getElementById("email"); + let emailEmptyMessage = document.getElementById("emailEmptyMessage"); + let emailInvalidMessage = document.getElementById("emailInvalidMessage"); - email.addEventListener("focusout", () => { - if (email.value === "") { - email.style.outline = "2px solid var(--error-red)"; - valText.style.display = "none"; - isValText.style.display = "block"; - emailVal = false; - } else if (!email.checkValidity()) { - email.style.outline = "2px solid var(--error-red)"; - isValText.style.display = "none"; - valText.style.display = "block"; - emailVal = false; + emailInput.addEventListener("focusout", () => { + if (emailInput.value === "") { + emailInput.style.outline = "2px solid var(--error-red)"; + emailInvalidMessage.style.display = "none"; + emailEmptyMessage.style.display = "block"; + isEmailValid = false; + } else if (!emailInput.checkValidity()) { + emailInput.style.outline = "2px solid var(--error-red)"; + emailEmptyMessage.style.display = "none"; + emailInvalidMessage.style.display = "block"; + isEmailValid = false; } else { - email.style.outline = "none"; - isValText.style.display = "none"; - valText.style.display = "none"; - emailVal = true; + emailInput.style.outline = "none"; + emailEmptyMessage.style.display = "none"; + emailInvalidMessage.style.display = "none"; + isEmailValid = true; } validateForm(); }); @@ -69,62 +74,66 @@ const emailValText = () => { const nicknameValText = () => { const nickname = document.getElementById("nickname"); - let valText = document.getElementById("nicknameValMessage"); + let nicknameEmptyMessage = document.getElementById("nicknameEmptyMessage"); nickname.addEventListener("focusout", () => { if (nickname.value === "") { nickname.style.outline = "2px solid var(--error-red)"; - valText.style.display = "block"; - nicknameVal = false; + nicknameEmptyMessage.style.display = "block"; + isNicknameValid = false; } else { nickname.style.outline = "none"; - valText.style.display = "none"; - nicknameVal = true; + nicknameEmptyMessage.style.display = "none"; + isNicknameValid = true; } validateForm(); }); }; const pwdValText = () => { - const pwd = document.getElementById("pwd"); - let isValText = document.getElementById("isPwdValMessage"); - let valText = document.getElementById("pwdValMessage"); + const passwordInput = document.getElementById("pwd"); + let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); + let passwordInvalidMessage = document.getElementById( + "passwordInvalidMessage" + ); - pwd.addEventListener("focusout", () => { - if (pwd.value === "") { - pwd.style.outline = "2px solid var(--error-red)"; - valText.style.display = "none"; - isValText.style.display = "block"; - pwdVal = false; - } else if (pwd.value.length < 8) { - pwd.style.outline = "2px solid var(--error-red)"; - isValText.style.display = "none"; - valText.style.display = "block"; - pwdVal = false; + passwordInput.addEventListener("focusout", () => { + if (passwordInput.value === "") { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordInvalidMessage.style.display = "none"; + passwordEmptyMessage.style.display = "block"; + isPasswordValid = false; + } else if (passwordInput.value.length < 8) { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordEmptyMessage.style.display = "none"; + passwordInvalidMessage.style.display = "block"; + isPasswordValid = false; } else { - pwd.style.outline = "none"; - isValText.style.display = "none"; - valText.style.display = "none"; - pwdVal = true; + passwordInput.style.outline = "none"; + passwordEmptyMessage.style.display = "none"; + passwordInvalidMessage.style.display = "none"; + isPasswordValid = true; } validateForm(); }); }; const pwdchkValText = () => { - const pwd = document.getElementById("pwd"); - const pwdchk = document.getElementById("pwdchk"); - let valText = document.getElementById("pwdchkValMessage"); + const passwordInput = document.getElementById("pwd"); + const passwordCheckInput = document.getElementById("pwdchk"); + let passwordCheckNotMatchMessage = document.getElementById( + "passwordCheckNotMatchMessage" + ); - pwdchk.addEventListener("focusout", () => { - if (pwdchk.value !== pwd.value) { - pwdchk.style.outline = "2px solid var(--error-red)"; - valText.style.display = "block"; - pwdchkVal = false; + passwordCheckInput.addEventListener("focusout", () => { + if (passwordCheckInput.value !== passwordInput.value) { + passwordCheckInput.style.outline = "2px solid var(--error-red)"; + passwordCheckNotMatchMessage.style.display = "block"; + isPasswordCheckValid = false; } else { - pwdchk.style.outline = "none"; - valText.style.display = "none"; - pwdchkVal = true; + passwordCheckInput.style.outline = "none"; + passwordCheckNotMatchMessage.style.display = "none"; + isPasswordCheckValid = true; } validateForm(); }); From 47bc010c3c7f1191e0f2c9408ecb28faf44f856d Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Tue, 9 Apr 2024 11:03:37 +0900 Subject: [PATCH 08/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20change?= =?UTF-8?q?=20to=20descriptive=20function=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 6 +++++- pages/signup/index.html | 12 ++++++++++-- scripts/auth/val-signin-text.js | 10 +++++----- scripts/auth/val-signup-text.js | 20 ++++++++++---------- 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/pages/signin/index.html b/pages/signin/index.html index 0aa49f977..25512a9b3 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -41,7 +41,11 @@ placeholder="비밀번호를 입력해주세요" required /> -
- - diff --git a/pages/signup/index.html b/pages/signup/index.html index fade01914..03cfbb2b5 100644 --- a/pages/signup/index.html +++ b/pages/signup/index.html @@ -22,14 +22,10 @@ placeholder="이메일을 입력해주세요" required /> - - @@ -40,11 +36,7 @@ placeholder="닉네임을 입력해주세요" required /> -
@@ -68,18 +60,10 @@ />
- -
@@ -103,11 +87,7 @@ />
- diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js index de8b08ad8..40cacf95c 100644 --- a/scripts/auth/val-signin-text.js +++ b/scripts/auth/val-signin-text.js @@ -34,18 +34,18 @@ const validateEmailField = () => { emailInput.addEventListener("focusout", () => { if (emailInput.value === "") { emailInput.style.outline = "2px solid var(--error-red)"; - emailInvalidMessage.style.display = "none"; - emailEmptyMessage.style.display = "block"; + emailInvalidMessage.classList.add("hidden"); + emailEmptyMessage.classList.remove("hidden"); isEmailValid = false; } else if (!emailInput.checkValidity()) { emailInput.style.outline = "2px solid var(--error-red)"; - emailEmptyMessage.style.display = "none"; - emailInvalidMessage.style.display = "block"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.remove("hidden"); isEmailValid = false; } else { emailInput.style.outline = "none"; - emailEmptyMessage.style.display = "none"; - emailInvalidMessage.style.display = "none"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.add("hidden"); isEmailValid = true; } validateForm(); @@ -62,18 +62,18 @@ const validatePasswordField = () => { passwordInput.addEventListener("focusout", () => { if (passwordInput.value === "") { passwordInput.style.outline = "2px solid var(--error-red)"; - passwordInvalidMessage.style.display = "none"; - passwordEmptyMessage.style.display = "block"; + passwordInvalidMessage.classList.add("hidden"); + passwordEmptyMessage.classList.remove("hidden"); isPasswordValid = false; } else if (passwordInput.value.length < 8) { passwordInput.style.outline = "2px solid var(--error-red)"; - passwordEmptyMessage.style.display = "none"; - passwordInvalidMessage.style.display = "block"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.remove("hidden"); isPasswordValid = false; } else { passwordInput.style.outline = "none"; - passwordEmptyMessage.style.display = "none"; - passwordInvalidMessage.style.display = "none"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.add("hidden"); isPasswordValid = true; } validateForm(); diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index 3e6b134a5..8b7c39322 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -54,18 +54,18 @@ const validateEmailField = () => { emailInput.addEventListener("focusout", () => { if (emailInput.value === "") { emailInput.style.outline = "2px solid var(--error-red)"; - emailInvalidMessage.style.display = "none"; - emailEmptyMessage.style.display = "block"; + emailInvalidMessage.classList.add("hidden"); + emailEmptyMessage.classList.remove("hidden"); isEmailValid = false; } else if (!emailInput.checkValidity()) { emailInput.style.outline = "2px solid var(--error-red)"; - emailEmptyMessage.style.display = "none"; - emailInvalidMessage.style.display = "block"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.remove("hidden"); isEmailValid = false; } else { emailInput.style.outline = "none"; - emailEmptyMessage.style.display = "none"; - emailInvalidMessage.style.display = "none"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.add("hidden"); isEmailValid = true; } validateForm(); @@ -79,11 +79,11 @@ const validateNicknameField = () => { nickname.addEventListener("focusout", () => { if (nickname.value === "") { nickname.style.outline = "2px solid var(--error-red)"; - nicknameEmptyMessage.style.display = "block"; + nicknameEmptyMessage.classList.remove("hidden"); isNicknameValid = false; } else { nickname.style.outline = "none"; - nicknameEmptyMessage.style.display = "none"; + nicknameEmptyMessage.classList.add("hidden"); isNicknameValid = true; } validateForm(); @@ -100,18 +100,18 @@ const validatePasswordField = () => { passwordInput.addEventListener("focusout", () => { if (passwordInput.value === "") { passwordInput.style.outline = "2px solid var(--error-red)"; - passwordInvalidMessage.style.display = "none"; - passwordEmptyMessage.style.display = "block"; + passwordInvalidMessage.classList.add("hidden"); + passwordEmptyMessage.classList.remove("hidden"); isPasswordValid = false; } else if (passwordInput.value.length < 8) { passwordInput.style.outline = "2px solid var(--error-red)"; - passwordEmptyMessage.style.display = "none"; - passwordInvalidMessage.style.display = "block"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.remove("hidden"); isPasswordValid = false; } else { passwordInput.style.outline = "none"; - passwordEmptyMessage.style.display = "none"; - passwordInvalidMessage.style.display = "none"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.add("hidden"); isPasswordValid = true; } validateForm(); @@ -128,11 +128,11 @@ const validatePasswordCheckField = () => { passwordCheckInput.addEventListener("focusout", () => { if (passwordCheckInput.value !== passwordInput.value) { passwordCheckInput.style.outline = "2px solid var(--error-red)"; - passwordCheckNotMatchMessage.style.display = "block"; + passwordCheckNotMatchMessage.classList.remove("hidden"); isPasswordCheckValid = false; } else { passwordCheckInput.style.outline = "none"; - passwordCheckNotMatchMessage.style.display = "none"; + passwordCheckNotMatchMessage.classList.add("hidden"); isPasswordCheckValid = true; } validateForm(); diff --git a/styles/global.css b/styles/global.css index 4d2960500..bd3fef9ac 100644 --- a/styles/global.css +++ b/styles/global.css @@ -31,3 +31,7 @@ font-weight: 400; font-style: normal; } + +.hidden { + display: none; +} From b0503ea35e3dfbdc1a5032228286995774a17fbd Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Tue, 9 Apr 2024 11:33:06 +0900 Subject: [PATCH 10/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20change?= =?UTF-8?q?=20to=20iife=20for=20conflict=20prevention?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/auth/val-signin-text.js | 152 +++++++++--------- scripts/auth/val-signup-text.js | 262 ++++++++++++++++---------------- 2 files changed, 209 insertions(+), 205 deletions(-) diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js index 40cacf95c..7828beb9e 100644 --- a/scripts/auth/val-signin-text.js +++ b/scripts/auth/val-signin-text.js @@ -1,84 +1,86 @@ -let isEmailValid = false; -let isPasswordValid = false; +(function () { + let isEmailValid = false; + let isPasswordValid = false; -const togglePasswordVisibility = () => { - const passwordInput = document.getElementById("pwd"); - const passwordVisibilityButton = document.getElementById("pwdimg"); + const togglePasswordVisibility = () => { + const passwordInput = document.getElementById("pwd"); + const passwordVisibilityButton = document.getElementById("pwdimg"); - if (passwordInput.type === "password") { - passwordInput.type = "text"; - passwordVisibilityButton.src = "/images/btn_visibility_on.png"; - } else { - passwordInput.type = "password"; - passwordVisibilityButton.src = "/images/btn_visibility.png"; - } -}; - -const validateForm = () => { - const submitButton = document.getElementById("submitBtn"); - - if (isEmailValid && isPasswordValid) { - submitButton.style.backgroundColor = "var(--btn-blue1)"; - submitButton.disabled = false; - } else { - submitButton.style.backgroundColor = "var(--cool-gray400)"; - submitButton.disabled = true; - } -}; - -const validateEmailField = () => { - const emailInput = document.getElementById("email"); - let emailEmptyMessage = document.getElementById("emailEmptyMessage"); - let emailInvalidMessage = document.getElementById("emailInvalidMessage"); - - emailInput.addEventListener("focusout", () => { - if (emailInput.value === "") { - emailInput.style.outline = "2px solid var(--error-red)"; - emailInvalidMessage.classList.add("hidden"); - emailEmptyMessage.classList.remove("hidden"); - isEmailValid = false; - } else if (!emailInput.checkValidity()) { - emailInput.style.outline = "2px solid var(--error-red)"; - emailEmptyMessage.classList.add("hidden"); - emailInvalidMessage.classList.remove("hidden"); - isEmailValid = false; + if (passwordInput.type === "password") { + passwordInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - emailInput.style.outline = "none"; - emailEmptyMessage.classList.add("hidden"); - emailInvalidMessage.classList.add("hidden"); - isEmailValid = true; + passwordInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } - validateForm(); - }); -}; + }; -const validatePasswordField = () => { - const passwordInput = document.getElementById("pwd"); - let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); - let passwordInvalidMessage = document.getElementById( - "passwordInvalidMessage" - ); + const validateForm = () => { + const submitButton = document.getElementById("submitBtn"); - passwordInput.addEventListener("focusout", () => { - if (passwordInput.value === "") { - passwordInput.style.outline = "2px solid var(--error-red)"; - passwordInvalidMessage.classList.add("hidden"); - passwordEmptyMessage.classList.remove("hidden"); - isPasswordValid = false; - } else if (passwordInput.value.length < 8) { - passwordInput.style.outline = "2px solid var(--error-red)"; - passwordEmptyMessage.classList.add("hidden"); - passwordInvalidMessage.classList.remove("hidden"); - isPasswordValid = false; + if (isEmailValid && isPasswordValid) { + submitButton.style.backgroundColor = "var(--btn-blue1)"; + submitButton.disabled = false; } else { - passwordInput.style.outline = "none"; - passwordEmptyMessage.classList.add("hidden"); - passwordInvalidMessage.classList.add("hidden"); - isPasswordValid = true; + submitButton.style.backgroundColor = "var(--cool-gray400)"; + submitButton.disabled = true; } - validateForm(); - }); -}; + }; + + const validateEmailField = () => { + const emailInput = document.getElementById("email"); + let emailEmptyMessage = document.getElementById("emailEmptyMessage"); + let emailInvalidMessage = document.getElementById("emailInvalidMessage"); + + emailInput.addEventListener("focusout", () => { + if (emailInput.value === "") { + emailInput.style.outline = "2px solid var(--error-red)"; + emailInvalidMessage.classList.add("hidden"); + emailEmptyMessage.classList.remove("hidden"); + isEmailValid = false; + } else if (!emailInput.checkValidity()) { + emailInput.style.outline = "2px solid var(--error-red)"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.remove("hidden"); + isEmailValid = false; + } else { + emailInput.style.outline = "none"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.add("hidden"); + isEmailValid = true; + } + validateForm(); + }); + }; + + const validatePasswordField = () => { + const passwordInput = document.getElementById("pwd"); + let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); + let passwordInvalidMessage = document.getElementById( + "passwordInvalidMessage" + ); + + passwordInput.addEventListener("focusout", () => { + if (passwordInput.value === "") { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordInvalidMessage.classList.add("hidden"); + passwordEmptyMessage.classList.remove("hidden"); + isPasswordValid = false; + } else if (passwordInput.value.length < 8) { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.remove("hidden"); + isPasswordValid = false; + } else { + passwordInput.style.outline = "none"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.add("hidden"); + isPasswordValid = true; + } + validateForm(); + }); + }; -validateEmailField(); -validatePasswordField(); + validateEmailField(); + validatePasswordField(); +})(); diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js index 8b7c39322..3fa9d4e21 100644 --- a/scripts/auth/val-signup-text.js +++ b/scripts/auth/val-signup-text.js @@ -1,145 +1,147 @@ -let isEmailValid = false; -let isNicknameValid = false; -let isPasswordValid = false; -let isPasswordCheckValid = false; +(function () { + let isEmailValid = false; + let isNicknameValid = false; + let isPasswordValid = false; + let isPasswordCheckValid = false; -const togglePasswordVisibility = () => { - const passwordInput = document.getElementById("pwd"); - const passwordVisibilityButton = document.getElementById("pwdimg"); + const togglePasswordVisibility = () => { + const passwordInput = document.getElementById("pwd"); + const passwordVisibilityButton = document.getElementById("pwdimg"); - if (passwordInput.type === "password") { - passwordInput.type = "text"; - passwordVisibilityButton.src = "/images/btn_visibility_on.png"; - } else { - passwordInput.type = "password"; - passwordVisibilityButton.src = "/images/btn_visibility.png"; - } -}; - -const togglePasswordCheckVisibility = () => { - const passwordCheckInput = document.getElementById("pwdchk"); - const passwordVisibilityButton = document.getElementById("pwdchkimg"); - - if (passwordCheckInput.type === "password") { - passwordCheckInput.type = "text"; - passwordVisibilityButton.src = "/images/btn_visibility_on.png"; - } else { - passwordCheckInput.type = "password"; - passwordVisibilityButton.src = "/images/btn_visibility.png"; - } -}; - -const validateForm = () => { - const submitButton = document.getElementById("submitBtn"); - - if ( - isEmailValid && - isNicknameValid && - isPasswordValid && - isPasswordCheckValid - ) { - submitButton.style.backgroundColor = "var(--btn-blue1)"; - submitButton.disabled = false; - } else { - submitButton.style.backgroundColor = "var(--cool-gray400)"; - submitButton.disabled = true; - } -}; - -const validateEmailField = () => { - const emailInput = document.getElementById("email"); - let emailEmptyMessage = document.getElementById("emailEmptyMessage"); - let emailInvalidMessage = document.getElementById("emailInvalidMessage"); - - emailInput.addEventListener("focusout", () => { - if (emailInput.value === "") { - emailInput.style.outline = "2px solid var(--error-red)"; - emailInvalidMessage.classList.add("hidden"); - emailEmptyMessage.classList.remove("hidden"); - isEmailValid = false; - } else if (!emailInput.checkValidity()) { - emailInput.style.outline = "2px solid var(--error-red)"; - emailEmptyMessage.classList.add("hidden"); - emailInvalidMessage.classList.remove("hidden"); - isEmailValid = false; + if (passwordInput.type === "password") { + passwordInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - emailInput.style.outline = "none"; - emailEmptyMessage.classList.add("hidden"); - emailInvalidMessage.classList.add("hidden"); - isEmailValid = true; + passwordInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } - validateForm(); - }); -}; + }; -const validateNicknameField = () => { - const nickname = document.getElementById("nickname"); - let nicknameEmptyMessage = document.getElementById("nicknameEmptyMessage"); + const togglePasswordCheckVisibility = () => { + const passwordCheckInput = document.getElementById("pwdchk"); + const passwordVisibilityButton = document.getElementById("pwdchkimg"); - nickname.addEventListener("focusout", () => { - if (nickname.value === "") { - nickname.style.outline = "2px solid var(--error-red)"; - nicknameEmptyMessage.classList.remove("hidden"); - isNicknameValid = false; + if (passwordCheckInput.type === "password") { + passwordCheckInput.type = "text"; + passwordVisibilityButton.src = "/images/btn_visibility_on.png"; } else { - nickname.style.outline = "none"; - nicknameEmptyMessage.classList.add("hidden"); - isNicknameValid = true; + passwordCheckInput.type = "password"; + passwordVisibilityButton.src = "/images/btn_visibility.png"; } - validateForm(); - }); -}; + }; -const validatePasswordField = () => { - const passwordInput = document.getElementById("pwd"); - let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); - let passwordInvalidMessage = document.getElementById( - "passwordInvalidMessage" - ); + const validateForm = () => { + const submitButton = document.getElementById("submitBtn"); - passwordInput.addEventListener("focusout", () => { - if (passwordInput.value === "") { - passwordInput.style.outline = "2px solid var(--error-red)"; - passwordInvalidMessage.classList.add("hidden"); - passwordEmptyMessage.classList.remove("hidden"); - isPasswordValid = false; - } else if (passwordInput.value.length < 8) { - passwordInput.style.outline = "2px solid var(--error-red)"; - passwordEmptyMessage.classList.add("hidden"); - passwordInvalidMessage.classList.remove("hidden"); - isPasswordValid = false; + if ( + isEmailValid && + isNicknameValid && + isPasswordValid && + isPasswordCheckValid + ) { + submitButton.style.backgroundColor = "var(--btn-blue1)"; + submitButton.disabled = false; } else { - passwordInput.style.outline = "none"; - passwordEmptyMessage.classList.add("hidden"); - passwordInvalidMessage.classList.add("hidden"); - isPasswordValid = true; + submitButton.style.backgroundColor = "var(--cool-gray400)"; + submitButton.disabled = true; } - validateForm(); - }); -}; + }; -const validatePasswordCheckField = () => { - const passwordInput = document.getElementById("pwd"); - const passwordCheckInput = document.getElementById("pwdchk"); - let passwordCheckNotMatchMessage = document.getElementById( - "passwordCheckNotMatchMessage" - ); + const validateEmailField = () => { + const emailInput = document.getElementById("email"); + let emailEmptyMessage = document.getElementById("emailEmptyMessage"); + let emailInvalidMessage = document.getElementById("emailInvalidMessage"); - passwordCheckInput.addEventListener("focusout", () => { - if (passwordCheckInput.value !== passwordInput.value) { - passwordCheckInput.style.outline = "2px solid var(--error-red)"; - passwordCheckNotMatchMessage.classList.remove("hidden"); - isPasswordCheckValid = false; - } else { - passwordCheckInput.style.outline = "none"; - passwordCheckNotMatchMessage.classList.add("hidden"); - isPasswordCheckValid = true; - } - validateForm(); - }); -}; + emailInput.addEventListener("focusout", () => { + if (emailInput.value === "") { + emailInput.style.outline = "2px solid var(--error-red)"; + emailInvalidMessage.classList.add("hidden"); + emailEmptyMessage.classList.remove("hidden"); + isEmailValid = false; + } else if (!emailInput.checkValidity()) { + emailInput.style.outline = "2px solid var(--error-red)"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.remove("hidden"); + isEmailValid = false; + } else { + emailInput.style.outline = "none"; + emailEmptyMessage.classList.add("hidden"); + emailInvalidMessage.classList.add("hidden"); + isEmailValid = true; + } + validateForm(); + }); + }; + + const validateNicknameField = () => { + const nickname = document.getElementById("nickname"); + let nicknameEmptyMessage = document.getElementById("nicknameEmptyMessage"); + + nickname.addEventListener("focusout", () => { + if (nickname.value === "") { + nickname.style.outline = "2px solid var(--error-red)"; + nicknameEmptyMessage.classList.remove("hidden"); + isNicknameValid = false; + } else { + nickname.style.outline = "none"; + nicknameEmptyMessage.classList.add("hidden"); + isNicknameValid = true; + } + validateForm(); + }); + }; + + const validatePasswordField = () => { + const passwordInput = document.getElementById("pwd"); + let passwordEmptyMessage = document.getElementById("passwordEmptyMessage"); + let passwordInvalidMessage = document.getElementById( + "passwordInvalidMessage" + ); + + passwordInput.addEventListener("focusout", () => { + if (passwordInput.value === "") { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordInvalidMessage.classList.add("hidden"); + passwordEmptyMessage.classList.remove("hidden"); + isPasswordValid = false; + } else if (passwordInput.value.length < 8) { + passwordInput.style.outline = "2px solid var(--error-red)"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.remove("hidden"); + isPasswordValid = false; + } else { + passwordInput.style.outline = "none"; + passwordEmptyMessage.classList.add("hidden"); + passwordInvalidMessage.classList.add("hidden"); + isPasswordValid = true; + } + validateForm(); + }); + }; + + const validatePasswordCheckField = () => { + const passwordInput = document.getElementById("pwd"); + const passwordCheckInput = document.getElementById("pwdchk"); + let passwordCheckNotMatchMessage = document.getElementById( + "passwordCheckNotMatchMessage" + ); + + passwordCheckInput.addEventListener("focusout", () => { + if (passwordCheckInput.value !== passwordInput.value) { + passwordCheckInput.style.outline = "2px solid var(--error-red)"; + passwordCheckNotMatchMessage.classList.remove("hidden"); + isPasswordCheckValid = false; + } else { + passwordCheckInput.style.outline = "none"; + passwordCheckNotMatchMessage.classList.add("hidden"); + isPasswordCheckValid = true; + } + validateForm(); + }); + }; -validateEmailField(); -validateNicknameField(); -validatePasswordField(); -validatePasswordCheckField(); + validateEmailField(); + validateNicknameField(); + validatePasswordField(); + validatePasswordCheckField(); +})(); From 6fb262d51925adb3cf602603e1be67f8d7409325 Mon Sep 17 00:00:00 2001 From: CitrusSoda Date: Tue, 9 Apr 2024 11:43:27 +0900 Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=90=9B=20fix:=20change=20toggle=20f?= =?UTF-8?q?unction=20declaration=20due=20to=20change=20to=20iife?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signin/index.html | 2 +- pages/signup/index.html | 4 ++-- scripts/auth/val-signin-text.js | 6 +++++- scripts/auth/val-signup-text.js | 7 ++++++- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/pages/signin/index.html b/pages/signin/index.html index 864e3c797..1037abdba 100644 --- a/pages/signin/index.html +++ b/pages/signin/index.html @@ -40,7 +40,7 @@