Mirror
/
app-MAIL-temp
mirror of https://github.com/simple-login/app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace save/update buttons with an auto save feature (#1685) 

* replace save/update buttons with auto save feature

* minor css improvement
This commit is contained in:
D-Bao 2023-04-11 20:52:44 +00:00 committed by GitHub
parent ec666aee87
commit e3ae9bc6d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/js/index.js
View File

@ -155,10 +155,8 @@ $(".pin-alias").change(async function () {
}
});
$(".save-note").on("click", async function () {
let oldValue;
let aliasId = $(this).data("alias");
let note = $(`#note-${aliasId}`).val();
async function handleNoteChange(aliasId, aliasEmail) {
const note = document.getElementById(`note-${aliasId}`).value;
try {
let res = await fetch(`/api/aliases/${aliasId}`, {
@ -172,26 +170,27 @@ $(".save-note").on("click", async function () {
});
if (res.ok) {
toastr.success(`Saved`);
toastr.success(`Description saved for ${aliasEmail}`);
} else {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
// reset to the original value
oldValue = !$(this).prop("checked");
$(this).prop("checked", oldValue);
}
} catch (e) {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
// reset to the original value
oldValue = !$(this).prop("checked");
$(this).prop("checked", oldValue);
}
});
}
$(".save-mailbox").on("click", async function () {
let oldValue;
let aliasId = $(this).data("alias");
let mailbox_ids = $(`#mailbox-${aliasId}`).val();
function handleNoteFocus(aliasId) {
document.getElementById(`note-focus-message-${aliasId}`).classList.remove('d-none');
}
function handleNoteBlur(aliasId) {
document.getElementById(`note-focus-message-${aliasId}`).classList.add('d-none');
}
async function handleMailboxChange(aliasId, aliasEmail) {
const selectedOptions = document.getElementById(`mailbox-${aliasId}`).selectedOptions;
const mailbox_ids = Array.from(selectedOptions).map((selectedOption) => selectedOption.value);
if (mailbox_ids.length === 0) {
toastr.error("You must select at least a mailbox", "Error");
@ -210,25 +209,18 @@ $(".save-mailbox").on("click", async function () {
});
if (res.ok) {
toastr.success(`Mailbox Updated`);
toastr.success(`Mailbox updated for ${aliasEmail}`);
} else {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
// reset to the original value
oldValue = !$(this).prop("checked");
$(this).prop("checked", oldValue);
}
} catch (e) {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
// reset to the original value
oldValue = !$(this).prop("checked");
$(this).prop("checked", oldValue);
}
});
}
$(".save-alias-name").on("click", async function () {
let aliasId = $(this).data("alias");
let name = $(`#alias-name-${aliasId}`).val();
async function handleDisplayNameChange(aliasId, aliasEmail) {
const name = document.getElementById(`alias-name-${aliasId}`).value;
try {
let res = await fetch(`/api/aliases/${aliasId}`, {
@ -242,7 +234,7 @@ $(".save-alias-name").on("click", async function () {
});
if (res.ok) {
toastr.success(`Alias Name Saved`);
toastr.success(`Display name saved for ${aliasEmail}`);
} else {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
}
@ -250,8 +242,15 @@ $(".save-alias-name").on("click", async function () {
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
}
});
}
function handleDisplayNameFocus(aliasId) {
document.getElementById(`display-name-focus-message-${aliasId}`).classList.remove('d-none');
}
function handleDisplayNameBlur(aliasId) {
document.getElementById(`display-name-focus-message-${aliasId}`).classList.add('d-none');
}
new Vue({
el: '#filter-app',
@ -270,4 +269,4 @@ new Vue({
if (store.get("showFilter"))
this.showFilter = true;
}
});
});

32
templates/dashboard/index.html
View File

@ -342,17 +342,11 @@
</div>
<!-- END Email Activity -->
<div class="small-text mt-1">
Alias description
Alias description <span id="note-focus-message-{{ alias.id }}" class="d-none font-italic">(automatically saved when you click outside the field)</span>
</div>
<div class="d-flex mb-2">
<div class="flex-grow-1 mr-2">
<textarea id="note-{{ alias.id }}" name="note" class="form-control" style="font-size: 12px" rows="2" placeholder="e.g. where the alias is used or why is it created">{{ alias.note or "" }}</textarea>
</div>
<div>
<a data-alias="{{ alias.id }}"
class="save-note btn btn-sm btn-outline-success w-100">
Save
</a>
<textarea id="note-{{ alias.id }}" name="note" class="form-control" style="font-size: 12px" rows="2" placeholder="e.g. where the alias is used or why is it created" onchange="handleNoteChange({{ alias.id }}, '{{ alias.email }}')" onfocus="handleNoteFocus({{ alias.id }})" onblur="handleNoteBlur({{ alias.id }})">{{ alias.note or "" }}</textarea>
</div>
</div>
<!-- Send Email && More button -->
@ -421,7 +415,8 @@
data-width="100%"
class="mailbox-select"
multiple
name="mailbox">
name="mailbox"
onchange="handleMailboxChange({{ alias.id }}, '{{ alias.email }}')">
{% for mailbox in mailboxes %}
<option value="{{ mailbox.id }}" {% if alias_info.contain_mailbox(mailbox.id) %}
@ -431,12 +426,6 @@
{% endfor %}
</select>
</div>
<div>
<a data-alias="{{ alias.id }}"
class="save-mailbox btn btn-sm btn-outline-info w-100">
Update
</a>
</div>
</div>
{% elif alias_info.mailbox != None and alias_info.mailbox.email != current_user.email %}
<div class="small-text">
@ -448,19 +437,18 @@
title="When sending an email from this alias, the email will have 'Display Name <{{ alias.email }}>' as sender.">
Display name
<i class="fe fe-help-circle"></i>
<span id="display-name-focus-message-{{ alias.id }}"
class="d-none font-italic">(automatically saved when you click outside the field or press Enter)</span>
</div>
<div class="d-flex">
<div class="flex-grow-1 mr-2">
<input id="alias-name-{{ alias.id }}"
value="{{ alias.name or '' }}"
class="form-control"
placeholder="{{ alias.custom_domain.name or "Alias name" }}">
</div>
<div>
<a data-alias="{{ alias.id }}"
class="save-alias-name btn btn-sm btn-outline-primary w-100">
Save
</a>
placeholder="{{ alias.custom_domain.name or "Alias name" }}"
onchange="handleDisplayNameChange({{ alias.id }}, '{{ alias.email }}')"
onfocus="handleDisplayNameFocus({{ alias.id }})"
onblur="handleDisplayNameBlur({{ alias.id }})">
</div>
</div>
{% if alias.mailbox_support_pgp() %}