implemented image upload and cropping system, mostly work. it's too zoomed in and appears to be using the xy coords from the top left of the crop selector.
This commit is contained in:
@@ -2,3 +2,4 @@
|
||||
composer.lock
|
||||
/vendor/
|
||||
profile_pictures
|
||||
/data
|
||||
|
||||
+27
-1
@@ -1,7 +1,33 @@
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script src="js/modal.js"></script>
|
||||
<?php
|
||||
if ($_SERVER['SCRIPT_NAME'] == '/user.php') {
|
||||
$args = [];
|
||||
$arr = explode('&', $_SERVER['QUERY_STRING']);
|
||||
|
||||
foreach ($arr as $a) {
|
||||
$tmp = explode('=', $a);
|
||||
$key = $tmp[0];
|
||||
$value = $tmp[1];
|
||||
|
||||
$args[$key] = $value;
|
||||
}
|
||||
|
||||
if (isset($args['action'])) {
|
||||
if ($args['action'] == 'signup') {
|
||||
echo '
|
||||
<script src="js/cropper.js"></script>
|
||||
<script src="js/profile_picture_cropper_modal.js"></script>
|
||||
<script src="js/upload.js"></script>
|
||||
';
|
||||
} else if ($args['action'] == 'view') {
|
||||
echo '<script src="js/user_actions_modal.js"></script>
|
||||
';
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
|
||||
+79
-4
@@ -24,7 +24,8 @@ small,
|
||||
label,
|
||||
input,
|
||||
textarea,
|
||||
a {
|
||||
a,
|
||||
.modal_button {
|
||||
font-family: 'HackNerdFontMono', Hack, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -52,15 +53,23 @@ h5 {
|
||||
|
||||
p,
|
||||
a,
|
||||
label {
|
||||
label,
|
||||
.modal_button {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
p::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .75vw;
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
.modal_button {
|
||||
color: orange;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
@@ -297,7 +306,9 @@ textarea {
|
||||
.checkboxes {}
|
||||
|
||||
.form_checkbox_container {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
@@ -309,6 +320,7 @@ textarea {
|
||||
|
||||
height: 29px;
|
||||
width: max-content;
|
||||
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
@@ -458,3 +470,66 @@ input[type="file"] {
|
||||
color: orange;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal_button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#img_to_crop {
|
||||
width: 70%;
|
||||
height: auto;
|
||||
max-width: 512px;
|
||||
max-height: 512px;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#img_crop_selection {
|
||||
pointer-events: none;
|
||||
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
|
||||
outline: dashed 4px orange;
|
||||
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
cursor: nwse-resize;
|
||||
/* Default cursor for resizing */
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#corner_nw {
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
#corner_ne {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
#corner_sw {
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
#corner_se {
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
+2
-1
@@ -17,7 +17,8 @@ label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
a:hover,
|
||||
.modal_button:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
+2
-1
@@ -17,7 +17,8 @@ label {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
a:hover,
|
||||
.modal_button:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
+120
-76
@@ -29,35 +29,52 @@ function delete_self()
|
||||
return -1;
|
||||
}
|
||||
|
||||
function create_account($username, $email, $password, $verify_password, $role_id, $profile_picture)
|
||||
function cookies($user, $time)
|
||||
{
|
||||
if ($password != $verify_password) {
|
||||
$error_msg = '
|
||||
<div class="error">
|
||||
Passwords do not match!
|
||||
</div>
|
||||
';
|
||||
setcookie('user_id', $user['user_id'], $time);
|
||||
setcookie('username', $user['username'], $time);
|
||||
setcookie('email', $user['email'], $time);
|
||||
setcookie('role_id', $user['role_id'], $time);
|
||||
setcookie('profile_picture', $user['profile_picture'], $time);
|
||||
}
|
||||
|
||||
return $error_msg;
|
||||
function logout()
|
||||
{
|
||||
foreach (array_keys($_COOKIE) as $key) {
|
||||
echo 'unsetting ' . $key . ' now.';
|
||||
setcookie($key, '', time() - 3600, '/');
|
||||
unset($_COOKIE[$key]);
|
||||
}
|
||||
|
||||
$password_hash = hash('sha256', $password);
|
||||
header('Location: articles.php');
|
||||
}
|
||||
|
||||
$id = rand(1000, 999999999);
|
||||
while (user_id_exists($id))
|
||||
$id = rand(1000, 999999999);
|
||||
function login_form($error_msg = '')
|
||||
{
|
||||
$form = '
|
||||
<div class="form_card">
|
||||
<h3 class="underline">Log In</h3>
|
||||
<form method="post">
|
||||
<input type="hidden" name="form_id" value="login_form">
|
||||
|
||||
if (!empty($profile_picture)) {
|
||||
$filetype = explode('.', $profile_picture);
|
||||
$pic_path = $id . $filetype[count($filetype) - 1];
|
||||
}
|
||||
<label for="username">Username / Email</label>
|
||||
<input id="username" name="username" required>
|
||||
|
||||
$stmt = 'INSERT INTO user (user_id, username, email, password_hash, role_id' . (!empty($profile_picture) ? ', profile_picture' : '') . ') VALUES (' . $id . ', "' . $username . '", "' . $email . '", "' . $password_hash . '", ' . $role_id . (!empty($profile_picture) ? '", "' . $pic_path . '"' : '') . ');';
|
||||
exec_statement($stmt, 0);
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" required>
|
||||
|
||||
login($username, $password, false);
|
||||
<label class="form_checkbox_container">Stay Logged In?
|
||||
<input name="stay_logged_in" type="checkbox" value="true">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
|
||||
return true;
|
||||
<input class="button" type="submit" value="Log In">
|
||||
' . $error_msg . '
|
||||
</form>
|
||||
</div>
|
||||
';
|
||||
|
||||
return $form;
|
||||
}
|
||||
|
||||
function login($username, $password, $stay_logged_in)
|
||||
@@ -86,58 +103,17 @@ function login($username, $password, $stay_logged_in)
|
||||
return true;
|
||||
}
|
||||
|
||||
function cookies($user, $time)
|
||||
{
|
||||
setcookie('user_id', $user['user_id'], $time);
|
||||
setcookie('username', $user['username'], $time);
|
||||
setcookie('email', $user['email'], $time);
|
||||
setcookie('role_id', $user['role_id'], $time);
|
||||
setcookie('profile_picture', $user['profile_picture'], $time);
|
||||
}
|
||||
|
||||
function logout()
|
||||
{
|
||||
foreach (array_keys($_COOKIE) as $key) {
|
||||
echo 'unsetting ' . $key . ' now.';
|
||||
setcookie($key, '', time() - 3600, '/');
|
||||
unset($_COOKIE[$key]);
|
||||
}
|
||||
|
||||
header('Location: articles.php');
|
||||
}
|
||||
|
||||
function login_form($error_msg = '')
|
||||
{
|
||||
$form = '
|
||||
<div class="form_card">
|
||||
<h3 class="underline">Log In</h3>
|
||||
<form method="post">
|
||||
<label for="username">Username / Email</label>
|
||||
<input id="username" name="username" required>
|
||||
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" required>
|
||||
|
||||
<label class="form_checkbox_container">Stay Logged In?
|
||||
<input name="stay_logged_in" type="checkbox" value="true">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
|
||||
<input class="button" type="submit" value="Log In">
|
||||
' . $error_msg . '
|
||||
</form>
|
||||
</div>
|
||||
';
|
||||
|
||||
return $form;
|
||||
}
|
||||
|
||||
function signup_form($error_msg = '')
|
||||
{
|
||||
$form = '
|
||||
<div class="form_card">
|
||||
<h3 class="underline">Sign Up</h3>
|
||||
<form method="post">
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="form_id" value="signup_form">
|
||||
<input type="hidden" name="crop_x" value="" id="crop_x">
|
||||
<input type="hidden" name="crop_y" value="" id="crop_y">
|
||||
<input type="hidden" name="crop_width" value="" id="crop_width">
|
||||
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" required>
|
||||
|
||||
@@ -150,8 +126,9 @@ 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_upload" class="upload_button">Upload a Profile Picture</label>
|
||||
<input id="profile_picture_upload" name="profile_picture_upload" type="file" accept="image/png, image/jpeg">
|
||||
<label for="profile_picture" 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">
|
||||
<small class="file_input_feedback">No file selected.</small>
|
||||
|
||||
<label class="form_checkbox_container">Stay Logged In?
|
||||
<input name="stay_logged_in" type="checkbox" value="true">
|
||||
@@ -161,12 +138,80 @@ function signup_form($error_msg = '')
|
||||
<input class="button" type="submit" value="Sign Up">
|
||||
' . $error_msg . '
|
||||
</form>
|
||||
|
||||
<div id="user_actions_modal" class="modal">
|
||||
<div id="modal_content">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="profile_cropper" class="modal_form">' . profile_cropper() . '</div>
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
return $form;
|
||||
}
|
||||
|
||||
function signup($username, $email, $password, $verify_password, $role_id, $upload = null, $x = null, $y = null, $crop_width = null)
|
||||
{
|
||||
if ($password != $verify_password) {
|
||||
$error_msg = '
|
||||
<div class="error">
|
||||
Passwords do not match!
|
||||
</div>
|
||||
';
|
||||
|
||||
return $error_msg;
|
||||
}
|
||||
|
||||
$password_hash = hash('sha256', $password);
|
||||
|
||||
$id = rand(1000, 999999999);
|
||||
while (user_id_exists($id))
|
||||
$id = rand(1000, 999999999);
|
||||
|
||||
if (!empty($upload)) {
|
||||
$orig_size = getimagesize($upload['profile_picture']['tmp_name']);
|
||||
$orig_width = $orig_size[0];
|
||||
$orig_height = $orig_size[1];
|
||||
|
||||
$crop_size = min($orig_width, $orig_height) * .56;
|
||||
|
||||
crop_image($upload['profile_picture']['tmp_name'], $x, $y, $crop_size, $crop_size);
|
||||
$target = upload($upload['profile_picture'], $_ENV['PROFILE_IMAGES_FQ_PATH'], $id);
|
||||
}
|
||||
|
||||
$stmt = 'INSERT INTO user (user_id, username, email, password_hash, role_id' . (!empty($target) ? ', profile_picture' : '') . ') VALUES (' . $id . ', "' . $username . '", "' . $email . '", "' . $password_hash . '", ' . $role_id . (!empty($target) ? ', "' . $target . '"' : '') . ');';
|
||||
exec_statement($stmt, 0);
|
||||
|
||||
login($username, $password, false);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function profile_cropper()
|
||||
{
|
||||
$display = '
|
||||
<div class="form_card">
|
||||
<img src="IMG_UPLOAD_PATH" id="img_to_crop"/>
|
||||
<div id="img_crop_selection">
|
||||
<div class="corner" id="corner_nw"></div>
|
||||
<div class="corner" id="corner_ne"></div>
|
||||
<div class="corner" id="corner_sw"></div>
|
||||
<div class="corner" id="corner_se"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button id="crop_button" class="button">Crop</button>
|
||||
<button id="crop_cancel" class="button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
return $display;
|
||||
}
|
||||
|
||||
function reset_pw_form()
|
||||
{
|
||||
$form = '
|
||||
@@ -413,7 +458,7 @@ function user_view($user_id)
|
||||
<div class="row">
|
||||
<h1>' . $user['username'] . '</h1>
|
||||
<div class="card_pic_box">
|
||||
<img src="/profile_pictures/' . $user['profile_picture'] . '" class="profile_picture" />
|
||||
<img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $user['profile_picture'] . '" class="profile_picture" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
@@ -425,15 +470,14 @@ function user_view($user_id)
|
||||
// <div id="request_role_form" class="modal_form">' . request_role_change_form() . '</div>
|
||||
$view .= '
|
||||
<div class="user_actions">
|
||||
<a class="modal_button underline">Reset Password</a>
|
||||
<a class="modal_button underline">Update Email</a>
|
||||
<a class="modal_button underline">Update Username</a>
|
||||
<a class="modal_button underline">Delete Account</a>
|
||||
<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="delete_account_form_button" class="modal_button underline">Delete Account</button>
|
||||
</div>
|
||||
|
||||
<div id="user_actions_modal" class="modal">
|
||||
<div class="modal_content">
|
||||
<div id="modal_content"></div>
|
||||
<div id="modal_content">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -46,12 +46,29 @@ function article_page_from_markdown($article_id)
|
||||
{
|
||||
$query = 'SELECT * FROM article WHERE article_id = ' . $article_id . ';';
|
||||
$article = query_one_result($query);
|
||||
|
||||
$query = 'SELECT user_id, username, profile_picture FROM user WHERE user_id = ' . $article['author_id'] . ';';
|
||||
$author = query_one_result($query);
|
||||
|
||||
$markdown = read_file_one_string($_ENV['ARTICLES_PATH'] . $article_id . '/article.md');
|
||||
|
||||
$parsedown = new Parsedown();
|
||||
|
||||
$html = '<div class="article">';
|
||||
$html .= '<h3>' . $article['title'] . '</h3>';
|
||||
$html = '
|
||||
<div class="article">
|
||||
<h3>' . $article['title'] . '</h3>
|
||||
<div class="row">
|
||||
<div class="col_right">
|
||||
<h5>Written by <a href="user.php?action=view&user_id=' . $author['user_id'] . '" style="font-size: 1.5vw;">' . $author['username'] . '</a></h5>
|
||||
<p>Published on ' . $article['published_at'] . '</p>
|
||||
</div>
|
||||
<div class="card_pic_box">
|
||||
<img src="/profile_pictures/' . $author['profile_picture'] . '" class="card_profile_picture" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="line" style="margin-bottom: 15px;"></div>
|
||||
';
|
||||
|
||||
$html .= $parsedown->text($markdown);
|
||||
$html .= '</div>';
|
||||
|
||||
@@ -91,7 +108,7 @@ function article_card($article_id)
|
||||
<small>Published: ' . $article['published_at'] . '</small>
|
||||
</div>
|
||||
<div class="card_pic_box">
|
||||
<img src="/profile_pictures/' . $author['profile_picture'] . '" class="card_profile_picture">
|
||||
<img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $author['profile_picture'] . '" class="card_profile_picture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+86
-1
@@ -1,5 +1,85 @@
|
||||
<?php
|
||||
|
||||
if (!empty($_FILES['upload'])) {
|
||||
require_once '../vendor/autoload.php';
|
||||
|
||||
// Load environment variables.
|
||||
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
|
||||
$dotenv->safeLoad();
|
||||
upload($_FILES['upload'], $_ENV['UPLOAD_TMP_FQ_PATH'], isset($_POST['filename']) ? $_POST['filename'] : null);
|
||||
}
|
||||
|
||||
function upload($input, $dest_dir, $filename = null)
|
||||
{
|
||||
$filetype = strtolower(pathinfo($input['name'], PATHINFO_EXTENSION));
|
||||
|
||||
switch ($filetype) {
|
||||
case 'png':
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
if (check_image_upload($dest_dir, $filetype, $input)) {
|
||||
move_uploaded_file($input['tmp_name'], $dest_dir . ($filename ? $filename . '.' . $filetype : $input['name']));
|
||||
if ($filename)
|
||||
return basename($filename . '.' . $filetype);
|
||||
else
|
||||
return basename($input['name'] . '.' . $filetype);
|
||||
} else
|
||||
return '';
|
||||
break;
|
||||
default:
|
||||
# code...
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function crop_image($img_path, $x, $y, $height, $width)
|
||||
{
|
||||
//$dest = $_ENV['UPLOAD_TMP_FQ_PATH'];
|
||||
$dest = '/tmp/';
|
||||
// Get the image type
|
||||
$imageType = exif_imagetype($img_path);
|
||||
|
||||
// Create an image resource from the source image
|
||||
switch ($imageType) {
|
||||
case IMAGETYPE_JPEG:
|
||||
$sourceImage = imagecreatefromjpeg($img_path);
|
||||
break;
|
||||
case IMAGETYPE_PNG:
|
||||
$sourceImage = imagecreatefrompng($img_path);
|
||||
break;
|
||||
default:
|
||||
return false; // Unsupported image type
|
||||
}
|
||||
|
||||
if (!$sourceImage)
|
||||
return false; // Failed to create image resource
|
||||
|
||||
// Create a new image resource for the cropped image
|
||||
$croppedImage = imagecreatetruecolor($width, $height);
|
||||
|
||||
// Copy the cropped portion from the source image to the destination image
|
||||
imagecopy($croppedImage, $sourceImage, 0, 0, $x, $y, $width, $height);
|
||||
|
||||
// Save the cropped image to the destination path
|
||||
switch ($imageType) {
|
||||
case IMAGETYPE_JPEG:
|
||||
imagejpeg($croppedImage, $img_path);
|
||||
break;
|
||||
case IMAGETYPE_PNG:
|
||||
imagepng($croppedImage, $dest);
|
||||
break;
|
||||
case IMAGETYPE_GIF:
|
||||
imagegif($croppedImage, $dest);
|
||||
break;
|
||||
}
|
||||
|
||||
// Free up memory
|
||||
imagedestroy($sourceImage);
|
||||
imagedestroy($croppedImage);
|
||||
|
||||
return true; // Cropping successful
|
||||
}
|
||||
|
||||
/*
|
||||
* Reads in file contents and stores as a single string.
|
||||
*/
|
||||
@@ -10,9 +90,14 @@ function read_file_one_string($file_path)
|
||||
return $string;
|
||||
}
|
||||
|
||||
function check_image_upload($target, $filetype, $image)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
function pretty_dump($arr)
|
||||
{
|
||||
return '
|
||||
echo '
|
||||
<pre>
|
||||
' . print_r($arr) . '
|
||||
</pre>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -5,6 +5,19 @@ require_once 'functions/init.php';
|
||||
require_once 'functions/functions.php';
|
||||
include_once 'components/head.php';
|
||||
|
||||
echo '<h1>Home</h1>';
|
||||
|
||||
echo home_content();
|
||||
|
||||
include_once 'components/foot.php';
|
||||
|
||||
function home_content()
|
||||
{
|
||||
$content = '
|
||||
<div class="article">
|
||||
<p>This site is intended to be a platform for exposing, celebrating, and sharing the style of Vintage Coding. Topics from hardware to software and kernel to web, this site aims to cover it all.</p>
|
||||
<p>Vintage Coding is as much a mindset as it is a style. Vibe Coding is to Vintage Coding as Yin is to Yang. Vintage is relating to or denoting something of high quality. For example, vintage clothes from decades ago are more durable than the clothes of today which rip and tear after little use.</p>
|
||||
</div>
|
||||
';
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var user_actions_modal = document.getElementById("user_actions_modal");
|
||||
var modal_content = document.getElementById("modal_content");
|
||||
var profile_picture_input = document.getElementById("profile_picture");
|
||||
|
||||
// Event listener on the file input
|
||||
profile_picture_input.addEventListener('change', function() {
|
||||
if (profile_picture_input.files && profile_picture_input.files[0]) {
|
||||
var file = profile_picture_input.files[0];
|
||||
var form_data = new FormData();
|
||||
form_data.append('upload', file);
|
||||
form_data.append('test_key', 'test_value');
|
||||
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'http://localhost:2025/functions/functions.php', true);
|
||||
xhr.setRequestHeader('enctype', 'multipart/form-data');
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
filepath = '/data/tmp/' + profile_picture_input.files[0].name;
|
||||
openModal('profile_cropper', filepath);
|
||||
} else {
|
||||
console.error('Error uploading file:', xhr.status, xhr.statusText);
|
||||
}
|
||||
|
||||
xhr.onerror = function() {
|
||||
console.error('Network error occurred.');
|
||||
};
|
||||
};
|
||||
|
||||
xhr.send(form_data);
|
||||
}
|
||||
});
|
||||
|
||||
// Open modal function
|
||||
function openModal(formId, filePath = null) {
|
||||
let content = document.getElementById(formId).innerHTML;
|
||||
if (filePath) {
|
||||
content = content.replace('IMG_UPLOAD_PATH', filePath);
|
||||
}
|
||||
modal_content.innerHTML = content;
|
||||
user_actions_modal.style.display = "block";
|
||||
|
||||
cropper();
|
||||
}
|
||||
|
||||
function cropper() {
|
||||
let img_to_crop = document.getElementById('img_to_crop');
|
||||
let selection_box = document.getElementById('img_crop_selection');
|
||||
let crop_button = document.getElementById('crop_button');
|
||||
let corners = document.querySelectorAll('.corner');
|
||||
|
||||
let selection = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
is_resizing: false,
|
||||
is_dragging: false,
|
||||
resize_corner: null,
|
||||
};
|
||||
|
||||
function updateSelection() {
|
||||
selection_box.style.left = `${selection.x}px`;
|
||||
selection_box.style.top = `${selection.y}px`;
|
||||
selection_box.style.width = `${selection.width}px`;
|
||||
selection_box.style.height = `${selection.height}px`;
|
||||
}
|
||||
|
||||
img_to_crop.addEventListener('mousemove', (e) => {
|
||||
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;
|
||||
// if (box_bounds.top > img_bounds.top || box_bounds.bottom > img_bounds.bottom)
|
||||
selection.y = clientY;
|
||||
|
||||
updateSelection();
|
||||
} else if (selection.is_resizing) {
|
||||
resizing(e);
|
||||
}
|
||||
});
|
||||
|
||||
img_to_crop.addEventListener('click', function(event) {
|
||||
if (selection_box.classList.contains('stop')) {
|
||||
selection.is_resizing = false;
|
||||
selection_box.classList.remove('stop');
|
||||
}
|
||||
else {
|
||||
selection_box.classList.add('stop');
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
corner.addEventListener('dragstart', (e) => {
|
||||
e.preventDefault();
|
||||
})
|
||||
});
|
||||
|
||||
crop_button.addEventListener('click', () => {
|
||||
document.getElementById('crop_x').value = selection.x + (selection.width / 1.5);
|
||||
document.getElementById('crop_y').value = selection.y + (selection.width / 1.5);
|
||||
document.getElementById('crop_width').value = selection.width;
|
||||
|
||||
closeModal();
|
||||
});
|
||||
|
||||
function resizing(e) {
|
||||
if (!selection.is_resizing) return;
|
||||
|
||||
const aspect_ratio = 1;
|
||||
|
||||
let newWidth = selection.width;
|
||||
|
||||
switch (selection.resize_corner) {
|
||||
case 'corner_nw':
|
||||
newWidth = selection.x - e.clientX;
|
||||
break;
|
||||
case 'corner_sw':
|
||||
newWidth = selection.x - e.clientX;
|
||||
break;
|
||||
case 'corner_ne':
|
||||
newWidth = e.clientX - selection.x;
|
||||
break;
|
||||
case 'corner_se':
|
||||
newWidth = e.clientX - selection.x;
|
||||
break;
|
||||
}
|
||||
|
||||
selection.width = newWidth;
|
||||
selection.height = newWidth / aspect_ratio;
|
||||
// }
|
||||
updateSelection();
|
||||
}
|
||||
}
|
||||
|
||||
modal_content.addEventListener('click', function(event) {
|
||||
if (event.target.classList.contains('modal_close')) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target.classList.contains('modal')) {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
// Close modal function
|
||||
function closeModal() {
|
||||
modal_content.innerHTML = ""; // Clear content when closing
|
||||
user_actions_modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
const file_inputs = document.getElementsByClassName('file_input');
|
||||
const filename_displays = document.getElementsByClassName('file_input_feedback');
|
||||
|
||||
for (let i = 0; i < file_inputs.length; i++) {
|
||||
file_inputs[i].addEventListener('change', function() {
|
||||
const selected_file = event.target.files[0];
|
||||
if (selected_file)
|
||||
filename_displays[i].textContent = 'File uploaded: ' + selected_file.name;
|
||||
else
|
||||
filename_displays[i].textContent = 'No file selected.';
|
||||
})
|
||||
}
|
||||
@@ -1,23 +1,22 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var modal = document.getElementById("user_actions_modal");
|
||||
var user_actions_modal = document.getElementById("user_actions_modal");
|
||||
var modal_content = document.getElementById("modal_content");
|
||||
var buttons = document.getElementsByClassName("modal_button");
|
||||
var spans = document.getElementsByClassName("modal_close");
|
||||
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
buttons[i].onclick = function() {
|
||||
switch (i) {
|
||||
case 0:
|
||||
openModal("reset_pw_form");
|
||||
switch (buttons[i].id) {
|
||||
case 'reset_pw_form_button':
|
||||
openModal('reset_pw_form');
|
||||
break;
|
||||
case 1:
|
||||
openModal("update_email_form");
|
||||
case 'update_email_form_button':
|
||||
openModal('update_email_form');
|
||||
break;
|
||||
case 2:
|
||||
openModal("update_username_form");
|
||||
case 'update_username_form_button':
|
||||
openModal('update_username_form');
|
||||
break;
|
||||
case 3:
|
||||
openModal("delete_account_form");
|
||||
case 'delete_account_form_button':
|
||||
openModal('delete_account_form');
|
||||
break;
|
||||
// case 3:
|
||||
// openModal("request_role_form");
|
||||
@@ -31,7 +30,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Open modal function
|
||||
function openModal(formId) {
|
||||
modal_content.innerHTML = document.getElementById(formId).innerHTML;
|
||||
modal.style.display = "block";
|
||||
user_actions_modal.style.display = "block";
|
||||
}
|
||||
|
||||
modal_content.addEventListener('click', function(event) {
|
||||
@@ -49,7 +48,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Close modal function
|
||||
function closeModal() {
|
||||
modal_content.innerHTML = ""; // Clear content when closing
|
||||
modal.style.display = "none";
|
||||
user_actions_modal.style.display = "none";
|
||||
}
|
||||
|
||||
});
|
||||
@@ -5,43 +5,81 @@ require_once 'functions/functions.php';
|
||||
include_once 'functions/account_functions.php';
|
||||
|
||||
$msg = '';
|
||||
// Handle creating a new user.
|
||||
if (isset($_POST['verify_password'])) {
|
||||
$msg = create_account($_POST['username'], $_POST['email'], $_POST['password'], $_POST['verify_password'], 4, $_POST['profile_picture_upload']);
|
||||
|
||||
if ($msg === true)
|
||||
header('Location: .');
|
||||
}
|
||||
|
||||
if (isset($_POST['username'])) {
|
||||
$msg = login($_POST['username'], $_POST['password'], (isset($POST['stay_logged_in']) ? true : false));
|
||||
|
||||
if ($msg === true)
|
||||
header('Location: .');
|
||||
}
|
||||
|
||||
if (isset($_POST['form_id'])) {
|
||||
switch ($_POST['form_id']) {
|
||||
case 'signup_form':
|
||||
$msg = signup(
|
||||
$_POST['username'],
|
||||
$_POST['email'],
|
||||
$_POST['password'],
|
||||
$_POST['verify_password'],
|
||||
4, // TODO: Need to allow for other roles to be created, if the submission is from an administrator or owner.
|
||||
(!empty($_FILES) ? $_FILES : ''),
|
||||
(!empty($_POST['crop_x']) ? $_POST['crop_x'] : ''),
|
||||
(!empty($_POST['crop_y']) ? $_POST['crop_y'] : ''),
|
||||
(!empty($_POST['crop_width']) ? $_POST['crop_width'] : '')
|
||||
);
|
||||
|
||||
if ($msg === true)
|
||||
header('Location: user.php?action=view&user_id=' . $_COOKIE['user_id']);
|
||||
break;
|
||||
|
||||
|
||||
|
||||
case 'login_form':
|
||||
$msg = login(
|
||||
$_POST['username'],
|
||||
$_POST['password'],
|
||||
(isset($POST['stay_logged_in']) ? true : false)
|
||||
);
|
||||
|
||||
if ($msg === true)
|
||||
header('Location: .');
|
||||
break;
|
||||
|
||||
|
||||
|
||||
case 'reset_pw_form':
|
||||
$msg = reset_password($_COOKIE['user_id'], $_POST['new_pw'], $_POST['verify_new_pw']);
|
||||
// code...
|
||||
$msg = reset_password(
|
||||
$_COOKIE['user_id'],
|
||||
$_POST['new_pw'],
|
||||
$_POST['verify_new_pw']
|
||||
);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
|
||||
case 'update_email_form':
|
||||
$msg = update_email($_COOKIE['user_id'], $_POST['new_email'], $_POST['verify_new_email']);
|
||||
// code...
|
||||
$msg = update_email(
|
||||
$_COOKIE['user_id'],
|
||||
$_POST['new_email'],
|
||||
$_POST['verify_new_email']
|
||||
);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
|
||||
case 'update_username_form':
|
||||
$msg = update_username($_COOKIE['user_id'], $_POST['new_username'], $_POST['verify_new_username']);
|
||||
// code...
|
||||
$msg = update_username(
|
||||
$_COOKIE['user_id'],
|
||||
$_POST['new_username'],
|
||||
$_POST['verify_new_username']
|
||||
);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
|
||||
case 'delete_account_form':
|
||||
$msg = delete_account($_COOKIE['user_id'], $_POST['delete_password'], $_POST['delete_verify_password']);
|
||||
break;
|
||||
// case 'request_role_form':
|
||||
// // code...
|
||||
// break;
|
||||
default:
|
||||
// code...
|
||||
$msg = delete_account(
|
||||
$_COOKIE['user_id'],
|
||||
$_POST['delete_password'],
|
||||
$_POST['delete_verify_password']
|
||||
);
|
||||
|
||||
break;
|
||||
}
|
||||
echo $msg;
|
||||
@@ -55,8 +93,7 @@ else if ($_GET['action'] == 'signup')
|
||||
echo signup_form(($msg ? $msg : ''));
|
||||
else if ($_GET['action'] == 'logout')
|
||||
logout();
|
||||
else if ($_GET['action'] == 'view' && isset($_GET['user_id'])) {
|
||||
else if ($_GET['action'] == 'view' && isset($_GET['user_id']))
|
||||
echo user_view($_GET['user_id']);
|
||||
}
|
||||
|
||||
include_once 'components/foot.php';
|
||||
|
||||
Reference in New Issue
Block a user