Updated modals & fix register v0.0.14
This commit is contained in:
TropiiDev
parent
8f8e289492
commit
fdb81ebdef
@ -77,25 +77,6 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Modal styling */
|
||||
.email-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.email-modal.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Task styling */
|
||||
.user-tasks {
|
||||
display: flex;
|
||||
@ -161,3 +142,135 @@
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal styling */
|
||||
.email-modal,
|
||||
.password-modal,
|
||||
.username-modal,
|
||||
.add-task-modal,
|
||||
.task-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-modal {
|
||||
background-color: var(--bg-black);
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: var(--silver);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-right: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.modal-header p {
|
||||
color: var(--maroon-pink);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-content label {
|
||||
color: var(--silver);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-content input {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
color: var(--white);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-content input:focus {
|
||||
outline: none;
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.modal-content input::placeholder {
|
||||
color: var(--maroon-pink);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
[class^="submit-"] {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: none;
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 4px;
|
||||
color: var(--white);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[class^="submit-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--white);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
[class^="close-"] {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
color: var(--silver);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
[class^="close-"]:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
|
||||
/* Show modal when visible class is added */
|
||||
.email-modal.visible,
|
||||
.password-modal.visible,
|
||||
.username-modal.visible,
|
||||
.add-task-modal.visible,
|
||||
.task-modal.visible {
|
||||
display: flex;
|
||||
}
|
||||
@ -54,7 +54,7 @@ const registerUser = (name, username, email, password, verifyPassword) => {
|
||||
return null;
|
||||
}
|
||||
|
||||
const res = fetch(`${localhostUrl}/user/create`, {
|
||||
const res = fetch(`${url}/user/create`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
@ -74,7 +74,7 @@ const getUserToken = async () => {
|
||||
const form = document.getElementById("register-form");
|
||||
const formData = new FormData(form);
|
||||
|
||||
const res = fetch(`${localhostUrl}/token`, {
|
||||
const res = fetch(`${url}/token`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
@ -1,5 +1,22 @@
|
||||
const url = "https://task-api.fstropii.com";
|
||||
const localhostUrl = "http://localhost:8000";
|
||||
const logoutBtn = document.querySelector('.nav-logout');
|
||||
const changeEmailBtn = document.querySelector('#change-email-btn');
|
||||
|
||||
logoutBtn.addEventListener("click", function() {
|
||||
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
changeEmailBtn.addEventListener("click", function() {
|
||||
const emailModal = document.querySelector('.email-modal');
|
||||
const closeEmailModalBtn = document.querySelector('.close-email-modal');
|
||||
emailModal.classList.add('visible');
|
||||
|
||||
closeEmailModalBtn.addEventListener("click", function() {
|
||||
emailModal.classList.remove("visible");
|
||||
});
|
||||
});
|
||||
|
||||
// Check if the user is logged in
|
||||
const getCookie = (returnType) => {
|
||||
@ -110,7 +127,7 @@ const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => {
|
||||
"is_completed": completedStatus
|
||||
});
|
||||
|
||||
const res = fetch(`${localhostUrl}/user/update-tasks`, {
|
||||
const res = fetch(`${url}/user/update-tasks`, {
|
||||
method: "PATCH",
|
||||
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
|
||||
body: body
|
||||
|
||||
@ -36,21 +36,92 @@
|
||||
</section>
|
||||
|
||||
<section class="email-modal">
|
||||
<div class="main-modal">
|
||||
<div class="close-email-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2>Change email?</h2>
|
||||
<p>Enter a new email below</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-email-input">Email</label>
|
||||
<input id="modal-email-input" class="modal-email-input" placeholder="johndoe234@gmail.com" />
|
||||
</div>
|
||||
|
||||
<button class="submit-email-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="password-modal">
|
||||
<div class="main-modal">
|
||||
<div class="close-password-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2>Change password?</h2>
|
||||
<p>Enter a new password below</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-password-input">Password</label>
|
||||
<input id="modal-password-input" class="modal-password-input" />
|
||||
<label for="modal-verify-password-input">Verify Password</label>
|
||||
<input id="modal-verify-password-input" class="modal-verify-password-input" />
|
||||
</div>
|
||||
|
||||
<button class="submit-password-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="username-modal">
|
||||
<div class="main-modal">
|
||||
<div class="close-username-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2>Change username?</h2>
|
||||
<p>Enter a new username below</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-username-input">Username</label>
|
||||
<input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" />
|
||||
</div>
|
||||
|
||||
<button class="submit-username-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="add-task-modal">
|
||||
<div class="main-modal">
|
||||
<div class="close-task-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2>Add a task</h2>
|
||||
<p>Enter a new task below</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-name-input">Name</label>
|
||||
<input id="modal-name-input" class="modal-name-input" />
|
||||
<label for="modal-description-input">Description</label>
|
||||
<input id="modal-description-input" class="modal-description-input" />
|
||||
</div>
|
||||
|
||||
<button class="submit-task-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-modal">
|
||||
<div class="main-modal">
|
||||
<div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2>Finish API</h2>
|
||||
<p>View task details</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-description-input">Description</label>
|
||||
<input id="modal-description-input" class="modal-description-input" placeholder="Finish the task API" />
|
||||
<label for="modal-completed-status">Is it completed?</label>
|
||||
<p id="modal-completed-status" class="modal-completed-status"></p>
|
||||
</div>
|
||||
|
||||
<button class="submit-task-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/assets/js/user.js"></script>
|
||||
<script src="https://kit.fontawesome.com/a478227047.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user