Skip to content
Snippets Groups Projects
Verified Commit e88193d8 authored by Gabriel Zachmann's avatar Gabriel Zachmann
Browse files

[web] add possibility to subscribe notifications in the webitnerface

parent 93ce9c76
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
internal/server/web/partials/list-mts.mustache
+ 2
− 1
View file @ e88193d8
......@@ -9,4 +9,5 @@
</button>
<p class="card-text" id="list-msg"></p>
{{>history-modal}}
\ No newline at end of file
{{>history-modal}}
{{>notifications-subscribe-modal}}
internal/server/web/partials/notifications-subscribe-modal.mustache 0 → 100644
+ 87
− 0
View file @ e88193d8
<div class="modal fade" id="notifications-subscribe-modal" tabindex="-1" role="dialog"
aria-labelledby="notifications-modal-title"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content bg-my_grey">
<div class="modal-header">
<h5 class="modal-title" id="notifications-modal-title">Notifications</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input id="notify-id" type="text" hidden>
<span class="input-group">
<select id="notification-type-selector" class="form-control custom-select form-inline">
<option value="entry">Single Calendar Invite</option>
<option value="email">Email</option>
<option value="calendar">Calendar</option>
</select>
<span id="input-group-append">
<span class="input-group-text"><i class="fas fa-paper-plane
notify-entry-content"></i></span>
<span class="input-group-text d-none notify-email-content"><i class="fas fa-envelope"></i></span>
<span class="input-group-text d-none notify-calendar-content"><i
class="fas fa-calendar-alt"></i></span>
</span>
</span>
</div>
<div class="notify-entry-content">
<div class="alert alert-danger border notify-entry-content-element d-none"
id="email-not-verified-hint">
Your email address is not yet verified. Please verify it with the verification link we sent
you or request a new verification code from <a href="/settings">Settings -> Notifications ->
Email</a>.
</div>
<div class="alert alert-danger border notify-entry-content-element d-none" id="email-not-set-hint">
We currently do not have an email address linked to your identity. Please set an email
address under <a href="/settings">Settings -> Notifications -> Email</a>.
</div>
<div class="notify-entry-content-element" id="notify-entry-content-normal">
<p>
You can send a calendar invite to your email address with an event for the token's
expiration.
This will remind in advance, so you can create a new token timely.
</p>
<p>
If you want, you can add a comment:
</p>
<textarea class="form-control" id="notify-entry-comment"></textarea>
<button class="btn btn-primary" id="sent-entry">
<i class="fas fa-paper-plane"></i>
<i class="fas fa-calendar-alt"></i>
Sent
</button>
</div>
</div>
<div class="notify-email-content d-none">
Not yet implemented.
</div>
<div class="notify-calendar-content d-none">
<p>
You can add this mytoken to one of your calendars. If you have subscribed to the calendar, it
will automatically be added, and you will be reminded that the token expires in advance, so you
can create a new token timely.
</p>
<select class="form-control custom-select form-inline" id="notify-calendar-selector"></select>
<p>You can subscribe to this calendar using the following url: <a href="#"
id="notify-calendar-url"></a></p>
<p>
If you want, you can add a comment:
</p>
<textarea class="form-control" id="notify-calendar-comment"></textarea>
<button class="btn btn-primary" id="sent-calendar-add">
<i class="fas fa-calendar-alt"></i>
Add to calendar
</button>
</div>
</div>
</div>
</div>
</div>
internal/server/web/static/js/tokeninfo.js
+ 145
− 6
View file @ e88193d8
const $tokenInput = $('#tokeninfo-token');
const $notificationsModal = $('#notifications-subscribe-modal');
const $notificationMOMID = $('#notify-id');
let tokeninfoEndpointToUse;
function _tokeninfo(action, successFnc, errorFnc, token = undefined, mom_id = undefined) {
......@@ -141,13 +144,16 @@ function _tokenTreeToHTML(tree, deleteClass, depth, parentID = 0) {
hasChildren = true;
})
}
let isExpired = (expires_at !== 0 && new Date(expires_at * 1000) < new Date());
let historyBtn = `<button id="history-${token['mom_id']}" class="btn ml-2" type="button" onclick="showHistoryForID.call(this)" ${loggedIn ? "" : "disabled"} data-toggle="tooltip" data-placement="right" title="${loggedIn ? 'Event History' : 'Sign in to show event history.'}"><i class="fas fa-history"></i></button>`;
let deleteBtn = `<button id="revoke-${token['mom_id']}" class="btn ${deleteClass}" type="button" onclick="startRevocateID.call(this)" ${loggedIn ? "" : "disabled"} data-toggle="tooltip" data-placement="right" title="${loggedIn ? 'Revoke Token' : 'Sign in to revoke token.'}"><i class="fas fa-trash"></i></button>`;
let tr_class = depth > 0 ? 'd-none' : '';
if (expires_at !== 0 && new Date(expires_at * 1000) < new Date()) {
tr_class += " text-muted";
let notificationsBtn = `<button id="notify-${token['mom_id']}" class="btn ${isExpired ? 'text-muted' : ''}" type="button" onclick="notificationModal.call(this)" ${!loggedIn || isExpired ? "disabled" : ""}`;
if (!isExpired) {
notificationsBtn += ` data-toggle="tooltip" data-placement="right" title="${loggedIn ? 'Subscribe to' +
' notifications' : 'Sign in to subscribe to notifications.'}"`;
}
tableEntries = `<tr id="${thisID}" parent-id="${parentID}" class="${tr_class}"><td class="${hasChildren ? 'token-fold' : ''}${nameClass}"><span style="margin-right: ${1.5 * depth}rem;"></span><i class="mr-2 fas fa-caret-right${hasChildren ? "" : " d-none"}"></i>${name}</td><td>${created}</td><td>${token['ip']}</td><td>${expires}</td><td>${historyBtn}${deleteBtn}</td></tr>` + tableEntries;
notificationsBtn += `><i class="fas fa-bell"></i></butoton>`;
tableEntries = `<tr id="${thisID}" parent-id="${parentID}" class="${depth > 0 ? 'd-none' : ''} ${isExpired ? 'text-muted' : ''}"><td class="${hasChildren ? 'token-fold' : ''}${nameClass}"><span style="margin-right: ${1.5 * depth}rem;"></span><i class="mr-2 fas fa-caret-right${hasChildren ? "" : " d-none"}"></i>${name}</td><td>${created}</td><td>${token['ip']}</td><td>${expires}</td><td>${historyBtn}${notificationsBtn}${deleteBtn}</td></tr>` + tableEntries;
return tableEntries
}
......@@ -161,7 +167,7 @@ function tokenlistToHTML(tokenTrees, deleteClass) {
}
return '<table class="table table-hover table-grey">' +
'<thead><tr>' +
'<th style="min-width: 40%;">Token Name</th>' +
'<th style="min-width: 35%;">Token Name</th>' +
'<th>Created</th>' +
'<th>Created from IP</th>' +
'<th>Expires</th>' +
......@@ -312,4 +318,137 @@ $('#revoke-tokeninfo').on('click', function () {
}
$revocationFormID.addClass(revocationClassFromTokeninfo);
$revocationModal.modal();
})
\ No newline at end of file
})
function notificationModal() {
let id = this.id.replace("notify-", "");
$notificationMOMID.val(id);
$notificationsModal.modal();
}
const $notificationTypeEmailContent = $('.notify-email-content');
const $notificationTypeEntryContent = $('.notify-entry-content');
const $notificationTypeCalendarContent = $('.notify-calendar-content');
const $calendarSelector = $('#notify-calendar-selector');
const $calendarURL = $('#notify-calendar-url');
let calendarURLs = {};
$('#notification-type-selector').on('change', function () {
let t = $(this).val();
switch (t) {
case 'email':
$notificationTypeEntryContent.hideB();
$notificationTypeCalendarContent.hideB();
$notificationTypeEmailContent.showB();
break;
case 'entry':
$notificationTypeCalendarContent.hideB();
$notificationTypeEmailContent.hideB();
$notificationTypeEntryContent.showB();
$('.notify-entry-content-element').hideB();
$.ajax({
type: "GET",
url: storageGet('usersettings_endpoint') + "/email",
success: function (res) {
let email = res["email_address"];
let email_verified = res["email_verified"];
if (email === undefined || email === null || email === "") {
$('#email-not-verified-hint').showB();
return;
}
if (email_verified === undefined || !email_verified) {
$('#email-not-set-hint').showB();
return;
}
$('#notify-entry-content-normal').showB();
},
error: function (errRes) {
$errorModalMsg.text(getErrorMessage(errRes));
$errorModal.modal();
},
});
break;
case 'calendar':
$notificationTypeEntryContent.hideB();
$notificationTypeEmailContent.hideB();
$notificationTypeCalendarContent.showB();
$.ajax({
type: "GET",
url: storageGet('notifications_endpoint') + "/calendars",
success: function (res) {
let options = "";
let cals = res["calendars"];
if (cals !== undefined && cals !== null) {
cals.forEach(function (cal) {
let name = cal["name"];
calendarURLs[name] = cal["ics_path"];
options += `<option value=${name}>${name}</option>`;
})
}
$calendarSelector.html(options);
$calendarSelector.trigger('change');
},
error: function (errRes) {
$settingsErrorModalMsg.text(getErrorMessage(errRes));
$settingsErrorModal.modal();
},
});
break;
}
})
$('#sent-entry').on('click', function () {
let data = {"mom_id": $notificationMOMID.val()};
let comment = $('#notify-entry-comment').val();
if (comment !== undefined && comment !== null && comment !== "") {
data["comment"] = comment;
}
data = JSON.stringify(data);
$.ajax({
type: "POST",
data: data,
dataType: "json",
contentType: "application/json",
url: storageGet('notifications_endpoint'),
success: function () {
$notificationsModal.modal("hide");
},
error: function (errRes) {
$errorModalMsg.text(getErrorMessage(errRes));
$errorModal.modal();
},
});
})
$calendarSelector.on('change', function () {
let url = calendarURLs[$(this).val()];
$calendarURL.text(url);
$calendarURL.attr("href", url);
})
$('#sent-calendar-add').on('click', function () {
let data = {"mom_id": $notificationMOMID.val()};
let comment = $('#notify-calendar-comment').val();
if (comment !== undefined && comment !== null && comment !== "") {
data["comment"] = comment;
}
let calendar = $calendarSelector.val();
data = JSON.stringify(data);
$.ajax({
type: "POST",
data: data,
dataType: "json",
contentType: "application/json",
url: storageGet('notifications_endpoint') + "/calendars/" + calendar,
success: function () {
$notificationsModal.modal("hide");
},
error: function (errRes) {
$errorModalMsg.text(getErrorMessage(errRes));
$errorModal.modal();
},
});
})
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog