Skip to content

Commit 042472d

Browse files
VladimirAusarlina-espinoza
VladimirAus
and
arlina-espinoza
authored
[#467] Fixes broken secret. (#496)
* [#467] Fixes broken secret. * [#467] Cleanup. * [#467] Namespacing secret to apigee_secret to avoid conflicts. * [#467] Fix test regarding show/hide keys. Co-authored-by: Arlina Espinoza <[email protected]>
1 parent 629707b commit 042472d

File tree

9 files changed

+255
-105
lines changed

9 files changed

+255
-105
lines changed

‎apigee_edge.libraries.yml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,23 @@ apigee_edge.status_property:
4848
theme:
4949
css/apigee_edge.status_property.css: {}
5050

51+
apigee_edge.secret:
52+
version: 1.0
53+
css:
54+
theme:
55+
css/apigee_edge.secret.css: {}
56+
js:
57+
js/apigee_edge.secret.js: {}
58+
dependencies:
59+
- core/jquery
60+
- core/drupalSettings
61+
- core/drupal
62+
5163
apigee_edge.app_view:
5264
version: 1.0
5365
css:
5466
theme:
5567
css/apigee_edge.app_view.css: {}
56-
js:
57-
js/apigee_edge.app_view.js: {}
5868
dependencies:
5969
- core/jquery
6070
- core/jquery.once

‎apigee_edge.module‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,19 @@ function apigee_edge_theme() {
134134
'status_property' => [
135135
'render element' => 'element',
136136
],
137+
'apigee_secret' => [
138+
'render element' => 'elements',
139+
'base hook' => 'apigee_secret',
140+
],
141+
];
142+
}
143+
144+
/**
145+
* Preprocess variables for the apigee_secret element template.
146+
*/
147+
function template_preprocess_apigee_secret(&$variables) {
148+
$variables['value'] = [
149+
'#markup' => $variables['elements']['#value'],
137150
];
138151
}
139152

@@ -1169,15 +1182,9 @@ function template_preprocess_app_credential(array &$variables) {
11691182
$value = (string) $value;
11701183

11711184
if (in_array($property, $secret_properties)) {
1185+
// Render the consumerKey and the consumerSecret as secret fields.
11721186
$variables['primary_wrapper'][$property]['value'] = [
1173-
'#type' => 'html_tag',
1174-
'#tag' => 'span',
1175-
'#attributes' => [
1176-
'class' => 'secret',
1177-
'data-secret-type' => $property,
1178-
'data-app-index' => $index,
1179-
],
1180-
'#value' => '',
1187+
'#type' => 'apigee_secret',
11811188
];
11821189
}
11831190
elseif ($def['value_type'] === 'status') {

‎css/apigee_edge.app_view.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
}
5858

5959
.apigee-entity--app--view-mode-full .secret {
60-
display: none;
6160
position: relative;
6261
z-index: auto;
6362
}

‎css/apigee_edge.secret.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @file
3+
* Styles for the Secret element.
4+
*/
5+
6+
.secret .secret__value__hidden,
7+
.secret .secret__toggle__show {
8+
display: none;
9+
}
10+
11+
.secret .secret__value,
12+
.secret .secret__toggle__hide {
13+
display: inline-block;
14+
}
15+
16+
.secret--hidden .secret__value__hidden,
17+
.secret--hidden .secret__toggle__show {
18+
display: inline-block;
19+
}
20+
.secret--hidden .secret__value,
21+
.secret--hidden .secret__toggle__hide {
22+
display: none;
23+
}
24+
25+
.secret__copy {
26+
display: flex;
27+
align-items: center;
28+
}
29+
30+
.secret__copy .badge {
31+
display: none;
32+
}

‎js/apigee_edge.app_view.js‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎js/apigee_edge.secret.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*
2+
* Copyright 2018 Google Inc.
3+
*
4+
* This program is free software; you can redistribute it and/or modify it under
5+
* the terms of the GNU General Public License version 2 as published by the
6+
* Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful, but WITHOUT
9+
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
10+
* or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public
11+
* License for more details.
12+
*
13+
* You should have received a copy of the GNU General Public License along
14+
* with this program; if not, write to the Free Software Foundation, Inc., 51
15+
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
16+
*/
17+
18+
/**
19+
* @file
20+
* Script for the Secret element.
21+
*/
22+
(function ($, Drupal, drupalSettings) {
23+
24+
'use strict';
25+
26+
Drupal.behaviors.SecretElement = {
27+
attach: function (context, settings) {
28+
let $secret = $('.secret', context);
29+
if ($secret.length) {
30+
$secret.each(function (i, element) {
31+
let $this = $(this);
32+
let $el = $this.find('.secret__value');
33+
let hClass = 'secret--hidden';
34+
let appElWrapper = '.app-credential';
35+
let $wrapper = $this.closest(appElWrapper);
36+
let loader = '<img src="' + drupalSettings.path.baseUrl + 'core/misc/throbber-active.gif" border="0" />';
37+
38+
// Hide the value.
39+
$this.addClass(hClass);
40+
41+
// Toggle secret.
42+
$(this).find('.secret__toggle').on('click', function (event) {
43+
let index = $(this).closest(appElWrapper).find('.secret__toggle').index(this);
44+
let wrapperIndex = $wrapper.data('app-container-index');
45+
event.preventDefault();
46+
$this.toggleClass(hClass);
47+
if ($this.hasClass(hClass)) {
48+
$el.html('');
49+
}
50+
else {
51+
$el.html(loader);
52+
callEndpoint($wrapper.data('team'), $wrapper.data('app'), function(data) {
53+
$el.html(data[wrapperIndex][index]);
54+
});
55+
}
56+
});
57+
58+
// Copy to clipboard.
59+
let $copy = $(this).find('.secret__copy');
60+
$copy.find('button').on('click', function (event) {
61+
let index = $(this).closest(appElWrapper).find('.secret__copy button').index(this);
62+
let wrapperIndex = $wrapper.closest('fieldset').parent().find('fieldset').index($(this).closest('fieldset'));
63+
callEndpoint($wrapper.data('team'), $wrapper.data('app'), function(data) {
64+
copyToClipboard(data[wrapperIndex][index]);
65+
$copy.find('.badge').fadeIn().delay(1000).fadeOut();
66+
});
67+
})
68+
});
69+
}
70+
}
71+
};
72+
73+
/**
74+
* Cross browser helper to copy to clipboard.
75+
*/
76+
function copyToClipboard(text) {
77+
if (window.clipboardData && window.clipboardData.setData) {
78+
// IE specific code path to prevent textarea being shown while dialog is visible.
79+
return clipboardData.setData("Text", text);
80+
81+
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
82+
var textarea = document.createElement("textarea");
83+
textarea.textContent = text;
84+
// Prevent scrolling to bottom of page in MS Edge.
85+
textarea.style.position = "fixed";
86+
document.body.appendChild(textarea);
87+
textarea.select();
88+
try {
89+
// Security exception may be thrown by some browsers.
90+
return document.execCommand("copy");
91+
} catch (ex) {
92+
return false;
93+
} finally {
94+
document.body.removeChild(textarea);
95+
}
96+
}
97+
};
98+
99+
/**
100+
* Get credentials based on the app name.
101+
*/
102+
function callEndpoint(teamApp, app, callback) {
103+
var endpoint = drupalSettings.path.baseUrl + 'user/' + drupalSettings.currentUser + '/apps/' + app + '/api-keys';
104+
if (teamApp !== undefined && teamApp !== 0 && teamApp !== '') {
105+
endpoint = drupalSettings.path.baseUrl + 'teams/' + teamApp + '/apps/' + app + '/api-keys';
106+
}
107+
$.get(endpoint, function(data) {
108+
callback(data);
109+
});
110+
};
111+
112+
})(jQuery, Drupal, drupalSettings);

‎src/Element/ApigeeSecret.php‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<?php
2+
3+
/**
4+
* Copyright 2020 Google Inc.
5+
*
6+
* This program is free software; you can redistribute it and/or
7+
* modify it under the terms of the GNU General Public License
8+
* version 2 as published by the Free Software Foundation.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with this program; if not, write to the Free Software
17+
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
18+
* MA 02110-1301, USA.
19+
*/
20+
21+
namespace Drupal\apigee_edge\Element;
22+
23+
use Drupal\Core\Render\Element\RenderElement;
24+
25+
/**
26+
* Provides a secret element.
27+
*
28+
* @RenderElement("apigee_secret")
29+
*/
30+
class ApigeeSecret extends RenderElement {
31+
32+
/**
33+
* {@inheritdoc}
34+
*/
35+
public function getInfo() {
36+
return [
37+
'#theme' => 'apigee_secret',
38+
'#value' => NULL,
39+
];
40+
}
41+
42+
}

‎templates/apigee-secret.html.twig‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{#
2+
/**
3+
* @file
4+
* Template for a Secret element.
5+
*
6+
* Available variables:
7+
* - value: The secret value.
8+
*
9+
* @ingroup themeable
10+
*/
11+
#}
12+
13+
{% set id = 'secret-id-' ~ random() %}
14+
15+
{{ attach_library('apigee_edge/apigee_edge.secret') }}
16+
<div class="secret field__item" id={{ id }}>
17+
<div class="secret__value">{{ value }}</div>
18+
<div class="secret__value__hidden" aria-hidden="true">••••••••••••••••</div>
19+
<br/>
20+
<span class="secret__toggle" title="{{ 'Toggle key visibility'|t }}" aria-controls="{{ id }}">
21+
<a class="secret__toggle__show" href="#">{{ 'Show key'|t }}</a>
22+
<a class="secret__toggle__hide" href="#">{{ 'Hide key'|t }}</a>
23+
</span>
24+
</div>

0 commit comments

Comments
 (0)