From 397a17e518bed6d832a37e701a4ba1f09c8a0b79 Mon Sep 17 00:00:00 2001 From: Hayden Date: Wed, 11 Oct 2023 14:58:03 +0900 Subject: [PATCH 01/17] =?UTF-8?q?refactor(mentor):=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=BD=98=EC=86=94=20=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/signup.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/utils/signup.js b/utils/signup.js index e60b41482..8b8cb052b 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -114,7 +114,6 @@ function checkPasswordFocusout(password) { } function checkPasswordConfirmFocusout(passwordConfirm) { - console.log(passwordConfirm, passwordInputElement.value); if (passwordConfirm === "") { changePasswordConfirmHint(INPUT_STATUS.isNotFilled); } else if (passwordConfirm !== passwordInputElement.value) { @@ -154,7 +153,6 @@ function getIsValidatedPassword(password) { } function getIsConfirmedPassword(passwordConfirm) { - console.log(passwordConfirm, passwordInputElement.value); if (passwordConfirm === "") { changePasswordConfirmHint(INPUT_STATUS.isNotFilled); return false; From cf58e46b32f15e549282bb011cf9ff6d50844b16 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 13:16:49 +0900 Subject: [PATCH 02/17] =?UTF-8?q?refactor(mentor):=20constants=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94=20=EB=B0=8F=20=EB=AA=A8=EB=93=88=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/auth.js | 72 ++-------------------------------------------- utils/constants.js | 66 ++++++++++++++++++++++++++++++++++++++++++ utils/signin.js | 11 +++---- utils/signup.js | 12 +++----- 4 files changed, 77 insertions(+), 84 deletions(-) create mode 100644 utils/constants.js diff --git a/utils/auth.js b/utils/auth.js index 889aafe04..35a184cc5 100644 --- a/utils/auth.js +++ b/utils/auth.js @@ -1,76 +1,10 @@ -/* 비밀번호 토글 */ -// 상수 -const PASSWORD_TOGGLE_CONSTANT = { - visible: { - inputType: "text", - imageSrc: "/public/icons/password-visible.svg", - imageAlt: "비밀번호 보이기 아이콘", - }, - invisible: { - inputType: "password", - imageSrc: "/public/icons/password-invisible.svg", - imageAlt: "비밀번호 숨김 아이콘", - }, -}; +import { PASSWORD_TOGGLE_CONSTANT } from "/utils/constants.js"; -// DOM 요소 -const passwordToggleElement = document.querySelector(".auth__toggle-password"); - -// 함수 +// 비밀번호 토글 function getPasswordVisibility(inputType) { return inputType === "password" ? PASSWORD_TOGGLE_CONSTANT.visible : PASSWORD_TOGGLE_CONSTANT.invisible; } -/* 유효성 검사 */ -// 상수 -const USERS = [ - { - email: "test@codeit.com", - password: "codeit101", - }, -]; - -const AUTH_HINT = { - email: { - default: "", - isNotFilled: "이메일을 입력해주세요.", - isNotValidated: "올바른 이메일 주소가 아닙니다.", - isNotExists: "이메일을 변경해주세요.", - isExists: "이미 사용중인 이메일입니다.", - }, - password: { - default: "", - isNotFilled: "비밀번호를 입력해주세요.", - isNotExists: "비밀번호를 변경해주세요.", - isNotValidated: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.", - isNotConfirmed: "비밀번호가 일치하지 않아요.", - }, -}; - -const EMAIL_PATTERN = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; - -const INPUT_STATUS = { - default: "default", - isNotFilled: "isNotFilled", - isNotValidated: "isNotValidated", - isExists: "isExists", - isNotExists: "isNotExists", - isNotConfirmed: "isNotConfirmed", -}; - -const INPUT_HINT_CLASSNAME = "auth__input--hint"; - -const FOLDER_PAGE_PATH = "/pages/forder.html"; - -export { - passwordToggleElement, - getPasswordVisibility, - USERS, - AUTH_HINT, - EMAIL_PATTERN, - INPUT_STATUS, - INPUT_HINT_CLASSNAME, - FOLDER_PAGE_PATH, -}; +export { getPasswordVisibility }; diff --git a/utils/constants.js b/utils/constants.js new file mode 100644 index 000000000..6660cf16e --- /dev/null +++ b/utils/constants.js @@ -0,0 +1,66 @@ +// 로그인, 회원가입 폼 비밀번호 토글 +const PASSWORD_TOGGLE_CONSTANT = { + visible: { + inputType: "text", + imageSrc: "/public/icons/password-visible.svg", + imageAlt: "비밀번호 보이기 아이콘", + }, + invisible: { + inputType: "password", + imageSrc: "/public/icons/password-invisible.svg", + imageAlt: "비밀번호 숨김 아이콘", + }, +}; + +// 로그인, 회원가입 +const USERS = [ + { + email: "test@codeit.com", + password: "codeit101", + }, +]; + +const AUTH_HINT = { + email: { + default: "", + isNotFilled: "이메일을 입력해주세요.", + isNotValidated: "올바른 이메일 주소가 아닙니다.", + isNotExists: "이메일을 변경해주세요.", + isExists: "이미 사용중인 이메일입니다.", + }, + password: { + default: "", + isNotFilled: "비밀번호를 입력해주세요.", + isNotExists: "비밀번호를 변경해주세요.", + isNotValidated: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.", + isNotConfirmed: "비밀번호가 일치하지 않아요.", + }, +}; + +const EMAIL_PATTERN = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; + +const PASSWORD_PATTERN = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/; + +const INPUT_STATUS = { + default: "default", + isNotFilled: "isNotFilled", + isNotValidated: "isNotValidated", + isExists: "isExists", + isNotExists: "isNotExists", + isNotConfirmed: "isNotConfirmed", +}; + +const INPUT_HINT_CLASSNAME = "auth__input--hint"; + +const FOLDER_PAGE_PATH = "/pages/forder.html"; + +export { + PASSWORD_TOGGLE_CONSTANT, + USERS, + AUTH_HINT, + EMAIL_PATTERN, + PASSWORD_PATTERN, + INPUT_STATUS, + INPUT_HINT_CLASSNAME, + FOLDER_PAGE_PATH, +}; diff --git a/utils/signin.js b/utils/signin.js index c3e3d3e53..03cc0c690 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,16 +1,16 @@ +import { getPasswordVisibility } from "/utils/auth.js"; import { - passwordToggleElement, - getPasswordVisibility, USERS, AUTH_HINT, EMAIL_PATTERN, INPUT_STATUS, INPUT_HINT_CLASSNAME, FOLDER_PAGE_PATH, -} from "/utils/auth.js"; +} from "/utils/constants.js"; /* 비밀번호 토글 */ -// 이벤트 핸들러 +const passwordToggleElement = document.querySelector(".auth__toggle-password"); + passwordToggleElement.addEventListener("click", () => { const passwordInput = document.querySelector(".auth__input-password"); const passwordIcon = document.querySelector(".auth__icon-password"); @@ -23,14 +23,12 @@ passwordToggleElement.addEventListener("click", () => { }); /* 유효성 검사 */ -// DOM 요소 const emailInputElement = document.querySelector(".auth__input-email"); const passwordInputElement = document.querySelector(".auth__input-password"); const emailHintElement = document.querySelector(".auth__email-hint"); const passwordHintElement = document.querySelector(".auth__password-hint"); const signinButtonElement = document.querySelector(".signin__button"); -// 함수 function changeEmailHint(hintType) { if (emailHintElement.innerText === AUTH_HINT.email[hintType]) return; // 이전 상태와 바꾸려는 상태가 동일할 경우 리턴 emailHintElement.innerText = AUTH_HINT.email[hintType]; @@ -53,7 +51,6 @@ function changePasswordHint(hintType) { } } -// 함수 function checkEmailFocusout(email) { if (email === "") { changeEmailHint(INPUT_STATUS.isNotFilled); diff --git a/utils/signup.js b/utils/signup.js index 8b8cb052b..b7c62574b 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -1,16 +1,15 @@ +import { getPasswordVisibility } from "/utils/auth.js"; import { - passwordToggleElement, - getPasswordVisibility, USERS, AUTH_HINT, EMAIL_PATTERN, + PASSWORD_PATTERN, INPUT_STATUS, INPUT_HINT_CLASSNAME, FOLDER_PAGE_PATH, -} from "/utils/auth.js"; +} from "/utils/constants.js"; /* 비밀번호 토글 */ -// DOM 요소 const passwordConfirmToggleElement = document.querySelector( ".auth__toggle-password--confirm" ); @@ -20,8 +19,8 @@ const passwordConfirmInputElement = document.querySelector( const passwordConfirmIconElement = document.querySelector( ".auth__icon-password--confirm" ); +const passwordToggleElement = document.querySelector(".auth__toggle-password"); -// 핸들러 passwordToggleElement.addEventListener("click", () => { const passwordInput = document.querySelector(".auth__input-password"); const passwordIcon = document.querySelector(".auth__icon-password"); @@ -44,9 +43,6 @@ passwordConfirmToggleElement.addEventListener("click", () => { }); /* 유효성 검사 */ -// 상수 -const PASSWORD_PATTERN = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/; - // DOM 요소 const emailInputElement = document.querySelector(".auth__input-email"); const passwordInputElement = document.querySelector(".auth__input-password"); From 3b94412a48ddf69f07e0f70c5a1bcc3697f8b12b Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 13:26:26 +0900 Subject: [PATCH 03/17] =?UTF-8?q?refactor(mentor):=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=AA=85=EC=9D=84=20=EB=8F=99=EC=9E=91=20=EB=82=B4=EC=9A=A9?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/signup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utils/signup.js b/utils/signup.js index b7c62574b..cf59e4da7 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -160,7 +160,7 @@ function getIsConfirmedPassword(passwordConfirm) { } } -function signupSuccess() { +function goToFolderPage() { location.href = FOLDER_PAGE_PATH; } @@ -170,7 +170,7 @@ function clickSignup(email, password, passwordConfirm) { const isConfirmedPassword = getIsConfirmedPassword(passwordConfirm); if (isValidatedEmail && isValidatedPassword && isConfirmedPassword) - signupSuccess(); + goToFolderPage(); } emailInputElement.addEventListener("focusout", (e) => { From b2f77d8f8e50b18b800b507d7b4a440072ef9ce0 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 13:29:46 +0900 Subject: [PATCH 04/17] =?UTF-8?q?refactor(mentor):=20clickSignin=20?= =?UTF-8?q?=EA=B0=80=EB=8F=85=EC=84=B1=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/signin.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/utils/signin.js b/utils/signin.js index 03cc0c690..68a2b132d 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -104,7 +104,11 @@ function signinSuccess() { function clickSignin(email, password) { const isUserEmail = getIsUserEmail(email); - if (!isUserEmail) return checkPasswordFocusout(password); // TODO 유저 이메일이 아닌경우 비밀번호 입력 여부만 검사하고 리턴 + if (!isUserEmail) { + // TODO 유저 이메일이 아닌경우 비밀번호 입력 여부만 검사하고 리턴 + checkPasswordFocusout(password); + return; + } const isUserPassword = getIsUserPassword(password); if (isUserEmail && isUserPassword) signinSuccess(); } From 717bab5191f1c110137d6a2a6bb09a6b565709ea Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 13:36:41 +0900 Subject: [PATCH 05/17] =?UTF-8?q?refactor(mentor):=20signinSuccess=20goToF?= =?UTF-8?q?olderPage=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/auth.js | 7 ++++++- utils/signin.js | 6 +++--- utils/signup.js | 7 +------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/utils/auth.js b/utils/auth.js index 35a184cc5..4a537204c 100644 --- a/utils/auth.js +++ b/utils/auth.js @@ -7,4 +7,9 @@ function getPasswordVisibility(inputType) { : PASSWORD_TOGGLE_CONSTANT.invisible; } -export { getPasswordVisibility }; +// 로그인, 회원가입 +function goToFolderPage() { + location.href = FOLDER_PAGE_PATH; +} + +export { getPasswordVisibility, goToFolderPage }; diff --git a/utils/signin.js b/utils/signin.js index 68a2b132d..212eb033d 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,4 +1,4 @@ -import { getPasswordVisibility } from "/utils/auth.js"; +import { goToFolderPage, getPasswordVisibility } from "/utils/auth.js"; import { USERS, AUTH_HINT, @@ -98,7 +98,7 @@ function getIsUserPassword(password) { } } -function signinSuccess() { +function goToFolderPage() { location.href = FOLDER_PAGE_PATH; } @@ -110,7 +110,7 @@ function clickSignin(email, password) { return; } const isUserPassword = getIsUserPassword(password); - if (isUserEmail && isUserPassword) signinSuccess(); + if (isUserEmail && isUserPassword) goToFolderPage(); } // 이벤트 핸들러 등록 diff --git a/utils/signup.js b/utils/signup.js index cf59e4da7..a1a3473e3 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -1,4 +1,4 @@ -import { getPasswordVisibility } from "/utils/auth.js"; +import { goToFolderPage, getPasswordVisibility } from "/utils/auth.js"; import { USERS, AUTH_HINT, @@ -6,7 +6,6 @@ import { PASSWORD_PATTERN, INPUT_STATUS, INPUT_HINT_CLASSNAME, - FOLDER_PAGE_PATH, } from "/utils/constants.js"; /* 비밀번호 토글 */ @@ -160,10 +159,6 @@ function getIsConfirmedPassword(passwordConfirm) { } } -function goToFolderPage() { - location.href = FOLDER_PAGE_PATH; -} - function clickSignup(email, password, passwordConfirm) { const isValidatedEmail = getIsValidatedEmail(email); const isValidatedPassword = getIsValidatedPassword(password); From 30818eca47ebe596b5c26ed3abc420a38d7d03cc Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 14:08:07 +0900 Subject: [PATCH 06/17] =?UTF-8?q?refactor(mentor):=20clickSignup=20named?= =?UTF-8?q?=20params=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/signup.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/utils/signup.js b/utils/signup.js index a1a3473e3..5eae3a9bd 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -159,7 +159,7 @@ function getIsConfirmedPassword(passwordConfirm) { } } -function clickSignup(email, password, passwordConfirm) { +function clickSignup({ email, password, passwordConfirm }) { const isValidatedEmail = getIsValidatedEmail(email); const isValidatedPassword = getIsValidatedPassword(password); const isConfirmedPassword = getIsConfirmedPassword(passwordConfirm); @@ -190,9 +190,9 @@ passwordInputElement.addEventListener("focusout", (e) => { signupButtonElement.addEventListener("click", (e) => { e.preventDefault(); - clickSignup( - emailInputElement.value, - passwordInputElement.value, - passwordConfirmInputElement.value - ); + clickSignup({ + email: emailInputElement.value, + password: passwordInputElement.value, + passwordConfirm: passwordConfirmInputElement.value, + }); }); From a889b5c8d0bc2f98334bb31e90ef659355cd340b Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 17:52:32 +0900 Subject: [PATCH 07/17] =?UTF-8?q?refactor(mentor):=20=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20isNotCorrect=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/constants.js | 3 ++- utils/signin.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/utils/constants.js b/utils/constants.js index 6660cf16e..97579cd05 100644 --- a/utils/constants.js +++ b/utils/constants.js @@ -31,7 +31,7 @@ const AUTH_HINT = { password: { default: "", isNotFilled: "비밀번호를 입력해주세요.", - isNotExists: "비밀번호를 변경해주세요.", + isNotCorrect: "비밀번호를 변경해주세요.", isNotValidated: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.", isNotConfirmed: "비밀번호가 일치하지 않아요.", }, @@ -48,6 +48,7 @@ const INPUT_STATUS = { isExists: "isExists", isNotExists: "isNotExists", isNotConfirmed: "isNotConfirmed", + isNotCorrect: "isNotCorrect", }; const INPUT_HINT_CLASSNAME = "auth__input--hint"; diff --git a/utils/signin.js b/utils/signin.js index 212eb033d..bb1706a74 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -90,7 +90,7 @@ function getIsUserPassword(password) { changePasswordHint(INPUT_STATUS.isNotFilled); return false; } else if (password !== USERS[0].password) { - changePasswordHint(INPUT_STATUS.isNotExists); + changePasswordHint(INPUT_STATUS.isNotCorrect); return false; } else { changePasswordHint(INPUT_STATUS.default); From 95579d7898398ec4a2c5867379ccf921ff24ee8b Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 18:06:25 +0900 Subject: [PATCH 08/17] =?UTF-8?q?refactor(mentor):=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EB=A1=9C=EC=A7=81=20=ED=95=A8=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/auth.js | 88 ++++++++++++++++++++++++++++++++++++++++- utils/signin.js | 33 ++++++++-------- utils/signup.js | 101 +++++++++++++++++++++++++++--------------------- 3 files changed, 159 insertions(+), 63 deletions(-) diff --git a/utils/auth.js b/utils/auth.js index 4a537204c..353bf3ea6 100644 --- a/utils/auth.js +++ b/utils/auth.js @@ -1,4 +1,10 @@ -import { PASSWORD_TOGGLE_CONSTANT } from "/utils/constants.js"; +import { + USERS, + EMAIL_PATTERN, + PASSWORD_PATTERN, + PASSWORD_TOGGLE_CONSTANT, + FOLDER_PAGE_PATH, +} from "/utils/constants.js"; // 비밀번호 토글 function getPasswordVisibility(inputType) { @@ -12,4 +18,82 @@ function goToFolderPage() { location.href = FOLDER_PAGE_PATH; } -export { getPasswordVisibility, goToFolderPage }; +function getIsFilledEmail(email) { + if (email !== "") { + return true; + } else { + return false; + } +} + +function getIsValidEmail(email) { + if (EMAIL_PATTERN.test(email)) { + return true; + } else { + return false; + } +} + +function getIsExistEmail(email) { + if (email === USERS[0].email) { + return true; + } else { + return false; + } +} + +function getIsFilledPassword(password) { + if (password !== "") { + return true; + } else { + return false; + } +} + +function getIsValidPassword(password) { + if (PASSWORD_PATTERN.test(password)) { + return true; + } else { + return false; + } +} + +function getIsCorrectPassword(password) { + if (password === USERS[0].password) { + return true; + } else { + return false; + } +} + +function getIsFilledConfirmPassword(confirmPassword) { + if (confirmPassword !== "") { + return true; + } else { + return false; + } +} + +function getIsConfirmedConfirmPassword( + confirmPassword, + passwordInputElementValue +) { + if (confirmPassword === passwordInputElementValue) { + return true; + } else { + return false; + } +} + +export { + getPasswordVisibility, + goToFolderPage, + getIsFilledEmail, + getIsValidEmail, + getIsExistEmail, + getIsFilledPassword, + getIsValidPassword, + getIsCorrectPassword, + getIsFilledConfirmPassword, + getIsConfirmedConfirmPassword, +}; diff --git a/utils/signin.js b/utils/signin.js index bb1706a74..7aced4db0 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,11 +1,17 @@ -import { goToFolderPage, getPasswordVisibility } from "/utils/auth.js"; import { - USERS, + goToFolderPage, + getPasswordVisibility, + getIsFilledEmail, + getIsValidEmail, + getIsExistEmail, + getIsFilledPassword, + getIsCorrectPassword, +} from "/utils/auth.js"; + +import { AUTH_HINT, - EMAIL_PATTERN, INPUT_STATUS, INPUT_HINT_CLASSNAME, - FOLDER_PAGE_PATH, } from "/utils/constants.js"; /* 비밀번호 토글 */ @@ -52,9 +58,9 @@ function changePasswordHint(hintType) { } function checkEmailFocusout(email) { - if (email === "") { + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); - } else if (!EMAIL_PATTERN.test(email)) { + } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); } else { changeEmailHint(INPUT_STATUS.default); @@ -70,13 +76,13 @@ function checkPasswordFocusout(password) { } function getIsUserEmail(email) { - if (email === "") { + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); return false; - } else if (!EMAIL_PATTERN.test(email)) { + } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); return false; - } else if (email !== USERS[0].email) { + } else if (!getIsExistEmail(email)) { changeEmailHint(INPUT_STATUS.isNotExists); return false; } else { @@ -86,10 +92,10 @@ function getIsUserEmail(email) { } function getIsUserPassword(password) { - if (password === "") { + if (!getIsFilledPassword(password)) { changePasswordHint(INPUT_STATUS.isNotFilled); return false; - } else if (password !== USERS[0].password) { + } else if (!getIsCorrectPassword(password)) { changePasswordHint(INPUT_STATUS.isNotCorrect); return false; } else { @@ -98,10 +104,6 @@ function getIsUserPassword(password) { } } -function goToFolderPage() { - location.href = FOLDER_PAGE_PATH; -} - function clickSignin(email, password) { const isUserEmail = getIsUserEmail(email); if (!isUserEmail) { @@ -113,7 +115,6 @@ function clickSignin(email, password) { if (isUserEmail && isUserPassword) goToFolderPage(); } -// 이벤트 핸들러 등록 emailInputElement.addEventListener("focusout", (e) => { checkEmailFocusout(e.target.value); }); diff --git a/utils/signup.js b/utils/signup.js index 5eae3a9bd..c3c5f80d5 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -1,21 +1,29 @@ -import { goToFolderPage, getPasswordVisibility } from "/utils/auth.js"; import { - USERS, + goToFolderPage, + getPasswordVisibility, + getIsFilledEmail, + getIsValidEmail, + getIsExistEmail, + getIsFilledPassword, + getIsValidPassword, + getIsFilledConfirmPassword, + getIsConfirmedConfirmPassword, +} from "/utils/auth.js"; + +import { AUTH_HINT, - EMAIL_PATTERN, - PASSWORD_PATTERN, INPUT_STATUS, INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; /* 비밀번호 토글 */ -const passwordConfirmToggleElement = document.querySelector( +const confirmPasswordToggleElement = document.querySelector( ".auth__toggle-password--confirm" ); -const passwordConfirmInputElement = document.querySelector( +const confirmPasswordInputElement = document.querySelector( ".auth__input-password--confirm" ); -const passwordConfirmIconElement = document.querySelector( +const confirmPasswordIconElement = document.querySelector( ".auth__icon-password--confirm" ); const passwordToggleElement = document.querySelector(".auth__toggle-password"); @@ -31,28 +39,26 @@ passwordToggleElement.addEventListener("click", () => { passwordIcon.alt = passwordVisibility.imageAlt; }); -passwordConfirmToggleElement.addEventListener("click", () => { +confirmPasswordToggleElement.addEventListener("click", () => { const passwordVisibility = getPasswordVisibility( - passwordConfirmInputElement.type + confirmPasswordInputElement.type ); - passwordConfirmInputElement.type = passwordVisibility.inputType; - passwordConfirmIconElement.src = passwordVisibility.imageSrc; - passwordConfirmIconElement.alt = passwordVisibility.imageAlt; + confirmPasswordInputElement.type = passwordVisibility.inputType; + confirmPasswordIconElement.src = passwordVisibility.imageSrc; + confirmPasswordIconElement.alt = passwordVisibility.imageAlt; }); /* 유효성 검사 */ -// DOM 요소 const emailInputElement = document.querySelector(".auth__input-email"); const passwordInputElement = document.querySelector(".auth__input-password"); const emailHintElement = document.querySelector(".auth__email-hint"); const passwordHintElement = document.querySelector(".auth__password-hint"); -const passwordConfirmHintElement = document.querySelector( +const confirmPasswordHintElement = document.querySelector( ".auth__password-hint--confirm" ); const signupButtonElement = document.querySelector(".signup__button"); -// 함수 function changeEmailHint(hintType) { if (emailHintElement.innerText === AUTH_HINT.email[hintType]) return; // 이전 상태와 바꾸려는 상태가 동일할 경우 리턴 emailHintElement.innerText = AUTH_HINT.email[hintType]; @@ -76,22 +82,23 @@ function changePasswordHint(hintType) { } function changePasswordConfirmHint(hintType) { - if (passwordConfirmHintElement.innerText === AUTH_HINT.password[hintType]) + if (confirmPasswordHintElement.innerText === AUTH_HINT.password[hintType]) return; // 이전 상태와 바꾸려는 상태가 동일할 경우 리턴 - passwordConfirmHintElement.innerText = AUTH_HINT.password[hintType]; + confirmPasswordHintElement.innerText = AUTH_HINT.password[hintType]; if (hintType === INPUT_STATUS.default) { - passwordConfirmInputElement.classList.remove(INPUT_HINT_CLASSNAME); + confirmPasswordInputElement.classList.remove(INPUT_HINT_CLASSNAME); } else { - passwordConfirmInputElement.classList.add(INPUT_HINT_CLASSNAME); + confirmPasswordInputElement.classList.add(INPUT_HINT_CLASSNAME); } } + function checkEmailFocusout(email) { - if (email === "") { + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); - } else if (!EMAIL_PATTERN.test(email)) { + } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); - } else if (email === USERS[0].email) { + } else if (getIsExistEmail(email)) { changeEmailHint(INPUT_STATUS.isExists); } else { changeEmailHint(INPUT_STATUS.default); @@ -99,33 +106,35 @@ function checkEmailFocusout(email) { } function checkPasswordFocusout(password) { - if (password === "") { + if (!getIsFilledPassword(password)) { changePasswordHint(INPUT_STATUS.isNotFilled); - } else if (!PASSWORD_PATTERN.test(password)) { + } else if (!getIsValidPassword(password)) { changePasswordHint(INPUT_STATUS.isNotValidated); } else { changePasswordHint(INPUT_STATUS.default); } } -function checkPasswordConfirmFocusout(passwordConfirm) { - if (passwordConfirm === "") { +function checkPasswordConfirmFocusout(confirmPassword) { + if (!getIsFilledConfirmPassword(confirmPassword)) { changePasswordConfirmHint(INPUT_STATUS.isNotFilled); - } else if (passwordConfirm !== passwordInputElement.value) { + } else if ( + !getIsConfirmedConfirmPassword(confirmPassword, passwordInputElement.value) + ) { changePasswordConfirmHint(INPUT_STATUS.isNotConfirmed); } else { changePasswordConfirmHint(INPUT_STATUS.default); } } -function getIsValidatedEmail(email) { - if (email === "") { +function getIsCompleteEmail(email) { + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); return false; - } else if (!EMAIL_PATTERN.test(email)) { + } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); return false; - } else if (email === USERS[0].email) { + } else if (getIsExistEmail(email)) { changeEmailHint(INPUT_STATUS.isExists); return false; } else { @@ -134,11 +143,11 @@ function getIsValidatedEmail(email) { } } -function getIsValidatedPassword(password) { - if (password === "") { +function getIsCompletePassword(password) { + if (!getIsFilledPassword(password)) { changePasswordHint(INPUT_STATUS.isNotFilled); return false; - } else if (!PASSWORD_PATTERN.test(password)) { + } else if (!getIsValidPassword(password)) { changePasswordHint(INPUT_STATUS.isNotValidated); return false; } else { @@ -147,11 +156,13 @@ function getIsValidatedPassword(password) { } } -function getIsConfirmedPassword(passwordConfirm) { - if (passwordConfirm === "") { +function getIsConfirmedPassword(confirmPassword) { + if (!getIsFilledConfirmPassword(confirmPassword)) { changePasswordConfirmHint(INPUT_STATUS.isNotFilled); return false; - } else if (passwordConfirm !== passwordInputElement.value) { + } else if ( + !getIsConfirmedConfirmPassword(confirmPassword, passwordInputElement.value) + ) { changePasswordConfirmHint(INPUT_STATUS.isNotConfirmed); return false; } else { @@ -159,12 +170,12 @@ function getIsConfirmedPassword(passwordConfirm) { } } -function clickSignup({ email, password, passwordConfirm }) { - const isValidatedEmail = getIsValidatedEmail(email); - const isValidatedPassword = getIsValidatedPassword(password); - const isConfirmedPassword = getIsConfirmedPassword(passwordConfirm); - - if (isValidatedEmail && isValidatedPassword && isConfirmedPassword) +function clickSignup({ email, password, confirmPassword }) { + if ( + getIsCompleteEmail(email) && + getIsCompletePassword(password) && + getIsConfirmedPassword(confirmPassword) + ) goToFolderPage(); } @@ -176,7 +187,7 @@ passwordInputElement.addEventListener("focusout", (e) => { checkPasswordFocusout(e.target.value); }); -passwordConfirmInputElement.addEventListener("focusout", (e) => { +confirmPasswordInputElement.addEventListener("focusout", (e) => { checkPasswordConfirmFocusout(e.target.value); }); @@ -193,6 +204,6 @@ signupButtonElement.addEventListener("click", (e) => { clickSignup({ email: emailInputElement.value, password: passwordInputElement.value, - passwordConfirm: passwordConfirmInputElement.value, + confirmPassword: confirmPasswordInputElement.value, }); }); From 45d65b201c8965afc3e9bd025e9548c16ee73935 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 19:03:39 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20api?= =?UTF-8?q?=20=ED=86=B5=EC=8B=A0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/api.js | 27 +++++++++++++++++++++++++++ utils/constants.js | 3 +++ utils/signin.js | 24 +++++++----------------- 3 files changed, 37 insertions(+), 17 deletions(-) create mode 100644 utils/api.js diff --git a/utils/api.js b/utils/api.js new file mode 100644 index 000000000..8706eb3b5 --- /dev/null +++ b/utils/api.js @@ -0,0 +1,27 @@ +import { BASE_URL } from "./constants.js"; +import { goToFolderPage } from "./auth.js"; + +async function signIn(userData) { + try { + const response = await fetch(`${BASE_URL}/sign-in`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(userData), + }); + + if (!response.ok) { + throw new Error(response.status); + } else { + const result = await response.json(); + const accessToken = result.data.accessToken || "token"; + window.localStorage.setItem("accessToken", accessToken); + goToFolderPage(); + } + } catch (error) { + console.error("로그인 실패:", error); + } +} + +export { signIn }; diff --git a/utils/constants.js b/utils/constants.js index 97579cd05..22ee1ae44 100644 --- a/utils/constants.js +++ b/utils/constants.js @@ -55,6 +55,8 @@ const INPUT_HINT_CLASSNAME = "auth__input--hint"; const FOLDER_PAGE_PATH = "/pages/forder.html"; +const BASE_URL = "https://bootcamp-api.codeit.kr/api"; + export { PASSWORD_TOGGLE_CONSTANT, USERS, @@ -64,4 +66,5 @@ export { INPUT_STATUS, INPUT_HINT_CLASSNAME, FOLDER_PAGE_PATH, + BASE_URL, }; diff --git a/utils/signin.js b/utils/signin.js index 7aced4db0..e88b80ae6 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,5 +1,4 @@ import { - goToFolderPage, getPasswordVisibility, getIsFilledEmail, getIsValidEmail, @@ -14,6 +13,8 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; +import { signIn } from "./api.js"; + /* 비밀번호 토글 */ const passwordToggleElement = document.querySelector(".auth__toggle-password"); @@ -75,29 +76,23 @@ function checkPasswordFocusout(password) { } } -function getIsUserEmail(email) { +function getIsCompleteEmail(email) { if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); return false; } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); return false; - } else if (!getIsExistEmail(email)) { - changeEmailHint(INPUT_STATUS.isNotExists); - return false; } else { changeEmailHint(INPUT_STATUS.default); return true; } } -function getIsUserPassword(password) { +function getIsCompletePassword(password) { if (!getIsFilledPassword(password)) { changePasswordHint(INPUT_STATUS.isNotFilled); return false; - } else if (!getIsCorrectPassword(password)) { - changePasswordHint(INPUT_STATUS.isNotCorrect); - return false; } else { changePasswordHint(INPUT_STATUS.default); return true; @@ -105,14 +100,9 @@ function getIsUserPassword(password) { } function clickSignin(email, password) { - const isUserEmail = getIsUserEmail(email); - if (!isUserEmail) { - // TODO 유저 이메일이 아닌경우 비밀번호 입력 여부만 검사하고 리턴 - checkPasswordFocusout(password); - return; - } - const isUserPassword = getIsUserPassword(password); - if (isUserEmail && isUserPassword) goToFolderPage(); + const isCompleteEmail = getIsCompleteEmail(email); + const isCompletePassword = getIsCompletePassword(password); + if (isCompleteEmail && isCompletePassword) signIn({ email, password }); } emailInputElement.addEventListener("focusout", (e) => { From 808e52b02a28797f8c9048d5f2c2053c061f5932 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 19:28:33 +0900 Subject: [PATCH 10/17] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9E=90?= =?UTF-8?q?=EC=9E=98=ED=95=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/api.js | 1 + utils/signin.js | 9 +++------ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/utils/api.js b/utils/api.js index 8706eb3b5..a563986db 100644 --- a/utils/api.js +++ b/utils/api.js @@ -12,6 +12,7 @@ async function signIn(userData) { }); if (!response.ok) { + // Q1. 필요한가 throw new Error(response.status); } else { const result = await response.json(); diff --git a/utils/signin.js b/utils/signin.js index e88b80ae6..9fdacaea9 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -2,9 +2,7 @@ import { getPasswordVisibility, getIsFilledEmail, getIsValidEmail, - getIsExistEmail, getIsFilledPassword, - getIsCorrectPassword, } from "/utils/auth.js"; import { @@ -99,10 +97,9 @@ function getIsCompletePassword(password) { } } -function clickSignin(email, password) { - const isCompleteEmail = getIsCompleteEmail(email); - const isCompletePassword = getIsCompletePassword(password); - if (isCompleteEmail && isCompletePassword) signIn({ email, password }); +async function clickSignin(email, password) { + if (getIsCompleteEmail(email) && getIsCompletePassword(password)) + await signIn({ email, password }); } emailInputElement.addEventListener("focusout", (e) => { From 79cac56f48ca91f60e1fc41520ebbec263dd5458 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 19:30:43 +0900 Subject: [PATCH 11/17] =?UTF-8?q?feat:=20getIsNewEmail=20api=20=ED=86=B5?= =?UTF-8?q?=EC=8B=A0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/api.js | 24 +++++++++++++++++++++++- utils/auth.js | 9 --------- utils/signup.js | 15 ++++++++++----- 3 files changed, 33 insertions(+), 15 deletions(-) diff --git a/utils/api.js b/utils/api.js index a563986db..a21f980f5 100644 --- a/utils/api.js +++ b/utils/api.js @@ -25,4 +25,26 @@ async function signIn(userData) { } } -export { signIn }; +async function getIsNewEmail(email) { + try { + const response = await fetch(`${BASE_URL}/check-email`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email }), + }); + + if (!response.ok) { + // Q1. 필요한가 + throw new Error(response.status); + } else { + return true; + } + } catch (error) { + console.error(error); + return false; + } +} + +export { signIn, getIsNewEmail }; diff --git a/utils/auth.js b/utils/auth.js index 353bf3ea6..212dd504d 100644 --- a/utils/auth.js +++ b/utils/auth.js @@ -34,14 +34,6 @@ function getIsValidEmail(email) { } } -function getIsExistEmail(email) { - if (email === USERS[0].email) { - return true; - } else { - return false; - } -} - function getIsFilledPassword(password) { if (password !== "") { return true; @@ -90,7 +82,6 @@ export { goToFolderPage, getIsFilledEmail, getIsValidEmail, - getIsExistEmail, getIsFilledPassword, getIsValidPassword, getIsCorrectPassword, diff --git a/utils/signup.js b/utils/signup.js index c3c5f80d5..56bb301c4 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -3,7 +3,6 @@ import { getPasswordVisibility, getIsFilledEmail, getIsValidEmail, - getIsExistEmail, getIsFilledPassword, getIsValidPassword, getIsFilledConfirmPassword, @@ -16,6 +15,8 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; +import { getIsNewEmail } from "/utils/api.js"; + /* 비밀번호 토글 */ const confirmPasswordToggleElement = document.querySelector( ".auth__toggle-password--confirm" @@ -93,12 +94,14 @@ function changePasswordConfirmHint(hintType) { } } -function checkEmailFocusout(email) { +async function checkEmailFocusout(email) { + const isNewEmail = await getIsNewEmail(email); + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); - } else if (getIsExistEmail(email)) { + } else if (!isNewEmail) { changeEmailHint(INPUT_STATUS.isExists); } else { changeEmailHint(INPUT_STATUS.default); @@ -127,14 +130,16 @@ function checkPasswordConfirmFocusout(confirmPassword) { } } -function getIsCompleteEmail(email) { +async function getIsCompleteEmail(email) { + const isNewEmail = await getIsNewEmail(email); + if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); return false; } else if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); return false; - } else if (getIsExistEmail(email)) { + } else if (!isNewEmail) { changeEmailHint(INPUT_STATUS.isExists); return false; } else { From 1a4bcacea5cfa0d504d51a04b9b264aa5146bffb Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 19:35:20 +0900 Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20api=20=ED=86=B5=EC=8B=A0=20=EA=B5=AC=ED=98=84,=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/api.js | 32 ++++++++++++++++++++++++++++---- utils/signup.js | 6 ++++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/utils/api.js b/utils/api.js index a21f980f5..35087d6ff 100644 --- a/utils/api.js +++ b/utils/api.js @@ -1,14 +1,14 @@ import { BASE_URL } from "./constants.js"; import { goToFolderPage } from "./auth.js"; -async function signIn(userData) { +async function signIn({ email, password }) { try { const response = await fetch(`${BASE_URL}/sign-in`, { method: "POST", headers: { "Content-Type": "application/json", }, - body: JSON.stringify(userData), + body: JSON.stringify({ email, password }), }); if (!response.ok) { @@ -16,7 +16,7 @@ async function signIn(userData) { throw new Error(response.status); } else { const result = await response.json(); - const accessToken = result.data.accessToken || "token"; + const accessToken = result.data.accessToken; window.localStorage.setItem("accessToken", accessToken); goToFolderPage(); } @@ -47,4 +47,28 @@ async function getIsNewEmail(email) { } } -export { signIn, getIsNewEmail }; +async function signUp({ email, password }) { + try { + const response = await fetch(`${BASE_URL}/sign-up`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email, password }), + }); + + if (!response.ok) { + // Q1. 필요한가 + throw new Error(response.status); + } else { + const result = await response.json(); + const accessToken = result.data.accessToken; + window.localStorage.setItem("accessToken", accessToken); + goToFolderPage(); + } + } catch (error) { + console.error("회원가입 실패: ", error); + } +} + +export { signIn, getIsNewEmail, signUp }; diff --git a/utils/signup.js b/utils/signup.js index 56bb301c4..ee44b6ecf 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -15,6 +15,8 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; +import { signUp } from "./api.js"; + import { getIsNewEmail } from "/utils/api.js"; /* 비밀번호 토글 */ @@ -175,13 +177,13 @@ function getIsConfirmedPassword(confirmPassword) { } } -function clickSignup({ email, password, confirmPassword }) { +async function clickSignup({ email, password, confirmPassword }) { if ( getIsCompleteEmail(email) && getIsCompletePassword(password) && getIsConfirmedPassword(confirmPassword) ) - goToFolderPage(); + await signUp({ email, password }); } emailInputElement.addEventListener("focusout", (e) => { From 0bc5b1285400199d55c67ea032441aa125ebf95d Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 15 Oct 2023 19:45:43 +0900 Subject: [PATCH 13/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EB=A1=9C=20=EC=A0=91=EA=B7=BC=20=EC=8B=9C=20?= =?UTF-8?q?=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/signin.js | 10 ++++++++++ utils/signup.js | 9 +++++++++ 2 files changed, 19 insertions(+) diff --git a/utils/signin.js b/utils/signin.js index 9fdacaea9..f03f67aa1 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,4 +1,5 @@ import { + goToFolderPage, getPasswordVisibility, getIsFilledEmail, getIsValidEmail, @@ -13,6 +14,15 @@ import { import { signIn } from "./api.js"; +/* 로그인 상태로 접근 시 리다이렉트 */ +(function () { + const accessToken = localStorage.getItem("accessToken"); + + if (accessToken) { + goToFolderPage(); + } +})(); + /* 비밀번호 토글 */ const passwordToggleElement = document.querySelector(".auth__toggle-password"); diff --git a/utils/signup.js b/utils/signup.js index ee44b6ecf..758f35434 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -19,6 +19,15 @@ import { signUp } from "./api.js"; import { getIsNewEmail } from "/utils/api.js"; +/* 로그인 상태로 접근 시 리다이렉트 */ +(function () { + const accessToken = localStorage.getItem("accessToken"); + + if (accessToken) { + goToFolderPage(); + } +})(); + /* 비밀번호 토글 */ const confirmPasswordToggleElement = document.querySelector( ".auth__toggle-password--confirm" From d765a971533d7403ccc8fbf99a754c56a5bf9d7b Mon Sep 17 00:00:00 2001 From: Hayden Date: Wed, 18 Oct 2023 13:04:09 +0900 Subject: [PATCH 14/17] =?UTF-8?q?refactor(mentor):=20api=20=ED=86=B5?= =?UTF-8?q?=EC=8B=A0=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/api.js | 74 --------------------------------- utils/apiClient.js | 21 ++++++++++ utils/{auth.js => authorize.js} | 42 +++++++++++++++++++ utils/signin.js | 10 ++--- utils/signup.js | 20 +++------ 5 files changed, 72 insertions(+), 95 deletions(-) delete mode 100644 utils/api.js create mode 100644 utils/apiClient.js rename utils/{auth.js => authorize.js} (62%) diff --git a/utils/api.js b/utils/api.js deleted file mode 100644 index 35087d6ff..000000000 --- a/utils/api.js +++ /dev/null @@ -1,74 +0,0 @@ -import { BASE_URL } from "./constants.js"; -import { goToFolderPage } from "./auth.js"; - -async function signIn({ email, password }) { - try { - const response = await fetch(`${BASE_URL}/sign-in`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ email, password }), - }); - - if (!response.ok) { - // Q1. 필요한가 - throw new Error(response.status); - } else { - const result = await response.json(); - const accessToken = result.data.accessToken; - window.localStorage.setItem("accessToken", accessToken); - goToFolderPage(); - } - } catch (error) { - console.error("로그인 실패:", error); - } -} - -async function getIsNewEmail(email) { - try { - const response = await fetch(`${BASE_URL}/check-email`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ email }), - }); - - if (!response.ok) { - // Q1. 필요한가 - throw new Error(response.status); - } else { - return true; - } - } catch (error) { - console.error(error); - return false; - } -} - -async function signUp({ email, password }) { - try { - const response = await fetch(`${BASE_URL}/sign-up`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ email, password }), - }); - - if (!response.ok) { - // Q1. 필요한가 - throw new Error(response.status); - } else { - const result = await response.json(); - const accessToken = result.data.accessToken; - window.localStorage.setItem("accessToken", accessToken); - goToFolderPage(); - } - } catch (error) { - console.error("회원가입 실패: ", error); - } -} - -export { signIn, getIsNewEmail, signUp }; diff --git a/utils/apiClient.js b/utils/apiClient.js new file mode 100644 index 000000000..bf180c0e7 --- /dev/null +++ b/utils/apiClient.js @@ -0,0 +1,21 @@ +import { BASE_URL } from "./constants.js"; + +export const fetchClient = async ({ url, method, body }) => { + try { + const response = await fetch(`${BASE_URL}/${url}`, { + method, + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + }); + + if (response.status !== 200) { + throw new Error(response.status); + } else { + return response; + } + } catch (error) { + throw error; + } +}; diff --git a/utils/auth.js b/utils/authorize.js similarity index 62% rename from utils/auth.js rename to utils/authorize.js index 212dd504d..25e32858d 100644 --- a/utils/auth.js +++ b/utils/authorize.js @@ -6,6 +6,8 @@ import { FOLDER_PAGE_PATH, } from "/utils/constants.js"; +import { fetchClient } from "./apiClient.js"; + // 비밀번호 토글 function getPasswordVisibility(inputType) { return inputType === "password" @@ -77,6 +79,43 @@ function getIsConfirmedConfirmPassword( } } +const signIn = async (email, password) => { + const response = await fetchClient({ + url: "sign-in", + method: "POST", + body: { email, password }, + }); + const result = await response.json(); + const accessToken = result.data.accessToken; + window.localStorage.setItem("accessToken", accessToken); + goToFolderPage(); +}; + +const getIsNewEmail = async (email) => { + try { + await fetchClient({ + url: "check-email", + method: "POST", + body: { email }, + }); + return true; + } catch { + return false; + } +}; + +const signUp = async (email, password) => { + const response = await fetchClient({ + url: "sign-up", + method: "POST", + body: { email, password }, + }); + const result = await response.json(); + const accessToken = result.data.accessToken; + window.localStorage.setItem("accessToken", accessToken); + goToFolderPage(); +}; + export { getPasswordVisibility, goToFolderPage, @@ -87,4 +126,7 @@ export { getIsCorrectPassword, getIsFilledConfirmPassword, getIsConfirmedConfirmPassword, + signIn, + getIsNewEmail, + signUp, }; diff --git a/utils/signin.js b/utils/signin.js index f03f67aa1..568704225 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -4,7 +4,8 @@ import { getIsFilledEmail, getIsValidEmail, getIsFilledPassword, -} from "/utils/auth.js"; + signIn, +} from "/utils/authorize.js"; import { AUTH_HINT, @@ -12,8 +13,6 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; -import { signIn } from "./api.js"; - /* 로그인 상태로 접근 시 리다이렉트 */ (function () { const accessToken = localStorage.getItem("accessToken"); @@ -106,10 +105,9 @@ function getIsCompletePassword(password) { return true; } } - -async function clickSignin(email, password) { +function clickSignin(email, password) { if (getIsCompleteEmail(email) && getIsCompletePassword(password)) - await signIn({ email, password }); + signIn(email, password); } emailInputElement.addEventListener("focusout", (e) => { diff --git a/utils/signup.js b/utils/signup.js index 758f35434..fac429e90 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -7,7 +7,9 @@ import { getIsValidPassword, getIsFilledConfirmPassword, getIsConfirmedConfirmPassword, -} from "/utils/auth.js"; + signUp, + getIsNewEmail, +} from "/utils/authorize.js"; import { AUTH_HINT, @@ -15,10 +17,6 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; -import { signUp } from "./api.js"; - -import { getIsNewEmail } from "/utils/api.js"; - /* 로그인 상태로 접근 시 리다이렉트 */ (function () { const accessToken = localStorage.getItem("accessToken"); @@ -186,13 +184,13 @@ function getIsConfirmedPassword(confirmPassword) { } } -async function clickSignup({ email, password, confirmPassword }) { +function clickSignup({ email, password, confirmPassword }) { if ( getIsCompleteEmail(email) && getIsCompletePassword(password) && getIsConfirmedPassword(confirmPassword) ) - await signUp({ email, password }); + signUp(email, password); } emailInputElement.addEventListener("focusout", (e) => { @@ -207,14 +205,6 @@ confirmPasswordInputElement.addEventListener("focusout", (e) => { checkPasswordConfirmFocusout(e.target.value); }); -emailInputElement.addEventListener("focusout", (e) => { - checkEmailFocusout(e.target.value); -}); - -passwordInputElement.addEventListener("focusout", (e) => { - checkPasswordFocusout(e.target.value); -}); - signupButtonElement.addEventListener("click", (e) => { e.preventDefault(); clickSignup({ From 01f583a960dc97f62986cdfbf22d55e3fc24b1ae Mon Sep 17 00:00:00 2001 From: Hayden Date: Wed, 18 Oct 2023 13:19:17 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refactor(mentor):=20=EC=95=A1=EC=84=B8?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=ED=81=AC=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/accessToken.js | 9 +++++++++ utils/authorize.js | 16 ++++++++++++---- utils/signin.js | 6 +++--- utils/signup.js | 9 ++------- 4 files changed, 26 insertions(+), 14 deletions(-) create mode 100644 utils/accessToken.js diff --git a/utils/accessToken.js b/utils/accessToken.js new file mode 100644 index 000000000..bc0290906 --- /dev/null +++ b/utils/accessToken.js @@ -0,0 +1,9 @@ +const getAccessToken = () => { + return localStorage.getItem("accessToken"); +}; + +const setAccessToken = (accessToken) => { + localStorage.setItem("accessToken", accessToken); +}; + +export { getAccessToken, setAccessToken }; diff --git a/utils/authorize.js b/utils/authorize.js index 25e32858d..6d47f3d28 100644 --- a/utils/authorize.js +++ b/utils/authorize.js @@ -7,6 +7,7 @@ import { } from "/utils/constants.js"; import { fetchClient } from "./apiClient.js"; +import { getAccessToken, setAccessToken } from "./accessToken.js"; // 비밀번호 토글 function getPasswordVisibility(inputType) { @@ -79,6 +80,12 @@ function getIsConfirmedConfirmPassword( } } +const redirectIfSignedIn = () => { + if (getAccessToken()) { + goToFolderPage(); + } +}; + const signIn = async (email, password) => { const response = await fetchClient({ url: "sign-in", @@ -87,8 +94,8 @@ const signIn = async (email, password) => { }); const result = await response.json(); const accessToken = result.data.accessToken; - window.localStorage.setItem("accessToken", accessToken); - goToFolderPage(); + setAccessToken(accessToken); + redirectIfSignedIn(); }; const getIsNewEmail = async (email) => { @@ -112,8 +119,8 @@ const signUp = async (email, password) => { }); const result = await response.json(); const accessToken = result.data.accessToken; - window.localStorage.setItem("accessToken", accessToken); - goToFolderPage(); + setAccessToken(accessToken); + redirectIfSignedIn(); }; export { @@ -129,4 +136,5 @@ export { signIn, getIsNewEmail, signUp, + redirectIfSignedIn, }; diff --git a/utils/signin.js b/utils/signin.js index 568704225..c37f7f516 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -13,11 +13,11 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; +import { getAccessToken } from "/utils/accessToken.js"; + /* 로그인 상태로 접근 시 리다이렉트 */ (function () { - const accessToken = localStorage.getItem("accessToken"); - - if (accessToken) { + if (getAccessToken()) { goToFolderPage(); } })(); diff --git a/utils/signup.js b/utils/signup.js index fac429e90..31b62f255 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -9,6 +9,7 @@ import { getIsConfirmedConfirmPassword, signUp, getIsNewEmail, + redirectIfSignedIn, } from "/utils/authorize.js"; import { @@ -18,13 +19,7 @@ import { } from "/utils/constants.js"; /* 로그인 상태로 접근 시 리다이렉트 */ -(function () { - const accessToken = localStorage.getItem("accessToken"); - - if (accessToken) { - goToFolderPage(); - } -})(); +redirectIfSignedIn(); /* 비밀번호 토글 */ const confirmPasswordToggleElement = document.querySelector( From a5ffaf1ba8cab06eaf082c7e6282daa6f7622312 Mon Sep 17 00:00:00 2001 From: Hayden Date: Wed, 18 Oct 2023 13:23:18 +0900 Subject: [PATCH 16/17] =?UTF-8?q?refactor(mentor):=20auth=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=20=EB=82=B4=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EB=AA=A8=EB=93=88=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/authorize.js | 11 +---------- utils/getPasswordVisibility.js | 9 +++++++++ 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 utils/getPasswordVisibility.js diff --git a/utils/authorize.js b/utils/authorize.js index 6d47f3d28..7d6bc5cf8 100644 --- a/utils/authorize.js +++ b/utils/authorize.js @@ -2,21 +2,12 @@ import { USERS, EMAIL_PATTERN, PASSWORD_PATTERN, - PASSWORD_TOGGLE_CONSTANT, FOLDER_PAGE_PATH, } from "/utils/constants.js"; -import { fetchClient } from "./apiClient.js"; +import { fetchClient } from "../apiClient.js"; import { getAccessToken, setAccessToken } from "./accessToken.js"; -// 비밀번호 토글 -function getPasswordVisibility(inputType) { - return inputType === "password" - ? PASSWORD_TOGGLE_CONSTANT.visible - : PASSWORD_TOGGLE_CONSTANT.invisible; -} - -// 로그인, 회원가입 function goToFolderPage() { location.href = FOLDER_PAGE_PATH; } diff --git a/utils/getPasswordVisibility.js b/utils/getPasswordVisibility.js new file mode 100644 index 000000000..483fb025d --- /dev/null +++ b/utils/getPasswordVisibility.js @@ -0,0 +1,9 @@ +import { PASSWORD_TOGGLE_CONSTANT } from "/utils/constants.js"; + +function getPasswordVisibility(inputType) { + return inputType === "password" + ? PASSWORD_TOGGLE_CONSTANT.visible + : PASSWORD_TOGGLE_CONSTANT.invisible; +} + +export { getPasswordVisibility }; From 5184d1ce158a4de9fd60388414f25c3ef86087a9 Mon Sep 17 00:00:00 2001 From: Hayden Date: Sun, 22 Oct 2023 10:15:21 +0900 Subject: [PATCH 17/17] =?UTF-8?q?fix:=20=EA=B2=BD=EB=A1=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98,=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=B2=B4=ED=81=AC?= =?UTF-8?q?=20=EB=A1=9C=EC=A7=81,=20fetchClient=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EB=A6=AC=ED=84=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/apiClient.js | 2 -- utils/authorize.js | 4 ++-- utils/signin.js | 3 ++- utils/signup.js | 40 +++++++++++++++++++++++++--------------- 4 files changed, 29 insertions(+), 20 deletions(-) diff --git a/utils/apiClient.js b/utils/apiClient.js index bf180c0e7..858d7171b 100644 --- a/utils/apiClient.js +++ b/utils/apiClient.js @@ -12,8 +12,6 @@ export const fetchClient = async ({ url, method, body }) => { if (response.status !== 200) { throw new Error(response.status); - } else { - return response; } } catch (error) { throw error; diff --git a/utils/authorize.js b/utils/authorize.js index 7d6bc5cf8..22d79148d 100644 --- a/utils/authorize.js +++ b/utils/authorize.js @@ -5,7 +5,8 @@ import { FOLDER_PAGE_PATH, } from "/utils/constants.js"; -import { fetchClient } from "../apiClient.js"; +import { fetchClient } from "./apiClient.js"; + import { getAccessToken, setAccessToken } from "./accessToken.js"; function goToFolderPage() { @@ -115,7 +116,6 @@ const signUp = async (email, password) => { }; export { - getPasswordVisibility, goToFolderPage, getIsFilledEmail, getIsValidEmail, diff --git a/utils/signin.js b/utils/signin.js index c37f7f516..49142516e 100644 --- a/utils/signin.js +++ b/utils/signin.js @@ -1,6 +1,5 @@ import { goToFolderPage, - getPasswordVisibility, getIsFilledEmail, getIsValidEmail, getIsFilledPassword, @@ -15,6 +14,8 @@ import { import { getAccessToken } from "/utils/accessToken.js"; +import { getPasswordVisibility } from "./getPasswordVisibility.js"; + /* 로그인 상태로 접근 시 리다이렉트 */ (function () { if (getAccessToken()) { diff --git a/utils/signup.js b/utils/signup.js index 31b62f255..f705c0db9 100644 --- a/utils/signup.js +++ b/utils/signup.js @@ -1,6 +1,4 @@ import { - goToFolderPage, - getPasswordVisibility, getIsFilledEmail, getIsValidEmail, getIsFilledPassword, @@ -18,6 +16,8 @@ import { INPUT_HINT_CLASSNAME, } from "/utils/constants.js"; +import { getPasswordVisibility } from "./getPasswordVisibility.js"; + /* 로그인 상태로 접근 시 리다이렉트 */ redirectIfSignedIn(); @@ -99,17 +99,23 @@ function changePasswordConfirmHint(hintType) { } async function checkEmailFocusout(email) { - const isNewEmail = await getIsNewEmail(email); - if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); - } else if (!getIsValidEmail(email)) { + return; + } + + if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); - } else if (!isNewEmail) { + return; + } + + const isNewEmail = await getIsNewEmail(email); + if (!isNewEmail) { changeEmailHint(INPUT_STATUS.isExists); - } else { - changeEmailHint(INPUT_STATUS.default); + return; } + + changeEmailHint(INPUT_STATUS.default); } function checkPasswordFocusout(password) { @@ -135,21 +141,25 @@ function checkPasswordConfirmFocusout(confirmPassword) { } async function getIsCompleteEmail(email) { - const isNewEmail = await getIsNewEmail(email); - if (!getIsFilledEmail(email)) { changeEmailHint(INPUT_STATUS.isNotFilled); return false; - } else if (!getIsValidEmail(email)) { + } + + if (!getIsValidEmail(email)) { changeEmailHint(INPUT_STATUS.isNotValidated); return false; - } else if (!isNewEmail) { + } + + const isNewEmail = await getIsNewEmail(email); + + if (!isNewEmail) { changeEmailHint(INPUT_STATUS.isExists); return false; - } else { - changeEmailHint(INPUT_STATUS.default); - return true; } + + changeEmailHint(INPUT_STATUS.default); + return true; } function getIsCompletePassword(password) {