Skip to content

Commit

Permalink
Merge pull request #1801 from PrityanshuSingh/feat/PswdModal
Browse files Browse the repository at this point in the history
Added Password Change Modal
  • Loading branch information
ANSHIKA-26 authored Nov 9, 2024
2 parents 4eb92d1 + e1deab3 commit ea5abbc
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 2 deletions.
48 changes: 47 additions & 1 deletion profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3>Friends List</h3>
<div class="profile-detail-card">
<h3>Change Password</h3>
<p>*********63</p>
<button class="edit-profile-btn">Change</button>
<button class="edit-profile-btn" id="changePasswordBtn">Change</button>
</div>

<div class="profile-detail-card">
Expand Down Expand Up @@ -93,6 +93,23 @@ <h2>Notifications</h2>

</div>

<!-- Change Password Modal -->
<div id="changePasswordModal" class="modal">
<div class="modal-content">
<span class="close-btn" id="closeChangePasswordModal">&times;</span>
<h2>Change Password</h2>
<form id="changePasswordForm">
<label for="currentPassword">Current Password:</label>
<input type="text" id="currentPassword" required><br>
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" required><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" required><br>
<button type="submit">Update Password</button>
</form>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
// Load saved profile information from localStorage
Expand All @@ -119,6 +136,35 @@ <h2>Notifications</h2>
if (savedAvatar) {
document.getElementById("profileImage").src = savedAvatar;
}

// Open Change Password Modal
document.getElementById("changePasswordBtn").addEventListener("click", function() {
console.log("Opening Change Password Modal");
document.getElementById("changePasswordModal").style.display = "block";
});

// Close Change Password Modal
document.getElementById("closeChangePasswordModal").addEventListener("click", function() {
document.getElementById("changePasswordModal").style.display = "none";
});

// Handle Change Password Form Submission
document.getElementById("changePasswordForm").addEventListener("submit", function(e) {
e.preventDefault();
const currentPassword = document.getElementById("currentPassword").value;
const newPassword = document.getElementById("newPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;

if (newPassword === confirmPassword) {
// Save the new password in sessionStorage (for now)
sessionStorage.setItem("userPassword", newPassword);
alert("Password updated successfully!");
document.getElementById("changePasswordModal").style.display = "none";
} else {
alert("Passwords do not match!");
}
});

});
</script>

Expand Down
75 changes: 74 additions & 1 deletion testp.css
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,81 @@ body {

}

.button-container {
/* General styles for modal */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

/* Modal Content */
.modal-content {
background: rgb(244 237 227);
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 8px;
}

.close-btn {
color: #aaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.modal-content form {
display: flex;
flex-direction: column;
}

.modal-content form label {
margin: 10px 0 5px;
font-weight: bold;
}

.modal-content form input {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}

.modal-content form button {
padding: 10px 20px;
background: rgb(51 51 51);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s, transform 0.3s;
}

.modal-content form button:hover {
background-color: #000000;
transform: scale(1.05);
}

.button-container {
display: flex;
justify-content: right;
gap: 15px;
Expand Down

1 comment on commit ea5abbc

@vercel
Copy link

@vercel vercel bot commented on ea5abbc Nov 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.