<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 프로필</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
{% if user.is_authenticated %}
<div class="container mt-5">
<h1 class="mb-4">사용자 프로필</h1>
<!-- 메시지 출력 -->
{% if messages %}
<div>
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
{% endif %}
<!-- 사용자 정보 -->
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">사용자 정보</h5>
<p class="card-text">아이디: {{ request.user.username }}</p>
<p class="card-text">이메일: {{ request.user.email }}</p>
</div>
</div>
<!-- 비밀번호 변경 -->
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">비밀번호 변경</h5>
<form id="password-change-form" method="post" action="{% url 'password_change' %}">
{% csrf_token %}
<div class="mb-3 position-relative">
<label for="id_old_password" class="form-label">현재 비밀번호</label>
<input type="password" name="old_password" id="id_old_password" class="form-control" required>
<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"
onclick="togglePasswordVisibility('id_old_password')">👁️</button>
</div>
<div class="mb-3 position-relative">
<label for="id_new_password1" class="form-label">새 비밀번호</label>
<input type="password" name="new_password1" id="id_new_password1" class="form-control" required>
<small class="form-text text-muted">7자 이상, 숫자와 문자를 포함해야 합니다.</small>
<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"
onclick="togglePasswordVisibility('id_new_password1')">👁️</button>
</div>
<div class="mb-3 position-relative">
<label for="id_new_password2" class="form-label">새 비밀번호 확인</label>
<input type="password" name="new_password2" id="id_new_password2" class="form-control" required>
<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"
onclick="togglePasswordVisibility('id_new_password2')">👁️</button>
</div>
<button type="submit" class="btn btn-primary w-100">비밀번호 변경</button>
</form>
</div>
</div>
<script>
// 비밀번호 가시성 토글 기능
function togglePasswordVisibility(id) {
const input = document.getElementById(id);
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}
// 비밀번호 변경 요청 처리
document.getElementById("password-change-form").addEventListener("submit", async function (event) {
event.preventDefault(); // 기본 폼 제출 방지
const form = event.target;
try {
const response = await fetch(form.action, {
method: "POST",
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
},
body: new FormData(form),
});
if (response.ok) {
// 성공 시 alert 표시 후 로그아웃
alert("비밀번호가 성공적으로 변경되었습니다. 자동 로그아웃됩니다.");
setTimeout(() => {
window.location.href = "{% url 'login' %}"; // 로그아웃 후 로그인 페이지로 이동
}, 2000);
} else {
// 실패 시 alert 표시
alert("비밀번호 변경에 실패했습니다. 다시 시도해주세요.");
}
} catch (error) {
console.error("Fetch error:", error);
alert("서버와의 통신 중 문제가 발생했습니다.");
}
});
</script>
<!-- 로그아웃 -->
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">로그아웃</h5>
<form id="logout-form" method="post" action="{% url 'logout' %}">
{% csrf_token %}
<button type="submit" class="btn btn-secondary">로그아웃</button>
</form>
</div>
</div>
<script>
document.getElementById("logout-form").addEventListener("submit", async function (event) {
event.preventDefault(); // 기본 폼 제출 방지
const form = event.target;
try {
const response = await fetch(form.action, {
method: "POST",
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
},
});
if (response.ok) {
alert("로그아웃이 완료되었습니다."); // 팝업 메시지
window.location.href = "{% url 'login' %}"; // 로그인 페이지로 리다이렉트
} else {
alert("로그아웃 중 문제가 발생했습니다. 다시 시도해주세요.");
}
} catch (error) {
console.error("Fetch error:", error);
alert("서버와의 통신 중 문제가 발생했습니다.");
}
});
</script>
<!-- 회원 탈퇴 -->
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">회원 탈퇴</h5>
<form id="delete-account-form" method="post" action="/account/delete-account/">
{% csrf_token %}
<button type="submit" class="btn btn-danger">회원 탈퇴</button>
</form>
</div>
</div>
<script>
document.getElementById("delete-account-form").addEventListener("submit", async function (event) {
event.preventDefault();
const form = event.target;
try {
const response = await fetch(form.action, {
method: "POST",
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
},
});
const contentType = response.headers.get("content-type");
if (contentType && contentType.includes("application/json")) {
const data = await response.json();
alert(data.message);
window.location.href = "/login/";
} else {
alert("서버 응답 형식이 올바르지 않습니다.");
}
} catch (error) {
console.error("Fetch error:", error);
alert("서버와의 통신 중 문제가 발생했습니다.");
}
});
</script>
{% else %}
<script>
window.location.href = "{% url 'login' %}";
</script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('id_new_password1').addEventListener('input', function () {
const password = this.value;
const message = password.length >= 8 ? "사용 가능한 비밀번호입니다." : "비밀번호는 최소 8자 이상이어야 합니다.";
document.getElementById('password-feedback').textContent = message;
});
</script>
</body>
</html>