From 249b48867928e11f5311eff6212b8b4b6f63dfa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=83=81=ED=9B=88?= Date: Sat, 23 Mar 2024 14:09:37 +0900 Subject: [PATCH 1/2] =?UTF-8?q?5=EC=A3=BC=EC=B0=A8=20=ED=85=9C=ED=94=8C?= =?UTF-8?q?=EB=A6=BF=20=EC=BD=94=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 6148 -> 6148 bytes signup.html | 16 +++++---- src/signup.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/utils.js | 6 ++++ 4 files changed, 114 insertions(+), 6 deletions(-) diff --git a/.DS_Store b/.DS_Store index 7d2bfd820905f6aba43865164332d3a6acd3984c..e85e8b9dd040232b64b3fb5aaf95e264406b922d 100644 GIT binary patch literal 6148 zcmeHKu};G<5Pfbds9FXVB*q9aBXxr6u}mW58yM{82JKVVc~07 z;hpV5lM*%%LU+>nCH6hv`AM;30A_pAZvo2y>U6_IhbD zoQu>BRX`Q^iwf8e9~+2pg7e(>yEeRG!L{jFl6E@XIPJ2Jn?ZIretK-@$NS%o4+k@Q z!}^P8u{fO@15D7(Wrum4kC?3?YClYCD9n?jpOutH0m^tJK%{VI2QH{T1 z7)NJ+;NwD%nL|g1@s|(dGaG+HF*ZBr4{SJ0=ulf#Ko!U-~aO@eNzQg zfq$idsde@`+gy@ATjv%hXKg?~po>Xd=Fn2u_~Y0<$WgpXx5lwR9*CjG%prSd`XgXv L&_)&bRR!Jwqf)lT delta 90 zcmZoMXfc=|#>B)qF;Q%yo+2aX#(>?7jGUW!ShyL**cdVyav2gC(iu`2ic^Y{bCUA& ra~L-Za)_}^EI6{6or9kPs1wNl&ODi4#F2vm2pAa{ST;w9tYHQK-18K& diff --git a/signup.html b/signup.html index 5e1a68663..595e8f5f4 100644 --- a/signup.html +++ b/signup.html @@ -24,23 +24,26 @@

-
+
- + +

- -
- -
@@ -59,5 +62,6 @@
+ diff --git a/src/signup.js b/src/signup.js index e69de29bb..234371cab 100644 --- a/src/signup.js +++ b/src/signup.js @@ -0,0 +1,98 @@ +import { + setInputError, + removeInputError, + isEmailValid, + isPasswordValid, + togglePassword, + TEST_USER, +} from "./utils.js"; + +const emailInput = document.querySelector("#email"); +const emailErrorMessage = document.querySelector("#email-error-message"); +emailInput.addEventListener("focusout", (event) => validateEmailInput(event.target.value)); +function validateEmailInput(email) { + if (email === "") { + setInputError({ input: emailInput, errorMessage: emailErrorMessage }, "이메일을 입력해주세요."); + return false; + } + if (!isEmailValid(email)) { + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "올바른 이메일 주소가 아닙니다." + ); + return false; + } + if (email === TEST_USER.email) { + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "이미 사용 중인 이메일입니다." + ); + return false; + } + removeInputError({ input: emailInput, errorMessage: emailErrorMessage }); + return true; +} + +const passwordInput = document.querySelector("#password"); +const passwordErrorMessage = document.querySelector("#password-error-message"); +passwordInput.addEventListener("focusout", (event) => validatePasswordInput(event.target.value)); + +function validatePasswordInput(password) { + if (password === "" || !isPasswordValid(password)) { + setInputError( + { input: passwordInput, errorMessage: passwordErrorMessage }, + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." + ); + return false; + } + removeInputError({ input: passwordInput, errorMessage: passwordErrorMessage }); + return true; +} + +const confirmPasswordInput = document.querySelector("#confirm-password"); +const confirmPasswordErrorMessage = document.querySelector("#confirm-password-error-message"); +confirmPasswordInput.addEventListener("focusout", (event) => + validateConfirmPasswordInput(event.target.value) +); +function validateConfirmPasswordInput(confirmPassword) { + if (confirmPassword === "" || !isPasswordValid(confirmPassword)) { + setInputError( + { input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }, + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." + ); + return false; + } + if (passwordInput.value !== confirmPassword) { + setInputError( + { input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }, + "비밀번호가 일치하지 않아요." + ); + return false; + } + removeInputError({ input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }); + return true; +} + +const passwordToggleButton = document.querySelector("#password-toggle"); +passwordToggleButton.addEventListener("click", () => + togglePassword(passwordInput, passwordToggleButton) +); + +const confirmPasswordToggleButton = document.querySelector("#confirm-password-toggle"); +confirmPasswordToggleButton.addEventListener("click", () => + togglePassword(confirmPasswordInput, confirmPasswordToggleButton) +); + +const signForm = document.querySelector("#form"); +signForm.addEventListener("submit", submitForm); +function submitForm(event) { + event.preventDefault(); + + const isEmailInputValid = validateEmailInput(emailInput.value); + const isPasswordInputValid = validatePasswordInput(passwordInput.value); + const isConfirmPasswordInputValid = validateConfirmPasswordInput(confirmPasswordInput.value); + + if (isEmailInputValid && isPasswordInputValid && isConfirmPasswordInputValid) { + location.href = "/folder"; + } +} diff --git a/src/utils.js b/src/utils.js index 70015dfbf..13abe476c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -18,6 +18,12 @@ export function isEmailValid(email) { return new RegExp(EMAIL_REGEX).test(email); } +export function isPasswordValid(password) { + const isEightLettersOrMore = password.length >= 8; + const hasNumberAndCharacter = password.match(/[0-9]/g) && password.match(/[a-zA-Z]/gi); + return isEightLettersOrMore && hasNumberAndCharacter; +} + export function togglePassword(input, toggleButton) { if (input.getAttribute("type") === "password") { input.setAttribute("type", "text"); From cb7c97d68066910632c15d830d9d466a7335f0cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=83=81=ED=9B=88?= Date: Sun, 24 Mar 2024 17:12:27 +0900 Subject: [PATCH 2/2] =?UTF-8?q?6=EC=A3=BC=EC=B0=A8=20=EC=9C=84=ED=81=B4?= =?UTF-8?q?=EB=A6=AC=20=EA=B3=BC=EC=A0=9C=20=EB=82=B4=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 6148 -> 6148 bytes signin.html | 10 ++++- signup.html | 16 +++++-- src/signin.js | 70 ++++++++++++++++++++++------- src/signup.js | 119 +++++++++++++++++++++++++++++++++++++++----------- 5 files changed, 168 insertions(+), 47 deletions(-) diff --git a/.DS_Store b/.DS_Store index e85e8b9dd040232b64b3fb5aaf95e264406b922d..99be728e7b23251abd5c2f3311a9f42109a88d3c 100644 GIT binary patch delta 254 zcmZoMXfc@J&nUDpU^g?P&}JT%*-Z7!48;sZ49Q95#RW+@`AG~63_Fqvax#lc3=FO@ zGBLBTvaxfpb8vIS2501#2bUz4lomTB7Da=2A^G_^NicR|QdnkcdAxv#bADb)VrE`y z5m-ZJN-9uEOn7EqN`ARheraAxF<5UfM1muUlY=u}K%%4j!O+aOR!5=Q($G>z z!PLy4ww9AaR9W9TC_XzUH!r^n=r|x?WQ5QRyigiObpsht@00}><>ln(r2|D6CnnZ! JX6N|J4*
- +

- 회원이 아니신가요?회원 가입하기 + 회원이 아니신가요?회원 가입하기

diff --git a/signup.html b/signup.html index 595e8f5f4..80dbed473 100644 --- a/signup.html +++ b/signup.html @@ -17,10 +17,16 @@
- +

- 이미 회원이신가요?로그인 하기 + 이미 회원이신가요?로그인 하기

@@ -43,7 +49,11 @@

-
diff --git a/src/signin.js b/src/signin.js index 317cebf11..38a4209d8 100644 --- a/src/signin.js +++ b/src/signin.js @@ -8,10 +8,15 @@ import { const emailInput = document.querySelector("#email"); const emailErrorMessage = document.querySelector("#email-error-message"); -emailInput.addEventListener("focusout", (event) => validateEmailInput(event.target.value)); +emailInput.addEventListener("focusout", (event) => + validateEmailInput(event.target.value) +); function validateEmailInput(email) { if (email === "") { - setInputError({ input: emailInput, errorMessage: emailErrorMessage }, "이메일을 입력해주세요."); + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "이메일을 입력해주세요." + ); return; } if (!isEmailValid(email)) { @@ -26,7 +31,9 @@ function validateEmailInput(email) { const passwordInput = document.querySelector("#password"); const passwordErrorMessage = document.querySelector("#password-error-message"); -passwordInput.addEventListener("focusout", (event) => validatePasswordInput(event.target.value)); +passwordInput.addEventListener("focusout", (event) => + validatePasswordInput(event.target.value) +); function validatePasswordInput(password) { if (password === "") { setInputError( @@ -35,7 +42,10 @@ function validatePasswordInput(password) { ); return; } - removeInputError({ input: passwordInput, errorMessage: passwordErrorMessage }); + removeInputError({ + input: passwordInput, + errorMessage: passwordErrorMessage, + }); } const passwordToggleButton = document.querySelector("#password-toggle"); @@ -45,19 +55,47 @@ passwordToggleButton.addEventListener("click", () => const signForm = document.querySelector("#form"); signForm.addEventListener("submit", submitForm); + function submitForm(event) { event.preventDefault(); + let inputEmailPw = { + email: emailInput.value, + password: passwordInput.value, + }; - const isTestUser = - emailInput.value === TEST_USER.email && passwordInput.value === TEST_USER.password; - - if (isTestUser) { - location.href = "/folder"; - return; - } - setInputError({ input: emailInput, errorMessage: emailErrorMessage }, "이메일을 확인해주세요."); - setInputError( - { input: passwordInput, errorMessage: passwordErrorMessage }, - "비밀번호를 확인해주세요." - ); + fetch("https://bootcamp-api.codeit.kr/api/sign-in", { + method: "POST", + headers: { + "Content-Type": "application/json", // 이 부분 추가 + }, + body: JSON.stringify(inputEmailPw), + }) + .then((response) => { + if (response.ok) { + window.location.href = "/folder"; + } else { + throw new Error("Server responded with an error!"); + } + }) + .catch((error) => { + console.error(error); + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "오류가 발생했습니다. 다시 시도해주세요." + ); + }); } + +// const isTestUser = +// emailInput.value === TEST_USER.email && passwordInput.value === TEST_USER.password; + +// if (isTestUser) { +// location.href = "/folder"; +// return; +// } +// setInputError({ input: emailInput, errorMessage: emailErrorMessage }, "이메일을 확인해주세요."); +// setInputError( +// { input: passwordInput, errorMessage: passwordErrorMessage }, +// "비밀번호를 확인해주세요." +// ); +// } diff --git a/src/signup.js b/src/signup.js index 234371cab..638bbc3e4 100644 --- a/src/signup.js +++ b/src/signup.js @@ -9,33 +9,54 @@ import { const emailInput = document.querySelector("#email"); const emailErrorMessage = document.querySelector("#email-error-message"); -emailInput.addEventListener("focusout", (event) => validateEmailInput(event.target.value)); +emailInput.addEventListener("focusout", (event) => + validateEmailInput(event.target.value) +); function validateEmailInput(email) { if (email === "") { - setInputError({ input: emailInput, errorMessage: emailErrorMessage }, "이메일을 입력해주세요."); - return false; - } - if (!isEmailValid(email)) { - setInputError( - { input: emailInput, errorMessage: emailErrorMessage }, - "올바른 이메일 주소가 아닙니다." - ); - return false; - } - if (email === TEST_USER.email) { setInputError( { input: emailInput, errorMessage: emailErrorMessage }, - "이미 사용 중인 이메일입니다." + "이메일을 입력해주세요." ); - return false; + return; } - removeInputError({ input: emailInput, errorMessage: emailErrorMessage }); - return true; + + fetch("https://bootcamp-api.codeit.kr/api/check-email", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email: email }), // 수정됨 + }) + .then((response) => response.json()) // 응답을 JSON으로 파싱 + .then((data) => { + if (data.isAvailable) { + // 가정: 응답에 isAvailable 필드가 있다고 가정 + removeInputError({ + input: emailInput, + errorMessage: emailErrorMessage, + }); + } else { + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "이미 사용 중인 이메일입니다." + ); + } + }) + .catch((error) => { + console.error("Error checking email:", error); + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "이메일 확인 중 오류가 발생했습니다." + ); + }); } const passwordInput = document.querySelector("#password"); const passwordErrorMessage = document.querySelector("#password-error-message"); -passwordInput.addEventListener("focusout", (event) => validatePasswordInput(event.target.value)); +passwordInput.addEventListener("focusout", (event) => + validatePasswordInput(event.target.value) +); function validatePasswordInput(password) { if (password === "" || !isPasswordValid(password)) { @@ -45,31 +66,45 @@ function validatePasswordInput(password) { ); return false; } - removeInputError({ input: passwordInput, errorMessage: passwordErrorMessage }); + removeInputError({ + input: passwordInput, + errorMessage: passwordErrorMessage, + }); return true; } const confirmPasswordInput = document.querySelector("#confirm-password"); -const confirmPasswordErrorMessage = document.querySelector("#confirm-password-error-message"); +const confirmPasswordErrorMessage = document.querySelector( + "#confirm-password-error-message" +); confirmPasswordInput.addEventListener("focusout", (event) => validateConfirmPasswordInput(event.target.value) ); function validateConfirmPasswordInput(confirmPassword) { if (confirmPassword === "" || !isPasswordValid(confirmPassword)) { setInputError( - { input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }, + { + input: confirmPasswordInput, + errorMessage: confirmPasswordErrorMessage, + }, "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." ); return false; } if (passwordInput.value !== confirmPassword) { setInputError( - { input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }, + { + input: confirmPasswordInput, + errorMessage: confirmPasswordErrorMessage, + }, "비밀번호가 일치하지 않아요." ); return false; } - removeInputError({ input: confirmPasswordInput, errorMessage: confirmPasswordErrorMessage }); + removeInputError({ + input: confirmPasswordInput, + errorMessage: confirmPasswordErrorMessage, + }); return true; } @@ -78,7 +113,9 @@ passwordToggleButton.addEventListener("click", () => togglePassword(passwordInput, passwordToggleButton) ); -const confirmPasswordToggleButton = document.querySelector("#confirm-password-toggle"); +const confirmPasswordToggleButton = document.querySelector( + "#confirm-password-toggle" +); confirmPasswordToggleButton.addEventListener("click", () => togglePassword(confirmPasswordInput, confirmPasswordToggleButton) ); @@ -90,9 +127,39 @@ function submitForm(event) { const isEmailInputValid = validateEmailInput(emailInput.value); const isPasswordInputValid = validatePasswordInput(passwordInput.value); - const isConfirmPasswordInputValid = validateConfirmPasswordInput(confirmPasswordInput.value); + const isConfirmPasswordInputValid = validateConfirmPasswordInput( + confirmPasswordInput.value + ); - if (isEmailInputValid && isPasswordInputValid && isConfirmPasswordInputValid) { - location.href = "/folder"; + if ( + isEmailInputValid && + isPasswordInputValid && + isConfirmPasswordInputValid + ) { + fetch("https://bootcamp-api.codeit.kr/api/sign-up", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: emailInput.value, + password: passwordInput.value, + }), + }) + .then((response) => { + if (response.ok) { + window.location.href = "/folder"; + } else { + throw new Error("Server responded with an error!"); + } + }) + .catch((error) => { + console.error(error); + setInputError( + { input: emailInput, errorMessage: emailErrorMessage }, + "오류가 발생했습니다. 다시 시도해주세요." + ); + }); } + location.href = "/folder"; }