File: /var/www/test/changepwd.php
<?php
session_start();
if (!isset($_SESSION['user'])) {
header("Location: login.php");
exit();
}
$error = "";
$success = "";
// 引入資料庫連線
require_once 'db.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit'])) {
$newpwd = $_POST['newpwd'];
$confirm_pwd = $_POST['confirm_pwd'];
$email = $_POST['email'];
$username = $_SESSION['user'];
if (!preg_match('/^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,}$/', $newpwd)) {
$error = "密碼需至少8碼，包含英文字母與數字";
} elseif ($newpwd !== $confirm_pwd) {
$error = "兩次輸入的密碼不一致";
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = "請輸入有效的 Email";
} else {
$hashed_pwd = password_hash($newpwd, PASSWORD_DEFAULT);
$stmt = $conn->prepare("UPDATE filemaker SET newpwd = ?, email = ? WHERE user = ?");
$stmt->bind_param('sss', $hashed_pwd, $email, $username);
if ($stmt->execute()) {
// 寄送 Email 通知
$subject = "亞訊寬頻會員新密碼通知";
$fromEmail = "service@ysnet.com.tw";
$headers = "From: $fromEmail\r\nReply-To: $fromEmail\r\nContent-Type: text/plain; charset=UTF-8\r\n";
$message = "親愛的用戶您好，\n\n您的寬頻會員新密碼資訊如下：\n\n密碼：$newpwd 。\n您的新密碼已成功更新，請使用新密碼登入。\n\n亞訊寬頻 客服中心";
if (mail($email, $subject, $message, $headers)) {
$success = "密碼修改成功，請使用新密碼重新登入";
echo "<script>
setTimeout(() => {
window.location.href = 'login.php';
}, 1000);
</script>";
} else {
$error = "密碼已變更，但發送通知信失敗，請聯繫客服。";
}
} else {
$error = "資料庫更新失敗：" . $conn->error;
}
$stmt->close();
}
$conn->close();
}
$email = isset($_SESSION['email']) ? $_SESSION['email'] : '';
?>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改密碼</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background: #fff;
width: 90%;
max-width: 400px;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.error {
background: #ffdddd;
color: #d60000;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
}
.success {
background: #d4edda;
color: #155724;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
}
label {
display: block;
text-align: left;
margin-top: 10px;
font-weight: bold;
}
.password-container {
position: relative;
width: 100%;
}
input {
width: 100%;
padding: 10px;
padding-right: 35px; /* 預留空間給按鈕 */
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
border: none;
background: none;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password img {
width: 20px;
height: 20px;
}
.btn-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
width: 48%;
padding: 12px;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.btn-submit {
background: #28a745;
}
.btn-submit:hover {
background: #218838;
}
.btn-logout {
background: #dc3545;
}
.btn-logout:hover {
background: #c82333;
}
</style>
<script src="/js/iframe-resizer-helper.js"></script>
</head>
<body>
<div class="container">
<h2>首次登入 - 修改密碼</h2>
<?php if ($error): ?>
<div class="error"><?php echo $error; ?></div>
<?php elseif ($success): ?>
<div class="success"><?php echo $success; ?></div>
<?php endif; ?>
<form method="POST">
<label for="newpwd">新密碼（至少8碼，含英文字母與數字）：</label>
<span id="newpwd-error" style="color: red; font-size: 14px; margin-left: 10px;"></span>
<div class="password-container">
<input type="password" id="newpwd" name="newpwd" required oninput="validateNewPwd()">
<button type="button" class="toggle-password" onclick="togglePassword('newpwd', 'newpwd-icon')">
<img src="eye-close.png" alt="顯示密碼" id="newpwd-icon">
</button>
</div>
<label for="confirm_pwd">確認新密碼：</label>
<span id="confirm_pwd-error" style="color: red; font-size: 14px; margin-left: 10px;"></span>
<div class="password-container">
<input type="password" id="confirm_pwd" name="confirm_pwd" required oninput="validateConfirmPwd()" disabled>
<button type="button" class="toggle-password" onclick="togglePassword('confirm_pwd', 'confirm_pwd-icon')">
<img src="eye-close.png" alt="顯示密碼" id="confirm_pwd-icon">
</button>
</div>
<label for="email">電子郵件（用於接收新密碼）：</label>
<input type="email" id="email" name="email" value="<?php echo htmlspecialchars($email); ?>" required disabled>
<div class="btn-container">
<button type="submit" name="submit" class="btn-submit" id="submit-btn" disabled>修改密碼</button>
<button type="button" class="btn-logout" onclick="logout()">取消登出</button>
</div>
<script>
function validateNewPwd() {
let newPwd = document.getElementById("newpwd").value;
let newPwdError = document.getElementById("newpwd-error");
let confirmPwdInput = document.getElementById("confirm_pwd");
let confirmPwdError = document.getElementById("confirm_pwd-error");
let emailInput = document.getElementById("email");
let submitBtn = document.getElementById("submit-btn");
let regex = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
// 若新密碼欄位為空時
if (newPwd === "") {
newPwdError.innerHTML = "";
confirmPwdInput.disabled = true;
confirmPwdInput.value = "";
confirmPwdError.innerHTML = "";
// 如果 email 已有預設值，就不要清空
// 若 email 沒有值，則保持 disabled
if(emailInput.value === ""){
emailInput.disabled = true;
}
submitBtn.disabled = true;
return;
}
if (!regex.test(newPwd)) {
newPwdError.innerHTML = "✖ 至少8碼，包含英文字母與數字";
newPwdError.style.color = "red";
confirmPwdInput.disabled = true;
confirmPwdInput.value = "";
confirmPwdError.innerHTML = "";
// 保留 email 的值，不清空
submitBtn.disabled = true;
} else {
newPwdError.innerHTML = "✔";
newPwdError.style.color = "green";
confirmPwdInput.disabled = false; // 允許填寫確認密碼
}
validateConfirmPwd(); // 當新密碼變更時，同時檢查確認密碼
}
function validateConfirmPwd() {
let newPwd = document.getElementById("newpwd").value;
let confirmPwd = document.getElementById("confirm_pwd").value;
let confirmPwdError = document.getElementById("confirm_pwd-error");
let emailInput = document.getElementById("email");
let submitBtn = document.getElementById("submit-btn");
// 若確認密碼欄位為空時
if (confirmPwd === "") {
confirmPwdError.innerHTML = "";
submitBtn.disabled = true;
return;
}
if (newPwd !== confirmPwd) {
confirmPwdError.innerHTML = "✖ 密碼不一致";
confirmPwdError.style.color = "red";
// 不要清空 email 值，僅提示錯誤即可
submitBtn.disabled = true;
} else {
confirmPwdError.innerHTML = "✔";
confirmPwdError.style.color = "green";
// 當密碼正確時，啟用 email 欄位（若原本已填入也會保留）
emailInput.disabled = false;
submitBtn.disabled = false;
}
}
function togglePassword(inputId, iconId) {
let input = document.getElementById(inputId);
let icon = document.getElementById(iconId);
if (input.type === "password") {
input.type = "text";
icon.src = "eye-open.png";
} else {
input.type = "password";
icon.src = "eye-close.png";
}
}
function logout() {
window.location.href = 'logout.php'; // 確保登出後回到登入頁面
}
</script>
</body>
</html>