adding clipboard functionality
This commit is contained in:
parent
9965af9ccd
commit
63b7b71b49
|
@ -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",
|
||||||
|
|
|
@ -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'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
|
@ -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,7 +47,9 @@
|
||||||
</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"
|
||||||
|
butn-checkbox-false="0">More
|
||||||
|
</button>
|
||||||
<button class="btn btn-sm btn-warning" ng-click="edit(certificate.id)">Edit</button>
|
<button class="btn btn-sm btn-warning" ng-click="edit(certificate.id)">Edit</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
@ -54,7 +57,8 @@
|
||||||
<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">
|
<tabset justified="true" class="col-md-6">
|
||||||
<tab heading="Basic Info">
|
<tab>
|
||||||
|
<tab-heading>Basic Info</tab-heading>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<strong>Creator</strong>
|
<strong>Creator</strong>
|
||||||
|
@ -89,7 +93,9 @@
|
||||||
<strong>Serial</strong>
|
<strong>Serial</strong>
|
||||||
<span class="pull-right">{{ certificate.serial }}</span>
|
<span class="pull-right">{{ certificate.serial }}</span>
|
||||||
</li>
|
</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">
|
<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>
|
<strong>Validity</strong>
|
||||||
<span class="pull-right">
|
<span class="pull-right">
|
||||||
<span ng-show="!certificate.status" class="label label-warning">Unknown</span>
|
<span ng-show="!certificate.status" class="label label-warning">Unknown</span>
|
||||||
|
@ -103,7 +109,8 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</tab>
|
</tab>
|
||||||
<tab heading="Notifications">
|
<tab>
|
||||||
|
<tab-heading>Notifications</tab-heading>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item" ng-repeat="notification in certificate.notifications">
|
<li class="list-group-item" ng-repeat="notification in certificate.notifications">
|
||||||
<strong>{{ notification.label }}</strong>
|
<strong>{{ notification.label }}</strong>
|
||||||
|
@ -111,7 +118,8 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</tab>
|
</tab>
|
||||||
<tab heading="Destinations">
|
<tab>
|
||||||
|
<tab-heading>Destinations</tab-heading>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item" ng-repeat="destination in certificate.destinations">
|
<li class="list-group-item" ng-repeat="destination in certificate.destinations">
|
||||||
<strong>{{ destination.label }}</strong>
|
<strong>{{ destination.label }}</strong>
|
||||||
|
@ -119,31 +127,41 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</tab>
|
</tab>
|
||||||
<tab heading="Domains">
|
<tab>
|
||||||
|
<tab-heading>Domains</tab-heading>
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<a href="#/domains/{{ domain.id }}" class="list-group-item" ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
|
<a href="#/domains/{{ domain.id }}" class="list-group-item"
|
||||||
|
ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
|
||||||
</div>
|
</div>
|
||||||
</tab>
|
</tab>
|
||||||
</tabset>
|
</tabset>
|
||||||
|
|
||||||
<tabset justified="true" class="col-md-6">
|
<tabset justified="true" class="col-md-6">
|
||||||
<tab heading="Chain">
|
<tab>
|
||||||
<p>
|
<tab-heading>
|
||||||
<pre style="width: 550px">{{ certificate.chain }}</pre>
|
Chain
|
||||||
</p>
|
<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">
|
<tab>
|
||||||
<p>
|
<tab-heading>
|
||||||
<pre style="width: 550px">{{ certificate.body }}</pre>
|
Public Certificate
|
||||||
</p>
|
<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>
|
||||||
|
|
|
@ -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 »</a></p>
|
<p><a class="btn btn-default" ui-sref="certificates" role="button">View certificates »</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 »</a></p>
|
<p><a class="btn btn-default" ui-sref="authorities" role="button">View Authorities »</a></p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div><!-- /.col-lg-4 -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue