revamp invites and certificates screen

master
Corne Oppelaar 8 years ago
parent 72482e4f92
commit 414f17476f

@ -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

@ -90,11 +90,13 @@ body {
.footer-page {
@extend .flexpage;
flex: 1;
background-color: #e2f2f0;
flex-direction: column;
-webkit-flex-direction: column;
min-height: 20vh;
@include break-small {
height: 100%;
}
@ -106,6 +108,7 @@ body {
.login-page {
@extend .flexpage;
background: linear-gradient(#070a15, #252b46);
flex-direction: column;
-webkit-flex-direction: column;
@ -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,14 +219,26 @@ body {
}
}
.certificate-delete:hover {
.certificate-delete,
.yes {
&:hover {
background: hsl(0, 62%, 64%);
}
}
.certificate-download:hover,
.certificate-download-key:hover {
.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 %}
<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,6 +28,15 @@
</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>

@ -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>
{% 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 %}
</th>
</tr>
</thead>
<tbody>
<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 %}
<tr>
<td>
<li>
<div class="text">
<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>
<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…
Cancel
Save