Infra
/
lemur
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding clipboard functionality

This commit is contained in:
kevgliss 2015-10-05 16:06:56 -07:00
parent 9965af9ccd
commit 63b7b71b49
6 changed files with 127 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bower.json
View File

@ -32,7 +32,9 @@
"angularjs-toaster": "~0.4.14", "angularjs-toaster": "~0.4.14",
"ngletteravatar": "~3.0.1", "ngletteravatar": "~3.0.1",
"angular-ui-router": "~0.2.15", "angular-ui-router": "~0.2.15",
"angular-zeroclipboard": "~0.7.0" "angular-zeroclipboard": "~0.7.0",
"clipboard": "~1.4.0",
"angular-clipboard": "~1.1.1"
}, },
"devDependencies": { "devDependencies": {
"angular-mocks": "~1.3", "angular-mocks": "~1.3",

6
gulp/build.js
View File

@ -72,7 +72,6 @@ gulp.task('dev:styles', function () {
}; };
var fileList = [ var fileList = [
'lemur/static/app/styles/lemur.css',
'bower_components/bootswatch/sandstone/bootswatch.less', 'bower_components/bootswatch/sandstone/bootswatch.less',
'bower_components/fontawesome/css/font-awesome.css', 'bower_components/fontawesome/css/font-awesome.css',
'bower_components/angular-spinkit/src/angular-spinkit.css', 'bower_components/angular-spinkit/src/angular-spinkit.css',
@ -81,7 +80,8 @@ gulp.task('dev:styles', function () {
'bower_components/angular-ui-switch/angular-ui-switch.css', 'bower_components/angular-ui-switch/angular-ui-switch.css',
'bower_components/angular-wizard/dist/angular-wizard.css', 'bower_components/angular-wizard/dist/angular-wizard.css',
'bower_components/ng-table/ng-table.css', 'bower_components/ng-table/ng-table.css',
'bower_components/angularjs-toaster/toaster.css' 'bower_components/angularjs-toaster/toaster.css',
'lemur/static/app/styles/lemur.css'
]; ];
return gulp.src(fileList) return gulp.src(fileList)
@ -136,7 +136,7 @@ gulp.task('dev:scripts', function () {
}); });
gulp.task('build:extras', function () { gulp.task('build:extras', function () {
return gulp.src(['lemur/static/app/*.*', 'bower_components/zeroclipboard/dist/ZeroClipboard.swf', '!lemur/static/app/*.html']) return gulp.src(['lemur/static/app/*.*', '!lemur/static/app/*.html'])
.pipe(gulp.dest('lemur/static/dist')); .pipe(gulp.dest('lemur/static/dist'));
}); });

9
lemur/static/app/angular/app.js vendored
View File

@ -15,9 +15,9 @@ var lemur = angular
'mgo-angular-wizard', 'mgo-angular-wizard',
'satellizer', 'satellizer',
'ngLetterAvatar', 'ngLetterAvatar',
'zeroclipboard' 'angular-clipboard'
]) ])
.config(function ($stateProvider, $urlRouterProvider, $authProvider, uiZeroclipConfigProvider) { .config(function ($stateProvider, $urlRouterProvider, $authProvider) {
$urlRouterProvider.otherwise('/welcome'); $urlRouterProvider.otherwise('/welcome');
$stateProvider $stateProvider
@ -37,11 +37,6 @@ var lemur = angular
authorizationEndpoint: 'https://example.com/as/authorization.oauth2', authorizationEndpoint: 'https://example.com/as/authorization.oauth2',
requiredUrlParams: ['scope'] requiredUrlParams: ['scope']
}); });
// config ZeroClipboard
uiZeroclipConfigProvider.setZcConf({
swfPath: 'ZeroClipboard.swf'
});
}); });
lemur.service('MomentService', function () { lemur.service('MomentService', function () {

196
lemur/static/app/angular/certificates/view/view.tpl.html
View File

@ -6,11 +6,11 @@
<div class="panel-heading"> <div class="panel-heading">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button data-placement="left" data-title="Create Certificate" bs-tooltip ng-click="create()" <button data-placement="left" data-title="Create Certificate" bs-tooltip ng-click="create()"
class="btn btn-primary"> class="btn btn-primary">
Create Create
</button> </button>
<button data-placement="left" data-title="Import Certificate" bs-tooltip ng-click="import()" <button data-placement="left" data-title="Import Certificate" bs-tooltip ng-click="import()"
class="btn btn-info"> class="btn btn-info">
Import Import
</button> </button>
</div> </div>
@ -32,7 +32,8 @@
</td> </td>
<td data-title="'Active'" filter="{ 'active': 'select' }" filter-data="getCertificateStatus()"> <td data-title="'Active'" filter="{ 'active': 'select' }" filter-data="getCertificateStatus()">
<form> <form>
<switch ng-change="certificateService.updateActive(certificate)" id="status" name="status" ng-model="certificate.active" class="green small"></switch> <switch ng-change="certificateService.updateActive(certificate)" id="status" name="status"
ng-model="certificate.active" class="green small"></switch>
</form> </form>
</td> </td>
<td data-title="'Issuer'" sortable="'issuer'" filter="{ 'issuer': 'text' }"> <td data-title="'Issuer'" sortable="'issuer'" filter="{ 'issuer': 'text' }">
@ -46,104 +47,121 @@
</td> </td>
<td data-title="''"> <td data-title="''">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button ng-model="certificate.toggle" class="btn btn-sm btn-info" btn-checkbox btn-checkbox-true="1" butn-checkbox-false="0">More</button> <button ng-model="certificate.toggle" class="btn btn-sm btn-info" btn-checkbox btn-checkbox-true="1"
<button class="btn btn-sm btn-warning" ng-click="edit(certificate.id)">Edit</button> butn-checkbox-false="0">More
</button>
<button class="btn btn-sm btn-warning" ng-click="edit(certificate.id)">Edit</button>
</div> </div>
</td> </td>
</tr> </tr>
<tr class="warning" ng-show="certificate.toggle" ng-repeat-end> <tr class="warning" ng-show="certificate.toggle" ng-repeat-end>
<td colspan="6"> <td colspan="6">
<tabset justified="true" class="col-md-6">
<tab heading="Basic Info">
<ul class="list-group">
<li class="list-group-item">
<strong>Creator</strong>
<span class="pull-right">
{{ certificate.creator.email }}
</span>
</li>
<li class="list-group-item">
<strong>Not Before</strong>
<span class="pull-right" tooltip="{{ certificate.notBefore }}">
{{ momentService.createMoment(certificate.notBefore) }}
</span>
</li>
<li class="list-group-item">
<strong>Not After</strong>
<span class="pull-right" tooltip="{{ certificate.notAfter }}">
{{ momentService.createMoment(certificate.notAfter) }}
</span>
</li>
<li class="list-group-item">
<strong>San</strong>
<span class="pull-right">
<i class="glyphicon glyphicon-ok" ng-show="certificate.san"></i>
<i class="glyphicon glyphicon-remove" ng-show="!certificate.san"></i>
</span>
</li>
<li class="list-group-item">
<strong>Bits</strong>
<span class="pull-right">{{ certificate.bits }}</span>
</li>
<li class="list-group-item">
<strong>Serial</strong>
<span class="pull-right">{{ certificate.serial }}</span>
</li>
<li tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate as been revoked" class="list-group-item">
<strong>Validity</strong>
<span class="pull-right">
<span ng-show="!certificate.status" class="label label-warning">Unknown</span>
<span ng-show="certificate.status == 'revoked'" class="label label-danger">Revoked</span>
<span ng-show="certificate.status == 'valid'" class="label label-success">Valid</span>
</span>
</li>
<li class="list-group-item">
<strong>Description</strong>
<span class="pull-right">{{ certificate.description }}</span>
</li>
</ul>
</tab>
<tab heading="Notifications">
<ul class="list-group">
<li class="list-group-item" ng-repeat="notification in certificate.notifications">
<strong>{{ notification.label }}</strong>
<span class="pull-right">{{ notification.description}}</span>
</li>
</ul>
</tab>
<tab heading="Destinations">
<ul class="list-group">
<li class="list-group-item" ng-repeat="destination in certificate.destinations">
<strong>{{ destination.label }}</strong>
<span class="pull-right">{{ destination.description }}</span>
</li>
</ul>
</tab>
<tab heading="Domains">
<div class="list-group">
<a href="#/domains/{{ domain.id }}" class="list-group-item" ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
</div>
</tab>
</tabset>
<tabset justified="true" class="col-md-6"> <tabset justified="true" class="col-md-6">
<tab heading="Chain"> <tab>
<p> <tab-heading>Basic Info</tab-heading>
<pre style="width: 550px">{{ certificate.chain }}</pre> <ul class="list-group">
</p> <li class="list-group-item">
<strong>Creator</strong>
<span class="pull-right">
{{ certificate.creator.email }}
</span>
</li>
<li class="list-group-item">
<strong>Not Before</strong>
<span class="pull-right" tooltip="{{ certificate.notBefore }}">
{{ momentService.createMoment(certificate.notBefore) }}
</span>
</li>
<li class="list-group-item">
<strong>Not After</strong>
<span class="pull-right" tooltip="{{ certificate.notAfter }}">
{{ momentService.createMoment(certificate.notAfter) }}
</span>
</li>
<li class="list-group-item">
<strong>San</strong>
<span class="pull-right">
<i class="glyphicon glyphicon-ok" ng-show="certificate.san"></i>
<i class="glyphicon glyphicon-remove" ng-show="!certificate.san"></i>
</span>
</li>
<li class="list-group-item">
<strong>Bits</strong>
<span class="pull-right">{{ certificate.bits }}</span>
</li>
<li class="list-group-item">
<strong>Serial</strong>
<span class="pull-right">{{ certificate.serial }}</span>
</li>
<li
tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate as been revoked"
class="list-group-item">
<strong>Validity</strong>
<span class="pull-right">
<span ng-show="!certificate.status" class="label label-warning">Unknown</span>
<span ng-show="certificate.status == 'revoked'" class="label label-danger">Revoked</span>
<span ng-show="certificate.status == 'valid'" class="label label-success">Valid</span>
</span>
</li>
<li class="list-group-item">
<strong>Description</strong>
<span class="pull-right">{{ certificate.description }}</span>
</li>
</ul>
</tab> </tab>
<tab heading="Public Certificate"> <tab>
<p> <tab-heading>Notifications</tab-heading>
<pre style="width: 550px">{{ certificate.body }}</pre> <ul class="list-group">
</p> <li class="list-group-item" ng-repeat="notification in certificate.notifications">
<strong>{{ notification.label }}</strong>
<span class="pull-right">{{ notification.description}}</span>
</li>
</ul>
</tab>
<tab>
<tab-heading>Destinations</tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="destination in certificate.destinations">
<strong>{{ destination.label }}</strong>
<span class="pull-right">{{ destination.description }}</span>
</li>
</ul>
</tab>
<tab>
<tab-heading>Domains</tab-heading>
<div class="list-group">
<a href="#/domains/{{ domain.id }}" class="list-group-item"
ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
</div>
</tab>
</tabset>
<tabset justified="true" class="col-md-6">
<tab>
<tab-heading>
Chain
<button class="btn btn-xs btn-default clipboard-btn glyphicon glyphicon-copy"
tooltip="Copy chain to clipboard" tooltip-trigger="mouseenter" clipboard
text="certificate.chain"></button>
</tab-heading>
<pre style="width: 100%">{{ certificate.chain }}</pre>
</tab>
<tab>
<tab-heading>
Public Certificate
<button class="btn btn-xs btn-default clipboard-btn glyphicon glyphicon-copy"
tooltip="Copy certificate to clipboard" tooltip-trigger="mouseenter" clipboard
text="certificate.body"></button>
</tab-heading>
<pre style="width: 100%">{{ certificate.body }}</pre>
</tab> </tab>
<tab ng-click="certificateService.loadPrivateKey(certificate)"> <tab ng-click="certificateService.loadPrivateKey(certificate)">
<tab-heading> <tab-heading>
Private Key Private Key
<button class="btn btn-xs btn-default clipboard-btn glyphicon glyphicon-copy"
tooltip="Copy key to clipboard" tooltip-trigger="mouseenter" clipboard
text="certificate.privateKey"></button>
</tab-heading> </tab-heading>
<p> <pre style="width: 100%">{{ certificate.privateKey }}</pre>
<pre style="width: 550px">{{ certificate.privateKey }}</pre>
</p>
</tab> </tab>
</tabset> </tabset>
</td> </td>

4
lemur/static/app/angular/welcome/welcome.html
View File

@ -10,7 +10,7 @@
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Create</h2> <h2>Create</h2>
<p>With Lemur you can create certificates from any authority; internal or external! Lemur does not issue certificates itself. Instead it acts as a broker, creating private keys and CSRs that are sent to external services.</p> <p>With Lemur you can create certificates from any authority; internal or external! Lemur does not issue certificates itself. Instead it acts as a broker, creating private keys and CSRs that are sent to external services.</p>
<p><a class="btn btn-default" ui-sref="certifcates" role="button">View certificates &raquo;</a></p> <p><a class="btn btn-default" ui-sref="certificates" role="button">View certificates &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Deploy</h2> <h2>Deploy</h2>
@ -20,7 +20,7 @@
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Authority</h2> <h2>Authority</h2>
<p>Have an internal Certificate Authority? Need an easy way to create an manage those authorities? Lemur has you covered!</p> <p>Have an internal Certificate Authority? Need an easy way to create an manage those authorities? Lemur has you covered!</p>
<p><a class="btn btn-default" ui-sref="authorities">Dashboard role="button">View Authorities &raquo;</a></p> <p><a class="btn btn-default" ui-sref="authorities" role="button">View Authorities &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
</div><!-- /.row --> </div><!-- /.row -->
</div> </div>

10
lemur/static/app/styles/lemur.css
View File

@ -169,3 +169,13 @@ a {
background-color: #FFFFFF !important; background-color: #FFFFFF !important;
} }
.clipboard-btn {
border-width: 0;
background-color: transparent;
color: #777;
display: inline-block;
top: 0;
line-height: 1;
}