Updated modals & fix register v0.0.14
This commit is contained in:
TropiiDev
parent
8f8e289492
commit
fdb81ebdef
@ -77,25 +77,6 @@
|
|||||||
transform: translateY(-2px);
|
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 */
|
/* Task styling */
|
||||||
.user-tasks {
|
.user-tasks {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -160,4 +141,136 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin: 1rem 0 0.5rem 0;
|
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;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = fetch(`${localhostUrl}/user/create`, {
|
const res = fetch(`${url}/user/create`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
name: name,
|
name: name,
|
||||||
@ -74,7 +74,7 @@ const getUserToken = async () => {
|
|||||||
const form = document.getElementById("register-form");
|
const form = document.getElementById("register-form");
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
|
|
||||||
const res = fetch(`${localhostUrl}/token`, {
|
const res = fetch(`${url}/token`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData,
|
body: formData,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,5 +1,22 @@
|
|||||||
const url = "https://task-api.fstropii.com";
|
const url = "https://task-api.fstropii.com";
|
||||||
const localhostUrl = "http://localhost:8000";
|
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
|
// Check if the user is logged in
|
||||||
const getCookie = (returnType) => {
|
const getCookie = (returnType) => {
|
||||||
@ -110,7 +127,7 @@ const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => {
|
|||||||
"is_completed": completedStatus
|
"is_completed": completedStatus
|
||||||
});
|
});
|
||||||
|
|
||||||
const res = fetch(`${localhostUrl}/user/update-tasks`, {
|
const res = fetch(`${url}/user/update-tasks`, {
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
|
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
|
||||||
body: body
|
body: body
|
||||||
|
|||||||
@ -36,21 +36,92 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="email-modal">
|
<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>
|
||||||
|
|
||||||
<section class="password-modal">
|
<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>
|
||||||
|
|
||||||
<section class="username-modal">
|
<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>
|
||||||
|
|
||||||
<section class="add-task-modal">
|
<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>
|
</section>
|
||||||
|
|
||||||
<script src="/assets/js/user.js"></script>
|
<script src="/assets/js/user.js"></script>
|
||||||
|
<script src="https://kit.fontawesome.com/a478227047.js" crossorigin="anonymous"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user