Skip to content

Commit

Permalink
✨ Feat: refactor FixItDecryptor and add confirm btn
Browse files Browse the repository at this point in the history 
Resolved #437
  • Loading branch information
@Lruihao
Lruihao committed Apr 24, 2024
1 parent 20433ed commit 3b89a4e
Show file tree
Hide file tree
Showing 19 changed files with 195 additions and 112 deletions.
26 changes: 18 additions & 8 deletions assets/css/_partials/_single/_fixit-decryptor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,8 @@
text-align: center;
margin-top: 3rem;

.fixit-encryptor-shortcode & {
margin-top: 1rem;
}

#fixit-decryptor-input,
.fixit-decryptor-input,
.fixit-decryptor-btn,
.fixit-encryptor-btn {
display: inline-block;
box-sizing: border-box;
Expand Down Expand Up @@ -40,9 +36,8 @@
}
}

#fixit-decryptor-input,
.fixit-decryptor-input {
width: clamp(50%, 400px, 100%);
width: calc(clamp(50%, 450px, 100%) - 100px);
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
Expand All @@ -53,10 +48,11 @@
}
}

.fixit-decryptor-btn,
.fixit-encryptor-btn {
cursor: pointer;
@include transition(all 0.1s ease-out);
padding: 0.6rem 1rem;
padding: 0.8rem 1rem;

background-color: $header-background-color;

Expand All @@ -66,6 +62,20 @@
}
}

// fixit-encryptor shortcodes
fixit-encryptor {
.fixit-decryptor-container {
margin-top: 1rem;
}
&.decrypted > .fixit-decryptor-container {
.fixit-decryptor-loading,
.fixit-decryptor-input,
.fixit-decryptor-btn {
display: none;
}
}
}

.encrypted-hidden {
display: none !important;
}
191 changes: 109 additions & 82 deletions assets/js/fixit-decryptor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,86 +12,125 @@ FixItDecryptor = function (options = {}) {
this.options = options || {};
this.options.duration = this.options.duration || 24 * 60 * 60; // default cache one day
this.decryptedEventSet = new Set();
this.partialDecryptedEventSet = new Set();
this.resetEventSet = new Set();
this.$el = document.querySelector('.fixit-decryptor-container');

/**
* decrypt content
* @param {String} base64EncodeContent encrypted content
* @param {Element} $content content element
* @param {String} salt salt string
* @param {Boolean} [isAll=true] whether to decrypt all content
*/
var _decryptContent = (base64EncodeContent) => {
var _decryptContent = ($content, salt, isAll=true) => {
try {
this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
this.$el.querySelector('#fixit-decryptor-input').classList.add('d-none');
this.$el.querySelector('.fixit-encryptor-btn').classList.remove('d-none');
document.querySelector('#content').insertAdjacentHTML(
if (isAll) {
// decrypt all content
this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
this.$el.querySelector('.fixit-decryptor-input').classList.add('d-none');
this.$el.querySelector('.fixit-decryptor-btn').classList.add('d-none');
this.$el.querySelector('.fixit-encryptor-btn').classList.remove('d-none');
} else {
// decrypt shortcode content
$content.parentElement.classList.add('decrypted');
}
$content.insertAdjacentHTML(
'afterbegin',
CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
CryptoJS.enc.Base64
.parse($content.getAttribute('data-content').replace(salt, ''))
.toString(CryptoJS.enc.Utf8)
);
} catch (err) {
return console.error(err);
}
// decrypted hook
console.log(this.decryptedEventSet)
for (const event of this.decryptedEventSet) {
event();
}
const eventSet = isAll ? this.decryptedEventSet : this.partialDecryptedEventSet;
for (const event of eventSet) {
event($content);
}
};

/**
* validate password
* @param {Element} $decryptor decryptor element
* @param {Element} $content content element
* @param {Function} callback callback function after password validation
* @returns
*/
var _validatePassword = ($decryptor, $content, callback) => {
const password = $content.getAttribute('data-password');
const inputEl = $decryptor.querySelector('.fixit-decryptor-input');
const input = inputEl.value.trim();
const inputMd5 = CryptoJS.MD5(input).toString();
const inputSha256 = CryptoJS.SHA256(input).toString();
const saltLen = input.length % 2 ? input.length : input.length + 1;

inputEl.value = '';
inputEl.blur();
if (!input) {
alert('Please enter the correct password!');
return console.warn('Please enter the correct password!');
}
if (inputMd5 !== password) {
alert(`Password error: ${input} not the correct password!`);
return console.warn(`Password error: ${input} not the correct password!`);
}
callback(inputMd5, inputSha256.slice(saltLen));
}

/**
* initialize FixIt decryptor
*/
_proto.init = () => {
this.addEventListener('decrypted', this.options?.decrypted);
this.addEventListener('partial-decrypted', this.options?.partialDecrypted);
this.addEventListener('reset', this.options?.reset);
this.validateCache();

const _decryptor = this;
this.$el.querySelector('#fixit-decryptor-input')?.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
e.preventDefault();
const $content = document.querySelector('#content');
const password = $content.getAttribute('data-password');
const input = this.value.trim();
const saltLen = input.length % 2 ? input.length : input.length + 1;
const inputMd5 = CryptoJS.MD5(input).toString();
const inputSha256 = CryptoJS.SHA256(input).toString();

this.value = '';
this.blur();
if (!input) {
alert('Please enter the correct password!');
return console.warn('Please enter the correct password!');
}
if (inputMd5 !== password) {
alert(`Password error: ${input} not the correct password!`);
return console.warn(`Password error: ${input} not the correct password!`);
}
const decryptorHandler = () => {
const $content = document.querySelector('#content');
_validatePassword(this.$el, $content, (password, salt) => {
// cache decryption statistics
window.localStorage?.setItem(
`fixit-decryptor/#${location.pathname}`,
JSON.stringify({
expiration: Math.ceil(Date.now() / 1000) + _decryptor.options.duration,
md5: inputMd5,
sha256: inputSha256.slice(saltLen)
expiration: Math.ceil(Date.now() / 1000) + this.options.duration,
password,
salt,
})
);
_decryptContent($content.getAttribute('data-content').replace(inputSha256.slice(saltLen), ''));
_decryptContent($content, salt);
});
};

// bind decryptor input enter keydown event
this.$el.querySelector('#fixit-decryptor-input')?.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
decryptorHandler();
}
});

// bind decryptor button click event
this.$el.querySelector('.fixit-decryptor-btn')?.addEventListener('click', (e) => {
e.preventDefault();
decryptorHandler();
});

this.$el.querySelector('.fixit-encryptor-btn')?.addEventListener('click', function (e) {
// bind encryptor button click event
this.$el.querySelector('.fixit-encryptor-btn')?.addEventListener('click', (e) => {
e.preventDefault();
this.classList.add('d-none')
_decryptor.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
e.target.classList.add('d-none')
this.$el.querySelector('.fixit-decryptor-input').classList.remove('d-none');
this.$el.querySelector('.fixit-decryptor-btn').classList.remove('d-none');
document.querySelector('#content').innerHTML = '';
document.querySelector('#content').insertAdjacentElement(
'afterbegin',
_decryptor.$el
this.$el
);
window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
// reset hook
for (const event of _decryptor.resetEventSet) {
for (const event of this.resetEventSet) {
event();
}
});
Expand All @@ -101,50 +140,31 @@ FixItDecryptor = function (options = {}) {
* initialize fixit-encryptor shortcodes
*/
_proto.initShortcodes = () => {
// TODO TODO shortcode decrypted event
// this.addEventListener('decrypted', this.options?.decrypted);
const _decryptor = this;
const $shortcodes = document.querySelectorAll('fixit-encryptor:not(.decrypted)');
customElements.get('fixit-encryptor') || customElements.define('fixit-encryptor', class extends HTMLElement {});
const $shortcodes = document.querySelectorAll('fixit-encryptor:not(:has(.decrypted))');

$shortcodes.forEach($shortcode => {
const decryptorHandler = () => {
const $decryptor = $shortcode.querySelector('.fixit-decryptor-container');
const $content = $shortcode.querySelector('[data-password][data-content]');
_validatePassword($decryptor, $content, (password, salt) => {
_decryptContent($content, salt, false);
});
};

// bind decryptor input enter keydown event
$shortcode.querySelector('.fixit-decryptor-input')?.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
e.preventDefault();
const $decryptor = this.parentElement.parentElement;
const $content = $decryptor.nextElementSibling;
const password = $content.getAttribute('data-password');
const input = this.value.trim();
const saltLen = input.length % 2 ? input.length : input.length + 1;
const inputMd5 = CryptoJS.MD5(input).toString();
const inputSha256 = CryptoJS.SHA256(input).toString();

this.value = '';
this.blur();
if (!input) {
alert('Please enter the correct password!');
return console.warn('Please enter the correct password!');
}
if (inputMd5 !== password) {
alert(`Password error: ${input} not the correct password!`);
return console.warn(`Password error: ${input} not the correct password!`);
}
try {
const base64EncodeContent = $content.getAttribute('data-content').replace(inputSha256.slice(saltLen), '');
$decryptor.querySelector('.fixit-decryptor-input').classList.add('d-none');
$content.insertAdjacentHTML(
'afterbegin',
CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
);
$decryptor.parentElement.classList.add('decrypted');
} catch (err) {
return console.error(err);
}
// TODO shortcode decrypted hook
// for (const event of _decryptor.decryptedEventSet) {
// event();
// }
decryptorHandler();
}
});

// bind decryptor button click event
$shortcode.querySelector('.fixit-decryptor-btn')?.addEventListener('click', function (e) {
e.preventDefault();
decryptorHandler();
});
});
};

Expand All @@ -159,17 +179,18 @@ FixItDecryptor = function (options = {}) {

if (!cachedStat) {
this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
this.$el.querySelector('.fixit-decryptor-input').classList.remove('d-none');
this.$el.querySelector('.fixit-decryptor-btn').classList.remove('d-none');
return this;
}
if (cachedStat?.md5 !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
if (cachedStat?.password !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
this.$el.querySelector('.fixit-decryptor-input').classList.remove('d-none');
window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
console.warn('The password has expired, please re-enter!');
return this;
}
_decryptContent($content.getAttribute('data-content').replace(cachedStat.sha256, ''));
_decryptContent($content, cachedStat.salt);
return this;
};

Expand All @@ -187,6 +208,9 @@ FixItDecryptor = function (options = {}) {
case 'decrypted':
this.decryptedEventSet.add(listener);
break;
case 'partial-decrypted':
this.partialDecryptedEventSet.add(listener);
break;
case 'reset':
this.resetEventSet.add(listener);
break;
Expand All @@ -211,6 +235,9 @@ FixItDecryptor = function (options = {}) {
case 'decrypted':
this.decryptedEventSet.delete(listener);
break;
case 'partial-decrypted':
this.partialDecryptedEventSet.delete(listener);
break;
case 'reset':
this.resetEventSet.delete(listener);
break;
Expand Down
Loading

0 comments on commit 3b89a4e

Please sign in to comment.