✨ Feat(fixit-decryptor): add encrypt again feature (#123)

assets/css/_page/_single.scss

@@ -1,4 +1,5 @@
 @import '../_partial/_single/toc';
+@import '../_partial/_single/fixit-decryptor';
 
 .single {
   .single-title {

assets/css/_partial/_single/_fixit-decryptor.scss

@@ -0,0 +1,47 @@
+.fixit-decryptor-container {
+  font-family: $global-font-family;
+  text-align: center;
+  margin-top: 3rem;
+
+  #fixit-decryptor-input,
+  .fixit-encryptor-btn {
+    display: inline-block;
+    box-sizing: border-box;
+    outline: none;
+    color: $global-font-color;
+    background-color: $global-background-color;
+    border: 1px solid $global-border-color;
+    border-radius: $global-border-radius;
+    transition: 0.1s;
+
+    &:active,
+    &:hover {
+      color: $global-link-hover-color;
+      border-color: $global-link-hover-color;
+
+      [theme='dark'] & {
+        color: $global-link-hover-color-dark;
+        border-color: $global-link-hover-color-dark;
+      }
+    }
+
+    [theme='dark'] & {
+      color: $global-font-color-dark;
+      border-color: $global-border-color-dark;
+      background-color: $global-background-color-dark;
+    }
+  }
+
+  #fixit-decryptor-input {
+    width: clamp(50%, 400px, 100%);
+    height: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .fixit-encryptor-btn {
+    cursor: pointer;
+    transition: 0.1s;
+    padding: 0.6rem 1rem;
+  }
+}

assets/js/fixit-decryptor.js

@@ -19,7 +19,8 @@ FixItDecryptor = function (options = {}) {
    */
   var _decryptContent = (base64EncodeContent) => {
     try {
-      this.$el.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(
         'afterbegin',
         CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
@@ -43,7 +44,7 @@ FixItDecryptor = function (options = {}) {
 
     this.validateCache();
 
-    document.querySelector('#fixit-decryptor')?.addEventListener('keydown', function (e) {
+    this.$el.querySelector('#fixit-decryptor-input')?.addEventListener('keydown', function (e) {
       if (e.key === 'Enter') {
         e.preventDefault();
         const $content = document.querySelector('#content');
@@ -53,13 +54,13 @@ FixItDecryptor = function (options = {}) {
         const inputMd5 = CryptoJS.MD5(input).toString();
         const inputSha256 = CryptoJS.SHA256(input).toString();
 
+        this.value = '';
         if (!input) {
-          alert('Please input the correct password!');
-          return console.warn('Please input the correct password!');
+          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!`);
-          this.value = '';
           return console.warn(`Password error: ${input} not the correct password!`);
         }
         // cache decryption statistics
@@ -74,6 +75,18 @@ FixItDecryptor = function (options = {}) {
         _decryptContent($content.getAttribute('data-content').replace(inputSha256.slice(saltLen), ''));
       }
     });
+
+    this.$el.querySelector('.fixit-encryptor-btn')?.addEventListener('click', function (e) {
+      e.preventDefault();
+      this.classList.add('d-none')
+      _decryptor.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+      document.querySelector('#content').innerHTML = '';
+      document.querySelector('#content').insertAdjacentElement(
+        'afterbegin',
+        _decryptor.$el
+      );
+      window.localStorage.removeItem(`fixit-decryptor/#${location.pathname}`);
+    });
   };
 
   /**
@@ -85,10 +98,10 @@ FixItDecryptor = function (options = {}) {
     const cachedStat = JSON.parse(window.localStorage.getItem(`fixit-decryptor/#${location.pathname}`));
 
     if (!cachedStat) {
-      return this.$el.classList.remove('d-none');
+      return this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
     }
     if (cachedStat?.md5 !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
-      this.$el.classList.remove('d-none');
+      this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
       window.localStorage.removeItem(`fixit-decryptor/#${location.pathname}`);
       return console.warn('The password has expired, please re-enter!');
     }

exampleSite/content/tests/encryption.md

@@ -5,7 +5,7 @@ description: "Test for encrypting content"
 type: 'posts'
 draft: true
 password: 1212
-message: password is 1212
+message: Password is 1212
 
 lightgallery: true
 

i18n/de.toml

@@ -190,8 +190,17 @@ other = "Mehr lesen"
 [expirationReminder]
 other = "Dieser Artikel wurde zuletzt auf {{ .Date }} aktualisiert, der Inhalt kann veraltet sein."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Passwort"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/en.toml

@@ -186,8 +186,17 @@ other = "Read More"
 [expirationReminder]
 other = "This article was last updated on {{ .Date }}, the content may be out of date."
 
+[encryptedAbstract]
+other = "This article has been encrypted, so its raw content is invisible!"
+
 [encryptedMessage]
-other = "This article was encrypted, please enter the correct password to view!"
+other = "Please enter the password"
+
+[password]
+other = "Password"
+
+[encryptyAgain]
+other = "Encrypt again"
 # === posts/single.html ===
 
 # === 404.html ===

i18n/es.toml

@@ -190,8 +190,17 @@ other = "Leer más"
 [expirationReminder]
 other = "Este artículo se actualizó por última vez el {{ .Date }}, es posible que el contenido no esté actualizado."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Contraseña"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/fr.toml

@@ -187,8 +187,17 @@ other = "Accueil"
 [readMore]
 other = "En savoir plus"
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Mot de passe"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/it.toml

@@ -190,8 +190,17 @@ other = "Leggi di più"
 [expirationReminder]
 other = "Questo articolo è stato aggiornato l'ultima volta il {{ .Date }}, il contenuto potrebbe non essere aggiornato."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Password"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/pl.toml

@@ -187,8 +187,17 @@ other = "Czytaj więcej"
 [expirationReminder]
 other = "Ten artykuł był ostatnio aktualizowany {{ .Date }}, jego treść może być nieaktualna."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Hasło"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/pt-BR.toml

@@ -190,8 +190,17 @@ other = "Leia mais"
 [expirationReminder]
 other = "Este artigo foi atualizado pela última vez em {{ .Date }}, o conteúdo pode estar desatualizado."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Contrasinha"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/ro.toml

@@ -190,8 +190,17 @@ other = "Citește mai mult"
 [expirationReminder]
 other = "Acest articol a fost actualizat ultima dată pe {{ .Date }}, conținutul poate fi depășit."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Parolă"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/ru.toml

@@ -190,8 +190,17 @@ other = "Читать больше"
 [expirationReminder]
 other = "Эта статья последний раз обновлялась {{ .Date }}, содержание может быть устаревшим."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "арготизм"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/sr.toml

@@ -187,8 +187,17 @@ other = "Прочитај више"
 [expirationReminder]
 other = "Овај чланак је последњи пут ажуриран {{ .Date }}, садржај је можда застарео."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Паролица"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/vi.toml

@@ -189,8 +189,17 @@ other = "Đọc thêm"
 [expirationReminder]
 other = "Bài viết này được cập nhật lần cuối vào {{ .Date }}, nội dung có thể đã lỗi thời."
 
+[encryptedAbstract]
+other = "" # waitting for translation
+
 [encryptedMessage]
 other = "" # waitting for translation
+
+[password]
+other = "Mật khẩu"
+
+[encryptyAgain]
+other = "" # waitting for translation
 # === posts/single.html ===
 
 # === 404.html ===

i18n/zh-CN.toml

@@ -190,8 +190,17 @@ other = "阅读全文"
 [expirationReminder]
 other = "本文最后更新于 {{ .Date }}，文中内容可能已过时。"
 
+[encryptedAbstract]
+other = "本文已加密，因此其原始内容不可见！"
+
 [encryptedMessage]
-other = "本文已加密，请输入正确密码后查看！"
+other = "请输入密码"
+
+[password]
+other = "密码"
+
+[encryptyAgain]
+other = "重新加密"
 # === posts/single.html ===
 
 # === 404.html ===

i18n/zh-TW.toml

@@ -190,8 +190,17 @@ other = "閱讀全文"
 [expirationReminder]
 other = "本文最後更新於 {{ .Date }}，文中內容可能已過時。"
 
+[encryptedAbstract]
+other = "本文已加密，囙此其原始內容不可見！"
+
 [encryptedMessage]
-other = "本文已加密，請輸入正確密碼後查看！"
+other = "請輸入密碼"
+
+[password]
+other = "密碼"
+
+[encryptyAgain]
+other = "重新加密"
 # === posts/single.html ===
 
 # === 404.html ===

layouts/_default/single.md

@@ -2,7 +2,7 @@
 # {{ .Title }}
 
 {{ if $params.password -}}
-  ***{{ T "encryptedMessage" }}***
+  ***{{ T "encryptedAbstract" }}***
 {{- else -}}
   {{ .RawContent }}
 {{- end }}

layouts/partials/single/fixit-decryptor.html

@@ -1,8 +1,10 @@
 {{- $params := .Scratch.Get "params" -}}
 
 <!-- TODO UI style -->
-<div class="fixit-decryptor-container text-center d-none" style="margin-top: 1rem">
-  <label for="fixit-decryptor">
-    <input type="password" id="fixit-decryptor" placeholder="{{ $params.message }}" />
+<div class="fixit-decryptor-container">
+  {{- $msg := $params.message | default (T "encryptedMessage") -}}
+  <label for="fixit-decryptor-input" title="{{ $msg }}">
+    <input type="password" id="fixit-decryptor-input" class="d-none" placeholder="{{ $msg }}" />
   </label>
+  <button class="fixit-encryptor-btn d-none">{{ T "encryptyAgain" }}</button>
 </div>