diff --git a/components/foot.php b/components/foot.php index 15b9011..60f907c 100644 --- a/components/foot.php +++ b/components/foot.php @@ -1,3 +1,7 @@ + + diff --git a/components/head.php b/components/head.php index 751dbdb..71595d7 100644 --- a/components/head.php +++ b/components/head.php @@ -15,7 +15,6 @@ if ($_SESSION['theme'] == 'dark') { '; } ?> - diff --git a/components/nav.php b/components/nav.php index 2765ee9..a0c8660 100644 --- a/components/nav.php +++ b/components/nav.php @@ -9,6 +9,12 @@ $nav = '
  • Articles
    • '; +if (isset($_COOKIE['user_id'])) { + $nav .= ' +
  • Account
    • + '; +} + if (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 3) { $nav .= '
  • Compose
    • diff --git a/compose.php b/compose.php index cfe86b8..69ea01e 100644 --- a/compose.php +++ b/compose.php @@ -17,7 +17,7 @@ function form() { $raw_tags = article_tags(); $tags = ' -
    +
    '; diff --git a/css/base.css b/css/base.css index 66d0f01..0855bcc 100644 --- a/css/base.css +++ b/css/base.css @@ -161,17 +161,19 @@ code { margin-top: 50px; padding: 18px; height: max-content; - width: 60%; + width: 70%; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; + + transition-duration: 1s; } .form_card { - width: 40%; + width: 50%; } .form_card form { @@ -292,7 +294,7 @@ textarea { height: 500px; } -.form_tags {} +.checkboxes {} .form_checkbox_container { display: block; @@ -377,16 +379,82 @@ input[type="file"] { box-sizing: border-box; } -@media (max-width: 980px) { - h1 { - font-size: 4vw; - } - - p { - font-size: 2vw; - } - - .card { - margin: 75% auto; - } +.user_view { + width: 70%; + margin: 0 auto; +} + +.user_view h1, +.user_view .card_pic_box { + margin: 15px; +} + +.user_view .line { + margin: 0px 0px 30px 0px; +} + +.user_actions { + margin: 15px; + padding: 15px; + display: flex; + justify-content: space-evenly; + border-radius: 12px; +} + +.form_card h3, +.form_card h5 { + padding-bottom: 15px; +} + +.profile_picture { + height: 128px; + width: auto; + border-radius: 50%; +} + +/* The Modal (background) */ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + backdrop-filter: blur(10px); +} + +/* Modal Content */ +.form_card { + position: relative; +} + +.modal_content { + display: fit-content; + margin: auto; + width: 40%; + height: max-content; +} + +.modal_content .form_card { + width: 100%; + box-sizing: border-box; +} + +/* The Close Button */ +.modal_close { + position: absolute; + font-size: 48px; + top: 15px; + right: 30px; + font-weight: bold; + cursor: pointer; +} + +.modal_close:hover, +.modal_close:focus { + color: orange; + cursor: pointer; } diff --git a/css/dark.css b/css/dark.css index df14e75..e0a786a 100644 --- a/css/dark.css +++ b/css/dark.css @@ -41,6 +41,7 @@ code { .article_card, .form_card { border: 5px solid white; + background-color: black; } .button { @@ -82,3 +83,23 @@ textarea { .upload_button { border: 3px solid white; } + +/* .form_card:hover, */ +/* .form_card:focus, */ +/* .article_card:hover, */ +/* .article_card:focus { */ +/* box-shadow: 0 2px 4px 0 white, 0 4px 8px 0 white; */ +/* } */ + +.modal { + background-color: black; + background-color: rgba(0, 0, 0, 0.9); +} + +.modal_close { + color: white; +} + +.user_actions { + border: 3px solid white; +} diff --git a/css/light.css b/css/light.css index e09a5d4..a2a4f88 100644 --- a/css/light.css +++ b/css/light.css @@ -41,6 +41,7 @@ code { .article_card, .form_card { border: 5px solid black; + background-color: white; } .button { @@ -82,3 +83,23 @@ textarea { .upload_button { border: 3px solid black; } + +/* .form_card:hover, */ +/* .form_card:focus, */ +/* .article_card:hover, */ +/* .article_card:focus { */ +/* box-shadow: 0 2px 4px 0 black, 0 4px 8px 0 black; */ +/* } */ + +.modal { + background-color: white; + background-color: rgba(256, 256, 256, 0.9); +} + +.modal_close { + color: black; +} + +.user_actions { + border: 3px solid black; +} diff --git a/functions/account_functions.php b/functions/account_functions.php index 9e6dd92..a146176 100644 --- a/functions/account_functions.php +++ b/functions/account_functions.php @@ -97,7 +97,7 @@ function cookies($user, $time) function logout() { - foreach ($_COOKIE as $key => $value) { + foreach (array_keys($_COOKIE) as $key) { echo 'unsetting ' . $key . ' now.'; setcookie($key, '', time() - 3600, '/'); unset($_COOKIE[$key]); @@ -110,7 +110,7 @@ function login_form($error_msg = '') { $form = '
    -

    Log In

    +

    Log In

    @@ -123,7 +123,6 @@ function login_form($error_msg = '') - Sign Up ' . $error_msg . '
    @@ -137,7 +136,7 @@ function signup_form($error_msg = '') { $form = '
    -

    Sign Up

    +

    Sign Up

    @@ -159,7 +158,6 @@ function signup_form($error_msg = '') - Log In ' . $error_msg . '
    @@ -168,3 +166,291 @@ function signup_form($error_msg = '') return $form; } + +function reset_pw_form() +{ + $form = ' +
    +
    Reset Password
    + × +
    + + + + + + + + + +
    +
    + '; + + return $form; +} + +function reset_password($user_id, $new_password, $verify_new_password) +{ + if ($new_password != $verify_new_password) { + $error_msg = ' +
    + Passwords do not match! +
    + '; + + return $error_msg; + } + + $password_hash = hash('sha256', $new_password); + $stmt = 'UPDATE user SET password_hash = "' . $password_hash . '" WHERE user_id = ' . $user_id . ';'; + exec_statement($stmt, 0); +} + +function update_email_form() +{ + $form = ' +
    +
    Update Email
    + × +
    + + + + + + + + + +
    +
    + '; + + return $form; +} + +function update_email($user_id, $new_email, $verify_new_email) +{ + if ($new_email != $verify_new_email) { + $error_msg = ' +
    + Emails do not match! +
    + '; + + return $error_msg; + } + + $stmt = 'UPDATE user SET email = "' . $new_email . '" WHERE user_id = ' . $user_id . ';'; + exec_statement($stmt, 0); +} + +function update_username_form() +{ + $form = ' +
    +
    Update Username
    + × +
    + + + + + + + + + +
    +
    + '; + + return $form; +} + +function update_username($user_id, $new_username, $verify_new_username) +{ + if ($new_username != $verify_new_username) { + $error_msg = ' +
    + Usernames do not match! +
    + '; + + return $error_msg; + } + + $query = 'SELECT username FROM user WHERE username = "' . $new_username . '";'; + if (query_one_result($query) != null) { + $error_msg = ' +
    + Usernames is taken! +
    + '; + + return $error_msg; + } + + $stmt = 'UPDATE user SET username = "' . $new_username . '" WHERE user_id = ' . $user_id . ';'; + exec_statement($stmt, 0); +} + +function request_role_change_form() +{ + $query = 'SELECT * FROM roles WHERE role_id <> 1;'; + $results = query_one_or_more_results($query); + + $roles = '
    '; + while ($row = mysqli_fetch_array($results)) { + $roles .= ' + + '; + } + + $roles .= '
    '; + + $form = ' +
    +
    Request Role
    + × +
    + + ' . $roles . ' + + +
    +
    + '; + + return $form; +} + +function request_role_change($user_id, $new_role_id) +{ + // TODO: Need to implement email handler first. +} + +function delete_account_form() +{ + $form = ' +
    +
    Delete Account
    + × +
    + + + + + + + + + +
    +
    + '; + + return $form; +} + +function delete_account($user_id, $password, $verify_password) +{ + if ($user_id == 2025) { + $error_msg = ' +
    + I am the owner, and I cannot delete myself... +
    + '; + + return $error_msg; + } + + if ($password != $verify_password) { + $error_msg = ' +
    + Passwords do not match! +
    + '; + + return $error_msg; + } + + $password_hash = hash('sha256', $password); + $query = 'SELECT user_id FROM user WHERE user_id = ' . $user_id . ' AND password_hash = "' . $password_hash . '";'; + $user = query_one_result($query); + + if ($user == null) { + $error_msg = ' +
    + Username and/or Password are invalid! +
    + '; + + return $error_msg; + } + + $stmt = 'DELETE FROM user WHERE user_id = ' . $user_id . ';'; + exec_statement($stmt, 1); + logout(); +} + +function user_view($user_id) +{ + if (!isset($_COOKIE['role_id']) || ($_COOKIE['role_id'] > 2 && $_COOKIE['user_id'] != $user_id)) + header('Location: articles.php'); + + $query = 'SELECT user_id, username, email, role_id, created_at, last_active, is_active, profile_picture FROM user WHERE user_id = ' . $user_id . ';'; + $user = query_one_result($query); + if ($user == null) + header('Location: articles.php'); + + $view = ' +
    +
    +

    ' . $user['username'] . '

    +
    + +
    +
    +
    +

    User Actions

    + '; + + // TODO: Need to setup an email handler. + // Request Role + // + $view .= ' + + + + +
    + + + + +
    +
    + '; + + return $view; +} + +function admin_user_view($user_id) +{ + $query = 'SELECT user_id, username, email, role_id, created_at, last_active, is_active, profile_picture FROM user WHERE user_id = ' . $user_id . ';'; + $user = query_one_result($query); +} diff --git a/functions/article_functions.php b/functions/article_functions.php index b9693db..e83c795 100644 --- a/functions/article_functions.php +++ b/functions/article_functions.php @@ -78,7 +78,7 @@ function article_card($article_id) $tags_html .= '
    '; } - $author_query = 'SELECT username, profile_picture FROM user WHERE user_id = ' . $article['author_id'] . ';'; + $author_query = 'SELECT user_id, username, profile_picture FROM user WHERE user_id = ' . $article['author_id'] . ';'; $author = query_one_result($author_query); $card = ' @@ -87,7 +87,7 @@ function article_card($article_id)

    ' . $article['title'] . '

    - Written by: ' . $author['username'] . ' + Written by: ' . $author['username'] . ' Published: ' . $article['published_at'] . '
    diff --git a/js/modal.js b/js/modal.js new file mode 100644 index 0000000..f4102f6 --- /dev/null +++ b/js/modal.js @@ -0,0 +1,55 @@ +document.addEventListener('DOMContentLoaded', function() { + var 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"); + break; + case 1: + openModal("update_email_form"); + break; + case 2: + openModal("update_username_form"); + break; + case 3: + openModal("delete_account_form"); + break; + // case 3: + // openModal("request_role_form"); + // break; + default: + break; + } + } + } + + // Open modal function + function openModal(formId) { + modal_content.innerHTML = document.getElementById(formId).innerHTML; + modal.style.display = "block"; + } + + 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 + modal.style.display = "none"; + } + +}); diff --git a/scripts/init.sql b/scripts/init.sql index 1de4682..c1f3e98 100644 --- a/scripts/init.sql +++ b/scripts/init.sql @@ -16,9 +16,9 @@ CREATE TABLE user ( username VARCHAR(32) NOT NULL UNIQUE, email VARCHAR(64) NOT NULL UNIQUE, password_hash VARCHAR(256) NOT NULL, - last_active TIMESTAMP DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP, role_id INT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + last_active TIMESTAMP DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP, is_active BOOLEAN DEFAULT FALSE, profile_picture VARCHAR(256), FOREIGN KEY (role_id) REFERENCES roles (role_id) diff --git a/user.php b/user.php index d1d47cc..2409c24 100644 --- a/user.php +++ b/user.php @@ -20,6 +20,33 @@ if (isset($_POST['username'])) { header('Location: .'); } +if (isset($_POST['form_id'])) { + switch ($_POST['form_id']) { + case 'reset_pw_form': + $msg = reset_password($_COOKIE['user_id'], $_POST['new_pw'], $_POST['verify_new_pw']); + // code... + break; + case 'update_email_form': + $msg = update_email($_COOKIE['user_id'], $_POST['new_email'], $_POST['verify_new_email']); + // code... + break; + case 'update_username_form': + $msg = update_username($_COOKIE['user_id'], $_POST['new_username'], $_POST['verify_new_username']); + // code... + 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... + break; + } + echo $msg; +} + include_once 'components/head.php'; if ($_GET['action'] == 'login') @@ -28,5 +55,8 @@ 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'])) { + echo user_view($_GET['user_id']); +} include_once 'components/foot.php';