diff --git a/.DS_Store b/.DS_Store index 4270b908..f5b1eaec 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/js/login.js b/js/login.js new file mode 100644 index 00000000..46ac6bd3 --- /dev/null +++ b/js/login.js @@ -0,0 +1,80 @@ +function showError(inputEl, message) { + const errorEl = inputEl.parentElement.querySelector('.error-message'); + inputEl.classList.add('error'); + if (errorEl) errorEl.textContent = message; +} + +function clearError(inputEl) { + const errorEl = inputEl.parentElement.querySelector('.error-message'); + inputEl.classList.remove('error'); + if (errorEl) errorEl.textContent = ''; +} + +// 이메일 input에서 focus out 할 때, +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다. +// 이메일 input에서 focus out 할 때, +// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다. + +const emailInput = document.querySelector('#login-email'); +const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + +emailInput.addEventListener('focusout', function() { + if (emailInput.value === '') { + showError(emailInput, '이메일을 입력해주세요.'); + } else if (!emailPattern.test(emailInput.value)) { + showError(emailInput, '잘못된 이메일 형식입니다'); + } else { + clearError(emailInput); + } +}); + +// 비밀번호 input에서 focus out 할 때, +// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다 +// 비밀번호 input에서 focus out 할 때, +// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다. + +const pwInput = document.querySelector('#password'); + +function validatePassword() { + if (pwInput.value === '') { + showError(pwInput, '비밀번호를 입력해주세요.'); + } else if (pwInput.value.length < 8) { + showError(pwInput, '비밀번호를 8자 이상 입력해주세요.'); + } else { + clearError(pwInput)}; +} + +pwInput.addEventListener('focusout', validatePassword) +pwInput.addEventListener('input', validatePassword) + +// input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다. +// Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다. + +const allInput = document.querySelectorAll('input'); +const loginBtn = document.querySelector('#login-btn'); + +function checkAllValid() { + let isValid = true; + + allInput.forEach((input) => { + const errorText = input.parentElement.querySelector('.error-message').textContent; + if (input.value ==='' || errorText !== '') { + isValid = false; + } + }); + + loginBtn.disabled = !isValid; +} + +allInput.forEach((input) => { + input.addEventListener('input', checkAllValid); + input.addEventListener('focusout', checkAllValid); +}); + +// 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다. + +loginBtn.addEventListener('click', () => { + if (!loginBtn.disabled) { + window.location.href = '/itmes'; + } +}); diff --git a/js/signup.js b/js/signup.js index 6c2fd823..20d33de8 100644 --- a/js/signup.js +++ b/js/signup.js @@ -11,12 +11,10 @@ function clearError(inputEl) { } // 이메일 input에서 focus out 할 때, -// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” -// 빨강색 에러 메세지를 보입니다. +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다. // 이메일 input에서 focus out 할 때, -// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” -// 빨강색 에러 메세지를 보입니다. +// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다. const emailInput = document.querySelector('#login-email'); const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; @@ -27,12 +25,12 @@ emailInput.addEventListener('focusout', function() { } else if (!emailPattern.test(emailInput.value)) { showError(emailInput, '잘못된 이메일 형식입니다'); } else { - clearError(emailInput)}; - }); + clearError(emailInput); + } +}); // 닉네임 input에서 focus out 할 때, -// 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” -// 빨강색 에러 메세지를 보입니다. +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다. const nicknameInput = document.querySelector('#nickname'); @@ -45,15 +43,15 @@ nicknameInput.addEventListener('focusout', function() { }); // 비밀번호 input에서 focus out 할 때, -// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” -// 에러 메세지를 보입니다 +// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다 // 비밀번호 input에서 focus out 할 때, -// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” -// 에러 메세지를 보입니다. +// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다. // 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, // 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” // 에러 메세지를 보입니다. +const pwInput = document.querySelector('#password'); +const pwcheckInput = document.querySelector('#password-check'); function validatePassword() { if (pwInput.value === '') { @@ -66,7 +64,7 @@ function validatePassword() { } function validatePasswordMatch() { - if (pwcheckInput.value !== pwInput.value && pwcheckInput !== '') { + if (pwcheckInput.value === '' || pwcheckInput.value !== pwInput.value) { showError(pwcheckInput, '비밀번호가 일치하지 않습니다..'); } else { clearError(pwcheckInput); @@ -82,5 +80,30 @@ pwcheckInput.addEventListener('input', validatePasswordMatch) // input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다. // Input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다. -// 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다 +const allInput = document.querySelectorAll('input'); +const signupBtn = document.querySelector('#signup-btn'); + +function checkAllValid() { + let isValid = true; + + allInput.forEach((input) => { + const errorText = input.parentElement.querySelector('.error-message').textContent; + if (input.value ==='' || errorText !== '') { + isValid = false; + } + }); + signupBtn.disabled = !isValid; +} + +allInput.forEach((input) => { + input.addEventListener('input', checkAllValid); + input.addEventListener('focusout', checkAllValid); +}); + +// 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다 +signupBtn.addEventListener('click', () => { + if (!signupBtn.disabled) { + window.location.href = '/login'; + } +}); diff --git a/login-page.html b/login-page.html index b421dfd3..0b29e25e 100644 --- a/login-page.html +++ b/login-page.html @@ -30,6 +30,7 @@ placeholder="이메일을 입력해주세요" required /> +
@@ -40,10 +41,11 @@ placeholder="비밀번호를 입력해주세요" required /> +
-
+
+

간편 로그인하기

-
+
+

간편 로그인하기