Skip to content

Commit 20b0381

Browse files
spadgettspadgett
committed
Improve display of secrets
* Decode secret values that don't have non-printable characters * Provide a copy-to-clipboard button for secret values when revealed * Improve styling of revealed secrets
1 parent 26fea74 commit 20b0381

File tree

11 files changed

+190
-242
lines changed

11 files changed

+190
-242
lines changed

‎app/scripts/directives/util.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ angular.module('openshiftConsole')
7878
clipboardText: "=",
7979
isDisabled: "=?",
8080
displayWide: "=?",
81-
inputText: "=?"
81+
inputText: "=?",
82+
multiline: "=?"
8283
},
8384
templateUrl: 'views/directives/_copy-to-clipboard.html',
8485
controller: function($scope) {

‎app/scripts/filters/strings.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,21 @@ angular.module('openshiftConsole')
5050
};
5151
})
5252
.filter('isMultiline', function() {
53-
return function(str) {
53+
return function(str, ignoreTrailing) {
5454
if (!str) {
5555
return false;
5656
}
57-
return str.indexOf('\n') !== -1;
57+
58+
var index = str.search(/\r|\n/);
59+
if (index === -1) {
60+
return false;
61+
}
62+
63+
// Ignore a final, trailing newline?
64+
if (ignoreTrailing) {
65+
return index !== (str.length - 1);
66+
}
67+
68+
return true;
5869
};
5970
});

‎app/scripts/services/secrets.js

+25-12
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,35 @@ angular.module("openshiftConsole")
5656
};
5757

5858
var decodeSecretData = function(secretData) {
59-
return _.mapValues(secretData, function(data, paramName) {
59+
var nonPrintable = {};
60+
var decodedSecret = _.mapValues(secretData, function(data, paramName) {
61+
var decoded, isNonPrintable;
6062
switch (paramName) {
61-
case ".dockercfg":
62-
return decodeDockercfg(data);
63-
case ".dockerconfigjson":
64-
return decodeDockerconfigjson(data);
65-
case "username":
66-
case "password":
67-
case ".gitconfig":
68-
case "ssh-privatekey":
69-
case "ca.crt":
70-
return window.atob(data);
71-
default:
63+
case ".dockercfg":
64+
return decodeDockercfg(data);
65+
case ".dockerconfigjson":
66+
return decodeDockerconfigjson(data);
67+
default:
68+
decoded = window.atob(data);
69+
// Allow whitespace like newlines and tabs, but detect other
70+
// non-printable characters in the unencoded data.
71+
// http://stackoverflow.com/questions/1677644/detect-non-printable-characters-in-javascript
72+
isNonPrintable = /[\x00-\x09\x0E-\x1F]/.test(decoded);
73+
if (isNonPrintable) {
74+
nonPrintable[paramName] = true;
7275
return data;
76+
}
77+
78+
return decoded;
7379
}
7480
});
81+
82+
// Add a property to indicate when the decoded data contains
83+
// non-printable characters. Use the `$$` prefix so it's not
84+
// considered part of the data.
85+
decodedSecret.$$nonprintable = nonPrintable;
86+
87+
return decodedSecret;
7588
};
7689

7790
return {

‎app/styles/_forms.less

+16
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,22 @@
33
color: @text-color;
44
}
55

6+
.copy-to-clipboard-multiline {
7+
position: relative;
8+
width: 100%;
9+
a {
10+
box-shadow: none;
11+
position: absolute;
12+
right: 0;
13+
top: 0;
14+
}
15+
pre {
16+
background-color: #fff;
17+
max-width: 100%;
18+
overflow-x: auto;
19+
}
20+
}
21+
622
.input-group-addon.wildcard-prefix {
723
padding-left: 10px;
824
}

‎app/styles/_secrets.less

+18-11
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,23 @@
6767
}
6868
}
6969

70+
dl.secret-data {
71+
overflow: hidden;
72+
pre {
73+
margin-bottom: 0;
74+
}
75+
dd {
76+
margin-bottom: 10px;
77+
overflow-x: auto;
78+
.copy-to-clipboard {
79+
font-family: @font-family-monospace;
80+
}
81+
}
82+
@media (min-width: @screen-md-min) {
83+
.dl-horizontal();
84+
}
85+
}
86+
7087
.create-secret-modal {
7188
background-color: #F5F5F5;
7289
.modal-footer{
@@ -77,16 +94,6 @@
7794
}
7895
}
7996

80-
.secret-data {
81-
max-width: 450px;
82-
max-height: 150px;
83-
@media (max-width: @screen-sm-max) {
84-
// The `table-responsive` div adds a 100% border. Make sure the table is at
85-
// least 100% to avoid a white block at some screen sizes.
86-
max-width: 100%;
87-
}
88-
}
89-
9097
.create-secret-editor {
9198
height: 150px;
92-
}
99+
}

‎app/views/_config-file-params.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<div ng-repeat="(serverName, data) in secretData" class="image-source-item">
2-
<h4>{{serverName}}</h4>
3-
<dt>Username:</dt>
2+
<h3>{{serverName}}</h3>
3+
<dt>username</dt>
44
<dd class="word-break">{{data.username}}</dd>
5-
<dt>Password:</dt>
6-
<dd ng-if="view.showSecret" class="word-break">{{data.password}}</dd>
5+
<dt>password</dt>
6+
<dd ng-if="view.showSecret">
7+
<copy-to-clipboard clipboard-text="data.password" display-wide="true"></copy-to-clipboard>
8+
</dd>
79
<dd ng-if="!view.showSecret">*****</dd>
8-
<dt>Email:</dt>
10+
<dt>email</dt>
911
<dd class="word-break">{{data.email}}</dd>
10-
</div>
12+
</div>

‎app/views/browse/secret.html

+17-84
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,12 @@ <h1>
4242
<div class="container-fluid">
4343
<div ng-if="secret" class="row">
4444
<div class="col-sm-12">
45-
<div class="resource-details secret-details">
46-
<dl class="dl-horizontal left">
47-
<dt>Type:</dt>
48-
<dd>{{secret.type}}</dd>
49-
45+
<div class="resource-details">
46+
<h2 class="mar-top-none">
47+
{{secret.type}}
48+
<small class="mar-left-sm"><a href="" ng-click="view.showSecret = !view.showSecret">{{view.showSecret ? "Hide" : "Reveal"}} secret</a></small>
49+
</h2>
50+
<dl class="secret-data left">
5051
<div ng-repeat="(secretDataName, secretData) in decodedSecretData" class="image-source-item">
5152
<div ng-switch="secretDataName">
5253
<div ng-switch-when=".dockercfg">
@@ -56,92 +57,24 @@ <h1>
5657
<div ng-switch-when=".dockerconfigjson">
5758
<ng-include src=" 'views/_config-file-params.html' "></ng-include>
5859
</div>
59-
60-
<div ng-switch-when="username">
61-
<dt>Username:</dt>
62-
<dd class="word-break">{{decodedSecretData.username}}</dd>
63-
</div>
64-
65-
<div ng-switch-when="password">
66-
<dt>Password:</dt>
67-
<dd ng-if="view.showSecret" class="word-break">{{secretData}}</dd>
68-
<dd ng-if="!view.showSecret">*****</dd>
69-
</div>
70-
71-
<div ng-switch-when="ssh-privatekey">
72-
<dt>SSH Private Key:</dt>
73-
<dd ng-if="view.showSecret" class="gutter-bottom">
74-
<div ui-ace="{
75-
theme: 'dreamweaver',
76-
highlightActiveLine: false,
77-
showGutter: false,
78-
rendererOptions: {
79-
fadeFoldWidgets: true,
80-
highlightActiveLine: false,
81-
showPrintMargin: false
82-
},
83-
advanced: {
84-
highlightActiveLine: false
85-
}
86-
}" readonly ng-model="secretData" class="ace-bordered ace-read-only ace-inline secret-data"></div>
87-
</dd>
88-
<dd ng-if="!view.showSecret">*****</dd>
89-
</div>
90-
91-
<div ng-switch-when="ca.crt">
92-
<dt>CA Certificate:</dt>
93-
<dd ng-if="view.showSecret" class="gutter-bottom">
94-
<div ui-ace="{
95-
theme: 'dreamweaver',
96-
highlightActiveLine: false,
97-
showGutter: false,
98-
rendererOptions: {
99-
fadeFoldWidgets: true,
100-
highlightActiveLine: false,
101-
showPrintMargin: false
102-
},
103-
advanced: {
104-
highlightActiveLine: false
105-
}
106-
}" readonly ng-model="secretData" class="ace-bordered ace-read-only ace-inline secret-data"></div>
107-
</dd>
108-
<dd ng-if="!view.showSecret">*****</dd>
109-
</div>
110-
111-
<div ng-switch-when=".gitconfig">
112-
<dt>Git Configuration File:</dt>
113-
<dd ng-if="view.showSecret" class="gutter-bottom">
114-
<div ui-ace="{
115-
mode: 'ini',
116-
theme: 'dreamweaver',
117-
highlightActiveLine: false,
118-
showGutter: false,
119-
rendererOptions: {
120-
fadeFoldWidgets: true,
121-
highlightActiveLine: false,
122-
showPrintMargin: false
123-
},
124-
advanced: {
125-
highlightActiveLine: false
126-
}
127-
}" readonly ng-model="secretData" class="ace-bordered ace-read-only ace-inline secret-data"></div>
128-
</dd>
129-
<dd ng-if="!view.showSecret">*****</dd>
130-
</div>
131-
13260
<div ng-switch-default>
133-
<dt>{{secretDataName}}:</dt>
134-
<dd ng-if="view.showSecret" class="word-break gutter-bottom" >{{secretData}}</dd>
61+
<dt ng-attr-title="{{secretDataName}}">{{secretDataName}}</dt>
62+
<dd ng-if="view.showSecret">
63+
<copy-to-clipboard
64+
clipboard-text="secretData"
65+
multiline="secretData | isMultiline : true"
66+
display-wide="true">
67+
</copy-to-clipboard>
68+
<div ng-if="decodedSecretData.$$nonprintable[secretDataName]" class="help-block">
69+
This secret value contains non-printable characters and is displayed as a Base64-encoded string.
70+
</div>
71+
</dd>
13572
<dd ng-if="!view.showSecret">*****</dd>
13673
</div>
137-
13874
</div>
13975
</div>
14076
</dl>
14177
</div>
142-
<div class="gutter-bottom">
143-
<a href="" ng-click="view.showSecret = !view.showSecret">{{view.showSecret ? "Hide" : "Reveal"}} secret contents</a>
144-
</div>
14578
<annotations annotations="secret.metadata.annotations"></annotations>
14679
</div><!-- /col-* -->
14780
</div>

‎app/views/directives/_copy-to-clipboard.html

+30-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
1-
<div class="input-group copy-to-clipboard" ng-class="{'limit-width': !displayWide}">
2-
<input id="{{id}}" type="text" class="form-control" value="{{inputText ? inputText : clipboardText}}" ng-disabled="isDisabled" ng-readonly="!isDisabled" select-on-focus>
3-
<span class="input-group-btn" ng-hide="hidden">
4-
<a ng-show="!inputText" data-clipboard-target="#{{id}}"
5-
ng-disabled="isDisabled"
6-
data-toggle="tooltip"
7-
title="Copy to clipboard"
8-
role="button"
9-
class="btn btn-default"><i class="fa fa-clipboard"/></a>
10-
<a ng-show="inputText" data-clipboard-text="{{clipboardText}}"
11-
ng-disabled="isDisabled"
12-
data-toggle="tooltip"
13-
title="Copy to clipboard"
14-
role="button"
15-
class="btn btn-default"><i class="fa fa-clipboard"/></a>
1+
<div class="input-group copy-to-clipboard"
2+
ng-class="{'limit-width': !displayWide, 'copy-to-clipboard-multiline': multiline}">
3+
<input
4+
ng-if="!multiline"
5+
id="{{id}}"
6+
type="text"
7+
class="form-control"
8+
value="{{inputText || clipboardText}}"
9+
ng-disabled="isDisabled"
10+
ng-readonly="!isDisabled"
11+
select-on-focus>
12+
<pre ng-if="multiline" id="{{id}}">{{inputText || clipboardText}}</pre>
13+
<span ng-class="{ 'input-group-btn': !multiline }" ng-hide="hidden">
14+
<a ng-show="!inputText"
15+
data-clipboard-target="#{{id}}"
16+
href=""
17+
ng-disabled="isDisabled"
18+
data-toggle="tooltip"
19+
title="Copy to clipboard"
20+
role="button"
21+
class="btn btn-default"><i class="fa fa-clipboard"/></a>
22+
<a ng-show="inputText"
23+
data-clipboard-text="{{clipboardText}}"
24+
href=""
25+
ng-disabled="isDisabled"
26+
data-toggle="tooltip"
27+
title="Copy to clipboard"
28+
role="button"
29+
class="btn btn-default"><i class="fa fa-clipboard"/></a>
1630
</span>
17-
</div><!-- /input-group -->
31+
</div><!-- /input-group -->

‎dist/scripts/scripts.js

+11-13
Original file line numberDiff line numberDiff line change
@@ -3360,25 +3360,20 @@ email:a.email
33603360
};
33613361
}), b;
33623362
}, d = function(a) {
3363-
return _.mapValues(a, function(a, d) {
3364-
switch (d) {
3363+
var d = {}, e = _.mapValues(a, function(a, e) {
3364+
var f, g;
3365+
switch (e) {
33653366
case ".dockercfg":
33663367
return b(a);
33673368

33683369
case ".dockerconfigjson":
33693370
return c(a);
33703371

3371-
case "username":
3372-
case "password":
3373-
case ".gitconfig":
3374-
case "ssh-privatekey":
3375-
case "ca.crt":
3376-
return window.atob(a);
3377-
33783372
default:
3379-
return a;
3373+
return f = window.atob(a), g = /[\x00-\x09\x0E-\x1F]/.test(f), g ? (d[e] = !0, a) :f;
33803374
}
33813375
});
3376+
return e.$$nonprintable = d, e;
33823377
};
33833378
return {
33843379
groupSecretsByType:a,
@@ -10255,7 +10250,8 @@ scope:{
1025510250
clipboardText:"=",
1025610251
isDisabled:"=?",
1025710252
displayWide:"=?",
10258-
inputText:"=?"
10253+
inputText:"=?",
10254+
multiline:"=?"
1025910255
},
1026010256
templateUrl:"views/directives/_copy-to-clipboard.html",
1026110257
controller:[ "$scope", function(a) {
@@ -14196,8 +14192,10 @@ return function(a) {
1419614192
return _.capitalize(a);
1419714193
};
1419814194
}).filter("isMultiline", function() {
14199-
return function(a) {
14200-
return !!a && a.indexOf("\n") !== -1;
14195+
return function(a, b) {
14196+
if (!a) return !1;
14197+
var c = a.search(/\r|\n/);
14198+
return c !== -1 && (!b || c !== a.length - 1);
1420114199
};
1420214200
}), angular.module("openshiftConsole").directive("affix", [ "$window", function(a) {
1420314201
return {

0 commit comments

Comments
 (0)