Skip to content

Commit

Permalink
[Web] organize user landing
Browse files Browse the repository at this point in the history
  • Loading branch information
@FreddleSpl0it @DerLinkman
FreddleSpl0it authored and DerLinkman committed Feb 8, 2024
1 parent 84ff6ff commit 56a9f1a
Show file tree
Hide file tree
Showing 6 changed files with 271 additions and 220 deletions.
1 change: 1 addition & 0 deletions data/web/css/build/014-mailcow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ button[aria-expanded='true'] > .caret {
background-color: #f0f0f0;
}
.btn.btn-outline-secondary {
color: #000000 !important;
border-color: #cfcfcf !important;
}
.btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
Expand Down
30 changes: 21 additions & 9 deletions data/web/js/site/user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,11 @@ jQuery(function($){
acl_data = JSON.parse(acl);

$('.clear-last-logins').on('click', function () {if (confirm(lang.delete_ays)) {last_logins('reset');}})
$(".login-history").on('click', function(e) {e.preventDefault(); last_logins('get', $(this).data('days'));$(this).addClass('active').siblings().removeClass('active');});
$(".login-history").on('click', function(e) {e.preventDefault(); last_logins('get', $(this).data('days'));$(this).parent().find('li a').removeClass('active');$(this).children(':first-child').addClass('active')});

function last_logins(action, days = 7) {
if (action == 'get') {
$('.last-login').html('<i class="bi bi-hourglass"></i>' + lang.waiting);
$('#spinner-last-login').removeClass('d-none');
$.ajax({
dataType: 'json',
url: '/api/v1/get/last-login/' + encodeURIComponent(mailcow_cc_username) + '/' + days,
Expand All @@ -90,26 +90,38 @@ jQuery(function($){
console.log('error reading last logins');
},
success: function (data) {
$('.last-login').html();
$('.last-ui-login').html('');
$('.last-sasl-login').html('');
if (data.ui.time) {
$('.last-login').html('<i class="bi bi-person-fill"></i> ' + lang.last_ui_login + ': ' + unix_time_format(data.ui.time));
$('.last-ui-login').html('<i class="bi bi-person-fill"></i> ' + lang.last_ui_login + ': ' + unix_time_format(data.ui.time));
} else {
$('.last-login').text(lang.no_last_login);
$('.last-ui-login').text(lang.no_last_login);
}
if (data.sasl) {
$('.last-login').append('<ul class="list-group">');
$('.last-sasl-login').append('<ul class="list-group">');
$.each(data.sasl, function (i, item) {
var datetime = new Date(item.datetime.replace(/-/g, "/"));
var local_datetime = datetime.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
var service = '<div class="badge fs-6 bg-secondary">' + item.service.toUpperCase() + '</div>';
var service = '<div class="badge bg-secondary">' + item.service.toUpperCase() + '</div>';
var app_password = item.app_password ? ' <a href="/edit/app-passwd/' + item.app_password + '"><i class="bi bi-app-indicator"></i> ' + escapeHtml(item.app_password_name || "App") + '</a>' : '';
var real_rip = item.real_rip.startsWith("Web") ? item.real_rip : '<a href="https://bgp.he.net/ip/' + item.real_rip + '" target="_blank">' + item.real_rip + "</a>";
var ip_location = item.location ? ' <span class="flag-icon flag-icon-' + item.location.toLowerCase() + '"></span>' : '';
var ip_data = real_rip + ip_location + app_password;
$(".last-login").append('<li class="list-group-item">' + local_datetime + " " + service + " " + lang.from + " " + ip_data + "</li>");

$(".last-sasl-login").append(`
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto d-flex flex-column">
<div class="fw-bold">` + real_rip + `</div>
<small class="fst-italic mt-2">` + service + ` ` + local_datetime + `</small>
</div>
<span>` + ip_location + `</span>
</li>
`);
})
$('.last-login').append('</ul>');
$('.last-sasl-login').append('</ul>');
}

$('#spinner-last-login').addClass('d-none');
}
})
} else if (action == 'reset') {
Expand Down
141 changes: 72 additions & 69 deletions data/web/templates/domainadmin.twig
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,83 @@
{% extends 'base.twig' %}

{% block content %}
<h3>{{ lang.user.user_settings }}</h3>
<div class="card">
<div class="card-header">{{ lang.user.user_settings }}</div>
<div class="card-body">
<div class="row">
<div class="offset-sm-3 col-sm-9">
<p><a href="#pwChangeModal" data-bs-toggle="modal">[{{ lang.user.change_password }}]</a></p>
<div class="last-login"></div>
<span class="clear-last-logins">{{ lang.user.clear_recent_successful_connections }}</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">{{ lang.user.user_settings }}</div>
<div class="card-body">
<div class="row">
<div class="offset-sm-3 col-sm-9">
<p><a href="#pwChangeModal" data-bs-toggle="modal">[{{ lang.user.change_password }}]</a></p>
<div class="last-ui-login"></div>
<span class="clear-last-logins">{{ lang.user.clear_recent_successful_connections }}</span>
</div>
</div>
<hr>

{# TFA #}
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}</div>
<div class="col-sm-9 col-7">
<p id="tfa_pretty">{{ tfa_data.pretty }}</p>
{% include 'tfa_keys.twig' %}
<br>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}</div>
<div class="col-sm-9 col-7">
<select id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
<option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
<option value="webauthn">{{ lang.tfa.webauthn }}</option>
<option value="totp">{{ lang.tfa.totp }}</option>
<option value="none">{{ lang.tfa.none }}</option>
</select>
</div>
</div>
{# TFA #}
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}</div>
<div class="col-sm-9 col-7">
<p id="tfa_pretty">{{ tfa_data.pretty }}</p>
{% include 'tfa_keys.twig' %}
<br>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}</div>
<div class="col-sm-9 col-7">
<select id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
<option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
<option value="webauthn">{{ lang.tfa.webauthn }}</option>
<option value="totp">{{ lang.tfa.totp }}</option>
<option value="none">{{ lang.tfa.none }}</option>
</select>
</div>
</div>

<hr>
{# FIDO2 #}
<div class="row">
<div class="col-sm-3 col-5 text-end">
<p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.fido2.known_ids }}:</div>
<div class="col-sm-9 col-7">
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed w-100" id="fido2_keys">
<tr>
<th>ID</th>
<th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
</tr>
{% include 'fido2.twig' %}
</table>
</div>
<br>
</div>
</div>
<div class="row">
<div class="offset-sm-3 col-sm-9">
<div class="btn-group">
<button class="btn btn-sm btn-primary" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
<button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
</ul>
<hr>
{# FIDO2 #}
<div class="row">
<div class="col-sm-3 col-5 text-end">
<p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-5 text-end">{{ lang.fido2.known_ids }}:</div>
<div class="col-sm-9 col-7">
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed w-100" id="fido2_keys">
<tr>
<th>ID</th>
<th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
</tr>
{% include 'fido2.twig' %}
</table>
</div>
<br>
</div>
</div>
</div>
<br>
<div class="row" id="status-fido2">
<div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
<div class="col-sm-9 col-7">
<div id="fido2-alerts">-</div>
<div class="row">
<div class="offset-sm-3 col-sm-9">
<div class="btn-group">
<button class="btn btn-sm btn-primary" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
<button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
</ul>
</div>
</div>
</div>
<br>
<div class="row" id="status-fido2">
<div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
<div class="col-sm-9 col-7">
<div id="fido2-alerts">-</div>
</div>
<br>
</div>
</div>
<br>
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion data/web/templates/user.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
</div>
</div>
</div>
<div style="margin-bottom:200px;"></div>
{% include 'user_domainadmin_common.twig' %}
</div>
{% endblock %}
8 changes: 4 additions & 4 deletions data/web/templates/user/Spamfilter.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
</div>
<hr>
<div class="row">
<div class="col-lg-6 my-3">
<div class="col-lg-6 my-3 d-flex flex-column">
<h4>{{ lang.user.spamfilter_wl }}</h4>
<p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
<form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
<form class="form-inline mb-4 mt-auto" data-id="add_wl_policy_mailbox">
<div class="input-group" data-acl="{{ acl.spam_policy }}">
<input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
<button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
Expand All @@ -61,10 +61,10 @@
</div>
</div>
</div>
<div class="col-lg-6 my-3">
<div class="col-lg-6 my-3 d-flex flex-column">
<h4>{{ lang.user.spamfilter_bl }}</h4>
<p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
<form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
<form class="form-inline mb-4 mt-auto" data-id="add_bl_policy_mailbox">
<div class="input-group" data-acl="{{ acl.spam_policy }}">
<input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
<button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
Expand Down

0 comments on commit 56a9f1a

Please sign in to comment.