forked from zer.ooo/web
revamp invites and certificates screen
This commit is contained in:
Corne Oppelaar
parent
72482e4f92
commit
414f17476f
10 changed files with 161 additions and 91 deletions
|
|
@ -134,7 +134,10 @@ body {
|
|||
padding: 15px;
|
||||
margin-top: 20px; }
|
||||
|
||||
.certificate-create {
|
||||
.invite-create {
|
||||
float: right; }
|
||||
|
||||
.certificate-create, .invite-create button {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
background: #53257e;
|
||||
|
|
@ -142,49 +145,72 @@ body {
|
|||
padding: 5px;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
cursor: pointer; }
|
||||
cursor: pointer;
|
||||
font-family: 'Karla', sans-serif; }
|
||||
|
||||
.panel-content > h1 {
|
||||
.panel-content > h1,
|
||||
.panel-content > .title > h1 {
|
||||
margin: 0 0 25px; }
|
||||
|
||||
.panel-content > h1 + .undertone {
|
||||
.panel-content > h1 + .undertone,
|
||||
.panel-content > .title > h1 + .undertone {
|
||||
margin-top: -25px;
|
||||
color: #999999;
|
||||
margin-bottom: 25px; }
|
||||
|
||||
.certificate-list {
|
||||
.certificate-list, .invites {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0; }
|
||||
.certificate-list li {
|
||||
.certificate-list li, .invites li {
|
||||
border-left: 3px #e3b2a6 solid;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
position: relative; }
|
||||
.certificate-list li .text .expiry {
|
||||
.certificate-list li .text .expiry, .invites li .text .expiry {
|
||||
font-size: 14px;
|
||||
color: #999999; }
|
||||
.certificate-list li .actions {
|
||||
.certificate-list li .revoke-q, .invites li .revoke-q {
|
||||
display: none; }
|
||||
.certificate-list li .actions, .certificate-list li .revoke-q, .invites li .actions, .invites li .revoke-q {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
.certificate-list li .actions span {
|
||||
.certificate-list li .actions span, .certificate-list li .revoke-q span, .invites li .actions span, .invites li .revoke-q span {
|
||||
transition: .2s;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
float: left;
|
||||
display: block; }
|
||||
.certificate-list li .actions span a {
|
||||
.certificate-list li .actions span a, .certificate-list li .revoke-q span a, .invites li .actions span a, .invites li .revoke-q span a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: -5px;
|
||||
padding: 5px; }
|
||||
.certificate-list li .actions .certificate-delete:hover {
|
||||
.certificate-list li .actions .certificate-delete:hover,
|
||||
.certificate-list li .actions .yes:hover, .certificate-list li .revoke-q .certificate-delete:hover,
|
||||
.certificate-list li .revoke-q .yes:hover, .invites li .actions .certificate-delete:hover,
|
||||
.invites li .actions .yes:hover, .invites li .revoke-q .certificate-delete:hover,
|
||||
.invites li .revoke-q .yes:hover {
|
||||
background: #dc6a6a; }
|
||||
.certificate-list li .actions .certificate-download:hover,
|
||||
.certificate-list li .actions .certificate-download-key:hover {
|
||||
.certificate-list li .actions .certificate-download-key:hover,
|
||||
.certificate-list li .actions .no:hover,
|
||||
.certificate-list li .actions .copy:hover, .certificate-list li .revoke-q .certificate-download:hover,
|
||||
.certificate-list li .revoke-q .certificate-download-key:hover,
|
||||
.certificate-list li .revoke-q .no:hover,
|
||||
.certificate-list li .revoke-q .copy:hover, .invites li .actions .certificate-download:hover,
|
||||
.invites li .actions .certificate-download-key:hover,
|
||||
.invites li .actions .no:hover,
|
||||
.invites li .actions .copy:hover, .invites li .revoke-q .certificate-download:hover,
|
||||
.invites li .revoke-q .certificate-download-key:hover,
|
||||
.invites li .revoke-q .no:hover,
|
||||
.invites li .revoke-q .copy:hover {
|
||||
background: #aca4bc; }
|
||||
.certificate-list li .actions .no, .certificate-list li .revoke-q .no, .invites li .actions .no, .invites li .revoke-q .no {
|
||||
width: 65px;
|
||||
text-align: center; }
|
||||
|
||||
ul.topnav {
|
||||
list-style-type: none;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -88,16 +88,18 @@ body {
|
|||
* Third section of the main page, containing the link to the Github page.
|
||||
*/
|
||||
|
||||
.footer-page {
|
||||
.footer-page {
|
||||
@extend .flexpage;
|
||||
|
||||
flex: 1;
|
||||
background-color: #e2f2f0;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
min-height: 20vh;
|
||||
|
||||
@include break-small {
|
||||
height: 100%;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,10 +108,11 @@ body {
|
|||
|
||||
.login-page {
|
||||
@extend .flexpage;
|
||||
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.login-page-form {
|
||||
background-color: #fff;
|
||||
|
|
@ -145,7 +148,11 @@ body {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.certificate-create {
|
||||
.invite-create {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.certificate-create, .invite-create button {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
background: hsl(271, 55%, 32%);
|
||||
|
|
@ -154,19 +161,22 @@ body {
|
|||
float: right;
|
||||
text-decoration:none;
|
||||
cursor: pointer;
|
||||
font-family: 'Karla', sans-serif;
|
||||
}
|
||||
|
||||
.panel-content > h1 {
|
||||
.panel-content > h1,
|
||||
.panel-content > .title > h1 {
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.panel-content > h1 + .undertone {
|
||||
.panel-content > h1 + .undertone,
|
||||
.panel-content > .title > h1 + .undertone {
|
||||
margin-top: -25px;
|
||||
color: #999999;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.certificate-list {
|
||||
.certificate-list, .invites {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -184,7 +194,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
.revoke-q {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actions, .revoke-q {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -205,13 +219,25 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.certificate-delete:hover {
|
||||
background: hsl(0, 62%, 64%);
|
||||
.certificate-delete,
|
||||
.yes {
|
||||
&:hover {
|
||||
background: hsl(0, 62%, 64%);
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-download:hover,
|
||||
.certificate-download-key:hover {
|
||||
background: #aca4bc;
|
||||
.certificate-download,
|
||||
.certificate-download-key,
|
||||
.no,
|
||||
.copy {
|
||||
&:hover {
|
||||
background: #aca4bc;
|
||||
}
|
||||
}
|
||||
|
||||
.no {
|
||||
width: 65px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
$(function () {
|
||||
var errorDiv = $('<div>').addClass('error-message');
|
||||
|
||||
function error(msg) {
|
||||
$('.title').after(errorDiv.text(msg));
|
||||
}
|
||||
|
||||
$('.actions .certificate-delete').click(function () {
|
||||
$(this).parents('li').first().find('.certificate-revoke').addClass('show')
|
||||
$(this).parents('.actions').hide().parents('li').first().find('.revoke-q').show();
|
||||
});
|
||||
|
||||
$('.revoke-q .no').click(function () {
|
||||
$(this).parents('.revoke-q').hide().parents('li').first().find('.actions').show();
|
||||
});
|
||||
|
||||
$('.revoke-q .yes').click(function () {
|
||||
var _this=this;
|
||||
|
||||
$.post('/panel/certificates/revoke', {
|
||||
name: $(_this).data('name')
|
||||
}, function (data) {
|
||||
if (data.success) {
|
||||
$(_this)
|
||||
.parents('li')
|
||||
.first()
|
||||
.remove();
|
||||
} else {
|
||||
error(data.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ $(function () {
|
|||
zip.file(commonName + '.key', keyPem);
|
||||
|
||||
for(var file in data.zip) {
|
||||
if (!data.zip.hasOwnProperty(file)) continue;
|
||||
zip.file(file, data.zip[file]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ $(function () {
|
|||
var clipboard = new Clipboard('.copy');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
$(e.trigger).text('Copied!')
|
||||
$(e.trigger).text('copied!');
|
||||
setTimeout(
|
||||
function () {
|
||||
$(e.trigger).text('Copy');
|
||||
$(e.trigger).text('copy');
|
||||
},
|
||||
2000
|
||||
);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
$(e.trigger).text('Couldn\t copy :(')
|
||||
$(e.trigger).text('couldn\t copy :(');
|
||||
setTimeout(
|
||||
function () {
|
||||
$(e.trigger).text('Copy');
|
||||
$(e.trigger).text('copy');
|
||||
},
|
||||
2000
|
||||
);
|
||||
|
|
@ -24,7 +24,6 @@ class Revoke extends Session
|
|||
{
|
||||
$user = $this->getUser();
|
||||
$name = $this->post('name');
|
||||
$password = $this->post('password');
|
||||
|
||||
$cert = CertificateQuery::create()
|
||||
->filterByName($name)
|
||||
|
|
@ -38,13 +37,6 @@ class Revoke extends Session
|
|||
]);
|
||||
}
|
||||
|
||||
if (!password_verify($password, $user->getPassword())) {
|
||||
return $this->json([
|
||||
'success' => false,
|
||||
'error' => 'Invalid password'
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @var CA $ca
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ namespace Eater\Glim\Handler\Panel;
|
|||
|
||||
|
||||
use Aura\Session\Segment;
|
||||
use Eater\Glim\Handler\Panel;
|
||||
use Eater\Glim\Handler\Session;
|
||||
|
||||
class Invites extends Session
|
||||
class Invites extends Panel
|
||||
{
|
||||
protected $shouldHaveUser = true;
|
||||
|
||||
public function handle()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,8 +4,12 @@
|
|||
{% if user.getActiveCertificates()|length < user.getMaxKeys() %}
|
||||
<a href="/panel/certificates/new" class="certificate-create">create</a>
|
||||
{% endif %}
|
||||
<h1>Certificates</h1>
|
||||
<div class="undertone">You used {{ user.getActiveCertificates()|length }} of your {{ user.getMaxKeys() }} certificates</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Certificates</h1>
|
||||
<div class="undertone">You used {{ user.getActiveCertificates()|length }} of your {{ user.getMaxKeys() }} certificates</div>
|
||||
</div>
|
||||
|
||||
<ul class="certificate-list">
|
||||
{% for certificate in user.getActiveCertificates() %}
|
||||
<li>
|
||||
|
|
@ -24,9 +28,18 @@
|
|||
</span>
|
||||
<span class="certificate-delete">revoke</span>
|
||||
</div>
|
||||
<div class="revoke-q">
|
||||
<span class="q">Are you sure you want to revoke this certificate?</span>
|
||||
<span data-name="{{ certificate.getName() }}" class="yes">
|
||||
<a>yes</a>
|
||||
</span>
|
||||
<span class="no">
|
||||
<a>no</a>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>You don't have any certificates :( why not <a href="/panel/certificates/new">create</a> one?</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</ul>
|
||||
{% endblock %}
|
||||
|
|
@ -1,55 +1,40 @@
|
|||
{% extends "base_bootstrap.html.twig" %}
|
||||
{% extends "panel.html.twig" %}
|
||||
|
||||
{% block head %}
|
||||
{{ parent() }}
|
||||
|
||||
<script src="/js/clipboard.min.js"></script>
|
||||
<script src="/js/invites.js"></script>
|
||||
<script src="/js/pages/invites.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h2 id="certificates">Invites <small>You used {{ used_invites }} from your {{ max_invites == -1 ? 'infinite' : max_invites }} invites</small></h2>
|
||||
</div>
|
||||
{% if error %}
|
||||
<div class="row">
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Invite</th>
|
||||
<th>
|
||||
{% if max_invites > used_invites or max_invites == -1 %}
|
||||
<form action="/panel/invites/create" method="post">
|
||||
<button class="btn btn-default pull-right" type="submit">Create new invite</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for invite in invites %}
|
||||
<tr>
|
||||
<td>
|
||||
<kbd>{{ invite.getInvite() }}</kbd>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-default copy pull-right" data-clipboard-text="{{ invite.getInvite() }}">Copy</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="2">You don't have any invites :(</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% block panel_contents %}
|
||||
{% if user.getActiveCertificates()|length < user.getMaxKeys() %}
|
||||
<form class="invite-create" action="/panel/invites/create" method="post">
|
||||
<button type="submit">create</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div class="title">
|
||||
<h1>Invites</h1>
|
||||
<div class="undertone">You used {{ used_invites }} from your {{ max_invites == -1 ? 'infinite' : max_invites }} invites</div>
|
||||
</div>
|
||||
|
||||
<ul class="invites">
|
||||
{% for invite in invites %}
|
||||
<li>
|
||||
<div class="text">
|
||||
<kbd>{{ invite.getInvite() }}</kbd>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<span>
|
||||
<a class="copy" data-clipboard-text="{{ invite.getInvite() }}">copy</a>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
You don't have any invites
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue