test: snapshot of the note update handler implementation

Author: ralvarezdev

package-lock.json

@@ -16,6 +16,7 @@
     "@ralvarezdev/js-logger": "^0.1.13",
     "@ralvarezdev/js-mode": "^0.1.9",
     "bcryptjs": "^3.0.2",
+    "buffer": "^6.0.3",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -24,12 +24,13 @@ import {
 import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary.jsx";
 import {
     get2FAMethods,
-    getIsLoggingIn,
+    getIsLoggingIn, getPassword, setDecryptedKey,
 } from "./sessionStorage/sessionStorage.js";
 import {useNotes} from "./context/Notes.jsx";
 import {useTags} from "./context/Tags.jsx";
 import {onDashboardLoad} from "./utils/init.js";
-import {getUserIDFromCookie} from "./utils/cookies.js";
+import {getEncryptedKey, getSalt, getUserID} from "./utils/cookies.js";
+import {getDecryptedKey} from "./utils/crypto.js";
 
 // Authentication endpoints
 const NO_AUTH_ENABLED_ENDPOINTS = [LOG_IN, SIGN_UP, FORGOT_PASSWORD, RESET_PASSWORD, VERIFY_EMAIL]
@@ -40,6 +41,7 @@ export default function App() {
     const {isAuth} = useAuth();
     const path = window.location.pathname;
     const [databaseLoaded, setDatabaseLoaded] = useState(false);
+    const [keyLoaded, setKeyLoaded] = useState(false);
     const {loadTagsFromIndexedDB} = useTags();
     const {loadNotesFromIndexedDB} = useNotes();
 
@@ -59,13 +61,24 @@ export default function App() {
             // Check if the database has been loaded
             if (!databaseLoaded) {
                 // Get the user ID from cookies
-                const userID = getUserIDFromCookie()
+                const userID = getUserID()
 
                 // Load database
                 setDatabaseLoaded(true)
                 onDashboardLoad(userID, null, null, loadTagsFromIndexedDB, loadNotesFromIndexedDB).then()
             }
 
+            // Check if the user key has been loaded
+            if (!keyLoaded) {
+                // Get the decrypted key
+                getDecryptedKey(getPassword(), getSalt(), getEncryptedKey()).then(
+                    key => setDecryptedKey(key)
+                )
+
+                // Load the key
+                setKeyLoaded(true)
+            }
+
             if (AUTH_DISABLED_ENDPOINTS.includes(parsedPath))
                 window.location.href = DASHBOARD;
             return;

src/App.jsx

@@ -4,6 +4,7 @@ import CircularSmallIconButton from "../Button/Circular/Icon/Small/Small.jsx";
 import {useCallback} from "react";
 import TransparentSmallIconButton
     from "../Button/Transparent/Icon/Small/Small.jsx";
+import Separator from "../Separator/Separator.jsx";
 
 // Note component
 export default function Note({
@@ -63,8 +64,9 @@ export default function Note({
                     </TransparentSmallIconButton>
                 </div>
             </div>
+            <Separator/>
             <div className='note__main-container__content'>
-                {children}
+                <ParagraphText>{children}</ParagraphText>
             </div>
         </div>
     )

src/components/Note/Note.jsx

@@ -7,12 +7,12 @@
 
 @media (prefers-color-scheme: light) {
     .separator {
-        background-color: var(--color-medium-grey);
+        background-color: var(--color-dark-grey);
     }
 }
 
 @media (prefers-color-scheme: dark) {
     .separator {
-        background-color: var(--color-medium-grey);
+        background-color: var(--color-light-grey);
     }
 }

src/components/Separator/Separator.css

@@ -1,10 +1,10 @@
 import './TextArea.css'
 
 // Text area component
-export default function TextArea({resize='none'}) {
+export default function TextArea({resize='none', ...props}) {
     return (
         <div className='text-area__main-container'>
-            <textarea className='text-area__main-container__area' style={{resize}}/>
+            <textarea className='text-area__main-container__area' style={{resize}} {...props}/>
         </div>
     )
 }

src/components/TextArea/TextArea.jsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useState} from 'react';
-import cookieExists, {getUserIDFromCookie} from "../utils/cookies.js";
+import cookieExists, {getUserID} from "../utils/cookies.js";
 import LOGGER from "../logger.js";
 import {onLogOut} from "../utils/init.js";
 import {useTags} from "./Tags.jsx";
@@ -40,7 +40,7 @@ export function AuthProvider({children}) {
                 onLogOut(clearTags, clearNotes).then()
             } else {
                 // Get the user ID from cookies
-                const userID = getUserIDFromCookie()
+                const userID = getUserID()
                 if (!userID && import.meta.env.IS_DEBUG) LOGGER.error("User ID not found in the cookie")
                 else if (import.meta.env.IS_DEBUG) LOGGER.info(`User ID found in the cookie: ${userID}`)
 

src/context/Auth.jsx

@@ -12,7 +12,11 @@ import {
 } from "../indexedDB/transactions.js";
 import {db} from "../indexedDB/init.js";
 import logger from "../logger.js";
-import {encryptNoteVersionContent} from "../utils/crypto.js";
+import {
+    decryptNoteVersionContent,
+    encryptNoteVersionContent
+} from "../utils/crypto.js";
+import {getDecryptedKey} from "../sessionStorage/sessionStorage.js";
 
 // Create a context
 const NotesContext = createContext(null);
@@ -161,7 +165,7 @@ export function NotesProvider({children}) {
         // Alter the IndexedDB
         if (alterIndexedDB) {
             // Encrypt the note version content
-            noteVersion.encrypted_content = await encryptNoteVersionContent(noteVersion.encrypted_content);
+            noteVersion.encrypted_content = await encryptNoteVersionContent(getDecryptedKey(),noteVersion.content);
 
             await UpsertUserNoteVersion(db, noteVersion);
         }
@@ -223,7 +227,7 @@ export function NotesProvider({children}) {
         if (alterIndexedDB)
             for (const noteVersion of noteVersions) {
                 // Encrypt the note version content
-                noteVersion.encrypted_content = await encryptNoteVersionContent(noteVersion.encrypted_content);
+                noteVersion.encrypted_content = await encryptNoteVersionContent(getDecryptedKey(),noteVersion.content);
 
                 await UpsertUserNoteVersion(db, noteVersion);
             }
@@ -258,6 +262,16 @@ export function NotesProvider({children}) {
             return latestNoteVersion;
         }, null);
     }, [noteVersionsByNoteID]);
+    
+    // Get latest note version ID
+    const getLatestNoteVersionID = useCallback(() => {
+        return Object.keys(noteVersionsByNoteID).reduce((latestNoteVersion, noteID) => {
+            const noteVersion = getLatestNoteVersionByNoteID(noteID);
+            if (!latestNoteVersion || noteVersion.created_at > latestNoteVersion.created_at)
+                return noteVersion;
+            return latestNoteVersion;
+        }, null)?.id;
+    }, [getLatestNoteVersionByNoteID, noteVersionsByNoteID]);
 
     // Clear all note versions
     const clearNoteVersions = useCallback(() => {
@@ -273,9 +287,8 @@ export function NotesProvider({children}) {
         const noteVersions = await ReadAllUserNoteVersions(db);
 
         // Decrypt the note version content
-        for (const noteVersion of noteVersions) {
-            noteVersion.content = await encryptNoteVersionContent(noteVersion.encrypted_content);
-        }
+        for (const noteVersion of noteVersions)
+            noteVersion.content = await decryptNoteVersionContent(getDecryptedKey(), noteVersion.encrypted_content);
 
         await upsertNoteVersions(noteVersions, false);
     }, [upsertNoteVersions, clearNoteVersions]);
@@ -422,6 +435,7 @@ export function NotesProvider({children}) {
             removeNoteVersionByNoteIDAndID,
             getNoteVersionByNoteIDAndID,
             getLatestNoteVersionByNoteID,
+            getLatestNoteVersionID,
             clearNoteVersions,
             loadNoteVersionsFromIndexedDB,
             noteTagsByNoteID,

src/context/Notes.jsx

@@ -11,6 +11,7 @@
     gap: 1px;
     height: 100vh;
     width: 100vw;
+    overflow-x: hidden;
 }
 
 /* Menu container styles */
@@ -44,6 +45,7 @@
 }
 
 /* Buttons container styles */
+.dashboard__note-update-modal__buttons-container,
 .dashboard__note-deletion-modal__buttons-container {
     display: flex;
     align-items: center;
@@ -94,7 +96,7 @@
     gap: 1.6rem;
 }
 
-/* Header buttons styles */
+/* Header button styles */
 .dashboard__main-container__menu-container__header-container__header__button,
 .dashboard__main-container__notes-container__header-container__header__button,
 .dashboard__main-container__note-container__header-container__header__button {
@@ -127,7 +129,6 @@
     width: 100%;
     max-width: 100%;
     max-height: 100%;
-    animation: appear-and-move-a-bit-up var(--animation-move-duration) ease-in-out forwards;
 }
 
 .dashboard__main-container__note-container__content-container {
@@ -154,15 +155,15 @@
     color: var(--color-dark-error);
         scale: 1.25;
 
-    outline: var(--border-width) solid var(--color-dark-error);
+    border: var(--border-width) solid var(--color-dark-error);
 }
 
 /* Dashboard note modals styles */
 .dashboard__note-view-modal,
 .dashboard__note-creation-modal,
 .dashboard__note-deletion-modal {
-    transition: outline-color var(--color-transition-duration) ease-in-out;
-    outline: var(--outline-width) solid transparent;
+    transition: border-color var(--color-transition-duration) ease-in-out;
+    border: var(--border-width) solid transparent;
 }
 
 
@@ -234,4 +235,14 @@
     .dashboard__main-container__notes-container__content-container {
         padding: 1rem 2rem;
     }
+}
+
+@media (max-width: 600px) {
+    .dashboard__note-creation-modal,
+    .dashboard__note-deletion-modal,
+    .dashboard__note-view-modal,
+    .dashboard__note-update-modal{
+        border-right-color: transparent !important;
+        border-left-color: transparent !important;
+    }
 }