mirror of
https://github.com/Casvt/MIND.git
synced 2026-04-25 03:00:20 -04:00
Refactored user settings in UI
This commit is contained in:
CasVT
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
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()
|
||||
|
||||
@@ -78,7 +78,19 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<dialog id="delete-user-dialog">
|
||||
<div class="dialog-container">
|
||||
<div class="dialog-content">
|
||||
<p>Are you sure you want to permanently delete your account?</p>
|
||||
<div class="confirm-container">
|
||||
<button id="confirm-delete-user" class="input-style">Confirm</button>
|
||||
<button id="close-delete-user" class="input-style">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<header>
|
||||
<div>
|
||||
<label for="nav-toggle" id="toggle-nav">
|
||||
@@ -319,7 +331,7 @@
|
||||
<div id="notification">
|
||||
<h2>Notification Services</h2>
|
||||
<p>Setup your notification providers here</p>
|
||||
<div class="table-container">
|
||||
<div class="ns-table-container">
|
||||
<label
|
||||
id="add-service-button"
|
||||
title="Toggle adding notification service"
|
||||
@@ -365,85 +377,90 @@
|
||||
|
||||
<div id="settings">
|
||||
<h2>Settings</h2>
|
||||
<table id="settings-table">
|
||||
<tr>
|
||||
<td><label for="locale-input">Locale</label></td>
|
||||
<td>
|
||||
<select id="locale-input">
|
||||
<option value="ar-SA">ar-SA</option>
|
||||
<option value="bn-BD">bn-BD</option>
|
||||
<option value="bn-IN">bn-IN</option>
|
||||
<option value="cs-CZ">cs-CZ</option>
|
||||
<option value="da-DK">da-DK</option>
|
||||
<option value="de-AT">de-AT</option>
|
||||
<option value="de-CH">de-CH</option>
|
||||
<option value="de-DE">de-DE</option>
|
||||
<option value="el-GR">el-GR</option>
|
||||
<option value="en-AU">en-AU</option>
|
||||
<option value="en-CA">en-CA</option>
|
||||
<option value="en-GB" selected>en-GB</option>
|
||||
<option value="en-IE">en-IE</option>
|
||||
<option value="en-IN">en-IN</option>
|
||||
<option value="en-NZ">en-NZ</option>
|
||||
<option value="en-US">en-US</option>
|
||||
<option value="en-ZA">en-ZA</option>
|
||||
<option value="es-AR">es-AR</option>
|
||||
<option value="es-CL">es-CL</option>
|
||||
<option value="es-CO">es-CO</option>
|
||||
<option value="es-ES">es-ES</option>
|
||||
<option value="es-MX">es-MX</option>
|
||||
<option value="es-US">es-US</option>
|
||||
<option value="fi-FI">fi-FI</option>
|
||||
<option value="fr-BE">fr-BE</option>
|
||||
<option value="fr-CA">fr-CA</option>
|
||||
<option value="fr-CH">fr-CH</option>
|
||||
<option value="fr-FR">fr-FR</option>
|
||||
<option value="he-IL">he-IL</option>
|
||||
<option value="hi-IN">hi-IN</option>
|
||||
<option value="hu-HU">hu-HU</option>
|
||||
<option value="id-ID">id-ID</option>
|
||||
<option value="it-CH">it-CH</option>
|
||||
<option value="it-IT">it-IT</option>
|
||||
<option value="ja-JP">ja-JP</option>
|
||||
<option value="ko-KR">ko-KR</option>
|
||||
<option value="nl-BE">nl-BE</option>
|
||||
<option value="nl-NL">nl-NL</option>
|
||||
<option value="no-NO">no-NO</option>
|
||||
<option value="pl-PL">pl-PL</option>
|
||||
<option value="pt-BR">pt-BR</option>
|
||||
<option value="pt-PT">pt-PT</option>
|
||||
<option value="ro-RO">ro-RO</option>
|
||||
<option value="ru-RU">ru-RU</option>
|
||||
<option value="sk-SK">sk-SK</option>
|
||||
<option value="sv-SE">sv-SE</option>
|
||||
<option value="ta-IN">ta-IN</option>
|
||||
<option value="ta-LK">ta-LK</option>
|
||||
<option value="th-TH">th-TH</option>
|
||||
<option value="tr-TR">tr-TR</option>
|
||||
<option value="zh-CN">zh-CN</option>
|
||||
<option value="zh-HK">zh-HK</option>
|
||||
<option value="zh-TW">zh-TW</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="default-service-input">Default Notification Service</label></td>
|
||||
<td><select id="default-service-input"></select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="password-input">Change Password</label></td>
|
||||
<td>
|
||||
<form id="change-password-form">
|
||||
<input type="password" id="password-input" autocomplete="new-password" required>
|
||||
<button type="submit">Change</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="delete-account-button">Delete Account</label></td>
|
||||
<td><button id="delete-account-button">Delete Account</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="table-container">
|
||||
<table id="settings-table" class="collaps-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><label for="locale-input">Locale</label></th>
|
||||
<td>
|
||||
<select id="locale-input" class="input-style">
|
||||
<option value="ar-SA">ar-SA</option>
|
||||
<option value="bn-BD">bn-BD</option>
|
||||
<option value="bn-IN">bn-IN</option>
|
||||
<option value="cs-CZ">cs-CZ</option>
|
||||
<option value="da-DK">da-DK</option>
|
||||
<option value="de-AT">de-AT</option>
|
||||
<option value="de-CH">de-CH</option>
|
||||
<option value="de-DE">de-DE</option>
|
||||
<option value="el-GR">el-GR</option>
|
||||
<option value="en-AU">en-AU</option>
|
||||
<option value="en-CA">en-CA</option>
|
||||
<option value="en-GB" selected>en-GB</option>
|
||||
<option value="en-IE">en-IE</option>
|
||||
<option value="en-IN">en-IN</option>
|
||||
<option value="en-NZ">en-NZ</option>
|
||||
<option value="en-US">en-US</option>
|
||||
<option value="en-ZA">en-ZA</option>
|
||||
<option value="es-AR">es-AR</option>
|
||||
<option value="es-CL">es-CL</option>
|
||||
<option value="es-CO">es-CO</option>
|
||||
<option value="es-ES">es-ES</option>
|
||||
<option value="es-MX">es-MX</option>
|
||||
<option value="es-US">es-US</option>
|
||||
<option value="fi-FI">fi-FI</option>
|
||||
<option value="fr-BE">fr-BE</option>
|
||||
<option value="fr-CA">fr-CA</option>
|
||||
<option value="fr-CH">fr-CH</option>
|
||||
<option value="fr-FR">fr-FR</option>
|
||||
<option value="he-IL">he-IL</option>
|
||||
<option value="hi-IN">hi-IN</option>
|
||||
<option value="hu-HU">hu-HU</option>
|
||||
<option value="id-ID">id-ID</option>
|
||||
<option value="it-CH">it-CH</option>
|
||||
<option value="it-IT">it-IT</option>
|
||||
<option value="ja-JP">ja-JP</option>
|
||||
<option value="ko-KR">ko-KR</option>
|
||||
<option value="nl-BE">nl-BE</option>
|
||||
<option value="nl-NL">nl-NL</option>
|
||||
<option value="no-NO">no-NO</option>
|
||||
<option value="pl-PL">pl-PL</option>
|
||||
<option value="pt-BR">pt-BR</option>
|
||||
<option value="pt-PT">pt-PT</option>
|
||||
<option value="ro-RO">ro-RO</option>
|
||||
<option value="ru-RU">ru-RU</option>
|
||||
<option value="sk-SK">sk-SK</option>
|
||||
<option value="sv-SE">sv-SE</option>
|
||||
<option value="ta-IN">ta-IN</option>
|
||||
<option value="ta-LK">ta-LK</option>
|
||||
<option value="th-TH">th-TH</option>
|
||||
<option value="tr-TR">tr-TR</option>
|
||||
<option value="zh-CN">zh-CN</option>
|
||||
<option value="zh-HK">zh-HK</option>
|
||||
<option value="zh-TW">zh-TW</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="default-service-input">Default Notification Service</label></th>
|
||||
<td><select id="default-service-input" class="input-style"></select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="change-password-input">Change Password</label></th>
|
||||
<td>
|
||||
<form id="change-password-form">
|
||||
<input type="text" name="hidden-username" class="hidden" autocomplete="username">
|
||||
<input type="password" id="change-password-input" class="input-style" autocomplete="new-password" placeholder="New Password" required>
|
||||
<button type="submit" class="input-style">Change</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="delete-account-button">Delete Account</label></th>
|
||||
<td><button id="delete-account-button" class="input-style">Delete Account</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2>Contact and Donation</h2>
|
||||
<div class="contact-list">
|
||||
<a href="https://ko-fi.com/casvt">Donate to MIND</a>
|
||||
|
||||
Reference in New Issue
Block a user