03:添加功能

2024/8/1 13:32:45 avatar_7


x
表单如下：
<form id="profileForm">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" name="username" readonly>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" readonly>
            </div>
            <div class="form-group">
                <label for="role">Role</label>
                <input type="text" class="form-control" id="role" name="role" readonly>
            </div>
            <button type="button" class="btn btn-primary" id="editProfileBtn">Edit</button>
            <button type="submit" class="btn btn-success" id="saveProfileBtn" style="display: none;">Save</button>
            <button type="button" class="btn btn-secondary" id="cancelEditBtn" style="display: none;">Cancel</button>
        </form>

js如下：
<script>
// 编辑按钮点击事件
            $('#editProfileBtn').on('click', function () {
                $('#username').prop('readonly', false);
                $('#email').prop('readonly', false);
                $('#editProfileBtn').hide();
                $('#saveProfileBtn').show();
                $('#cancelEditBtn').show();
            });

            // 取消编辑按钮点击事件
            $('#cancelEditBtn').on('click', function () {
                loadProfile();
                $('#username').prop('readonly', true);
                $('#email').prop('readonly', true);
                $('#editProfileBtn').show();
                $('#saveProfileBtn').hide();
                $('#cancelEditBtn').hide();
            });

            // 保存按钮点击事件
            $('#profileForm').on('submit', function (event) {
                user_id = sessionStorage.getItem('user_id');
                event.preventDefault();
                const updatedProfile = {
                    user_id: user_id,
                    username: $('#username').val(),
                    email: $('#email').val()
                };

                updateUserProfile(updatedProfile)
                    .then(function () {
                        $('#username').prop('readonly', true);
                        $('#email').prop('readonly', true);
                        $('#editProfileBtn').show();
                        $('#saveProfileBtn').hide();
                        $('#cancelEditBtn').hide();
                        loadProfile();
                    })
                    .catch(function () {
                        alert('Failed to update profile. Please try again.');
                    });
            });
        });
</script>
我需要基于上面这些代码增加修改密码的功能，请帮我添加对应的代码，不需要输出全部代码，只需要给出新增部分和需要修改的部分即可。

2024/8/1 13:32:45 gpt


x
要在你的现有代码中添加修改密码的功能，可以按照以下步骤进行：

1. **在表单中添加新密码和确认密码的输入框：**

在你的 HTML 表单中添加两个新的输入框，用于输入新密码和确认新密码：

```html
<form id="profileForm">
    <!-- 现有表单部分 -->
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username" readonly>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="email" readonly>
    </div>
    <div class="form-group">
        <label for="role">Role</label>
        <input type="text" class="form-control" id="role" name="role" readonly>
    </div>
    
    <!-- 新增的密码部分 -->
    <div class="form-group" id="passwordGroup" style="display: none;">
        <label for="newPassword">New Password</label>
        <input type="password" class="form-control" id="newPassword" name="newPassword">
    </div>
    <div class="form-group" id="confirmPasswordGroup" style="display: none;">
        <label for="confirmPassword">Confirm Password</label>
        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
    </div>

    <!-- 现有按钮部分 -->
    <button type="button" class="btn btn-primary" id="editProfileBtn">Edit</button>
    <button type="submit" class="btn btn-success" id="saveProfileBtn" style="display: none;">Save</button>
    <button type="button" class="btn btn-secondary" id="cancelEditBtn" style="display: none;">Cancel</button>
</form>
```

2. **在 JavaScript 中处理新增的输入框：**

在编辑和取消编辑时，显示或隐藏新密码和确认密码的输入框。

```javascript
<script>
$(document).ready(function () {
    // 编辑按钮点击事件
    $('#editProfileBtn').on('click', function () {
        $('#username').prop('readonly', false);
        $('#email').prop('readonly', false);
        $('#newPassword').val('');
        $('#confirmPassword').val('');
        $('#passwordGroup').show();
        $('#confirmPasswordGroup').show();
        $('#editProfileBtn').hide();
        $('#saveProfileBtn').show();
        $('#cancelEditBtn').show();
    });

    // 取消编辑按钮点击事件
    $('#cancelEditBtn').on('click', function () {
        loadProfile();
        $('#username').prop('readonly', true);
        $('#email').prop('readonly', true);
        $('#passwordGroup').hide();
        $('#confirmPasswordGroup').hide();
        $('#editProfileBtn').show();
        $('#saveProfileBtn').hide();
        $('#cancelEditBtn').hide();
    });

    // 保存按钮点击事件
    $('#profileForm').on('submit', function (event) {
        event.preventDefault();
        if ($('#newPassword').val() !== $('#confirmPassword').val()) {
            alert('Passwords do not match.');
            return;
        }
        const updatedProfile = {
            user_id: sessionStorage.getItem('user_id'),
            username: $('#username').val(),
            email: $('#email').val(),
            newPassword: $('#newPassword').val()
        };

        updateUserProfile(updatedProfile)
            .then(function () {
                $('#username').prop('readonly', true);
                $('#email').prop('readonly', true);
                $('#passwordGroup').hide();
                $('#confirmPasswordGroup').hide();
                $('#editProfileBtn').show();
                $('#saveProfileBtn').hide();
                $('#cancelEditBtn').hide();
                loadProfile();
            })
            .catch(function () {
                alert('Failed to update profile. Please try again.');
            });
    });
});
</script>
```

3. **在后端`profile.php`中处理密码更新：**

在后端代码`profile.php`中，检查传递的密码参数并更新数据库中的密码。

```php
<?php
require_once 'init.php';

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    // 现有的 GET 处理代码
} elseif ($_SERVER['REQUEST_METHOD'] == 'PUT') {
    $user_id = getCurrentUserId();
    if ($user_id) {
        $data = json_decode(file_get_contents("php://input"));
        $query = "UPDATE users SET username = :username, email = :email WHERE id = :user_id";
        $stmt = $db->prepare($query);
        $stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
        $stmt->bindParam(':username', $data->username);
        $stmt->bindParam(':email', $data->email);

        $success = $stmt->execute();

        if (!empty($data->newPassword)) {
            $newPasswordHash = password_hash($data->newPassword, PASSWORD_DEFAULT);
            $query = "UPDATE users SET password = :password WHERE id = :user_id";
            $stmt = $db->prepare($query);
            $stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
            $stmt->bindParam(':password', $newPasswordHash);
            $success = $success && $stmt->execute();
        }

        if ($success) {
            echo json_encode(array("message" => "Profile was updated."));
        } else {
            http_response_code(503);
            echo json_encode(array("message" => "Unable to update profile."));
        }
    } else {
        http_response_code(401);
        echo json_encode(array("message" => "Unauthorized."));
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(array("message" => "Method not allowed."));
}
?>
```

通过这些修改，你可以在用户编辑资料时同时修改密码。确保所有代码在实际环境中运行正常，并对所有潜在的错误情况进行充分处理。