🎨 Style(fixit-decryptor): add loading, lock icons and blur after entering(#123)

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

@@ -9,7 +9,6 @@
     box-sizing: border-box;
     outline: none;
     color: $global-font-color;
-    background-color: $global-background-color;
     border: 1px solid darken($global-border-color, 15%);
     border-radius: $global-border-radius;
     transition: 0.1s;
@@ -32,7 +31,6 @@
     [theme='dark'] & {
       color: $global-font-color-dark;
       border-color: lighten($global-border-color-dark, 15%);
-      background-color: $global-background-color-dark;
       box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
     }
   }
@@ -42,11 +40,22 @@
     height: 3rem;
     padding-left: 1rem;
     padding-right: 1rem;
+    background-color: $global-background-color;
+
+    [theme='dark'] & {
+      background-color: $global-background-color-dark;
+    }
   }
 
   .fixit-encryptor-btn {
     cursor: pointer;
     transition: 0.1s;
     padding: 0.6rem 1rem;
+
+    background-color: $header-background-color;
+
+    [theme='dark'] & {
+      background-color: $header-background-color-dark;
+    }
   }
 }

assets/js/fixit-decryptor.js

@@ -3,7 +3,7 @@
  * @param {Object} options
  * @param {Function} [options.decrypted] handler after decrypting
  * @param {Function} [options.reset] handler after encrypting again
- * @param {Number} [options.duration=86400] number of seconds to cache decryption statistics. unit: s
+ * @param {Number} [options.duration=86400] number of seconds to cache decryption statistics, unit: s
  * @author @Lruihao https://lruihao.cn
  * @since v0.2.15
  */
@@ -21,6 +21,7 @@ FixItDecryptor = function (options = {}) {
    */
   var _decryptContent = (base64EncodeContent) => {
     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(
@@ -56,6 +57,7 @@ FixItDecryptor = function (options = {}) {
         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!');
@@ -96,6 +98,7 @@ FixItDecryptor = function (options = {}) {
 
   /**
    * validate the cached decryption statistics in localStorage
+   * @returns {FixItDecryptor}
    */
   _proto.validateCache = () => {
     const $content = document.querySelector('#content');
@@ -103,14 +106,19 @@ FixItDecryptor = function (options = {}) {
     const cachedStat = JSON.parse(window.localStorage.getItem(`fixit-decryptor/#${location.pathname}`));
 
     if (!cachedStat) {
-      return this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+      this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
+      this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+      return this;
     }
     if (cachedStat?.md5 !== 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');
       window.localStorage.removeItem(`fixit-decryptor/#${location.pathname}`);
-      return console.warn('The password has expired, please re-enter!');
+      console.warn('The password has expired, please re-enter!');
+      return this;
     }
     _decryptContent($content.getAttribute('data-content').replace(cachedStat.sha256, ''));
+    return this;
   };
 
   /**

layouts/partials/single/fixit-decryptor.html

@@ -1,9 +1,13 @@
-{{- $params := .Scratch.Get "params" -}}
+{{- $msg := (.Scratch.Get "params").message | default (T "encryptedMessage") -}}
+{{- $loading := resources.Get "svg/loading.svg" | minify -}}
 
 <div class="fixit-decryptor-container">
-  {{- $msg := $params.message | default (T "encryptedMessage") -}}
+  <img class="fixit-decryptor-loading" src="{{ $loading.RelPermalink }}" alt="decryptor loading" />
   <label for="fixit-decryptor-input" title='{{ T "password" }}'>
     <input type="password" id="fixit-decryptor-input" class="d-none" placeholder="🔑 {{ $msg }}" />
   </label>
-  <button class="fixit-encryptor-btn d-none">{{ T "encryptyAgain" }}</button>
+  <button class="fixit-encryptor-btn d-none">
+    <i class="fa-solid fa-lock"></i>
+    {{ T "encryptyAgain" }}
+  </button>
 </div>