spaces/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented article composer functionality + interface, login & signup functionality + interface, auth permission functionality reflected in the nav, and determined a unified accent color accessible in dark and light mode

Browse Source
This commit is contained in:
Joshua Ashton
2025-03-25 13:09:05 -06:00
parent c0fc9e9d00
commit 0a27cd1f5c
11 changed files with 624 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/nav.php
+28 -3
View File
@@ -7,9 +7,19 @@ $nav = '
<ul>
<li><a href="/index.php"' . ($current_page == '/index.php' ? ' class="underline"' : '') . '>Home</a></li>
<li><a href="/articles.php"' . ($current_page == '/articles.php' ? ' class="underline"' : '') . '>Articles</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>
';
}
$nav .= '
</ul>
</div>
<form method="post">
<div class="nav_right_hand">
<form method="post">
';
$theme_toggle = '';
@@ -19,8 +29,23 @@ else
$theme_toggle = 'dark';
$nav .= '
<button id="theme-toggle" value="' . $theme_toggle . '" name="theme" onchange="this.form.submit()"><i class="nf ' . ($theme_toggle == 'dark' ? 'nf-oct-moon' : 'nf-oct-sun') . '"></i></button>
</form>
<button id="theme-toggle" value="' . $theme_toggle . '" name="theme" onchange="this.form.submit()"><i class="nf ' . ($theme_toggle == 'dark' ? 'nf-oct-moon' : 'nf-oct-sun') . '"></i></button>
</form>
';
if (isset($_COOKIE['username'])) {
$nav .= '
<a href="user.php?action=logout">Log Out</a>
';
} else {
$nav .= '
<a href="user.php?action=login">Login</a>
<a href="user.php?action=signup">Sign Up</a>
';
}
$nav .= '
</div>
</div>
</nav>
';
compose.php
+55 -1
View File
@@ -1,7 +1,61 @@
<?php
require_once 'functions/init.php';
require_once 'functions/functions.php';
include_once 'components/head.php';
include_once 'functions/article_functions.php';
if (!empty($_POST)) {
$id = create_article(2025, $_POST['title'], $_POST['excerpt'], $_POST['tags'], $_POST['markdown']);
header('Location: articles.php?article_id=' . $id);
}
include_once 'components/head.php';
echo form();
include_once 'components/foot.php';
function form()
{
$raw_tags = article_tags();
$tags = '
<div class="form_tags">
<label>Tags</label>
';
foreach ($raw_tags as $row) {
$tags .= '
<label class="form_checkbox_container">' . $row['tag'] . '
<input name="tags[]" value="' . $row['tag_id'] . '" type="checkbox">
<span class="checkmark"></span>
</label>
';
}
$tags .= '
</div>
';
$form = '
<div class="form_card">
<form method="post">
<label for="title">Title</label>
<input id="title" name="title" placeholder="Article Title" required>
<label for="markdown">Markdown</label>
<textarea id="markdown" name="markdown" required>
## Heading
vintagecoding.net uses markdown for articles. This means:
- Simple syntax for formatting
- Pre-built styling
- Markdown can be parsed into HTML.
</textarea>
<label for="excerpt">Excerpt</label>
<input id="excerpt" name="excerpt" placeholder="Article Excerpt">
' . $tags . '
<input class="button" type="submit" value="Create Article">
</form>
</div>
';
return $form;
}
css/base.css
+175 -8
View File
@@ -10,7 +10,9 @@
margin: 0;
}
body {}
body {
padding-bottom: 50px;
}
h1,
h2,
@@ -19,6 +21,9 @@ h4,
h5,
p,
small,
label,
input,
textarea,
a {
font-family: 'HackNerdFontMono', Hack, sans-serif;
padding: 0;
@@ -42,15 +47,22 @@ h4 {
}
h5 {
font-size: 1.5vw;
}
p,
a,
label {
font-size: 1vw;
}
p {
small {
font-size: .75vw;
}
small {
font-size: .5vw;
a {
color: orange;
transition-duration: 1s;
}
a.fill_div {
@@ -84,6 +96,12 @@ nav ul li a {
height: 100%;
width: 100%;
padding: 15px;
transition-duration: 500ms;
}
nav ul li a:hover {
color: orange;
}
nav form {
@@ -95,6 +113,17 @@ nav form {
justify-content: center;
}
.nav_right_hand {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.nav_right_hand * {
margin: 0px 15px 0px 15px;
}
code {
padding: 1px;
border-radius: 4px;
@@ -126,7 +155,8 @@ code {
margin: 0 auto;
}
.article_card {
.article_card,
.form_card {
margin: 0 auto;
margin-top: 50px;
padding: 18px;
@@ -140,6 +170,14 @@ code {
justify-content: center;
}
.form_card {
width: 40%;
}
.form_card form {
width: 80%;
}
.card_info_box {
display: flex;
}
@@ -160,17 +198,20 @@ code {
}
.button {
font-size: 1vw;
background-color: transparent;
padding: 15px;
text-decoration: none;
border: 2px solid #00FF41;
border-radius: 9px;
border-radius: 12px;
transition-duration: 1s;
border: 3px solid orange;
}
.tag {
margin: 15px;
padding: 10px;
border-radius: 18px;
border: 2px solid #008F11;
border: 2px solid orange;
text-decoration: none;
}
@@ -191,6 +232,8 @@ code {
.underline {
text-decoration: underline;
text-decoration-thickness: 3px;
text-decoration-color: orange;
}
#theme-toggle {
@@ -201,6 +244,14 @@ code {
font-size: 1.5vw;
}
#theme-toggle * {
transition-duration: 500ms;
}
#theme-toggle *:hover {
color: orange;
}
.article {
width: 50%;
margin: 0 auto;
@@ -210,6 +261,122 @@ code {
margin-left: 50px;
}
#compose {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: left;
}
input,
textarea {
border-radius: 12px;
width: 100%;
padding: 15px;
margin: 15px 15px 15px 0px;
box-sizing: border-box;
transition-duration: 500ms;
}
input:focus,
textarea:focus,
input:hover,
textarea:hover {
border: 3px solid orange;
outline: none;
}
textarea {
border-radius: 18px;
height: 500px;
}
.form_tags {}
.form_checkbox_container {
display: block;
position: relative;
padding-left: 35px;
margin: 15px 15px 15px 0px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 29px;
width: max-content;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
}
.form_checkbox_container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.form_checkbox_container input:checked~.checkmark:after {
display: block;
}
/* When the checkbox is checked, add a blue background */
.form_checkbox_container input:checked~.checkmark {
background-color: orange;
}
/* Style the checkmark/indicator */
.form_checkbox_container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="file"] {
display: none;
}
.upload_button {
border-radius: 12px;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
.error {
color: red;
border: 3px solid red;
border-radius: 12px;
padding: 15px;
margin: 15px 15px 15px 0px;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 980px) {
h1 {
font-size: 4vw;
css/dark.css
+39 -2
View File
@@ -1,3 +1,7 @@
* {
color: white;
}
body {
background-color: black;
}
@@ -9,7 +13,11 @@ h4,
h5,
p,
small,
a {
label {
color: white;
}
a:hover {
color: white;
}
@@ -17,6 +25,10 @@ nav {
border-bottom: 3px solid white;
}
nav ul li a {
color: white;
}
code {
background-color: #2F2F2F;
}
@@ -26,7 +38,8 @@ code {
border-top: 1px solid white;
}
.article_card {
.article_card,
.form_card {
border: 5px solid white;
}
@@ -34,6 +47,11 @@ code {
color: white;
}
.button:hover {
color: black;
background-color: white;
}
.tag {
color: white;
}
@@ -45,3 +63,22 @@ code {
.article ul li {
color: white;
}
input,
textarea {
background-color: transparent;
color: white;
border: 3px solid white;
}
.checkmark {
border: 2px solid white;
}
.form_checkbox_container:hover input~.checkmark {
background-color: white;
}
.upload_button {
border: 3px solid white;
}
css/light.css
+43 -23
View File
@@ -1,32 +1,23 @@
* {
color: black;
}
body {
background-color: white;
}
h1 {
h1,
h2,
h3,
h4,
h5,
p,
small,
label {
color: black;
}
h2 {
color: black;
}
h3 {
color: black;
}
h4 {
color: black;
}
h5 {
color: black;
}
p {
color: black;
}
small {
a:hover {
color: black;
}
@@ -38,12 +29,17 @@ nav ul li a {
color: black;
}
code {
background-color: #C6C6C6;
}
.line {
background-color: black;
border-top: 1px solid black;
}
.article_card {
.article_card,
.form_card {
border: 5px solid black;
}
@@ -51,6 +47,11 @@ nav ul li a {
color: black;
}
.button:hover {
color: white;
background-color: black;
}
.tag {
color: black;
}
@@ -62,3 +63,22 @@ nav ul li a {
.article ul li {
color: black;
}
input,
textarea {
background-color: transparent;
color: black;
border: 3px solid black;
}
.checkmark {
border: 2px solid black;
}
.form_checkbox_container:hover input~.checkmark {
background-color: black;
}
.upload_button {
border: 3px solid black;
}
functions/account_functions.php
+170
View File
@@ -0,0 +1,170 @@
<?php
require 'db_functions.php';
function user_id_exists($user_id)
{
$query = 'SELECT user_id FROM user WHERE user_id = ' . $user_id . ';';
$result = query_one_result($query);
if ($result == null)
return false;
return true;
}
function auth_level($user_id)
{
$query = 'SELECT role_id FROM user WHERE user_id = ' . $user_id . ';';
$result = query_one_result($query);
$role = $result['role_id'];
return $role;
}
function modify_self()
{
return -1;
}
function delete_self()
{
return -1;
}
function create_account($username, $email, $password, $verify_password, $role_id, $profile_picture)
{
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($profile_picture)) {
$filetype = explode('.', $profile_picture);
$pic_path = $id . $filetype[count($filetype) - 1];
}
$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);
login($username, $password, false);
return true;
}
function login($username, $password, $stay_logged_in)
{
$password_hash = hash('sha256', $password);
$query = 'SELECT user_id, username, email, role_id, profile_picture FROM user WHERE username ="' . $username . '" AND password_hash = "' . $password_hash . '";';
$user = query_one_result($query);
if ($user == null) {
$error_msg = '
<div class="error">
Username and/or Password are invalid!
</div>
';
return $error_msg;
}
if ($stay_logged_in)
$time = time() + 60 * 60 * 24 * 365;
else
$time = time() + 60 * 60 * 24 * 1;
cookies($user, $time);
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 ($_COOKIE as $key => $value) {
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>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>
<a href="user.php?action=signup">Sign Up</a>
<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>Sign Up</h3>
<form method="post">
<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_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 class="form_checkbox_container">Stay Logged In?
<input name="stay_logged_in" type="checkbox" value="true">
<span class="checkmark"></span>
</label>
<a href="user.php?action=login">Log In</a>
<input class="button" type="submit" value="Sign Up">
' . $error_msg . '
</form>
</div>
';
return $form;
}
functions/article_functions.php
+60 -10
View File
@@ -4,7 +4,7 @@ require 'db_functions.php';
function article_ids_by_recency()
{
$query = 'SELECT article_id FROM article ORDER BY published_at DESC;';
$results = query_db_one_or_more_results($query);
$results = query_one_or_more_results($query);
$ids = [];
@@ -14,10 +14,22 @@ function article_ids_by_recency()
return $ids;
}
function article_tags()
{
$query = 'SELECT * FROM tags;';
$results = query_one_or_more_results($query);
$tags = [];
while ($row = mysqli_fetch_array($results))
$tags[] = $row;
return $tags;
}
function article_ids_by_tag($tag_id)
{
$query = 'SELECT article_id FROM article_tags INNER JOIN tags ON article_tags.tag_id = tags.tag_id WHERE tag = "' . $tag_id . '";';
$results = query_db_one_or_more_results($query);
$results = query_one_or_more_results($query);
$ids = [];
@@ -33,12 +45,13 @@ function article_ids_by_tag($tag_id)
function article_page_from_markdown($article_id)
{
$query = 'SELECT * FROM article WHERE article_id = ' . $article_id . ';';
$article = query_db_one_result($query);
$article = 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 .= $parsedown->text($markdown);
$html .= '</div>';
@@ -51,10 +64,10 @@ function article_page_from_markdown($article_id)
function article_card($article_id)
{
$article_query = 'SELECT * FROM article WHERE article_id = ' . $article_id . ';';
$article = query_db_one_result($article_query);
$article = query_one_result($article_query);
$article_tags_query = 'SELECT tag FROM article_tags INNER JOIN tags ON article_tags.tag_id = tags.tag_id WHERE article_id = ' . $article_id . ';';
$tags_results = query_db_one_or_more_results($article_tags_query);
$tags_results = query_one_or_more_results($article_tags_query);
$tags_html = '';
if ($tags_results != null) {
$tags_html .= '<div class="tag_row">';
@@ -66,7 +79,7 @@ function article_card($article_id)
}
$author_query = 'SELECT username, profile_picture FROM user WHERE user_id = ' . $article['author_id'] . ';';
$author = query_db_one_result($author_query);
$author = query_one_result($author_query);
$card = '
<div class="article_card">
@@ -94,7 +107,44 @@ function article_card($article_id)
return $card;
}
/*
* Displays the article creation wizard and opens a new markdown file.
*/
function create_article() {}
function create_article($author_id, $title, $excerpt, $tags, $markdown_file_contents)
{
$stmt = 'INSERT INTO article (author_id, title, excerpt, published_at) VALUES (' . $author_id . ', "' . $title . '", "' . $excerpt . '", CURRENT_TIMESTAMP);';
$id = exec_statement($stmt, 0);
$path = $_ENV['ARTICLES_PATH'] . $id . '/';
mkdir($path);
$fs = fopen($path . 'article.md', 'a');
fwrite($fs, $markdown_file_contents);
fclose($fs);
$stmt = 'INSERT INTO article_tags (article_id, tag_id) VALUES ';
for ($i = 0; $i < count($tags); $i++) {
$stmt .= '(' . $id . ', ' . $tags[$i] . ')';
if ($i < count($tags) - 1)
$stmt .= ', ';
if ($i == count($tags) - 1)
$stmt .= ';';
}
echo $stmt;
pretty_dump($tags);
if (count($tags) > 0)
exec_statement($stmt, 0);
return $id;
}
function delete_article($article_id)
{
$stmt = 'DELETE FROM article WHERE article_id = ' . $article_id . ';';
return exec_statement($stmt, 1);
}
function delete_articles_by_author($author_id)
{
$stmt = 'DELETE FROM article WHERE author_id = "' . $author_id . '";';
return exec_statement($stmt, 1);
}
functions/db_functions.php
+19 -2
View File
@@ -20,7 +20,7 @@ if ($_SERVER['HTTP_HOST'] == 'localhost') {
/*
* Handles any queries that should have only one row results.
*/
function query_db_one_result($query_stmt)
function query_one_result($query_stmt)
{
$conn = get_connection();
$results = mysqli_query($conn, $query_stmt);
@@ -32,7 +32,7 @@ function query_db_one_result($query_stmt)
return mysqli_fetch_assoc($results);
}
function query_db_one_or_more_results($query_stmt)
function query_one_or_more_results($query_stmt)
{
$conn = get_connection();
$results = mysqli_query($conn, $query_stmt);
@@ -44,6 +44,23 @@ function query_db_one_or_more_results($query_stmt)
return $results;
}
/*
* Executes a statement. Type is typically either 0 or 1, where 0 is an INSERT or UPDATE,
* and 1 is DELETE. This is to determine whether a boolean value should be returned or
* the ID of the row(s).
*/
function exec_statement($stmt, $type)
{
$conn = get_connection();
$results = mysqli_query($conn, $stmt);
if ($type == 0)
$results = mysqli_insert_id($conn);
mysqli_close($conn);
return $results;
}
function get_connection()
{
// Connect to the DB
index.php
+2 -3
View File
@@ -1,11 +1,10 @@
<?php
// Initializes environment variables and other stuff.
// if (!isset($_SESSION['initialized']))
require_once 'functions/init.php';
require_once 'functions/functions.php';
include_once 'components/head.php';
echo '<h1>Home</h1>';
include_once 'components/foot.php';
scripts/init.sql
+1 -1
View File
@@ -33,7 +33,7 @@ CREATE TABLE article (
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
published_at TIMESTAMP DEFAULT NULL,
published BOOLEAN DEFAULT FALSE,
published BOOLEAN DEFAULT TRUE,
excerpt VARCHAR(256),
FOREIGN KEY (author_id) REFERENCES user(user_id)
);
user.php
+32
View File
@@ -0,0 +1,32 @@
<?php
require_once 'functions/init.php';
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: .');
}
include_once 'components/head.php';
if ($_GET['action'] == 'login')
echo login_form(($msg ? $msg : ''));
else if ($_GET['action'] == 'signup')
echo signup_form(($msg ? $msg : ''));
else if ($_GET['action'] == 'logout')
logout();
include_once 'components/foot.php';