debian-mirror-gitlab/app/assets/javascripts/behaviors/secret_values.js

48 lines
1.5 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
import { n__ } from '../locale';
2019-02-15 15:39:39 +05:30
import { parseBoolean } from '../lib/utils/common_utils';
2018-03-17 18:26:18 +05:30
export default class SecretValues {
constructor({
container,
valueSelector = '.js-secret-value',
placeholderSelector = '.js-secret-value-placeholder',
}) {
this.container = container;
this.valueSelector = valueSelector;
this.placeholderSelector = placeholderSelector;
}
init() {
this.revealButton = this.container.querySelector('.js-secret-value-reveal-button');
if (this.revealButton) {
2019-02-15 15:39:39 +05:30
const isRevealed = parseBoolean(this.revealButton.dataset.secretRevealStatus);
2018-03-17 18:26:18 +05:30
this.updateDom(isRevealed);
this.revealButton.addEventListener('click', this.onRevealButtonClicked.bind(this));
}
}
onRevealButtonClicked() {
2019-02-15 15:39:39 +05:30
const previousIsRevealed = parseBoolean(this.revealButton.dataset.secretRevealStatus);
2018-03-17 18:26:18 +05:30
this.updateDom(!previousIsRevealed);
}
updateDom(isRevealed) {
const values = this.container.querySelectorAll(this.valueSelector);
2018-12-13 13:39:08 +05:30
values.forEach(value => {
2018-03-17 18:26:18 +05:30
value.classList.toggle('hide', !isRevealed);
});
const placeholders = this.container.querySelectorAll(this.placeholderSelector);
2018-12-13 13:39:08 +05:30
placeholders.forEach(placeholder => {
2018-03-17 18:26:18 +05:30
placeholder.classList.toggle('hide', isRevealed);
});
2018-12-13 13:39:08 +05:30
this.revealButton.textContent = isRevealed
? n__('Hide value', 'Hide values', values.length)
: n__('Reveal value', 'Reveal values', values.length);
2018-03-17 18:26:18 +05:30
this.revealButton.dataset.secretRevealStatus = isRevealed;
}
}