fixed cropping image

components/foot.php

@@ -28,7 +28,10 @@
   <script src="js/upload.js"></script>
 ';
       } else if ($args['action'] == 'view') {
-        echo '<script src="js/user_actions_modal.js"></script>
+        echo '
+  <script src="js/user_actions_modal.js"></script>
+  <script src="js/profile_picture_cropper_modal.js"></script>
+  <script src="js/upload.js"></script>
 ';
       }
     }

functions/account_functions.php

@@ -33,6 +33,10 @@ function logout()
         unset($_COOKIE[$key]);
     }
 
+    foreach (array_keys($_SESSION) as $key) {
+        unset($_SESSION[$key]);
+    }
+
     header('Location: articles.php');
 }
 
@@ -125,8 +129,8 @@ function signup_form($error_msg = '')
                 <label for="verify_password">Verify Password</label>
                 <input id="verify_password" name="verify_password" type="password" required>
 
-                <label for="profile_picture" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
+                <label for="profile_picture_input" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
-                <input id="profile_picture" class="file_input" name="profile_picture" type="file" accept="image/png, image/jpeg, image/jpg">
+                <input id="profile_picture_input" class="file_input" name="profile_picture" type="file" accept="image/png, image/jpeg, image/jpg">
                 <small class="file_input_feedback">No file selected.</small>
 
                 <label class="form_checkbox_container">Stay Logged In?
@@ -138,9 +142,8 @@ function signup_form($error_msg = '')
                 ' . $error_msg . '
             </form>
 
-            <div id="user_actions_modal" class="modal">
+            <div id="modal" class="modal">
-                <div id="modal_content">
+                <div id="display_modal"></div>
-                </div>
             </div>
 
             <div style="display: none;">
@@ -152,7 +155,7 @@ function signup_form($error_msg = '')
     return $form;
 }
 
-function create_user($username, $email, $password, $verify_password, $role_id, $upload = null, $x = null, $y = null, $crop_width = null, $honeypot)
+function create_user($username, $email, $password, $verify_password, $role_id, $upload = null, $x = null, $y = null, $crop_width = null, $honeypot = null)
 {
     if (!empty($honeypot)) {
         $error_msg = '
@@ -378,15 +381,20 @@ function update_profile_picture_form()
                 <input type="hidden" name="crop_y" value="" id="crop_y">
                 <input type="hidden" name="crop_width" value="" id="crop_width">
 
-                <label for="profile_picture" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
+                <label for="profile_picture_input" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
-                <input id="profile_picture" class="file_input" name="profile_picture" type="file" accept="image/png, image/jpeg, image/jpg">
+                <input id="profile_picture_input" class="file_input" name="profile_picture" type="file" accept="image/png, image/jpeg, image/jpg">
                 <small class="file_input_feedback">No file selected.</small>
             
-                <input type="submit" class="button" value="Update Username">
+                <input type="submit" class="button" value="Update Profile Picture">
             </form>
 
-            <script src="js/profile_picture_cropper_modal.js"></script>
+            <div id="modal" class="modal">
-            <script src="js/upload.js"></script>
+                <div id="display_modal"></div>
+            </div>
+
+            <div style="display: none;">
+                <div id="profile_cropper" class="modal_form">' . profile_cropper() . '</div>
+            </div>
         </div>
     ';
 
@@ -585,9 +593,10 @@ function user_view($user_id)
         <div class="line"></div>
     ';
 
-    // TODO: Need to setup an email handler.
+
-    // <a class="modal_button underline">Request Role</a>
+    // TODO: Allow user to update profile picture.
-    // <div id="request_role_form" class="modal_form">' . request_role_change_form() . '</div>
+    // <button id="update_profile_picture_form_button" class="modal_button underline">Update Profile Picture</button>
+    // <div id="update_profile_picture_form" class="modal_form">' . update_profile_picture_form() . '</div>
     if ((isset($_COOKIE['user_id']) && $_COOKIE['user_id'] == $user_id) || (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 2)) {
         $view .= '
             <h3>User Actions</h3>
@@ -595,7 +604,6 @@ function user_view($user_id)
                 <button id="reset_pw_form_button" class="modal_button underline">Reset Password</button>
                 <button id="update_email_form_button" class="modal_button underline">Update Email</button>
                 <button id="update_username_form_button" class="modal_button underline">Update Username</button>
-                <button id="update_profile_picture_form_button" class="modal_button underline">Update Profile Picture</button>
                 <button id="request_role_form_button" class="modal_button underline">Request Role</button>
                 <button id="delete_account_form_button" class="modal_button underline">Delete Account</button>
             </div>
@@ -608,7 +616,6 @@ function user_view($user_id)
                 <div id="reset_pw_form" class="modal_form">' . reset_pw_form() . '</div>
                 <div id="update_email_form" class="modal_form">' . update_email_form() . '</div>
                 <div id="update_username_form" class="modal_form">' . update_username_form() . '</div>
-                <div id="update_profile_picture_form" class="modal_form">' . update_profile_picture_form() . '</div>
                 <div id="request_role_change_form" class="modal_form">' . request_role_change_form() . '</div>
                 <div id="delete_account_form" class="modal_form">' . delete_account_form() . '</div>
             </div>

functions/admin_functions.php

@@ -25,8 +25,6 @@ function create_users_from_csv($csv)
   }
 }
 
-function admin_create_user() {}
-
 function admin_article_view()
 {
   $display = '
@@ -145,8 +143,8 @@ function admin_user_view()
               </label>
             </td>
             <td>' . $result['user_id'] . '</td>
-            <td>' . $result['username'] . '</td>
+            <td>' . htmlspecialchars($result['username']) . '</td>
-            <td>' . $result['email'] . '</td>
+            <td>' . htmlspecialchars($result['email']) . '</td>
             <td>' . ucwords($result['role']) . '</td>
             <td>' . $result['created_at'] . '</td>
             <td>' . $result['last_active'] . '</td>

functions/article_functions.php

@@ -90,6 +90,7 @@ function article_page_from_markdown($article_id)
     $markdown = read_file_one_string($_ENV['ARTICLES_FQ_PATH'] . $article_id . '/article.md');
 
     $parsedown = new Parsedown();
+    $parsedown->setSafeMode(true);
     $article_content = $parsedown->text($markdown);
     $article_toc = '';
 

functions/init.php

@@ -1,5 +1,6 @@
 <?php
 session_start();
+header("Content-Security-Policy: default-src 'self'; font-src 'self' https://www.nerdfonts.com/assets/fonts/Symbols-2048-em%20Nerd%20Font%20Complete.woff2; style-src 'self' 'unsafe-inline' https://nerdfonts.com/assets/css/webfont.css https://www.nerdfonts.com/assets/css/webfont.css; script-src 'self'; img-src 'self';");
 
 // Initialize Composer.
 require_once 'vendor/autoload.php';

js/profile_picture_cropper_modal.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
-  var user_actions_modal = document.getElementById("user_actions_modal");
+  var user_actions_modal = document.getElementById("modal");
-  var modal_content = document.getElementById("modal_content");
+  var modal_content = document.getElementById("display_modal");
-  var profile_picture_input = document.getElementById("profile_picture");
+  var profile_picture_input = document.getElementById("profile_picture_input");
 
   // Event listener on the file input
   profile_picture_input.addEventListener('change', function() {
@@ -51,6 +51,9 @@ document.addEventListener('DOMContentLoaded', function() {
     let crop_button = document.getElementById('crop_button');
     let corners = document.querySelectorAll('.corner');
 
+    const img_bounds = img_to_crop.getBoundingClientRect();
+    console.log('img_bounds: ' + img_bounds.top + ', ' + img_bounds.left);
+
     let selection = {
       x: 0,
       y: 0,
@@ -72,10 +75,8 @@ document.addEventListener('DOMContentLoaded', function() {
       const { clientX, clientY } = e;
       if (!selection_box.classList.contains('stop')) {
 
-        // const img_bounds = img_to_crop.getBoundingClientRect();
         // const box_bounds = selection_box.getBoundingClientRect();
         //
-        // console.log('img_bounds: ' + img_bounds.top);
         // console.log('box_bounds: ' + box_bounds.top);
         // if (box_bounds.left > img_bounds.left || box_bounds.right < img_bounds.right)
         selection.x = clientX;
@@ -100,7 +101,6 @@ document.addEventListener('DOMContentLoaded', function() {
 
     corners.forEach((corner) => {
       corner.addEventListener('mousedown', (e) => {
-        console.log('resizing');
         selection.resize_corner = corner.id;
         selection.is_resizing = true;
         e.stopPropagation(); // Prevent image click event
@@ -112,8 +112,9 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     crop_button.addEventListener('click', () => {
-      document.getElementById('crop_x').value = selection.x + (selection.width / 1.5);
+      var ratio = img_to_crop.naturalWidth / img_bounds.width;
-      document.getElementById('crop_y').value = selection.y + (selection.width / 1.5);
+      document.getElementById('crop_x').value = (selection.x - img_bounds.left - (selection.width / 2)) * ratio;
+      document.getElementById('crop_y').value = (selection.y - img_bounds.top - (selection.width / 2)) * ratio;
       document.getElementById('crop_width').value = selection.width;
 
       closeModal();

test.csv

@@ -1,2 +0,0 @@
-jashton,jashton@slcpl.org,changeme,2
-violet,violetash501@gmail.com,something,3

vintagecoding.net.md

@@ -8,7 +8,9 @@
 - [x] Ensure a consistent design & UX aesthetic --- v0.1.0
   - [ ] Sensible CSS class names for a modular styling approach --- v0.2.0
 
+#### Security
 - [x] Convert db_functions.php queries/statements into prepared SQL for protection against SQL injection --- v0.2.0
+- [ ] XSS prevention --- v0.2.0
 
 - [ ] Email Handler:
   - [ ] Email users subscribed to author or tag whenever a new article is posted. --- v0.3.0
@@ -34,7 +36,7 @@
   - [x] Get Users (requires auth) --- v0.2.0
   - [x] Create Users (requires auth) --- v0.2.0
   - [x] Delete Users --- v0.2.0
-  - [ ] Get User (for public facing account page) --- v0.2.0
+  - [x] Get User (for public facing account page) --- v0.2.0
 
   #### Analytics on Accounts (requires auth) --- account_analytic_functions.php
   - [ ] Get Users by Creation --- v0.3.0
@@ -45,7 +47,7 @@
   #### Account Systems Interfaces
   - [x] Sign Up & Login Form --- v0.1.0
   - [x] Account Settings (requires login, self) --- v0.1.0
-  - [ ] Account Page (of each user, hidden by default) --- v0.2.0
+  - [x] Account Page (of each user, hidden by default) --- v0.2.0
     - [ ] Allow for user customization of their account page (colors, layout, maybe even let them have their own CSS file to make changes) --- v0.2.0
 
 - [ ] Articles: