From 5b6be8742ed273e56009ce1431ee7b6ee7d34209 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Sun, 16 Jun 2024 22:20:30 +0900 Subject: [PATCH 1/2] =?UTF-8?q?style(login,=20signup):=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login/script.js | 48 +++++++++++++++---------------- signup/script.js | 74 ++++++++++++++++++++++++------------------------ 2 files changed, 61 insertions(+), 61 deletions(-) diff --git a/login/script.js b/login/script.js index 481fa9c5e..177f3f9cc 100644 --- a/login/script.js +++ b/login/script.js @@ -1,58 +1,58 @@ -const inputEmail = document.getElementById("input-email"); -const errorMsgEmail = document.querySelector(".error-message.email"); +const emailInput = document.getElementById("input-email"); +const emailErrorMessage = document.querySelector(".error-message.email"); let flagEmail = 0; -inputEmail.addEventListener("focusout", ({ target }) => { - const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; +const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; +emailInput.addEventListener("focusout", ({ target }) => { if (target.value === "") { target.classList.add("error"); - errorMsgEmail.style.display = "block"; + emailErrorMessage.style.display = "block"; flagEmail = 0; - } else if (!pattern.test(target.value)) { + } else if (!VALID_EMAIL_PATTERN.test(target.value)) { target.classList.add("error"); - errorMsgEmail.style.display = "block"; - errorMsgEmail.textContent = "잘못된 이메일 형식입니다."; + emailErrorMessage.style.display = "block"; + emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; flagEmail = 0; } else { target.classList.remove("error"); - errorMsgEmail.style.display = "none"; + emailErrorMessage.style.display = "none"; flagEmail = 1; } checkInputs(); }); -const inputPassword = document.getElementById("input-password"); -const errorMsgPassword = document.querySelector(".error-message.password"); +const passwordInput = document.getElementById("input-password"); +const passwordErrorMessage = document.querySelector(".error-message.password"); let flagPassword = 0; -inputPassword.addEventListener("focusout", ({ target }) => { +passwordInput.addEventListener("focusout", ({ target }) => { if (target.value === "") { target.classList.add("error"); - errorMsgPassword.style.display = "block"; + passwordErrorMessage.style.display = "block"; flagPassword = 0; } else if (target.value.length < 8) { target.classList.add("error"); - errorMsgPassword.style.display = "block"; - errorMsgPassword.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordErrorMessage.style.display = "block"; + passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요."; flagPassword = 0; } else { target.classList.remove("error"); - errorMsgPassword.style.display = "none"; + passwordErrorMessage.style.display = "none"; flagPassword = 1; } checkInputs(); }); // 버튼 활성화를 위한 input 유효성 검사 -const loginBtn = document.querySelector(".form-login-btn"); +const loginButton = document.querySelector(".form-login-btn"); function checkInputs() { if (flagEmail && flagPassword) { - loginBtn.disabled = false; - loginBtn.classList.add("enabled"); - loginBtn.addEventListener("click", () => { + loginButton.disabled = false; + loginButton.classList.add("enabled"); + loginButton.addEventListener("click", () => { window.location.href = "../items/index.html"; }); } else { - loginBtn.disabled = true; - loginBtn.classList.remove("enabled"); + loginButton.disabled = true; + loginButton.classList.remove("enabled"); } } @@ -61,12 +61,12 @@ let flagVisibility = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보이 const pwVisibilityIcon = document.querySelector(".password-show-btn"); pwVisibilityIcon.addEventListener("click", () => { if (!flagVisibility) { - inputPassword.type = "text"; + passwordInput.type = "text"; document.querySelector(".password-show-icon").src = "../asset/icon/btn_visibility_on.png"; flagVisibility = 1; } else { - inputPassword.type = "password"; + passwordInput.type = "password"; document.querySelector(".password-show-icon").src = "../asset/icon/btn_visibility_off.png"; flagVisibility = 0; diff --git a/signup/script.js b/signup/script.js index ba90d3613..5b8096edb 100644 --- a/signup/script.js +++ b/signup/script.js @@ -1,92 +1,92 @@ -const inputEmail = document.getElementById("input-email"); -const errorMsgEmail = document.querySelector(".error-message.email"); +const emailInput = document.getElementById("input-email"); +const emailErrorMessage = document.querySelector(".error-message.email"); let flagEmail = 0; -inputEmail.addEventListener("focusout", ({ target }) => { - const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; +const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; +emailInput.addEventListener("focusout", ({ target }) => { if (target.value === "") { target.classList.add("error"); - errorMsgEmail.style.display = "block"; + emailErrorMessage.style.display = "block"; flagEmail = 0; - } else if (!pattern.test(target.value)) { + } else if (!VALID_EMAIL_PATTERN.test(target.value)) { target.classList.add("error"); - errorMsgEmail.style.display = "block"; - errorMsgEmail.textContent = "잘못된 이메일 형식입니다."; + emailErrorMessage.style.display = "block"; + emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; flagEmail = 0; } else { target.classList.remove("error"); - errorMsgEmail.style.display = "none"; + emailErrorMessage.style.display = "none"; flagEmail = 1; } checkInputs(); }); -const inputNickname = document.getElementById("input-nickname"); -const errorMsgNickname = document.querySelector(".error-message.nickname"); +const nicknameInput = document.getElementById("input-nickname"); +const nicknameErrorMessage = document.querySelector(".error-message.nickname"); let flagNickname = 0; -inputNickname.addEventListener("focusout", ({ target }) => { +nicknameInput.addEventListener("focusout", ({ target }) => { if (target.value === "") { target.classList.add("error"); - errorMsgNickname.style.display = "block"; + nicknameErrorMessage.style.display = "block"; flagNickname = 0; } else { target.classList.remove("error"); - errorMsgNickname.style.display = "none"; + nicknameErrorMessage.style.display = "none"; flagNickname = 1; } checkInputs(); }); -const inputPassword = document.getElementById("input-password"); -const errorMsgPassword = document.querySelector(".error-message.password"); +const passwordInput = document.getElementById("input-password"); +const passwordErrorMessage = document.querySelector(".error-message.password"); let flagPassword = 0; let flagPasswordCheck = 0; -inputPassword.addEventListener("focusout", ({ target }) => { +passwordInput.addEventListener("focusout", ({ target }) => { if (target.value === "") { target.classList.add("error"); - errorMsgPassword.style.display = "block"; + passwordErrorMessage.style.display = "block"; flagPassword = 0; } else if (target.value.length < 8) { target.classList.add("error"); - errorMsgPassword.style.display = "block"; - errorMsgPassword.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordErrorMessage.style.display = "block"; + passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요."; flagPassword = 0; } else { target.classList.remove("error"); - errorMsgPassword.style.display = "none"; + passwordErrorMessage.style.display = "none"; flagPassword = 1; } checkInputs(); }); -const inputPasswordCheck = document.getElementById("input-password-check"); -const errorMsgPasswordCheck = document.querySelector( +const passwordCheckInput = document.getElementById("input-password-check"); +const passwordCheckErrorMessage = document.querySelector( ".error-message.password-check" ); -inputPasswordCheck.addEventListener("focusout", ({ target }) => { - if (target.value !== inputPassword.value) { +passwordCheckInput.addEventListener("focusout", ({ target }) => { + if (target.value !== passwordInput.value) { target.classList.add("error"); - errorMsgPasswordCheck.style.display = "block"; + passwordCheckErrorMessage.style.display = "block"; flagPasswordCheck = 0; } else { target.classList.remove("error"); - errorMsgPasswordCheck.style.display = "none"; + passwordCheckErrorMessage.style.display = "none"; flagPasswordCheck = 1; } checkInputs(); }); // 버튼 활성화를 위한 input 유효성 검사 -const signupBtn = document.querySelector(".form-signup-btn"); +const signupButton = document.querySelector(".form-signup-btn"); function checkInputs() { if (flagEmail && flagNickname && flagPassword && flagPasswordCheck) { - signupBtn.disabled = false; - signupBtn.classList.add("enabled"); - signupBtn.addEventListener("click", () => { + signupButton.disabled = false; + signupButton.classList.add("enabled"); + signupButton.addEventListener("click", () => { window.location.href = "../signup/index.html"; }); } else { - signupBtn.disabled = true; - signupBtn.classList.remove("enabled"); + signupButton.disabled = true; + signupButton.classList.remove("enabled"); } } @@ -95,12 +95,12 @@ let flagVisibility_pw = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보 const pwVisibilityIcon = document.querySelector(".password-show-btn.password"); pwVisibilityIcon.addEventListener("click", () => { if (!flagVisibility_pw) { - inputPassword.type = "text"; + passwordInput.type = "text"; document.querySelector(".password-show-icon.password").src = "../asset/icon/btn_visibility_on.png"; flagVisibility_pw = 1; } else { - inputPassword.type = "password"; + passwordInput.type = "password"; document.querySelector(".password-show-icon.password").src = "../asset/icon/btn_visibility_off.png"; flagVisibility_pw = 0; @@ -113,12 +113,12 @@ const pwCheckVisibilityIcon = document.querySelector( ); pwCheckVisibilityIcon.addEventListener("click", () => { if (!flagVisibility_pwCheck) { - inputPasswordCheck.type = "text"; + passwordCheckInput.type = "text"; document.querySelector(".password-show-icon.password-check").src = "../asset/icon/btn_visibility_on.png"; flagVisibility_pwCheck = 1; } else { - inputPasswordCheck.type = "password"; + passwordCheckInput.type = "password"; document.querySelector(".password-show-icon.password-check").src = "../asset/icon/btn_visibility_off.png"; flagVisibility_pwCheck = 0; From ad9e1c096912aec45592a0371854038c1022b1c6 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Tue, 18 Jun 2024 11:17:22 +0900 Subject: [PATCH 2/2] =?UTF-8?q?style(login,=20signup):=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=EB=90=98=EB=8A=94=20=EB=B6=80=EB=B6=84=EC=9D=84=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=EB=A1=9C=20=EC=84=A0=EC=96=B8=ED=95=98?= =?UTF-8?q?=EA=B3=A0,=20auth.js=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- auth.js | 22 +++++ login/index.html | 9 +- login/script.js | 124 +++++++++++++------------- signup/index.html | 21 +++-- signup/script.js | 217 +++++++++++++++++++++++++--------------------- 5 files changed, 222 insertions(+), 171 deletions(-) create mode 100644 auth.js diff --git a/auth.js b/auth.js new file mode 100644 index 000000000..ed9a88aab --- /dev/null +++ b/auth.js @@ -0,0 +1,22 @@ +const showErrorMessage = (target, errorMessageDiv) => { + target.classList.add("error"); + errorMessageDiv.style.display = "block"; + target.setAttribute("data-valid", "false"); +}; + +const hideErrorMessage = (target, errorMessageDiv) => { + target.classList.remove("error"); + errorMessageDiv.style.display = "none"; + target.setAttribute("data-valid", "true"); +}; + +const activeButton = (button) => { + button.disabled = false; + button.classList.add("enabled"); +}; +const disableButton = (button) => { + button.disabled = true; + button.classList.remove("enabled"); +}; + +export { showErrorMessage, hideErrorMessage, activeButton, disableButton }; diff --git a/login/index.html b/login/index.html index 3de571eb4..20259155d 100644 --- a/login/index.html +++ b/login/index.html @@ -35,7 +35,7 @@ placeholder="이메일을 입력해주세요" autofocus /> - +
@@ -58,17 +58,18 @@ alt="비밀번호를 보여주는 눈 모양 아이콘" width="24px" height="24px" + data-valid="false" />
-
비밀번호를 입력해주세요.
+
@@ -101,6 +102,6 @@ - + diff --git a/login/script.js b/login/script.js index 177f3f9cc..8375231ae 100644 --- a/login/script.js +++ b/login/script.js @@ -1,74 +1,82 @@ +const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + const emailInput = document.getElementById("input-email"); +const passwordInput = document.getElementById("input-password"); + const emailErrorMessage = document.querySelector(".error-message.email"); -let flagEmail = 0; -const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; -emailInput.addEventListener("focusout", ({ target }) => { +const passwordErrorMessage = document.querySelector(".error-message.password"); + +const passwordVisibilityButton = document.querySelector(".password-show-btn"); +const passwordVisibilityIcon = document.querySelector(".password-show-icon"); +const loginButton = document.querySelector(".form-login-btn"); + +const handleFocusOutEmailInput = ({ target }) => { if (target.value === "") { - target.classList.add("error"); - emailErrorMessage.style.display = "block"; - flagEmail = 0; - } else if (!VALID_EMAIL_PATTERN.test(target.value)) { - target.classList.add("error"); - emailErrorMessage.style.display = "block"; + showErrorMessage(target, emailErrorMessage); + emailErrorMessage.textContent = "이메일을 입력해주세요."; + disableButton(loginButton); + return; + } + if (!VALID_EMAIL_PATTERN.test(target.value)) { + showErrorMessage(target, emailErrorMessage); emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; - flagEmail = 0; - } else { - target.classList.remove("error"); - emailErrorMessage.style.display = "none"; - flagEmail = 1; + disableButton(loginButton); + return; } + hideErrorMessage(target, emailErrorMessage); checkInputs(); -}); +}; +emailInput.addEventListener("focusout", handleFocusOutEmailInput); -const passwordInput = document.getElementById("input-password"); -const passwordErrorMessage = document.querySelector(".error-message.password"); -let flagPassword = 0; -passwordInput.addEventListener("focusout", ({ target }) => { +const handleFocusOutPasswordInput = ({ target }) => { if (target.value === "") { - target.classList.add("error"); - passwordErrorMessage.style.display = "block"; - flagPassword = 0; - } else if (target.value.length < 8) { - target.classList.add("error"); - passwordErrorMessage.style.display = "block"; + showErrorMessage(target, passwordErrorMessage); + passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; + disableButton(loginButton); + return; + } + if (target.value.length < 8) { + showErrorMessage(target, passwordErrorMessage); passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요."; - flagPassword = 0; - } else { - target.classList.remove("error"); - passwordErrorMessage.style.display = "none"; - flagPassword = 1; + disableButton(loginButton); + return; } + hideErrorMessage(target, passwordErrorMessage); checkInputs(); -}); +}; +passwordInput.addEventListener("focusout", handleFocusOutPasswordInput); // 버튼 활성화를 위한 input 유효성 검사 -const loginButton = document.querySelector(".form-login-btn"); -function checkInputs() { - if (flagEmail && flagPassword) { - loginButton.disabled = false; - loginButton.classList.add("enabled"); - loginButton.addEventListener("click", () => { - window.location.href = "../items/index.html"; - }); - } else { - loginButton.disabled = true; - loginButton.classList.remove("enabled"); +const checkInputs = () => { + const isValid = + emailInput.getAttribute("data-valid") === "true" && + passwordInput.getAttribute("data-valid") === "true"; + if (isValid) { + activeButton(loginButton); + return; } -} + disableButton(loginButton); +}; // 비밀번호 문자열 보이거나 가리기 -let flagVisibility = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보이기 -const pwVisibilityIcon = document.querySelector(".password-show-btn"); -pwVisibilityIcon.addEventListener("click", () => { - if (!flagVisibility) { - passwordInput.type = "text"; - document.querySelector(".password-show-icon").src = - "../asset/icon/btn_visibility_on.png"; - flagVisibility = 1; - } else { - passwordInput.type = "password"; - document.querySelector(".password-show-icon").src = - "../asset/icon/btn_visibility_off.png"; - flagVisibility = 0; - } -}); +const handleTogglePasswordVisibilityButton = ({ target }) => { + const isPasswordVisible = + passwordVisibilityIcon.getAttribute("data-valid") === "true"; + const inputType = isPasswordVisible ? "password" : "text"; + const iconType = isPasswordVisible ? "off" : "on"; + + passwordInput.type = inputType; + passwordVisibilityIcon.src = `../asset/icon/btn_visibility_${iconType}.png`; + target.setAttribute("data-valid", `${!isPasswordVisible}`); +}; +passwordVisibilityButton.addEventListener( + "click", + handleTogglePasswordVisibilityButton +); + +import { + showErrorMessage, + hideErrorMessage, + activeButton, + disableButton, +} from "../auth.js"; diff --git a/signup/index.html b/signup/index.html index 6ec42b0e0..dd54a92a1 100644 --- a/signup/index.html +++ b/signup/index.html @@ -37,7 +37,7 @@ placeholder="이메일을 입력해주세요" autofocus /> - +
@@ -48,7 +48,7 @@ name="nickname" placeholder="닉네임을 입력해주세요" /> -
닉네임을 입력해주세요.
+
@@ -71,10 +71,11 @@ alt="비밀번호를 보여주는 눈 모양 아이콘" width="24px" height="24px" + data-valid="false" />
-
비밀번호를 입력해주세요.
+
@@ -97,15 +98,19 @@ alt="비밀번호를 보여주는 눈 모양 아이콘" width="24px" height="24px" + data-valid="false" />
-
- 비밀번호가 일치하지 않습니다. -
+
- @@ -137,6 +142,6 @@ - + diff --git a/signup/script.js b/signup/script.js index 5b8096edb..9a65d19c0 100644 --- a/signup/script.js +++ b/signup/script.js @@ -1,126 +1,141 @@ +const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + const emailInput = document.getElementById("input-email"); +const nicknameInput = document.getElementById("input-nickname"); +const passwordInput = document.getElementById("input-password"); +const passwordCheckInput = document.getElementById("input-password-check"); + const emailErrorMessage = document.querySelector(".error-message.email"); -let flagEmail = 0; -const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; -emailInput.addEventListener("focusout", ({ target }) => { +const nicknameErrorMessage = document.querySelector(".error-message.nickname"); +const passwordErrorMessage = document.querySelector(".error-message.password"); +const passwordCheckErrorMessage = document.querySelector( + ".error-message.password-check" +); + +const passwordVisibilityButton = document.querySelector( + ".password-show-btn.password" +); +const passwordVisibilityIcon = document.querySelector( + ".password-show-icon.password" +); +const passwordCheckVisibilityButton = document.querySelector( + ".password-show-btn.password-check" +); +const passwordCheckVisibilityIcon = document.querySelector( + ".password-show-icon.password-check" +); +const signupButton = document.querySelector(".form-signup-btn"); + +const handleFocusOutEmailInput = ({ target }) => { if (target.value === "") { - target.classList.add("error"); - emailErrorMessage.style.display = "block"; - flagEmail = 0; - } else if (!VALID_EMAIL_PATTERN.test(target.value)) { - target.classList.add("error"); - emailErrorMessage.style.display = "block"; + showErrorMessage(target, emailErrorMessage); + emailErrorMessage.textContent = "이메일을 입력해주세요."; + disableButton(signupButton); + return; + } + if (!VALID_EMAIL_PATTERN.test(target.value)) { + showErrorMessage(target, emailErrorMessage); emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; - flagEmail = 0; - } else { - target.classList.remove("error"); - emailErrorMessage.style.display = "none"; - flagEmail = 1; + disableButton(signupButton); + return; } + hideErrorMessage(target, emailErrorMessage); checkInputs(); -}); +}; +emailInput.addEventListener("focusout", handleFocusOutEmailInput); -const nicknameInput = document.getElementById("input-nickname"); -const nicknameErrorMessage = document.querySelector(".error-message.nickname"); -let flagNickname = 0; -nicknameInput.addEventListener("focusout", ({ target }) => { +const handleFocusOutNicknameInput = ({ target }) => { if (target.value === "") { - target.classList.add("error"); - nicknameErrorMessage.style.display = "block"; - flagNickname = 0; - } else { - target.classList.remove("error"); - nicknameErrorMessage.style.display = "none"; - flagNickname = 1; + showErrorMessage(target, nicknameErrorMessage); + nicknameErrorMessage.textContent = "닉네임을 입력해주세요."; + disableButton(signupButton); + return; } + hideErrorMessage(target, nicknameErrorMessage); checkInputs(); -}); +}; +nicknameInput.addEventListener("focusout", handleFocusOutNicknameInput); -const passwordInput = document.getElementById("input-password"); -const passwordErrorMessage = document.querySelector(".error-message.password"); -let flagPassword = 0; -let flagPasswordCheck = 0; -passwordInput.addEventListener("focusout", ({ target }) => { +const handleFocusOutPasswordInput = ({ target }) => { if (target.value === "") { - target.classList.add("error"); - passwordErrorMessage.style.display = "block"; - flagPassword = 0; - } else if (target.value.length < 8) { - target.classList.add("error"); - passwordErrorMessage.style.display = "block"; + showErrorMessage(target, passwordErrorMessage); + passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; + disableButton(loginButton); + return; + } + if (target.value.length < 8) { + showErrorMessage(target, passwordErrorMessage); passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요."; - flagPassword = 0; - } else { - target.classList.remove("error"); - passwordErrorMessage.style.display = "none"; - flagPassword = 1; + disableButton(loginButton); + return; } + hideErrorMessage(target, passwordErrorMessage); checkInputs(); -}); +}; +passwordInput.addEventListener("focusout", handleFocusOutPasswordInput); -const passwordCheckInput = document.getElementById("input-password-check"); -const passwordCheckErrorMessage = document.querySelector( - ".error-message.password-check" -); -passwordCheckInput.addEventListener("focusout", ({ target }) => { +const handleFocusOutPasswordCheckInput = ({ target }) => { if (target.value !== passwordInput.value) { - target.classList.add("error"); - passwordCheckErrorMessage.style.display = "block"; - flagPasswordCheck = 0; - } else { - target.classList.remove("error"); - passwordCheckErrorMessage.style.display = "none"; - flagPasswordCheck = 1; + showErrorMessage(target, passwordCheckErrorMessage); + passwordCheckErrorMessage.textContent = "비밀번호가 일치하지 않습니다."; + disableButton(loginButton); + return; } + hideErrorMessage(target, passwordCheckErrorMessage); checkInputs(); -}); +}; +passwordCheckInput.addEventListener( + "focusout", + handleFocusOutPasswordCheckInput +); -// 버튼 활성화를 위한 input 유효성 검사 -const signupButton = document.querySelector(".form-signup-btn"); -function checkInputs() { - if (flagEmail && flagNickname && flagPassword && flagPasswordCheck) { - signupButton.disabled = false; - signupButton.classList.add("enabled"); - signupButton.addEventListener("click", () => { - window.location.href = "../signup/index.html"; - }); - } else { - signupButton.disabled = true; - signupButton.classList.remove("enabled"); +const checkInputs = () => { + const isValid = + emailInput.getAttribute("data-valid") === "true" && + nicknameInput.getAttribute("data-valid") === "true" && + passwordInput.getAttribute("data-valid") === "true" && + passwordCheckInput.getAttribute("data-valid") === "true"; + if (isValid) { + activeButton(signupButton); + return; } -} + disableButton(signupButton); +}; // 비밀번호 문자열 보이거나 가리기 -let flagVisibility_pw = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보이기 -const pwVisibilityIcon = document.querySelector(".password-show-btn.password"); -pwVisibilityIcon.addEventListener("click", () => { - if (!flagVisibility_pw) { - passwordInput.type = "text"; - document.querySelector(".password-show-icon.password").src = - "../asset/icon/btn_visibility_on.png"; - flagVisibility_pw = 1; - } else { - passwordInput.type = "password"; - document.querySelector(".password-show-icon.password").src = - "../asset/icon/btn_visibility_off.png"; - flagVisibility_pw = 0; - } -}); +const handleTogglePasswordVisibilityButton = ({ target }) => { + const isPasswordVisible = + passwordVisibilityIcon.getAttribute("data-valid") === "true"; + const inputType = isPasswordVisible ? "password" : "text"; + const iconType = isPasswordVisible ? "off" : "on"; -let flagVisibility_pwCheck = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보이기 -const pwCheckVisibilityIcon = document.querySelector( - ".password-show-btn.password-check" + passwordInput.type = inputType; + passwordVisibilityIcon.src = `../asset/icon/btn_visibility_${iconType}.png`; + target.setAttribute("data-valid", `${!isPasswordVisible}`); +}; +passwordVisibilityButton.addEventListener( + "click", + handleTogglePasswordVisibilityButton ); -pwCheckVisibilityIcon.addEventListener("click", () => { - if (!flagVisibility_pwCheck) { - passwordCheckInput.type = "text"; - document.querySelector(".password-show-icon.password-check").src = - "../asset/icon/btn_visibility_on.png"; - flagVisibility_pwCheck = 1; - } else { - passwordCheckInput.type = "password"; - document.querySelector(".password-show-icon.password-check").src = - "../asset/icon/btn_visibility_off.png"; - flagVisibility_pwCheck = 0; - } -}); + +const handleTogglePasswordCheckVisibilityButton = ({ target }) => { + const isPasswordCheckVisible = + passwordCheckVisibilityIcon.getAttribute("data-valid") === "true"; + const inputType = isPasswordCheckVisible ? "password" : "text"; + const iconType = isPasswordCheckVisible ? "off" : "on"; + + passwordCheckInput.type = inputType; + passwordCheckVisibilityIcon.src = `../asset/icon/btn_visibility_${iconType}.png`; + target.setAttribute("data-valid", `${!isPasswordCheckVisible}`); +}; +passwordCheckVisibilityButton.addEventListener( + "click", + handleTogglePasswordCheckVisibilityButton +); + +import { + showErrorMessage, + hideErrorMessage, + activeButton, + disableButton, +} from "../auth.js";