From fdb81ebdeff92550d13d8c499f15c23bfb313060 Mon Sep 17 00:00:00 2001 From: TropiiDev Date: Sun, 27 Apr 2025 23:14:23 -0400 Subject: [PATCH] Updated modals & fix register v0.0.14 --- assets/css/user.css | 151 +++++++++++++++++++++++++++++++++++------ assets/js/register.js | 4 +- assets/js/user.js | 19 +++++- assets/pages/user.html | 71 +++++++++++++++++++ 4 files changed, 223 insertions(+), 22 deletions(-) diff --git a/assets/css/user.css b/assets/css/user.css index 032c25f..e78bec8 100644 --- a/assets/css/user.css +++ b/assets/css/user.css @@ -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; @@ -160,4 +141,136 @@ font-size: 1rem; 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; } \ No newline at end of file diff --git a/assets/js/register.js b/assets/js/register.js index af594a6..5a3250e 100644 --- a/assets/js/register.js +++ b/assets/js/register.js @@ -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, }); diff --git a/assets/js/user.js b/assets/js/user.js index edc62d3..3b0998a 100644 --- a/assets/js/user.js +++ b/assets/js/user.js @@ -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 diff --git a/assets/pages/user.html b/assets/pages/user.html index 590f47c..6811cac 100644 --- a/assets/pages/user.html +++ b/assets/pages/user.html @@ -36,21 +36,92 @@
+
+
+
+

Change email?

+

Enter a new email below

+
+
+ + +
+ +
+
+
+
+

Change password?

+

Enter a new password below

+
+
+ + + + +
+ +
+
+
+
+

Change username?

+

Enter a new username below

+
+
+ + +
+ +
+
+
+
+

Add a task

+

Enter a new task below

+
+
+ + + + +
+ +
+
+ +
+
+
+
+

Finish API

+

View task details

+
+
+ + + + +
+ + +
+ \ No newline at end of file