[장준혁] Sprint4

pages/signin/index.html

@@ -13,7 +13,7 @@
       <a href="/"><img src="/images/logo_l.png" alt="logo_l" id="logo_l" /></a>
       <div id="inner_container">
         <!-- 로그인 기능이 구현되지 않았으므로 홈으로 돌아가는 링크 설정 -->
-        <form action="/">
+        <form action="/pages/items/">
           <label for="email">이메일</label>
           <input
             type="email"
@@ -22,6 +22,12 @@
             placeholder="이메일을 입력해주세요"
             required
           />
+          <p id="emailEmptyMessage" class="error_message hidden">
+            이메일을 입력해주세요
+          </p>
+          <p id="emailInvalidMessage" class="error_message hidden">
+            잘못된 이메일 형식입니다
+          </p>
           <div class="pwd_container">
             <label for="pwd">비밀번호</label>
             <input
@@ -31,9 +37,25 @@
               placeholder="비밀번호를 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signinFormValidation.togglePasswordVisibility()"
+            >
+              <img
+                id="pwdimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwd"
+              />
+            </button>
           </div>
-          <button type="submit">로그인</button>
+          <p id="passwordEmptyMessage" class="error_message hidden">
+            비밀번호를 입력해주세요
+          </p>
+          <p id="passwordInvalidMessage" class="error_message hidden">
+            비밀번호를 8자 이상 입력해주세요
+          </p>
+          <button id="submitBtn" type="submit" disabled>로그인</button>
         </form>
         <div id="sns_container">
           간편 로그인하기
@@ -52,5 +74,6 @@
         </div>
       </div>
     </div>
+    <script src="/scripts/auth/val-signin-text.js"></script>
   </body>
 </html>

pages/signup/index.html

@@ -13,7 +13,7 @@
       <a href="/"><img src="/images/logo_l.png" alt="logo_l" id="logo_l" /></a>
       <div id="inner_container">
         <!-- 로그인 기능이 구현되지 않았으므로 홈으로 돌아가는 링크 설정 -->
-        <form action="/">
+        <form action="/pages/signin/">
           <label for="email">이메일</label>
           <input
             type="email"
@@ -22,6 +22,12 @@
             placeholder="이메일을 입력해주세요"
             required
           />
+          <p id="emailEmptyMessage" class="error_message hidden">
+            이메일을 입력해주세요
+          </p>
+          <p id="emailInvalidMessage" class="error_message hidden">
+            잘못된 이메일 형식입니다
+          </p>
           <label for="nickname">닉네임</label>
           <input
             type="text"
@@ -30,6 +36,9 @@
             placeholder="닉네임을 입력해주세요"
             required
           />
+          <p id="nicknameEmptyMessage" class="error_message hidden">
+            닉네임을 입력해주세요
+          </p>
           <div class="pwd_container">
             <label for="pwd">비밀번호</label>
             <input
@@ -39,8 +48,24 @@
               placeholder="비밀번호를 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signupFormValidation.togglePasswordVisibility()"
+            >
+              <img
+                id="pwdimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwd"
+              />
+            </button>
           </div>
+          <p id="passwordEmptyMessage" class="error_message hidden">
+            비밀번호를 입력해주세요
+          </p>
+          <p id="passwordInvalidMessage" class="error_message hidden">
+            비밀번호를 8자 이상 입력해주세요
+          </p>
           <div class="pwd_container">
             <label for="pwdchk">비밀번호 확인</label>
             <input
@@ -50,9 +75,22 @@
               placeholder="비밀번호를 다시 한 번 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signupFormValidation.togglePasswordCheckVisibility()"
+            >
+              <img
+                id="pwdchkimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwdchk"
+              />
+            </button>
           </div>
-          <button type="submit">회원가입</button>
+          <p id="passwordCheckNotMatchMessage" class="error_message hidden">
+            비밀번호가 일치하지 않습니다.
+          </p>
+          <button id="submitBtn" type="submit" disabled>회원가입</button>
         </form>
         <div id="sns_container">
           간편 로그인하기
@@ -71,5 +109,6 @@
         </div>
       </div>
     </div>
+    <script src="/scripts/auth/val-signup-text.js"></script>
   </body>
 </html>

scripts/auth/val-signin-text.js

@@ -0,0 +1,90 @@
+const signinFormValidation = (function () {
+  let isEmailValid = false;
+  let isPasswordValid = false;
+
+  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;
+      } 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();
+
+  return {
+    togglePasswordVisibility: togglePasswordVisibility,
+  };
+})();

scripts/auth/val-signup-text.js

@@ -0,0 +1,152 @@
+const signupFormValidation = (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");
+
+    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;
+      } 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();
+
+  return {
+    togglePasswordVisibility: togglePasswordVisibility,
+    togglePasswordCheckVisibility: togglePasswordCheckVisibility,
+  };
+})();