refactoring

components/admin/article_view.php

@@ -0,0 +1,68 @@
+<?php
+function admin_article_view()
+{
+    $display = '
+    <div class="view_card">
+      <div class="row">
+        <h3>Articles</h3>
+        <a href="admin.php?view=users">View Users</a>
+      </div>
+      <div class="line"></div>
+      <form method="post">
+        <input type="hidden" name="form_id" value="articles">
+        <div class="row">
+          <label for="delete" class="form_checkbox_container">Delete
+            <input type="radio" class="button" name="action" id="delete" value="delete">
+            <span class="checkmark"></span>
+          </label>
+          <input type="submit" class="button narrow" value="Commit">
+        </div>
+
+        <table>
+          <thead>
+            <tr>
+              <th class="">Select</th>
+              <th>Article ID</th>
+              <th>Author</th>
+              <th>Title</th>
+              <th>Created</th>
+              <th>Updated</th>
+              <th>Published</th>
+              <th>Read Count</th>
+            </tr>
+          </thead>
+          <tbody>
+  ';
+    $conn = get_connection();
+    $results = $conn->query('SELECT article_id, username, title, read_count, article.created_at, updated_at, published_at, excerpt FROM article INNER JOIN user ON article.author_id = user.user_id;');
+
+    foreach ($results as $key => $result) {
+        $display .= '
+            <tr data-href="articles.php?view=read&article_id=' . $result['article_id'] . '">
+              <td class="excluded_cell">
+                <label class="form_checkbox_container">
+                  <input name="selected_articles[]" value="' . $result['article_id'] . '" type="checkbox">
+                  <span class="checkmark"></span>
+                </label>
+              </td>
+              <td>' . $result['article_id'] . '</td>
+              <td>' . $result['username'] . '</td>
+              <td>' . $result['title'] . '</td>
+              <td>' . $result['created_at'] . '</td>
+              <td>' . $result['updated_at'] . '</td>
+              <td>' . $result['published_at'] . '</td>
+              <td>' . $result['read_count'] . '</td>
+            </tr>
+    ';
+    }
+
+    $display .= '
+          </tbody>
+        </table>
+
+      </form>
+    </div>
+  ';
+
+    return $display;
+}

components/admin/user_view.php

@@ -0,0 +1,71 @@
+<?php
+function admin_user_view()
+{
+    $display = '
+    <div class="view_card">
+      <div class="row">
+        <h3>Users</h3>
+        <a href="admin.php?view=articles">View Articles</a>
+      </div>
+      <div class="line"></div>
+      <form method="post" enctype="multipart/form-data">
+        <input type="hidden" name="form_id" value="users">
+        <div class="row">
+          <label for="delete" class="form_checkbox_container">Delete
+            <input type="radio" class="button" name="action" id="delete" value="delete">
+            <span class="checkmark"></span>
+          </label>
+
+          <label id="create_users_from_csv_label" for="create_users_from_csv" class="upload_button">Upload a CSV</label>
+          <input id="create_users_from_csv" class="file_input" name="csv" type="file" accept=".csv">
+          <small class="file_input_feedback">No file selected.</small>
+
+          <input type="submit" class="button narrow" value="Commit">
+        </div>
+
+        <table>
+          <tr>
+            <th>Select</th>
+            <th>User ID</th>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Created</th>
+            <th>Last Active</th>
+            <th>Active</th>
+            <th>Profile Picture</th>
+          </tr>
+  ';
+    $conn = get_connection();
+    $results = $conn->query('SELECT user_id, username, email, last_active, role, created_at, is_active, profile_picture FROM user INNER JOIN roles ON user.role_id = roles.role_id;');
+
+    foreach ($results as $key => $result) {
+        $display .= '
+          <tr data-href="user.php?action=view&user_id=' . $result['user_id'] . '">
+            <td class="excluded_cell">
+              <label class="form_checkbox_container">
+                <input name="selected_users[]" value="' . $result['user_id'] . '" type="checkbox">
+                <span class="checkmark"></span>
+              </label>
+            </td>
+            <td>' . $result['user_id'] . '</td>
+            <td>' . htmlspecialchars($result['username']) . '</td>
+            <td>' . htmlspecialchars($result['email']) . '</td>
+            <td>' . ucwords($result['role']) . '</td>
+            <td>' . $result['created_at'] . '</td>
+            <td>' . $result['last_active'] . '</td>
+            <td>' . $result['is_active'] . '</td>
+            <td><img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $result['profile_picture'] . '" class="card_profile_picture"></td>
+          </tr>
+    ';
+    }
+
+    $display .= '
+        </table>
+
+      </form>
+    </div>
+  ';
+
+    return $display;
+}

components/article/article.php

@@ -0,0 +1,41 @@
+<?php
+
+/*
+ * Reads the markdown file for a given article and generates the HTML for it.
+ */
+function article_page_from_markdown($article_id)
+{
+    $article = exec_stmt('SELECT * FROM article WHERE article_id = ?', 'i', $article_id)->fetch_assoc();
+    $author = exec_stmt('SELECT user_id, username, profile_picture FROM user WHERE user_id = ?', 'i', $article['author_id'])->fetch_assoc();
+    $markdown = read_file_one_string($_ENV['ARTICLES_FQ_PATH'] . $article_id . '/article.md');
+
+    $parsedown = new Parsedown();
+    $parsedown->setSafeMode(true);
+    $article_content = $parsedown->text($markdown);
+
+    $html = '
+        <div class="article">
+            
+            <div class="row">
+                <h1>' . $article['title'] . '</h1>
+                ' . (isset($_COOKIE['user_id']) && $_COOKIE['user_id'] == $article['author_id'] ? '<a href="articles.php?view=compose&article_id=' . $article_id . '"><i class="nf nf-fa-edit"></i></a>' : '') . '
+            </div>
+            <div class="row">
+                <div class="col_right">
+                    <h5>Written by <a href="user.php?action=view&user_id=' . $author['user_id'] . '">' . $author['username'] . '</a></h5>
+                    <p>Published on ' . $article['published_at'] . '<br>
+                    Lasted edited on ' . $article['updated_at'] . '</p>
+                </div>
+                <div class="card_pic_box">
+                    <img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $author['profile_picture'] . '" class="card_profile_picture" />
+                </div>
+            </div>
+            <div class="line" style="margin-bottom: 15px;"></div>
+                <div class="article_content">
+                    ' . $article_content . '
+                </div>
+        </div>
+    ';
+
+    return $html;
+}

components/article/card.php

@@ -0,0 +1,49 @@
+<?php
+
+/*
+ * Generates cards for a given article.
+ */
+function article_card($article_id)
+{
+    $article = exec_stmt('SELECT * FROM article WHERE article_id = ?', 'i', $article_id)->fetch_assoc();
+
+    $tags_results = exec_stmt('SELECT tag FROM article_tags INNER JOIN tags ON article_tags.tag_id = tags.tag_id WHERE article_id = ?', 'i', $article_id);
+
+    $tags_html = '';
+    if ($tags_results != null) {
+        $tags_html .= '<div class="tag_row">';
+
+        while ($row = $tags_results->fetch_assoc())
+            $tags_html .= '<a href="/articles.php?view=filter&tag=' . $row['tag'] . '" class="tag">#' . $row['tag'] . '</a>';
+
+        $tags_html .= '</div>';
+    }
+
+    $author = exec_stmt('SELECT user_id, username, profile_picture FROM user WHERE user_id = ?', 'i', $article['author_id'])->fetch_assoc();
+
+    $card = '
+        <div class="article_card">
+            <div class="row">
+                <h4>' . $article['title'] . '</h4>
+                <div class="card_info_box">
+                    <div class="col-right">
+                        <a href="user.php?action=view&user_id=' . $author['user_id'] . '">Written by: ' . $author['username'] . '</a>
+                        <small>Published: ' . $article['published_at'] . '</small>
+                        <small>Updated: ' . $article['updated_at'] . '</small>
+                    </div>
+                    <div class="card_pic_box">
+                        <img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $author['profile_picture'] . '" class="card_profile_picture">
+                    </div>
+                </div>
+            </div>
+            <div class="line"></div>
+            <p>' . $article['excerpt'] . '</p>
+            <div class="row">
+                <a href="/articles.php?view=read&article_id=' . $article['article_id'] . '" class="button">Read More</a>
+                <div class="tag_box">' . $tags_html . '</div>
+            </div>
+        </div>
+    ';
+
+    return $card;
+}

components/article/compose_preview.php

@@ -0,0 +1,12 @@
+<?php
+function preview()
+{
+    $preview = '
+    <div class="full-height">
+        <div class="form_card" id="md_preview">
+        </div>
+    </div>
+  ';
+
+    return $preview;
+}

components/article/compose_view.php

@@ -0,0 +1,36 @@
+<?php
+
+function compose_view($article_id = null)
+{
+    if (!empty($article_id)) {
+        $conn = get_connection();
+        $stmt = $conn->prepare('SELECT * FROM article WHERE article_id = ?');
+        $stmt->bind_param('i', $article_id);
+        $stmt->execute();
+        $article = $stmt->get_result()->fetch_assoc();
+
+        $stmt = $conn->prepare('SELECT tag_id FROM article_tags WHERE article_id = ?');
+        $stmt->bind_param('i', $article_id);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $tags = [];
+        while ($row = $result->fetch_assoc())
+            $tags[] = $row['tag_id'];
+
+        $title = $article['title'];
+        $excerpt = $article['excerpt'];
+        $existing_markdown = read_file_one_string($_ENV['ARTICLES_FQ_PATH'] . $article_id . '/article.md');
+    }
+
+    $view = '
+      <div class="grid-2x1">
+      ' . (!empty($existing_markdown) ? form($article_id, $title, $excerpt, $existing_markdown, $tags) : form()) . '
+      ' . preview() . '
+    ';
+
+    $view .= preview() . '
+      </div>
+    ';
+
+    return $view;
+}

components/article/composer.php

@@ -0,0 +1,46 @@
+<?php
+function form($article_id = null, $title = null, $excerpt = null, $existing_markdown = null, $tags = null)
+{
+    $raw_tags = article_tags();
+    $tags_boxes = '
+      <div class="checkboxes">
+        <label>Tags</label>
+    ';
+
+    foreach ($raw_tags as $row) {
+        $tags_boxes .= '
+          <label class="form_checkbox_container">' . $row['tag'] . '
+            <input name="tags[]" value="' . $row['tag_id'] . '" type="checkbox"' . (isset($tags) && in_array($row['tag_id'], $tags) ? ' checked' : '') . '>
+            <span class="checkmark"></span>
+          </label>
+        ';
+    }
+
+    $tags_boxes .= '
+      </div>
+    ';
+
+    $form = '
+<div class="full-height">
+  <div class="form_card" id="composer">
+    <form method="post">
+      <input type="hidden" name="form_id" value="compose">
+      ' . (isset($article_id) ? '<input type="hidden" name="article_id" value="' . $article_id . '">' : '') . '
+
+      <label for="title">Title</label>
+      <input id="title" name="title" placeholder="Article Title" required' . (isset($title) ? ' value="' . $title . '"' : '') . '>
+      
+      <label for="markdown">Markdown</label>
+      <textarea id="markdown" name="markdown" required>' . (isset($existing_markdown) ? $existing_markdown : '') . '</textarea>
+
+      <label for="excerpt">Excerpt</label>
+      <input id="excerpt" name="excerpt" placeholder="Article Excerpt"' . (isset($excerpt) ? 'value="' . $excerpt . '"' : '') . '>
+' . $tags_boxes . '
+      <input class="button" type="submit" value="' . (isset($article_id) ? 'Update Article' : 'Create Article') . '">
+    </form>
+  </div>
+</div>
+';
+
+    return $form;
+}

components/article/list.php

@@ -0,0 +1,55 @@
+<?php
+function article_list($list = null)
+{
+    $content = '';
+    $filters = '
+        <form method="get" action="articles.php">
+            <input type="hidden" name="view" value="sort">
+            <div class="row_no_margin">
+    ';
+
+    if (!isset($_GET['sort']) || $_GET['sort'] == 'newest') {
+        $ids = article_ids_by_newest();
+        $filters .= '
+            <p>Newest - Oldest</p>
+            <label for="recency_desc"><i class="nf nf-md-sort_clock_descending_outline"></i>
+                <input id="recency_desc" type="radio" name="sort" value="oldest" onclick="this.form.submit()">
+            </label>
+        ';
+    } else if ($_GET['sort'] == 'oldest') {
+        $ids = article_ids_by_oldest();
+        $filters .= '
+            <p>Oldest - Newest</p>
+            <label for="recency_asc"><i class="nf nf-md-sort_clock_ascending_outline"></i>
+                <input id="recency_asc" type="radio" name="sort" value="newest" onclick="this.form.submit()">
+            </label>
+        ';
+    }
+
+    $filters .= '
+            </div>
+        </form>
+    ';
+
+    $content .= '
+    <div class="article_cards_grid">
+        <div class="article_filters">
+            ' . $filters . '
+        </div>
+        <div class="article_cards">
+    ';
+
+    if (!isset($list))
+        foreach ($ids as $id)
+            $content .= article_card($id);
+    else
+        foreach ($list as $id)
+            $content .= article_card($id);
+
+    $content .= '
+        </div>
+    </div>
+    ';
+
+    return $content;
+}

components/foot.php

@@ -21,37 +21,42 @@ function get_args_from_url()
 if ($_SERVER['SCRIPT_NAME'] == '/user.php') {
     $args = get_args_from_url();
 
-    if (isset($args['action'])) {
-        if ($args['action'] == 'signup') {
+    if (isset($args['view'])) {
+        if ($args['view'] == 'signup') {
             echo '
-  <script src="js/profile_picture_cropper_modal.js"></script>
-  <script src="js/upload.js"></script>
-        ';
-        } else if ($args['action'] == 'view') {
+              <script src="js/profile_picture_cropper_modal.js"></script>
+              <script src="js/upload.js"></script>
+            ';
+        } else if ($args['view'] == 'display') {
             echo '
-  <script src="js/user_actions_modal.js"></script>
-  <script src="js/profile_picture_cropper_modal.js"></script>
-  <script src="js/upload.js"></script>
+              <script src="js/user_actions_modal.js"></script>
+              <script src="js/upload.js"></script>
             ';
         }
     }
 } else if ($_SERVER['SCRIPT_NAME'] == '/admin.php') {
     echo '
-  <script src="js/clickable_rows.js"></script>
+      <script src="js/clickable_rows.js"></script>
     ';
     $args = get_args_from_url();
 
     if (isset($args['view'])) {
         if ($args['view'] == 'users') {
             echo '
-  <script src="js/upload.js"></script>
-        ';
+              <script src="js/upload.js"></script>
+            ';
+        }
+    }
+} else if ($_SERVER['SCRIPT_NAME'] == '/articles.php') {
+    $args = get_args_from_url();
+
+    if (isset($args['view'])) {
+        if ($args['view'] == 'compose') {
+            echo '
+              <script src="js/md_preview.js"></script>
+            ';
         }
     }
-} else if ($_SERVER['SCRIPT_NAME'] == '/compose.php') {
-    echo '
-    <script src="js/md_preview.js"></script>
-  ';
 }
 ?>
 </footer>

components/nav.php

@@ -6,7 +6,7 @@ $nav = '
       <div class="site_navigation">
         <ul>
           <li><a href="/index.php"' . ($current_page == '/index.php' ? ' class="underline"' : '') . '>Home</a></li>
-          <li><a href="/articles.php?sort=newest"' . ($current_page == '/articles.php' ? ' class="underline"' : '') . '>Articles</a></li>
+          <li><a href="/articles.php?view=sort&sort=newest"' . ($current_page == '/articles.php' ? ' class="underline"' : '') . '>Articles</a></li>
 ';
 
 if (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 2) {
@@ -17,13 +17,7 @@ if (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 2) {
 
 if (isset($_COOKIE['user_id'])) {
     $nav .= '
-          <li><a href="/user.php?action=view&user_id=' . $_COOKIE['user_id'] . '"' . ($current_page == '/user.php' ? ' class="underline"' : '') . '>Account</a></li>
-    ';
-}
-
-if (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 3) {
-    $nav .= '
-          <li><a href="/compose.php"' . ($current_page == '/compose.php' ? ' class="underline"' : '') . '>Compose</a></li>
+          <li><a href="/user.php?view=display&user_id=' . $_COOKIE['user_id'] . '"' . ($current_page == '/user.php' ? ' class="underline"' : '') . '>Account</a></li>
     ';
 }
 

components/user/delete_account.php

@@ -0,0 +1,24 @@
+<?php
+function delete_account_form()
+{
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Delete Account</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="delete_account_form">
+                <input type="hidden" name="user_id" value="' . $_GET['user_id'] . '">
+
+                <label for="delete_password">Password</label>
+                <input id="delete_password" name="delete_password" type="password" required>
+
+                <label for="delete_verify_password">Verify Password</label>
+                <input id="delete_verify_password" name="delete_verify_password" type="password" required>
+            
+                <input type="submit" class="button" value="Delete Account">
+            </form>
+        </div>
+    ';
+
+    return $form;
+}

components/user/login.php

@@ -0,0 +1,28 @@
+<?php
+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">
+
+                <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;
+}

components/user/profile_cropper.php

@@ -0,0 +1,22 @@
+<?php
+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;
+}

components/user/request_role_change.php

@@ -0,0 +1,33 @@
+<?php
+function request_role_change_form()
+{
+    $conn = get_connection();
+    $result = $conn->query('SELECT * FROM roles WHERE role_id <> 1');
+
+    $roles = '<div class="checkboxes">';
+    while ($row = $result->fetch_assoc()) {
+        $roles .= '
+            <label class="form_checkbox_container">' . $row['role'] . '
+                <input name="requested_role" value="' . $row['role_id'] . '" type="radio"' . ($row['role_id'] == $_COOKIE['role_id'] ? ' checked' : '') . '>
+                <span class="checkmark"></span>
+            </label>
+        ';
+    }
+
+    $roles .= '</div>';
+
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Request Role</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="request_role_change_form">
+                ' . $roles . '
+            
+                <input type="submit" class="button" value="Request Role">
+            </form>
+        </div>
+    ';
+
+    return $form;
+}

components/user/reset_password.php

@@ -0,0 +1,24 @@
+<?php
+function reset_pw_form()
+{
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Reset Password</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="reset_pw_form">
+                <input type="hidden" name="user_id" value="' . $_GET['user_id'] . '">
+
+                <label for="new_pw">New Password</label>
+                <input id="new_pw" name="new_pw" type="password" required>
+
+                <label for="verify_new_pw">Verify New Password</label>
+                <input id="verify_new_pw" name="verify_new_pw" type="password" required>
+            
+                <input type="submit" class="button" value="Reset Password">
+            </form>
+        </div>
+    ';
+
+    return $form;
+}

components/user/signup.php

@@ -0,0 +1,50 @@
+<?php
+function signup_form($error_msg = '')
+{
+    $form = '
+        <div class="form_card">
+            <h3 class="underline">Sign Up</h3>
+            <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">
+                <input name="required_field" id="required_field" value="">
+
+                <label for="username">Username</label>
+                <input id="username" name="username" required>
+
+                <label for="email">Email Address</label>
+                <input id="email" name="email" required>
+
+                <label for="password">Password</label>
+                <input id="password" name="password" type="password" required>
+
+                <label for="verify_password">Verify Password</label>
+                <input id="verify_password" name="verify_password" type="password" required>
+
+                <label for="profile_picture_input" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
+                <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?
+                    <input name="stay_logged_in" type="checkbox" value="true">
+                    <span class="checkmark"></span>
+                </label>
+
+                <input class="button" type="submit" value="Sign Up">
+                ' . $error_msg . '
+            </form>
+
+            <div id="modal" class="modal">
+                <div id="display_modal"></div>
+            </div>
+
+            <div style="display: none;">
+                <div id="profile_cropper" class="modal_form">' . profile_cropper() . '</div>
+            </div>
+        </div>
+    ';
+
+    return $form;
+}

components/user/update_email.php

@@ -0,0 +1,24 @@
+<?php
+function update_email_form()
+{
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Update Email</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="update_email_form">
+                <input type="hidden" name="user_id" value="' . $_GET['user_id'] . '">
+
+                <label for="new_email">New Email</label>
+                <input id="new_email" name="new_email" required>
+
+                <label for="verify_new_email">Verify New Email</label>
+                <input id="verify_new_email" name="verify_new_email" required>
+            
+                <input type="submit" class="button" value="Update Email">
+            </form>
+        </div>
+    ';
+
+    return $form;
+}

components/user/update_profile_picture.php

@@ -0,0 +1,33 @@
+<?php
+function update_profile_picture_form()
+{
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Update Profile Picture</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="update_profile_picture_form">
+                <input type="hidden" name="user_id" value="' . $_GET['user_id'] . '">
+                <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="profile_picture_input" class="upload_button modal_button" id="profile_cropper_button">Upload a Profile Picture</label>
+                <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 Profile Picture">
+            </form>
+
+            <div id="modal" class="modal">
+                <div id="display_modal"></div>
+            </div>
+
+            <div style="display: none;">
+                <div id="profile_cropper" class="modal_form">' . profile_cropper() . '</div>
+            </div>
+        </div>
+    ';
+
+    return $form;
+}

components/user/update_username.php

@@ -0,0 +1,24 @@
+<?php
+function update_username_form()
+{
+    $form = '
+        <div class="form_card">
+            <h5 class="underline">Update Username</h5>
+            <span class="modal_close">&times;</span>
+            <form method="post">
+                <input type="hidden" name="form_id" value="update_username_form">
+                <input type="hidden" name="user_id" value="' . $_GET['user_id'] . '">
+
+                <label for="new_username">New Username</label>
+                <input id="new_username" name="new_username" required>
+
+                <label for="verify_new_username">Verify New Username</label>
+                <input id="verify_new_username" name="verify_new_username" required>
+            
+                <input type="submit" class="button" value="Update Username">
+            </form>
+        </div>
+    ';
+
+    return $form;
+}

components/user/user_view.php

@@ -0,0 +1,59 @@
+<?php
+function user_view($user_id)
+{
+    $user = exec_stmt('SELECT user_id, username, email, role_id, created_at, last_active, is_active, profile_picture FROM user WHERE user_id = ?', 'i', $user_id)->fetch_assoc();
+    if ($user == null)
+        header('Location: articles.php');
+
+    $view = '
+    <div class="user_view">
+        <div class="row">
+            <h1>' . $user['username'] . '</h1>
+            <div class="card_pic_box">
+                <img src="' . $_ENV['PROFILE_IMAGES_PQ_PATH'] . $user['profile_picture'] . '" class="profile_picture" />
+            </div>
+        </div>
+        <div class="line"></div>
+    ';
+
+    // TODO: Allow user to update profile picture.
+    // <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>
+            <div class="user_actions">
+                <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="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>
+
+            <div id="user_actions_modal" class="modal">
+                <div id="modal_content"></div>
+            </div>
+
+            <div style="display: none;">
+                <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="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>
+        </div>
+        ';
+    } else {
+        $ids = articles_ids_by_author($_GET['user_id']);
+        $view .= '
+            <div class="article_cards">
+        ';
+
+        foreach ($ids as $id)
+            $view .= article_card($id);
+
+        $view .= '</div>';
+    }
+
+    return $view;
+}