From d0f09193569bf717a61b8acd35621e37dc2a4f81 Mon Sep 17 00:00:00 2001 From: CasVT Date: Thu, 26 Jun 2025 18:07:38 +0200 Subject: [PATCH] Refactored user settings in UI --- frontend/static/css/notification.css | 4 +- frontend/static/css/settings.css | 74 ++++++----- frontend/static/js/settings.js | 103 ++++++++------- frontend/templates/reminders.html | 179 +++++++++++++++------------ 4 files changed, 205 insertions(+), 155 deletions(-) diff --git a/frontend/static/css/notification.css b/frontend/static/css/notification.css index 495e66e..c257e21 100644 --- a/frontend/static/css/notification.css +++ b/frontend/static/css/notification.css @@ -1,4 +1,4 @@ -.table-container { +.ns-table-container { margin-top: 2rem; display: flex; @@ -25,7 +25,7 @@ transition: transform .125s linear; } -.table-container:has(#service-list-toggle:checked) #add-service-button > svg { +.ns-table-container:has(#service-list-toggle:checked) #add-service-button > svg { transform: rotate(45deg); } diff --git a/frontend/static/css/settings.css b/frontend/static/css/settings.css index 8bfb152..2c98cb7 100644 --- a/frontend/static/css/settings.css +++ b/frontend/static/css/settings.css @@ -1,46 +1,42 @@ #settings-table { + --min-width: 0; + --max-width: 40rem; + --min-data-width: 16rem; + margin-inline: auto; - width: min(100%, 50rem); } -#settings-table td { - padding: .5rem; - width: 50%; -} - -#settings-table tr > td:first-child { - text-align: right; - font-weight: 500; -} - -#settings-table button { - padding: .5rem 2rem; - background-color: var(--color-gray); - - box-shadow: var(--default-shadow); -} - -#settings-table tr:has(#default-service-input) { - display: none; -} - -#settings-table tr:has(#default-service-input option) { - display: table-row; +#settings-table tr { + & th { + padding-top: .5rem; + } + &:first-child td { + padding-top: 0; + } } #change-password-form { display: flex; + flex-direction: column; gap: 1rem; } -#settings-table #delete-account-button { +#change-password-form input { + width: 16rem; +} + +#delete-account-button { + background-color: var(--color-dim-error); +} + +#delete-account-button:hover { background-color: var(--color-error); } .contact-list { width: min(100%, 31rem); margin: auto; - + display: flex; justify-content: center; gap: 1rem; @@ -50,15 +46,37 @@ .contact-list > a { height: 5rem; width: 15rem; - + display: flex; justify-content: center; align-items: center; - + border-radius: 6px; + border: 2px solid var(--color-mid-gray); background-color: var(--color-gray); color: var(--color-light); text-decoration: none; font-size: 1.2rem; + + transition: + background-color 200ms ease-in-out, + box-shadow 200ms ease-in-out; + + &:hover { + background-color: var(--color-mid-gray); + box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, .8); + } + + &:first-child:hover { + background-color: var(--color-success); + } + + &:nth-child(3):hover { + background-color: var(--color-changed); + } + + &:nth-child(4):hover { + background-color: darkblue; + } } diff --git a/frontend/static/js/settings.js b/frontend/static/js/settings.js index de2a1ab..fa3f1be 100644 --- a/frontend/static/js/settings.js +++ b/frontend/static/js/settings.js @@ -1,61 +1,76 @@ -const SettingsEls = { - locale_input: document.querySelector('#locale-input'), - default_service_input: document.querySelector('#default-service-input'), - change_password_form: document.querySelector('#change-password-form'), - delete_account_button: document.querySelector('#delete-account-button') -}; +const settingsEls = { + settings: { + locale: document.querySelector('#locale-input'), + defaultService: document.querySelector('#default-service-input'), + }, + changePassword: { + form: document.querySelector('#change-password-form'), + input: document.querySelector('#change-password-input'), + submit: document.querySelector('#change-password-form button') + }, + deleteAccount: { + dialog: document.querySelector('#delete-user-dialog'), + close: document.querySelector('#close-delete-user'), + confirm: document.querySelector('#confirm-delete-user'), + button: document.querySelector('#delete-account-button') + } +} function loadSettings() { + settingsEls.settings.locale.value = + getLocalStorage('locale')['locale'] // Default Service is handled by notification.fillNotificationSelection() - document.getElementById('locale-input').value = - getLocalStorage('locale')['locale']; -}; +} -function updateLocale(e) { - setLocalStorage({'locale': e.target.value}); - fillLibrary(reminderTypes.reminder); -}; +function updateLocale() { + setLocalStorage({'locale': settingsEls.settings.locale.value}) + fillLibrary(reminderTypes.reminder) +} -function updateDefaultService(e) { - setLocalStorage({'default_service': parseInt(e.target.value)}); +function updateDefaultService() { + setLocalStorage({'default_service': parseInt(settingsEls.settings.defaultService.value)}) // Add window is handled by show.showAdd() -}; +} function changePassword() { const data = { - 'new_password': document.getElementById('password-input').value - }; - fetch(`${urlPrefix}/api/user?api_key=${apiKey}`, { - 'method': 'PUT', - 'headers': {'Content-Type': 'application/json'}, - 'body': JSON.stringify(data) - }) + 'new_password': settingsEls.changePassword.input.value + } + sendAPI("PUT", "/user", {}, data) .then(response => { - if (!response.ok) return Promise.reject(response.status); - window.location.reload(); + settingsEls.changePassword.input.value = "" + settingsEls.changePassword.submit.style.backgroundColor = "var(--color-success)" + settingsEls.changePassword.submit.innerText = "Changed" + setTimeout(() => { + settingsEls.changePassword.submit.style.backgroundColor = "" + settingsEls.changePassword.submit.innerText = "Change" + }, + 2000 + ) }) - .catch(e => { - if (e === 401) - window.location.href = `${urlPrefix}/`; - else - console.log(e); - }); -}; + .catch(e => console.log(e)) +} function deleteAccount() { - fetch(`${urlPrefix}/api/user?api_key=${apiKey}`, { - 'method': 'DELETE' - }) + sendAPI("DELETE", "/user") .then(response => { - window.location.href = `${urlPrefix}/`; - }); -}; + window.location.href = `${urlPrefix}/` + }) +} -// code run on load +loadSettings() -loadSettings(); +settingsEls.settings.locale.onchange = e => updateLocale() +settingsEls.settings.defaultService.onchange = e => updateDefaultService() +settingsEls.changePassword.form.action = 'javascript:changePassword();' +settingsEls.deleteAccount.button.onclick = e => + settingsEls.deleteAccount.dialog.showModal() -SettingsEls.locale_input.onchange = updateLocale; -SettingsEls.default_service_input.onchange = updateDefaultService; -SettingsEls.change_password_form.action = 'javascript:changePassword();'; -SettingsEls.delete_account_button.onclick = e => deleteAccount(); \ No newline at end of file +settingsEls.deleteAccount.dialog.onclick = e => { + if (e.target === e.currentTarget) { + e.stopPropagation() + settingsEls.deleteAccount.dialog.close() + } +} +settingsEls.deleteAccount.close.onclick = e => settingsEls.deleteAccount.dialog.close() +settingsEls.deleteAccount.confirm.onclick = e => deleteAccount() diff --git a/frontend/templates/reminders.html b/frontend/templates/reminders.html index 4183516..e00843f 100644 --- a/frontend/templates/reminders.html +++ b/frontend/templates/reminders.html @@ -78,7 +78,19 @@ - + + +
+
+

Are you sure you want to permanently delete your account?

+
+ + +
+
+
+ +