Fix: animations

Author: abhishekY495

app/src/js/disableUI.js

@@ -9,6 +9,7 @@ const folderSelectBtn = document.querySelector("#folder-picker");
 const clearAllBtn = document.querySelector("#clear-btn");
 const encryptBtn = document.querySelector("#encrypt-btn");
 const decryptBtn = document.querySelector("#decrypt-btn");
+const checkPasswordBtn = document.querySelector("#check-password-btn");
 // Password
 const passwordInput = document.querySelector("#password-input");
 
@@ -19,6 +20,7 @@ export function disableUI() {
   encryptBtn.disabled = true;
   decryptBtn.disabled = true;
   passwordInput.disabled = true;
+  checkPasswordBtn.disabled = true;
   //
   clearAllBtn.classList.add("opacity-10");
   fileBrowseContainer.classList.add("opacity-40");

app/src/js/passwordCheck/checking.js

@@ -1,8 +1,14 @@
 const messageBox = document.querySelector("#message-box-2");
 const checkPasswordBtn = document.querySelector("#check-password-btn");
+const encryptBtn = document.querySelector("#encrypt-btn");
+const decryptBtn = document.querySelector("#decrypt-btn");
 
 export const checkingAnimation = () => {
   checkPasswordBtn.disabled = true;
+  encryptBtn.disabled = true;
+  decryptBtn.disabled = true;
+  encryptBtn.classList.add("opacity-50", "hover:cursor-not-allowed");
+  decryptBtn.classList.add("opacity-50", "hover:cursor-not-allowed");
   checkPasswordBtn.classList.add("opacity-50", "hover:cursor-not-allowed");
   checkPasswordBtn.classList.remove("hover:opacity-90");
   messageBox.classList.remove("hidden", "opacity-10");

app/src/js/passwordCheck/error.js

@@ -1,12 +1,18 @@
 const messageBox = document.querySelector("#message-box-2");
 const checkPasswordBtn = document.querySelector("#check-password-btn");
+const encryptBtn = document.querySelector("#encrypt-btn");
+const decryptBtn = document.querySelector("#decrypt-btn");
 
 export const errorAnimation = () => {
   messageBox.innerHTML = "⚠️ Service Down, Try again later";
   messageBox.classList.add("shake-up-down");
   messageBox.classList.remove("hidden");
   setTimeout(() => {
     checkPasswordBtn.disabled = false;
+    encryptBtn.disabled = false;
+    decryptBtn.disabled = false;
+    encryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
+    decryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.add("hover:opacity-90");
     messageBox.innerHTML = "";

app/src/js/passwordCheck/hashFound.js

@@ -1,5 +1,7 @@
 const messageBox = document.querySelector("#message-box-2");
 const checkPasswordBtn = document.querySelector("#check-password-btn");
+const encryptBtn = document.querySelector("#encrypt-btn");
+const decryptBtn = document.querySelector("#decrypt-btn");
 
 export const hashFoundAnimation = (data) => {
   messageBox.innerHTML = "";
@@ -8,6 +10,10 @@ export const hashFoundAnimation = (data) => {
   messageBox.classList.remove("hidden");
   setTimeout(() => {
     checkPasswordBtn.disabled = false;
+    encryptBtn.disabled = false;
+    decryptBtn.disabled = false;
+    encryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
+    decryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.add("hover:opacity-90");
     messageBox.innerHTML = "";

app/src/js/passwordCheck/hashNotFound.js

@@ -1,5 +1,7 @@
 const messageBox = document.querySelector("#message-box-2");
 const checkPasswordBtn = document.querySelector("#check-password-btn");
+const encryptBtn = document.querySelector("#encrypt-btn");
+const decryptBtn = document.querySelector("#decrypt-btn");
 
 export const hashNotFoundAnimation = () => {
   messageBox.innerHTML = "";
@@ -8,6 +10,10 @@ export const hashNotFoundAnimation = () => {
   messageBox.classList.remove("hidden");
   setTimeout(() => {
     checkPasswordBtn.disabled = false;
+    encryptBtn.disabled = false;
+    decryptBtn.disabled = false;
+    encryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
+    decryptBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.remove("opacity-50", "hover:cursor-not-allowed");
     checkPasswordBtn.classList.add("hover:opacity-90");
     messageBox.innerHTML = "";

app/src/js/reset.js

@@ -10,6 +10,7 @@ const clearAllBtn = document.querySelector("#clear-btn");
 const encryptBtn = document.querySelector("#encrypt-btn");
 const decryptBtn = document.querySelector("#decrypt-btn");
 const resetBtn = document.querySelector("#reset-btn");
+const checkPasswordBtn = document.querySelector("#check-password-btn");
 // Password
 const passwordInput = document.querySelector("#password-input");
 // Progress
@@ -28,6 +29,7 @@ function reset() {
   decryptBtn.disabled = false;
   decryptBtn.disabled = false;
   passwordInput.disabled = false;
+  checkPasswordBtn.disabled = false;
   clearAllBtn.disabled = true;
   //
   fileBrowseContainer.classList.remove("opacity-40");