Little Improvements

- Added a logout button - Removed unused Remember Me checkbox - Added extract to avoid very big notecard - Updated footer credits
santydesignscr · Jan 25, 2023 · f66ace3 · f66ace3
1 parent 576e237
commit f66ace3
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 57 deletions.
diff --git a/To Install/Notes App.zip b/To Install/Notes App.zip
diff --git a/synote.sql → To Install/databse.sql b/synote.sql → To Install/databse.sql
@@ -1,14 +1,13 @@
 -- phpMyAdmin SQL Dump
--- version 4.9.7
+-- version 5.2.0
 -- https://www.phpmyadmin.net/
 --
--- Host: localhost:3306
--- Generation Time: Dec 06, 2022 at 12:49 PM
--- Server version: 5.7.40
--- PHP Version: 7.4.30
+-- Servidor: 127.0.0.1
+-- Tiempo de generación: 25-01-2023 a las 19:53:59
+-- Versión del servidor: 10.4.27-MariaDB
+-- Versión de PHP: 8.1.12
 
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-SET AUTOCOMMIT = 0;
 START TRANSACTION;
 SET time_zone = "+00:00";
 
@@ -19,93 +18,94 @@ SET time_zone = "+00:00";
 /*!40101 SET NAMES utf8mb4 */;
 
 --
--- Database: `logadnet_synote`
+-- Base de datos: `notes`
 --
 
 -- --------------------------------------------------------
 
 --
--- Table structure for table `login_sessions`
+-- Estructura de tabla para la tabla `login_sessions`
 --
 
 CREATE TABLE `login_sessions` (
   `id` int(11) NOT NULL,
-  `UA` mediumtext COLLATE utf8_unicode_ci,
-  `session_id` varchar(200) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `status` enum('pending','scanned') COLLATE utf8_unicode_ci NOT NULL,
+  `UA` mediumtext DEFAULT NULL,
+  `session_id` varchar(200) DEFAULT NULL,
+  `status` enum('pending','scanned') NOT NULL,
   `user_id` int(11) DEFAULT NULL,
-  `date` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL
+  `date` varchar(50) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
 -- --------------------------------------------------------
 
 --
--- Table structure for table `users`
+-- Estructura de tabla para la tabla `users`
 --
 
 CREATE TABLE `users` (
   `id` int(11) NOT NULL,
-  `username` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `password` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `user_token` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `date` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL
+  `username` varchar(30) DEFAULT NULL,
+  `password` varchar(255) DEFAULT NULL,
+  `user_token` varchar(100) DEFAULT NULL,
+  `date` varchar(50) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
 -- --------------------------------------------------------
 
 --
--- Table structure for table `user_notes`
+-- Estructura de tabla para la tabla `user_notes`
 --
 
 CREATE TABLE `user_notes` (
   `id` int(11) NOT NULL,
   `user_id` int(11) DEFAULT NULL,
-  `title` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `content` longtext COLLATE utf8_unicode_ci,
-  `date_created` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL,
-  `date_modified` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL
+  `title` varchar(100) DEFAULT NULL,
+  `content` longtext DEFAULT NULL,
+  `extract` longtext DEFAULT NULL,
+  `date_created` varchar(50) DEFAULT NULL,
+  `date_modified` varchar(50) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
 --
--- Indexes for dumped tables
+-- Índices para tablas volcadas
 --
 
 --
--- Indexes for table `login_sessions`
+-- Indices de la tabla `login_sessions`
 --
 ALTER TABLE `login_sessions`
   ADD PRIMARY KEY (`id`);
 
 --
--- Indexes for table `users`
+-- Indices de la tabla `users`
 --
 ALTER TABLE `users`
   ADD PRIMARY KEY (`id`);
 
 --
--- Indexes for table `user_notes`
+-- Indices de la tabla `user_notes`
 --
 ALTER TABLE `user_notes`
   ADD PRIMARY KEY (`id`);
 
 --
--- AUTO_INCREMENT for dumped tables
+-- AUTO_INCREMENT de las tablas volcadas
 --
 
 --
--- AUTO_INCREMENT for table `login_sessions`
+-- AUTO_INCREMENT de la tabla `login_sessions`
 --
 ALTER TABLE `login_sessions`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
 --
--- AUTO_INCREMENT for table `users`
+-- AUTO_INCREMENT de la tabla `users`
 --
 ALTER TABLE `users`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
 --
--- AUTO_INCREMENT for table `user_notes`
+-- AUTO_INCREMENT de la tabla `user_notes`
 --
 ALTER TABLE `user_notes`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

diff --git a/backend/classes/Notes.class.php b/backend/classes/Notes.class.php
@@ -27,10 +27,12 @@ public static function addNew($data) {
 		}
 
 		$title = $data['title'] ?? null;
+		$content_to_wrap = strip_tags(html_entity_decode($data['content']));
+		$extract = substr($content_to_wrap, 0, 310);
 		// Insert into database
 		$insertQuery = DB::RunQuery([
-			"query" => "INSERT INTO user_notes (user_id, title, content, date_created) VALUES (?, ?, ?, ?)",
-			"values" => [$account->id, $title, $data['content'], time()],
+			"query" => "INSERT INTO user_notes (user_id, title, content, extract, date_created) VALUES (?, ?, ?, ?, ?)",
+			"values" => [$account->id, $title, $data['content'], $extract, time()],
 			"returnConfirmation" => true
 		]);
 		if ($insertQuery === true) {
@@ -73,10 +75,12 @@ public static function editNote($data) {
 		}
 
 		$title = $data['title'] ?? null;
+		$content_to_wrap = strip_tags(html_entity_decode($data['content']));
+		$extract = substr($content_to_wrap, 0, 310);
 		// Update
 		$updateQuery = DB::RunQuery([
-			"query" => "UPDATE user_notes SET title = ?, content = ?, date_modified = ? WHERE id = ?",
-			"values" => [$title, $data['content'], time(), $note->id],
+			"query" => "UPDATE user_notes SET title = ?, content = ?, extract = ?, date_modified = ? WHERE id = ?",
+			"values" => [$title, $data['content'], $extract, time(), $note->id],
 			"returnConfirmation" => true
 		]);
 		if ($updateQuery === true) {
@@ -132,7 +136,7 @@ public static function deleteNote($data) {
 	public static function byUser($user_id) {
 		$limit = 30;
 		$notes = DB::RunQuery([
-			"query" => "SELECT id, user_id, title, content, DATE(FROM_UNIXTIME(date_created)) as date_created, DATE(FROM_UNIXTIME(date_modified)) as date_modified FROM user_notes WHERE user_id = ? ORDER BY id DESC LIMIT $limit",
+			"query" => "SELECT id, user_id, title, content, extract, DATE(FROM_UNIXTIME(date_created)) as date_created, DATE(FROM_UNIXTIME(date_modified)) as date_modified FROM user_notes WHERE user_id = ? ORDER BY id DESC LIMIT $limit",
 			"values" => [$user_id]
 		]);
 		foreach ($notes as $note) {

diff --git a/frontend/dist/js/app.js b/frontend/dist/js/app.js
@@ -75,7 +75,8 @@ function notesToHTML(notes) {
 			        if (note.title != '' && note.title != null) {
 			        	html += `<h3 class="card-title">`+note.title+`</h3>`;
 			        }
-		            html += `<div class="text-muted">`+note.content+`</div>
+					html += `<div id="extract" class="text-muted">`+note.extract+`</div>`;
+		            html += `<div class="text-muted2" hidden>`+note.content+`</div>
 		        </div>
 		    </div>
 		</div>`;
@@ -105,7 +106,7 @@ function initNotesContextMenu() {
 	            	if (noteCard.find('h3.card-title').length) {
 	            		noteContent += noteCard.find('h3.card-title').text() +"\n\n";
 	            	}
-	            	noteContent += noteCard.find('div.card-body>div.text-muted').text();
+	            	noteContent += noteCard.find('div.card-body>div.text-muted2').text();
 	            	console.log(noteContent);
 	            	copyToClipboard(noteContent);
 	            }
@@ -132,8 +133,11 @@ function initNotesContextMenu() {
 	            	console.log("delete clicked");
 	            	var clickTarget = $(e.target);
 	            	var targetElID = clickTarget.closest('ul[targetelid]').attr('targetelid');
+					console.log(targetElID);
 	            	var noteCard = $("#"+targetElID);
 	            	deleteNote(noteCard);
+					const notehtml = document.getElementById(targetElID);
+					notehtml.remove();
 	            }
 	        },
 	        // divider: "top" // top, bottom, top-bottom
@@ -156,7 +160,7 @@ function editNote(noteEl) {
 	tinymce.execCommand('mceRemoveEditor',true,"#notesEditTextArea");
 
 	// Set the textarea value to the note's html content
-	$("#notesEditTextArea").val(noteEl.find('div.card-body>div.text-muted').html());
+	$("#notesEditTextArea").val(noteEl.find('div.card-body>div.text-muted2').html());
 	// set note title
 	$("#editNoteTitle").val(noteEl.find('h3.card-title').text());
 	// Init tinymce

diff --git a/frontend/index.html b/frontend/index.html
@@ -35,15 +35,20 @@ <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-m
                     <div class="navbar-nav flex-row order-md-last">
                         <div class="nav-item d-none d-md-flex me-3">
                             <div class="btn-list">
-                                <a href="https://github.com/michael-arawole/synote" class="btn" target="_blank" rel="noreferrer">
+                                <a onclick="logout()" class="btn" rel="noreferrer">
                                     <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <!--<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                         <path
                                             d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
                                         />
+                                    </svg>-->
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                        <polyline points="16 17 21 12 16 7"></polyline>
+                                        <line x1="21" y1="12" x2="9" y2="12"></line>
                                     </svg>
-                                    Source code
+                                    &nbsp;&nbsp;Log Out
                                 </a>
                             </div>
                         </div>
@@ -248,9 +253,13 @@ <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-m
                                     <a href="javascript:" class="link-secondary">Synote</a>.
                                 </li>
                                 <li class="list-inline-item">
-                                    <a href="https://github.com/michael-arawole" class="link-secondary" rel="noopener">
+                                    <a href="https://github.com/michaelthedev/" class="link-secondary" rel="noopener">
                                         Michael Arawole
                                     </a>
+                                    and Customized by 
+                                    <a href="https://santydesigns.com/" class="link-secondary" rel="noopener">
+                                        Santy Designs
+                                    </a>
                                 </li>
                             </ul>
                         </div>
@@ -364,7 +373,12 @@ <h5 class="card-title">Camera required</h5>
         <script src="./dist/libs/contextmenu/ContextMenu.js" defer></script>
         <script src="./dist/libs/toastr/toastr.min.js" defer></script>
         <script>document.write("<script type='text/javascript' src='./dist/js/app.js?v=" + Date.now() + "' defer><\/script>");</script>
-
+        <script>
+            function logout() {
+                localStorage.removeItem('synoteUserID');
+                window.location.replace('./login.html');
+            }
+        </script>
         <script type="module">
             import QrScanner from "./dist/libs/qr-scanner/qr-scanner.min.js";
             const video = document.getElementById("qr-video");

diff --git a/frontend/login.html b/frontend/login.html
@@ -42,12 +42,6 @@ <h2 class="card-title text-center mb-4">Login to your account</h2>
                                     </span>
                                 </div>
                             </div>
-                            <div class="mb-2">
-                                <label class="form-check">
-                                    <input type="checkbox" class="form-check-input" />
-                                    <span class="form-check-label">Remember me on this device</span>
-                                </label>
-                            </div>
                             <div class="form-footer">
                                 <button type="submit" class="btn btn-primary w-100">Sign in</button>
                             </div>
@@ -210,7 +204,7 @@ <h2 class="card-title">Scan the code below to continue</h2>
                     var btn_text = btn.text();
                     btn.addClass('disabled');
                     btn.attr('disabled', true);
-                    btn.text('please wait');
+                    btn.text('Please wait');
 
                     var formData = new FormData($(this)[0]);
                     $.ajax({

diff --git a/frontend/register.html b/frontend/register.html
@@ -42,12 +42,6 @@ <h2 class="card-title text-center mb-4">Create your account</h2>
                                     </span>
                                 </div>
                             </div>
-                            <div class="mb-2">
-                                <label class="form-check">
-                                    <input type="checkbox" class="form-check-input" />
-                                    <span class="form-check-label">Remember me on this device</span>
-                                </label>
-                            </div>
                             <div class="form-footer">
                                 <button type="submit" class="btn btn-primary w-100">Register</button>
                             </div>
@@ -75,7 +69,7 @@ <h2 class="card-title text-center mb-4">Create your account</h2>
                     var btn_text = btn.text();
                     btn.addClass('disabled');
                     btn.attr('disabled', true);
-                    btn.text('please wait');
+                    btn.text('Please wait');
 
                     var formData = new FormData($(this)[0]);
                     $.ajax({