-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #133 from guen9310/part1-권부근-Week4
[Week4] 권부근
- Loading branch information
Showing
10 changed files
with
253 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| name: delete branch on close pr | ||
|
|
||
| on: | ||
| pull_request: | ||
| types: [closed] | ||
|
|
||
| jobs: | ||
| delete-branch: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: delete branch | ||
| uses: SvanBoxel/delete-merged-branch@main | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { | ||
| displayError, | ||
| resetError, | ||
| validateInput, | ||
| validationState, | ||
| } from "./utill/validation.js"; | ||
| import { ERROR_MESSAGE } from "./utill/constant.js"; | ||
| import { user } from "./utill/db.js"; | ||
|
|
||
| const form = document.querySelector(".sign-form"); | ||
| const inputs = form.querySelectorAll("input"); | ||
|
|
||
| const submit = document.querySelector(".cta"); | ||
| const authType = submit.dataset.auth; | ||
|
|
||
| const emailInput = document.querySelector('.sign-input[type="email"]'); | ||
| const passwordInput = document.querySelector('.sign-input[type="password"]'); | ||
| const confirmPasswordInput = document.querySelector(".confirm-password"); | ||
|
|
||
| const focusHandler = (e) => { | ||
| if (e.target.tagName === "INPUT") { | ||
| const errorMessage = validateInput(e.target); | ||
| displayError(e.target, errorMessage); | ||
| } | ||
| }; | ||
|
|
||
| const submitHandler = (e) => { | ||
| e.preventDefault(); | ||
| resetError(); | ||
| let isValid = true; | ||
| let account = {}; | ||
|
|
||
| inputs.forEach((input) => { | ||
| const { type, value, name } = input; | ||
| if (validationState[name] === undefined) { | ||
| const errorMessage = validateInput(input); | ||
| if (errorMessage) { | ||
| displayError(input, errorMessage); | ||
| isValid = false; | ||
| } | ||
| } else if (!validationState[name]) { | ||
| displayError( | ||
| input, | ||
| ERROR_MESSAGE[authType]["INVALID_" + type.toUpperCase()] | ||
| ); | ||
| isValid = false; | ||
| } | ||
| account[name] = value; | ||
| }); | ||
|
|
||
| let isSubmit = false; | ||
|
|
||
| if (authType === "signin" && isValid) { | ||
| if (account.email !== user.email) { | ||
| displayError(emailInput, ERROR_MESSAGE[authType]["INVALID_EMAIL"]); | ||
| isValid = false; | ||
| } else if (account.password !== user.password) { | ||
| console.log(account, user); | ||
| displayError(passwordInput, ERROR_MESSAGE[authType]["INVALID_PASSWORD"]); | ||
| isValid = false; | ||
| } else { | ||
| isSubmit = true; | ||
| } | ||
| } | ||
|
|
||
| if (authType === "signup" && isValid) { | ||
| if (account.email === user.email) { | ||
| displayError(emailInput, ERROR_MESSAGE[authType]["EXIST_EMAIL"]); | ||
| isValid = false; | ||
| } else if (passwordInput.value !== confirmPasswordInput.value) { | ||
| displayError( | ||
| confirmPasswordInput, | ||
| ERROR_MESSAGE[authType]["PASSWORD_EQUAL"] | ||
| ); | ||
| isValid = false; | ||
| } | ||
| if (isValid) { | ||
| isSubmit = true; | ||
| } | ||
| } | ||
| if (isSubmit) { | ||
| form.submit(); | ||
| } | ||
| }; | ||
|
|
||
| const keyupHandler = (e) => { | ||
| if (e.key === "Enter") { | ||
| submit.click(); | ||
| } | ||
| }; | ||
|
|
||
| form.addEventListener("focusout", focusHandler); | ||
| form.addEventListener("submit", submitHandler); | ||
| document.addEventListener("keyup", keyupHandler); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export const ERROR_MESSAGE = { | ||
| signin: { | ||
| EMPTY_EMAIL: "이메일을 입력해주세요.", | ||
| EMPTY_PASSWORD: "비밀번호를 입력해주세요.", | ||
| INVALID_EMAIL: "이메일을 확인해주세요", | ||
| INVALID_PASSWORD: "비밀번호를 확인해주세요.", | ||
| }, | ||
| signup: { | ||
| EMPTY_EMAIL: "이메일을 입력해주세요.", | ||
| EMPTY_PASSWORD: "비밀번호를 입력해주세요.", | ||
| INVALID_EMAIL: "올바른 이메일 주소가 아닙니다.", | ||
| INVALID_PASSWORD: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.", | ||
| EXIST_EMAIL: "이미 존재하는 이메일입니다.", | ||
| PASSWORD_EQUAL: "비밀번호가 일치하지 않아요.", | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export const user = { | ||
| email: "[email protected]", | ||
| password: "codeit101", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| document.querySelectorAll(".eye-button").forEach((button) => { | ||
| button.addEventListener("click", function () { | ||
| const input = this.previousElementSibling; | ||
| const img = this.querySelector("img"); | ||
|
|
||
| if (input.type === "password") { | ||
| input.type = "text"; | ||
| img.src = "../images/eye-on.svg"; | ||
| } else { | ||
| input.type = "password"; | ||
| img.src = "../images/eye-off.svg"; | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| // validation.js | ||
| import { ERROR_MESSAGE } from "./constant.js"; | ||
| import { user } from "./db.js"; | ||
|
|
||
| const submit = document.querySelector(".cta"); | ||
| const authType = submit.dataset.auth; | ||
|
|
||
| export const validationState = {}; | ||
|
|
||
| const PATTERN = { | ||
| email: | ||
| /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i, | ||
| password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, | ||
| "confirm-password": /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, | ||
| }; | ||
|
|
||
| const getErrorMessage = (name, condition) => { | ||
| const errorType = condition ? "EMPTY_" : "INVALID_"; | ||
| return ERROR_MESSAGE[authType][errorType + name.toUpperCase()]; | ||
| }; | ||
|
|
||
| export function validateInput(input) { | ||
| const { name, value } = input; | ||
| let errorMessage = ""; | ||
|
|
||
| if (value === "") { | ||
| errorMessage = getErrorMessage(name, true); | ||
| } else if (!PATTERN[name].test(value)) { | ||
| errorMessage = getErrorMessage(name, false); | ||
| } else if ( | ||
| authType === "signup" && | ||
| name === "email" && | ||
| value === user.email | ||
| ) { | ||
| errorMessage = ERROR_MESSAGE[authType]["EXIST_EMAIL"]; | ||
| } | ||
|
|
||
| validationState[name] = !errorMessage; | ||
|
|
||
| return errorMessage; | ||
| } | ||
|
|
||
| export function resetError() { | ||
| const errorMessages = document.querySelectorAll(".error-message"); | ||
| errorMessages.forEach((message) => (message.textContent = "")); | ||
| } | ||
| export function displayError(input, errorMessage) { | ||
| const errorDisplay = input.parentNode.nextElementSibling; | ||
| errorDisplay.textContent = errorMessage; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <div>folder 페이지</div> | ||
| </body> | ||
| </html> |