Skip to content

Commit

Permalink
Merge pull request #33 from zinojung/basic-정진호-sprint3
Browse files Browse the repository at this point in the history
Basic 정진호 sprint3
  • Loading branch information
jjjwodls authored Nov 19, 2024
2 parents 19f628d + 0e8cda1 commit 93c261d
Show file tree
Hide file tree
Showing 7 changed files with 407 additions and 56 deletions.
11 changes: 11 additions & 0 deletions default_data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const USER_DATA = [
{ email: '[email protected]', password: "testtest123"},
{ email: '[email protected]', password: "codeit101!" },
{ email: '[email protected]', password: "codeit202!" },
{ email: '[email protected]', password: "codeit303!" },
{ email: '[email protected]', password: "codeit404!" },
{ email: '[email protected]', password: "codeit505!" },
{ email: '[email protected]', password: "codeit606!" },
];

// localStorage.setItem("USER_DATA", JSON.stringify(USER_DATA));
63 changes: 63 additions & 0 deletions login.css
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,16 @@ button {
border: none;
}

button:invalid {
background-color: var(--gray-400); /* #9CA3AF */
color: var(--gray-100); /* #F3F4F6 */
}

button:valid {
background-color: var(--primary-100); /* #9CA3AF */
color: #FFFFFF;
}

.easy-login-box {
background-color: #e6f2ff; /* 변수와 일치하지 않음 */
padding: 1rem 1.4375rem; /* 16px 23px */
Expand Down Expand Up @@ -145,4 +155,57 @@ button {

.sign-up a {
color: var(--primary-100); /* #3692FF */
}

.error {
border: 1.5px solid red;
background-color: #ffe6e6;
}

.error-message {
color: red;
font-size: 0.9em;
margin-top: -1.25rem;
padding-left: 1rem;
}

dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: white;
width: 540px;
height: 240px;
max-width: 90%;
text-align: center;
}

dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* 배경 어둡게 */
}

dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.dialog-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}

dialog button {
background-color: var(--gray-400); /* #9CA3AF */
border-radius: 0.5rem; /* 40px */
padding: 1rem 0; /* 16px 0 */
font-size: 1.25rem; /* 20px */
font-weight: 600;
color: var(--gray-100); /* #F3F4F6 */
border: none;
}
33 changes: 12 additions & 21 deletions login.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,16 @@
<img id="logo" src="./resources/logo_with_text.png" alt="logo with text">
</a>
<!-- 로그인 폼 -->
<form action="/login" method="post">
<form action="" method="post" novalidate>
<label for="user_email">이메일</label>
<input type="email" id="user_email" name="user_email" placeholder="이메일을 입력해주세요" required>

<span id="user_email_error"></span>
<label for="password">비밀번호</label>
<div class="input-password-box">
<input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요" required>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요" minlength="8" required>
<img id="toggle-password" onclick="togglePasswordVisibility()" src="./resources/eye_open.png">
</div>
<span id="password_error"></span>
<button type="submit">로그인</button>
</form>
<div class="easy-login-box">
Expand All @@ -52,23 +53,13 @@
</p>
</section>
</main>

<script>
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const toggleIcon = document.getElementById("toggle-password");

// 현재 input의 type을 확인하고, type을 변경
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.src = "./resources/eye_open.png"; // 비밀번호가 보일 때 아이콘을 변경
toggleIcon.alt = "Hide Password";
} else {
passwordInput.type = "password";
toggleIcon.src = "./resources/eye_closed.png"; // 비밀번호가 숨겨질 때 아이콘을 변경
toggleIcon.alt = "Show Password";
}
}
</script>
<dialog id="login-error-dialog">
<div class="dialog-content">
<p>비밀번호가 일치하지 않습니다.</p>
<button id="dialog-close" autofocus>확인</button>
</div>
</dialog>
<script src="default_data.js"></script>
<script src="login.js"></script>
</body>
</html>
105 changes: 105 additions & 0 deletions login.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
const email = document.getElementById("user_email");
const emailError = document.getElementById("user_email_error");
const password = document.getElementById("password");
const passwordError = document.getElementById("password_error");
const loginButton = document.querySelector("form button");
const form = document.querySelector("form");
const closeButton = document.getElementById("dialog-close");
const loginErrorDialog = document.getElementById("login-error-dialog");



function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const toggleIcon = document.getElementById("toggle-password");

// 현재 input의 type을 확인하고, type을 변경
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.src = "./resources/eye_open.png"; // 비밀번호가 보일 때 아이콘을 변경
toggleIcon.alt = "Hide Password";
} else {
passwordInput.type = "password";
toggleIcon.src = "./resources/eye_closed.png"; // 비밀번호가 숨겨질 때 아이콘을 변경
toggleIcon.alt = "Show Password";
}
}

function validateLogin() {
if(!email.validity.valid || !password.validity.valid) {
loginButton.disabled = true;
} else {
loginButton.disabled = false;
}
}

window.addEventListener("DOMContentLoaded", validateLogin);

function showEmailError() {
emailError.classList.add("error-message");
email.classList.add("error");

if (email.validity.valueMissing) {
emailError.textContent = "이메일을 입력해주세요.";
} else if (email.validity.typeMismatch) {
emailError.textContent = "잘못된 이메일 형식입니다.";
}
}

email.addEventListener("blur", (event) => {
if (email.validity.valid) {
emailError.textContent = "";
email.classList.remove("error");
validateLogin();
} else {
showEmailError();
}
});

email.addEventListener("input", validateLogin);

function showPasswordError() {
passwordError.classList.add("error-message");
password.classList.add("error");

if (password.validity.valueMissing) {
passwordError.textContent = "비밀번호를 입력해주세요.";
} else if (password.validity.tooShort) {
passwordError.textContent = "비밀번호를 8자 이상 입력해주세요.";
}
}

password.addEventListener("blur", (event) => {
if (password.validity.valid) {
passwordError.textContent = "";
password.classList.remove("error");
validateLogin();
} else {
showPasswordError();
}
});

password.addEventListener("input", validateLogin);



form.addEventListener('submit', (event) => {
event.preventDefault();

const inputEmail = email.value;
const inputPassword = password.value;

//USER_DATA에 없거나, 이메일은 일치하지만 비밀번호가 틀린경우 -> '비밀번호가 일치하지 않습니다.'
const user = USER_DATA.find((user) => user.email==inputEmail );

if(user === undefined || user.password !== inputPassword) {
loginErrorDialog.showModal();
} else {
window.location.href = "/item";
}
});


closeButton.addEventListener("click", () => {
loginErrorDialog.close();
});
63 changes: 63 additions & 0 deletions signup.css
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,16 @@ button {
border: none;
}

button:invalid {
background-color: var(--gray-400); /* #9CA3AF */
color: var(--gray-100); /* #F3F4F6 */
}

button:valid {
background-color: var(--primary-100); /* #9CA3AF */
color: #FFFFFF;
}

.easy-login-box {
background-color: #e6f2ff; /* 변수와 일치하지 않음 */
padding: 1rem 1.4375rem; /* 16px 23px */
Expand Down Expand Up @@ -146,4 +156,57 @@ button {

.sign-up a {
color: var(--primary-100); /* #3692FF */
}

.error {
border: 1.5px solid red;
background-color: #ffe6e6;
}

.error-message {
color: red;
font-size: 0.9em;
margin-top: -1.25rem;
padding-left: 1rem;
}

dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: white;
width: 540px;
height: 240px;
max-width: 90%;
text-align: center;
}

dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* 배경 어둡게 */
}

dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.dialog-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}

dialog button {
background-color: var(--gray-400); /* #9CA3AF */
border-radius: 0.5rem; /* 40px */
padding: 1rem 0; /* 16px 0 */
font-size: 1.25rem; /* 20px */
font-weight: 600;
color: var(--gray-100); /* #F3F4F6 */
border: none;
}
49 changes: 14 additions & 35 deletions signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,24 @@
<img id="logo" src="./resources/logo_with_text.png" alt="logo with text">
</a>
<!-- 로그인 폼 -->
<form action="/signup" method="post">
<form method="post">
<label for="user_email">이메일</label>
<input type="email" id="user_email" name="user_email" placeholder="이메일을 입력해주세요" required>
<span id="user_email_error"></span>
<label for="user_nickname">닉네임</label>
<input type="email" id="user_nickname" name="user_nickname" placeholder="닉네임을 입력해주세요" required>
<input type="text" id="user_nickname" name="user_nickname" placeholder="닉네임을 입력해주세요" required>
<label for="password">비밀번호</label>
<div class="input-password-box">
<input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요" required>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요" minlength="8" required>
<img id="toggle-password" onclick="togglePasswordVisibility()" src="./resources/eye_open.png">
</div>
<span id="password_error"></span>
<label for="password-c">비밀번호 확인</label>
<div class="input-password-box">
<input type="password" id="password-c" name="password-c" placeholder="비밀번호를 다시 한 번입력해주세요" required>
<img id="toggle-password-c" onclick="togglePasswordVisibility_c()" src="./resources/eye_open.png">
</div>
<span id="password_confirm_error"></span>
<button type="submit">회원가입</button>
</form>
<div class="easy-login-box">
Expand All @@ -58,37 +61,13 @@
</p>
</section>
</main>

<script>
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const toggleIcon = document.getElementById("toggle-password");

if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.src = "./resources/eye_closed.png"; // 비밀번호가 보일 때 아이콘 변경
toggleIcon.alt = "Hide Password";
} else {
passwordInput.type = "password";
toggleIcon.src = "./resources/eye_open.png"; // 비밀번호가 숨겨질 때 아이콘 변경
toggleIcon.alt = "Show Password";
}
}

function togglePasswordVisibility_c() {
const passwordInput = document.getElementById("password-c");
const toggleIcon = document.getElementById("toggle-password-c");

if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.src = "./resources/eye_closed.png"; // 비밀번호가 보일 때 아이콘 변경
toggleIcon.alt = "Hide Password";
} else {
passwordInput.type = "password";
toggleIcon.src = "./resources/eye_open.png"; // 비밀번호가 숨겨질 때 아이콘 변경
toggleIcon.alt = "Show Password";
}
}
</script>
<dialog id="signup-error-dialog">
<div class="dialog-content">
<p>사용 중인 이메일입니다.</p>
<button id="dialog-close" autofocus>확인</button>
</div>
</dialog>
<script src="default_data.js"></script>
<script src="signup.js"></script>
</body>
</html>
Loading

0 comments on commit 93c261d

Please sign in to comment.