|
| 1 | + |
| 2 | +const email = document.querySelector("#user_email"); |
| 3 | +const password = document.querySelector("#user_password"); |
| 4 | +const error_massage_id = document.querySelector(".error_massage_id"); |
| 5 | +const error_massage_pw = document.querySelector(".error_massage_pw"); |
| 6 | +const submit_btn = document.querySelector(".submit_btn"); |
| 7 | +const user_login_form = document.querySelector(".user_login_form"); |
| 8 | + |
| 9 | +const pw_block_icon = document.querySelector(".pw_block"); |
| 10 | +const pw_hide_icon = document.querySelector(".pw_hide"); |
| 11 | + |
| 12 | +const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; |
| 13 | + |
| 14 | +function handleFocus(element, isFocused) { |
| 15 | + element.classList.toggle('focused', isFocused); |
| 16 | +} |
| 17 | + |
| 18 | +email.addEventListener('blur', function(e) { |
| 19 | + e.preventDefault(); |
| 20 | + const email_value = email.value; |
| 21 | + const isValidEmail = emailRegex.test(email_value); |
| 22 | + |
| 23 | + if (!isValidEmail) { |
| 24 | + console.log('성공'); |
| 25 | + error_massage_id.innerText = "올바른 이메일 주소가 아닙니다." |
| 26 | + } else { |
| 27 | + console.log('실패'); |
| 28 | + error_massage_id.innerText = "" |
| 29 | + } |
| 30 | + |
| 31 | + // Apply focus-related styles |
| 32 | + handleFocus(email, !isValidEmail); |
| 33 | +}); |
| 34 | + |
| 35 | +password.addEventListener('blur', function(e) { |
| 36 | + e.preventDefault(); |
| 37 | + const password_value = password.value; |
| 38 | + let control = true; |
| 39 | + |
| 40 | + if (password_value === "") { |
| 41 | + console.log('성공'); |
| 42 | + error_massage_pw.innerText = "비밀번호를 입력해 주세요" |
| 43 | + control = true; |
| 44 | + } else { |
| 45 | + console.log('실패'); |
| 46 | + error_massage_pw.innerText = "" |
| 47 | + control = false; |
| 48 | + } |
| 49 | + |
| 50 | + // Apply focus-related styles |
| 51 | + handleFocus(password, control); |
| 52 | +}); |
| 53 | + |
| 54 | +function signIn(email, password) { |
| 55 | + if (email == 'test@codeit.com' && password == 'codeit101') { |
| 56 | + window.location.replace('./folder.html'); |
| 57 | + } else { |
| 58 | + error_massage_id.innerText = '이메일을 확인해 주세요.'; |
| 59 | + error_massage_pw.innerText = '비밀번호를 확인해 주세요.'; |
| 60 | + } |
| 61 | +} |
| 62 | +//버튼에 클릭,엔터 이벤트시에 로그인 함수 기능 추가 |
| 63 | +submit_btn.addEventListener('click', function (e) { |
| 64 | + e.preventDefault(); |
| 65 | + signIn(email.value, password.value); |
| 66 | +}); |
| 67 | +submit_btn.addEventListener('keypress', function (e) { |
| 68 | + e.preventDefault(); |
| 69 | + if (e.key === 'Enter') { |
| 70 | + signIn(email.value, password.value); |
| 71 | + } |
| 72 | +}); |
| 73 | + |
| 74 | +pw_block_icon.addEventListener("click" , () => { |
| 75 | + pw_block_icon.style.display = "none" |
| 76 | + pw_hide_icon.style.display = "block" |
| 77 | + password.type = "text" |
| 78 | +}) |
| 79 | + |
| 80 | +pw_hide_icon.addEventListener("click" , () => { |
| 81 | + pw_hide_icon.style.display = "none" |
| 82 | + pw_block_icon.style.display = "block" |
| 83 | + password.type = "password" |
| 84 | +}) |
| 85 | + |
| 86 | + |
| 87 | + |
0 commit comments