Rotation ui (#633)

* Adding rotation to the UI.

* Removing spinkit dependency.
This commit is contained in:
kevgliss
2016-12-26 15:55:11 -08:00
committed by GitHub
parent ce75bba2c3
commit 700c57b807
18 changed files with 417 additions and 391 deletions

View File

@ -1,21 +1,21 @@
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">Create Certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">Create Certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
</div>
<div class="modal-body">
<div>
<wizard on-finish="create(certificate)" template="angular/wizard.html">
<wz-step title="Tracking" canexit="trackingForm.$valid">
<ng-include src="'angular/certificates/certificate/tracking.tpl.html'"></ng-include>
</wz-step>
<wz-step title="Distinguished Name" canenter="exitTracking" canexit="exitDN">
<ng-include src="'angular/certificates/certificate/distinguishedName.tpl.html'"></ng-include>
</wz-step>
<wz-step title="Options" canenter="enterValidation">
<ng-include src="'angular/certificates/certificate/options.tpl.html'"></ng-include>
</wz-step>
</wizard>
</div>
<div>
<wizard on-finish="create(certificate)" template="angular/wizard.html">
<wz-step title="Tracking" canexit="trackingForm.$valid">
<ng-include src="'angular/certificates/certificate/tracking.tpl.html'"></ng-include>
</wz-step>
<wz-step title="Options" canenter="exitTracking">
<ng-include src="'angular/certificates/certificate/options.tpl.html'"></ng-include>
</wz-step>
<wz-step title="Distinguished Name" canenter="exitValidation">
<ng-include src="'angular/certificates/certificate/distinguishedName.tpl.html'"></ng-include>
</wz-step>
</wizard>
</div>
</div>

View File

@ -1,5 +1,16 @@
<form name="dnForm" novalidate>
<div class="form-horizontal">
<div class="form-group"
ng-class="{'has-error': dnForm.name.$invalid, 'has-success': !dnForm.name.$invalid&&dnForm.name.$dirty}">
<label class="control-label col-sm-2">
Custom Certificate Name
</label>
<div class="col-sm-10">
<input name="name" ng-model="certificate.name"
placeholder="the.example.net-SymantecCorporation-20150828-20160830" class="form-control"
uib-tooltip="If no name is provided, Lemur will generate a name for you">
</div>
</div>
<div class="form-group"
ng-class="{'has-error': dnForm.country.$invalid, 'has-success': !dnForm.country.$invalid&&dnForm.country.$dirty}">
<label class="control-label col-sm-2">
@ -7,7 +18,8 @@
</label>
<div class="col-sm-10">
<input name="country" ng-model="certificate.country" placeholder="Country" class="form-control" required/>
<p ng-show="dnForm.country.$invalid && !dnForm.country.$pristine" class="help-block">You must enter a country</p>
<p ng-show="dnForm.country.$invalid && !dnForm.country.$pristine" class="help-block">You must enter a
country</p>
</div>
</div>
<div class="form-group"
@ -27,7 +39,8 @@
</label>
<div class="col-sm-10">
<input name="location" ng-model="certificate.location" placeholder="Location" class="form-control" required/>
<p ng-show="dnForm.location.$invalid && !dnForm.location.$pristine" class="help-block">You must enter a location</p>
<p ng-show="dnForm.location.$invalid && !dnForm.location.$pristine" class="help-block">You must enter a
location</p>
</div>
</div>
<div class="form-group"
@ -36,8 +49,10 @@
Organization
</label>
<div class="col-sm-10">
<input name="organization" ng-model="certificate.organization" placeholder="Organization" class="form-control" required/>
<p ng-show="dnForm.organization.$invalid && !dnForm.organization.$pristine" class="help-block">You must enter a organization</p>
<input name="organization" ng-model="certificate.organization" placeholder="Organization" class="form-control"
required/>
<p ng-show="dnForm.organization.$invalid && !dnForm.organization.$pristine" class="help-block">You must enter a
organization</p>
</div>
</div>
<div class="form-group"
@ -46,8 +61,10 @@
Organizational Unit
</label>
<div class="col-sm-10">
<input name="organizationalUnit" ng-model="certificate.organizationalUnit" placeholder="Organizational Unit" class="form-control" required/>
<p ng-show="dnForm.organization.$invalid && !dnForm.organizationalUnit.$pristine" class="help-block">You must enter a organizational unit</p>
<input name="organizationalUnit" ng-model="certificate.organizationalUnit" placeholder="Organizational Unit"
class="form-control" required/>
<p ng-show="dnForm.organization.$invalid && !dnForm.organizationalUnit.$pristine" class="help-block">You must
enter a organizational unit</p>
</div>
</div>
</div>

View File

@ -1,44 +1,56 @@
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">Edit <span class="text-muted"><small>{{ certificate.name }}</small></span></h3>
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h3 class="modal-title">Edit <span class="text-muted"><small>{{ certificate.name }}</small></span></h3>
</div>
<div class="modal-body">
<form name="editForm" class="form-horizontal" role="form" novalidate>
<div class="form-group"
ng-class="{'has-error': editForm.owner.$invalid, 'has-success': !editForm.owner.$invalid&&editForm.owner.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="col-sm-10">
<input type="email" name="owner" ng-model="certificate.owner" placeholder="owner@example.com"
class="form-control" required/>
<form name="editForm" class="form-horizontal" role="form" novalidate>
<div class="form-group"
ng-class="{'has-error': editForm.owner.$invalid, 'has-success': !editForm.owner.$invalid&&editForm.owner.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="col-sm-10">
<input type="email" name="owner" ng-model="certificate.owner" placeholder="owner@example.com"
class="form-control" required/>
<p ng-show="editForm.owner.$invalid && !editForm.owner.$pristine" class="help-block">Enter a valid
email.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': editForm.description.$invalid, 'has-success': !editForm.$invalid&&editForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<div class="col-sm-10">
<textarea name="description" ng-model="certificate.description" placeholder="Something elegant" class="form-control" required></textarea>
<p ng-show="editForm.description.$invalid && !editForm.description.$pristine" class="help-block">You must give a short description about this authority will be used for, this description should only include alphanumeric characters</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/destinations.tpl.html'"></div>
</form>
<p ng-show="editForm.owner.$invalid && !editForm.owner.$pristine" class="help-block">Enter a valid
email.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': editForm.description.$invalid, 'has-success': !editForm.$invalid&&editForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<div class="col-sm-10">
<textarea name="description" ng-model="certificate.description" placeholder="Something elegant"
class="form-control" required></textarea>
<p ng-show="editForm.description.$invalid && !editForm.description.$pristine" class="help-block">You must give a
short description about this authority will be used for, this description should only include alphanumeric
characters</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div class="form-group">
<label class="control-label col-sm-2">Auto Rotate</label>
<div class="col-sm-10">
<switch ng-model="certificate.rotation" id="active" name="active" class="green small"
uib-tooltip="If selected, new certificates will be automatically re-issued and re-deployed onto known endpoints."></switch>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" ng-click="save(certificate)" ng-disabled="editForm.$invalid" class="btn btn-success">Save</button>
<button ng-click="cancel()" class="btn btn-danger">Cancel</button>
<button type="submit" ng-click="save(certificate)" ng-disabled="editForm.$invalid" class="btn btn-success">Save
</button>
<button ng-click="cancel()" class="btn btn-danger">Cancel</button>
</div>

View File

@ -1,17 +1,45 @@
<form name="optionsForm" novalidate>
<div class="form-horizontal">
<div>
<div class="form-group">
<label class="control-label col-sm-2">
Certificate Template
</label>
<div class="col-sm-10">
<select class="form-control" ng-change="certificate.useTemplate()" name="certificateTemplate"
ng-model="certificate.template" ng-options="template.name for template in templates"></select>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.csr.$invalid&&trackingForm.csr.$dirty, 'has-success': !trackingForm.csr.$invalid&&trackingForm.csr.$dirty}">
<label class="control-label col-sm-2">
Certificate Signing Request (CSR)
</label>
<div class="col-sm-10">
<textarea uib-tooltip="Values defined in the CSR will take precedence"
name="certificate signing request"
ng-model="certificate.csr"
placeholder="PEM encoded string..." class="form-control"
ng-pattern="/^-----BEGIN CERTIFICATE REQUEST-----/"></textarea>
<p ng-show="trackingForm.csr.$invalid && !trackingForm.csr.$pristine"
class="help-block">Enter a valid certificate signing request.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Subject Alternate Names
</label>
<div class="col-sm-3">
<select class="form-control" ng-model="certificate.subAltType" ng-options="item for item in ['DNSName', 'IPAddress', 'uniformResourceIdentifier', 'directoryName','rfc822Name', 'registeredID', 'otherName', 'x400Address', 'EDIPartyName']"></select>
<select class="form-control" ng-model="certificate.subAltType"
ng-options="item for item in ['DNSName', 'IPAddress', 'uniformResourceIdentifier', 'directoryName','rfc822Name', 'registeredID', 'otherName', 'x400Address', 'EDIPartyName']"></select>
</div>
<div class="col-sm-6">
<div class="input-group">
<input tooltip-trigger="focus" tooltip-placement="top" uib-tooltip="String or Base64-encoded DER ASN.1 structure for the value" class="form-control" name="value" ng-model="certificate.subAltValue" placeholder="Value" class="form-control" required/>
<span class="input-group-btn">
<input tooltip-trigger="focus" tooltip-placement="top"
uib-tooltip="String or Base64-encoded DER ASN.1 structure for the value" class="form-control"
name="value" ng-model="certificate.subAltValue" placeholder="Value" class="form-control" required/>
<span class="input-group-btn">
<button ng-click="certificate.attachSubAltName()" class="btn btn-info">Add</button>
</span>
</div>
@ -24,7 +52,9 @@
<td>{{ alt.nameType }}</td>
<td>{{ alt.value }}</td>
<td>
<button type="button" ng-click="certificate.removeSubAltName($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
<button type="button" ng-click="certificate.removeSubAltName($index)"
class="btn btn-danger btn-sm pull-right">Remove
</button>
</td>
</tr>
</table>
@ -32,10 +62,12 @@
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Key Type
Key Type
</label>
<div class="col-sm-10">
<select class="form-control" ng-model="certificate.keyType" ng-options="option for option in ['RSA2048', 'RSA4096']" ng-init="certificate.keyType = 'RSA2048'"></select>
<select class="form-control" ng-model="certificate.keyType"
ng-options="option for option in ['RSA2048', 'RSA4096']"
ng-init="certificate.keyType = 'RSA2048'"></select>
</div>
</div>
<div class="form-group">
@ -99,12 +131,14 @@
<div class="col-sm-3">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useServerAuthentication">Server Authentication
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useServerAuthentication">Server
Authentication
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useClientAuthentication">Client Authentication
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useClientAuthentication">Client
Authentication
</label>
</div>
<div class="checkbox">
@ -131,7 +165,8 @@
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useSmartCardLogon">Smartcard Logon
<input type="checkbox" ng-model="certificate.extensions.extendedKeyUsage.useSmartCardLogon">Smartcard
Logon
</label>
</div>
<div class="checkbox">
@ -147,13 +182,17 @@
</label>
<div class="col-sm-10">
<div class="checkbox">
<label tooltip-trigger="mouseenter" tooltip-placement="top" uib-tooltip="Put Issuer's keyIdentifier in this extension" >
<input type="checkbox" ng-model="certificate.extensions.authorityKeyIdentifier.useKeyIdentifier">Key Identifier
<label tooltip-trigger="mouseenter" tooltip-placement="top"
uib-tooltip="Put Issuer's keyIdentifier in this extension">
<input type="checkbox" ng-model="certificate.extensions.authorityKeyIdentifier.useKeyIdentifier">Key
Identifier
</label>
</div>
<div class="checkbox">
<label tooltip-trigger="mouseenter" tooltip-placement="top" uib-tooltip="Put Issuer's Name and Serial number" >
<input type="checkbox" ng-model="certificate.extensions.authorityIdentifier.useAuthorityCert">Authority Certificate
<label tooltip-trigger="mouseenter" tooltip-placement="top"
uib-tooltip="Put Issuer's Name and Serial number">
<input type="checkbox" ng-model="certificate.extensions.authorityIdentifier.useAuthorityCert">Authority
Certificate
</label>
</div>
</div>
@ -164,7 +203,8 @@
</label>
<div class="col-sm-10">
<div class="checkbox">
<label tooltip-trigger="mouseenter" tooltip-placement="top" uib-tooltip="Ask CA to include/not include AIA extension" >
<label tooltip-trigger="mouseenter" tooltip-placement="top"
uib-tooltip="Ask CA to include/not include AIA extension">
<input type="checkbox" ng-model="certificate.extensions.certificateInfoAccess.includeAIA">Include AIA
</label>
</div>
@ -176,7 +216,8 @@
</label>
<div class="col-sm-10">
<div class="checkbox">
<label tooltip-trigger="mouseenter" tooltip-placement="top" uib-tooltip="Ask CA to include/not include Subject Key Identifier" >
<label tooltip-trigger="mouseenter" tooltip-placement="top"
uib-tooltip="Ask CA to include/not include Subject Key Identifier">
<input type="checkbox" ng-model="certificate.extensions.subjectKeyIdentifier.includeSKI">Include SKI
</label>
</div>
@ -187,7 +228,8 @@
cRL Distribution Points
</label>
<div class="col-sm-10">
<select class="form-control" ng-model="certificate.extensions.cRLDistributionPoints.includeCRLDP" ng-options="item for item in ['yes', 'no', 'default']"></select>
<select class="form-control" ng-model="certificate.extensions.cRLDistributionPoints.includeCRLDP"
ng-options="item for item in ['yes', 'no', 'default']"></select>
</div>
</div>
<div class="form-group">
@ -195,15 +237,21 @@
Custom
</label>
<div class="col-sm-2">
<input tooltip-trigger="focus" tooltip-placement="top" uib-tooltip="OID for the custom extension e.g. 1.12.123.12.10" class="form-control" name="oid" ng-model="certificate.customOid" placeholder="Oid" class="form-control" required/>
<input tooltip-trigger="focus" tooltip-placement="top"
uib-tooltip="OID for the custom extension e.g. 1.12.123.12.10" class="form-control" name="oid"
ng-model="certificate.customOid" placeholder="Oid" class="form-control" required/>
</div>
<div class="col-sm-2">
<select tooltip-trigger="focus" tooltip-placement="top" uib-tooltip="Encoding for value" class="form-control col-sm-2" ng-model="certificate.customEncoding" ng-options="item for item in ['b64asn1', 'string', 'ia5string']"></select>
<select tooltip-trigger="focus" tooltip-placement="top" uib-tooltip="Encoding for value"
class="form-control col-sm-2" ng-model="certificate.customEncoding"
ng-options="item for item in ['b64asn1', 'string', 'ia5string']"></select>
</div>
<div class="col-sm-4">
<div class="input-group">
<input tooltip-trigger="focus" tooltip-placement="top" uib-tooltip="String or Base64-encoded DER ASN.1 structure for the value" class="form-control" name="value" ng-model="certificate.customValue" placeholder="Value" class="form-control" required/>
<span class="input-group-btn">
<input tooltip-trigger="focus" tooltip-placement="top"
uib-tooltip="String or Base64-encoded DER ASN.1 structure for the value" class="form-control"
name="value" ng-model="certificate.customValue" placeholder="Value" class="form-control" required/>
<span class="input-group-btn">
<button ng-click="certificate.attachCustom()" class="btn btn-info">Add</button>
</span>
</div>
@ -224,9 +272,11 @@
<td>{{ custom.oid }}</td>
<td>{{ custom.encoding }}</td>
<td>{{ custom.value }}</td>
<td>{{ custom.isCritical}}</td>
<td>{{ custom.isCritical }}</td>
<td>
<button type="button" ng-click="certificate.removeCustom($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
<button type="button" ng-click="certificate.removeCustom($index)"
class="btn btn-danger btn-sm pull-right">Remove
</button>
</td>
</tr>
</table>

View File

@ -1,177 +1,149 @@
<form name="trackingForm" novalidate>
<div class="form-horizontal">
<div class="form-group"
ng-class="{'has-error': trackingForm.ownerEmail.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.ownerEmail.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="form-horizontal">
<div class="form-group"
ng-class="{'has-error': trackingForm.ownerEmail.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.ownerEmail.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="col-sm-10">
<input type="email" name="ownerEmail" ng-model="certificate.owner" placeholder="TeamDL@example.com"
uib-tooltip="This is the certificates team distribution list or main point of contact"
class="form-control"
required/>
<div class="col-sm-10">
<input type="email" name="ownerEmail" ng-model="certificate.owner" placeholder="TeamDL@example.com"
uib-tooltip="This is the certificates team distribution list or main point of contact"
class="form-control"
required/>
<p ng-show="trackingForm.ownerEmail.$invalid && !trackingForm.ownerEmail.$pristine" class="help-block">
You must enter an Certificate owner</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.name.$invalid, 'has-success': !trackingForm.name.$invalid&&trackingForm.name.$dirty}">
<label class="control-label col-sm-2" uib-tooltip="If no name is provided, Lemur will generate a name for you">
Custom Name <span class="glyphicon glyphicon-question-sign"></span>
</label>
<div class="col-sm-10">
<input name="name" ng-model="certificate.name"
placeholder="the.example.net-SymantecCorporation-20150828-20160830" class="form-control"/>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.description.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<p ng-show="trackingForm.ownerEmail.$invalid && !trackingForm.ownerEmail.$pristine" class="help-block">
You must enter an Certificate owner</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div class="form-group"
ng-class="{'has-error': trackingForm.commonName.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.commonName.$dirty}">
<label class="control-label col-sm-2">
Common Name
</label>
<div class="col-sm-10">
<input name="commonName"
uib-tooltip="If you need a certificate with multiple domains enter your primary domain here and the rest under 'Subject Alternate Names' by clicking 'More Options'"
ng-model="certificate.commonName" placeholder="Common Name" class="form-control"
ng-maxlength="64"
required/>
<div class="col-sm-10">
<p ng-show="trackingForm.commonName.$invalid && !trackingForm.commonName.$pristine" class="help-block">
You must
enter a common name and it must be less than 64 characters</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.description.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<div class="col-sm-10">
<textarea name="description" ng-model="certificate.description" placeholder="Something elegant"
class="form-control" required></textarea>
<p ng-show="trackingForm.description.$invalid && !trackingForm.description.$pristine"
class="help-block">You
must give a short description about this certificate will be used for.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.selectedAuthority.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.selectedAuthority.$dirty}">
<label class="control-label col-sm-2">
Certificate Authority
</label>
<div class="col-sm-10">
<ui-select class="input-md" ng-model="certificate.authority" theme="bootstrap" title="choose an authority">
<ui-select-match placeholder="select an authority...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices class="form-control" repeat="authority in authorities"
refresh="getAuthoritiesByName($select.search)"
refresh-delay="300">
<div ng-bind-html="authority.name | highlight: $select.search"></div>
<small>
<span ng-bind-html="''+authority.description | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Certificate Template
</label>
<div class="col-sm-10">
<select class="form-control" ng-change="certificate.useTemplate()" name="certificateTemplate"
ng-model="certificate.template" ng-options="template.name for template in templates"></select>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.commonName.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.commonName.$dirty}">
<label class="control-label col-sm-2">
Common Name
</label>
<div class="col-sm-10">
<input name="commonName"
uib-tooltip="If you need a certificate with multiple domains enter your primary domain here and the rest under 'Subject Alternate Names' in the next few panels"
ng-model="certificate.commonName" placeholder="Common Name" class="form-control"
ng-maxlength="64"
required/>
<p ng-show="trackingForm.commonName.$invalid && !trackingForm.commonName.$pristine" class="help-block">
You must
enter a common name and it must be less than 64 characters</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
uib-tooltip="If no date is selected Lemur attempts to issue a 2 year certificate">
Validity Range <span class="glyphicon glyphicon-question-sign"></span>
</label>
<div class="col-sm-2">
<select ng-model="certificate.validityYears" class="form-control">
<option value="">-</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
</select>
</div>
<span style="padding-top: 15px" class="text-center col-sm-1">
<p ng-show="trackingForm.description.$invalid && !trackingForm.description.$pristine"
class="help-block">You
must give a short description about this certificate will be used for.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.selectedAuthority.$invalid, 'has-success': !trackingForm.$invalid&&trackingForm.selectedAuthority.$dirty}">
<label class="control-label col-sm-2">
Certificate Authority
</label>
<div class="col-sm-10">
<ui-select class="input-md" ng-model="certificate.authority" theme="bootstrap" title="choose an authority">
<ui-select-match placeholder="select an authority...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices class="form-control" repeat="authority in authorities"
refresh="getAuthoritiesByName($select.search)"
refresh-delay="300">
<div ng-bind-html="authority.name | highlight: $select.search"></div>
<small>
<span ng-bind-html="''+authority.description | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
uib-tooltip="If no date is selected Lemur attempts to issue a 2 year certificate">
Validity Range <span class="glyphicon glyphicon-question-sign"></span>
</label>
<div class="col-sm-2">
<select ng-model="certificate.validityYears" class="form-control">
<option value="">-</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
</select>
</div>
<span style="padding-top: 15px" class="text-center col-sm-1">
<strong>or</strong>
</span>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control"
uib-tooltip="yyyy/MM/dd"
uib-datepicker-popup="yyyy/MM/dd"
ng-model="certificate.validityStart"
is-open="popup1.opened"
datepicker-options="dateOptions"
close-text="Close"
max-date="certificate.authority.authorityCertificate.notAfter"
min-date="certificate.authority.authorityCertificate.notBefore"
alt-input-formats="altInputFormats"
placeholder="Start Date"
/>
<span class="input-group-btn">
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control"
uib-tooltip="yyyy/MM/dd"
uib-datepicker-popup="yyyy/MM/dd"
ng-model="certificate.validityStart"
is-open="popup1.opened"
datepicker-options="dateOptions"
close-text="Close"
max-date="certificate.authority.authorityCertificate.notAfter"
min-date="certificate.authority.authorityCertificate.notBefore"
alt-input-formats="altInputFormats"
placeholder="Start Date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control"
uib-tooltip="yyyy/MM/dd"
uib-datepicker-popup="yyyy/MM/dd"
ng-model="certificate.validityEnd"
is-open="popup2.opened"
datepicker-options="dateOptions"
close-text="Close"
max-date="certificate.authority.authorityCertificate.notAfter"
min-date="certificate.authority.authorityCertificate.notBefore"
alt-input-formats="altInputFormats"
placeholder="End Date"
/>
<span class="input-group-btn">
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control"
uib-tooltip="yyyy/MM/dd"
uib-datepicker-popup="yyyy/MM/dd"
ng-model="certificate.validityEnd"
is-open="popup2.opened"
datepicker-options="dateOptions"
close-text="Close"
max-date="certificate.authority.authorityCertificate.notAfter"
min-date="certificate.authority.authorityCertificate.notBefore"
alt-input-formats="altInputFormats"
placeholder="End Date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="col-sm-1">
<button uib-tooltip="Clear Validity" ng-click="clearDates()" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': trackingForm.csr.$invalid&&trackingForm.csr.$dirty, 'has-success': !trackingForm.csr.$invalid&&trackingForm.csr.$dirty}">
<label class="control-label col-sm-2">
Certificate Signing Request (CSR)
</label>
<div class="col-sm-10">
<textarea uib-tooltip="Values defined in the CSR will take precedence" name="certificate signing request"
ng-model="certificate.csr"
placeholder="PEM encoded string..." class="form-control"
ng-pattern="/^-----BEGIN CERTIFICATE REQUEST-----/"></textarea>
<p ng-show="trackingForm.csr.$invalid && !trackingForm.csr.$pristine"
class="help-block">Enter a valid certificate signing request.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/destinations.tpl.html'"></div>
</div>
<div class="col-sm-1">
<button uib-tooltip="Clear Validity" ng-click="clearDates()" class="btn btn-default"><i
class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Auto Rotate</label>
<div class="col-sm-10">
<switch ng-model="certificate.rotation" id="active" name="active" class="green small"
uib-tooltip="If selected, new certificates will be automatically re-issued and re-deployed onto known endpoints."></switch>
</div>
</div>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/destinations.tpl.html'"></div>
</div>
</form>

View File

@ -1,99 +1,99 @@
<div class="modal-header">
<div class="modal-title">
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-header">Upload a certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
<button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">Import a certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
</div>
<div class="modal-body">
<form name="uploadForm" class="form-horizontal" role="form" novalidate>
<div class="form-group"
ng-class="{'has-error': uploadForm.owner.$invalid, 'has-success': !uploadForm.owner.$invalid&&uploadForm.owner.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="col-sm-10">
<input type="email" name="owner" ng-model="certificate.owner" placeholder="owner@example.com"
class="form-control" required/>
<p ng-show="uploadForm.owner.$invalid && !uploadForm.owner.$pristine" class="help-block">Enter a valid
email.</p>
</div>
</div>
<div class="modal-body">
<form name="uploadForm" class="form-horizontal" role="form" novalidate>
<div class="form-group"
ng-class="{'has-error': uploadForm.owner.$invalid, 'has-success': !uploadForm.owner.$invalid&&uploadForm.owner.$dirty}">
<label class="control-label col-sm-2">
Owner
</label>
<div class="col-sm-10">
<input type="email" name="owner" ng-model="certificate.owner" placeholder="owner@example.com"
class="form-control" required/>
<p ng-show="uploadForm.owner.$invalid && !uploadForm.owner.$pristine" class="help-block">Enter a valid
email.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.name.$invalid, 'has-success': !uploadForm.name.$invalid&&uploadForm.name.$dirty}">
<label class="control-label col-sm-2" uib-tooltip="If no name is provided, Lemur will generate a name for you">
Custom Name <span class="glyphicon glyphicon-question-sign"></span>
</label>
<div class="col-sm-10">
<input name="name" ng-model="certificate.name" placeholder="the.example.net-SymantecCorporation-20150828-20160830" class="form-control"/>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.description.$invalid, 'has-success': !uploadForm.$invalid&&uploadForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<div class="col-sm-10">
<textarea name="description" ng-model="certificate.description" placeholder="Something elegant" class="form-control" required></textarea>
<p ng-show="uploadForm.description.$invalid && !uploadForm.description.$pristine" class="help-block">You must give a short description about this authority will be used for.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.publicCert.$invalid, 'has-success': !uploadForm.publicCert.$invalid&&uploadForm.publicCert.$dirty}">
<label class="control-label col-sm-2">
Public Certificate
</label>
<div class="col-sm-10">
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div class="form-group"
ng-class="{'has-error': uploadForm.description.$invalid, 'has-success': !uploadForm.$invalid&&uploadForm.description.$dirty}">
<label class="control-label col-sm-2">
Description
</label>
<div class="col-sm-10">
<textarea name="description" ng-model="certificate.description" placeholder="Something elegant"
class="form-control" required></textarea>
<p ng-show="uploadForm.description.$invalid && !uploadForm.description.$pristine" class="help-block">You must
give a short description about this authority will be used for.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.publicCert.$invalid, 'has-success': !uploadForm.publicCert.$invalid&&uploadForm.publicCert.$dirty}">
<label class="control-label col-sm-2">
Public Certificate
</label>
<div class="col-sm-10">
<textarea name="publicCert" ng-model="certificate.body" placeholder="PEM encoded string..."
class="form-control" ng-pattern="/^-----BEGIN CERTIFICATE-----/" required></textarea>
<p ng-show="uploadForm.publicCert.$invalid && !uploadForm.publicCert.$pristine" class="help-block">Enter
a valid certificate.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.privateKey.$invalid&&uploadForm.privateKey.$dirty, 'has-success': !uploadForm.privateKey.$invalid&&uploadForm.privateKey.$dirty}">
<label class="control-label col-sm-2">
Private Key
</label>
<div class="col-sm-10">
<p ng-show="uploadForm.publicCert.$invalid && !uploadForm.publicCert.$pristine" class="help-block">Enter
a valid certificate.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.privateKey.$invalid&&uploadForm.privateKey.$dirty, 'has-success': !uploadForm.privateKey.$invalid&&uploadForm.privateKey.$dirty}">
<label class="control-label col-sm-2">
Private Key
</label>
<div class="col-sm-10">
<textarea name="privateKey" ng-model="certificate.privateKey" placeholder="PEM encoded string..."
class="form-control" ng-pattern="/(^-----BEGIN PRIVATE KEY-----[\S\s]*-----END PRIVATE KEY-----)|(^-----BEGIN RSA PRIVATE KEY-----[\S\s]*-----END RSA PRIVATE KEY-----)/"></textarea>
class="form-control"
ng-pattern="/(^-----BEGIN PRIVATE KEY-----[\S\s]*-----END PRIVATE KEY-----)|(^-----BEGIN RSA PRIVATE KEY-----[\S\s]*-----END RSA PRIVATE KEY-----)/"></textarea>
<p ng-show="uploadForm.privateKey.$invalid && !uploadForm.privateKey.$pristine" class="help-block">Enter
a valid certificate.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.owner.$invalid&&uploadform.intermediateCert.$dirty, 'has-success': !uploadForm.intermediateCert.$invalid&&uploadForm.intermediateCert.$dirty}">
<label class="control-label col-sm-2">
Intermediate Certificate
</label>
<div class="col-sm-10">
<p ng-show="uploadForm.privateKey.$invalid && !uploadForm.privateKey.$pristine" class="help-block">Enter
a valid certificate.</p>
</div>
</div>
<div class="form-group"
ng-class="{'has-error': uploadForm.owner.$invalid&&uploadform.intermediateCert.$dirty, 'has-success': !uploadForm.intermediateCert.$invalid&&uploadForm.intermediateCert.$dirty}">
<label class="control-label col-sm-2">
Intermediate Certificate
</label>
<div class="col-sm-10">
<textarea name="intermediateCert" ng-model="certificate.chain"
placeholder="PEM encoded string..." class="form-control"
ng-pattern="/^-----BEGIN CERTIFICATE-----/"></textarea>
<p ng-show="uploadForm.intermediateCert.$invalid && !uploadForm.intemediateCert.$pristine"
class="help-block">Enter a valid certificate.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
Roles
</label>
<div class="col-sm-10" ng-model="certificate" role-select></div>
</div>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/notifications.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/destinations.tpl.html'"></div>
</form>
<p ng-show="uploadForm.intermediateCert.$invalid && !uploadForm.intemediateCert.$pristine"
class="help-block">Enter a valid certificate.</p>
</div>
</div>
<div class="modal-footer">
<button type="submit" ng-click="save(certificate)" ng-disabled="uploadForm.$invalid" class="btn btn-success">Import</button>
<button ng-click="cancel()" class="btn btn-danger">Cancel</button>
<div ng-include="'angular/certificates/certificate/replaces.tpl.html'"></div>
<div ng-include="'angular/certificates/certificate/destinations.tpl.html'"></div>
<div class="form-group"
ng-class="{'has-error': uploadForm.name.$invalid, 'has-success': !uploadForm.name.$invalid&&uploadForm.name.$dirty}">
<label class="control-label col-sm-2">
Custom Certificate Name
</label>
<div class="col-sm-10">
<input name="name" ng-model="certificate.name"
placeholder="the.example.net-SymantecCorporation-20150828-20160830" class="form-control"
uib-tooltip="If no name is provided, Lemur will generate a name for you">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" ng-click="save(certificate)" ng-disabled="uploadForm.$invalid" class="btn btn-success">
Import
</button>
<button ng-click="cancel()" class="btn btn-danger">Cancel</button>
</div>
</div>