rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added in editor login feature to login into editor

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-07-29 20:00:36 +01:00
parent 315a0484b0
commit 90a3e4f533
31 changed files with 831 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.php
+66 -24
View File
@@ -1,4 +1,5 @@
<?php
session_start();
////////////////// Index file //////////////
/// Creates base routes and runs ///
@@ -8,13 +9,16 @@ session_start();
require "../vendor/autoload.php";
include "timelineData.php";
include "projectData.php";
include "user.php";
use api\projectData;
use api\timelineData;
use api\user;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Selective\SameSiteCookie\SameSiteCookieConfiguration;
use Slim\Factory\AppFactory;
use Selective\SameSiteCookie\SameSiteCookieMiddleware;
use Slim\Handlers\Strategies\RequestHandler;
// Start slim
$app = AppFactory::create();
@@ -29,42 +33,38 @@ $app->add(new SameSiteCookieMiddleware($ssConfig));
// for error checking
$errorMiddleware = $app->addErrorMiddleware(true, true, true);
// set base path for all routes
$app->setBasePath("/api");
// return all responses as JSON
$app->add(function($request, $handler) {
$response = $handler->handle($request);
return $response->withHeader('Content-Type', 'application/json');
});
$timelineData = new timelineData();
$projectData = new projectData();
$user = new user();
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
{
global $timelineData;
$json = $result = "";
//check if route is available if it is get the data
//otherwise return an error
if($args["timeline"] == "edu")
{
$result = $timelineData->getEduData();
return $response->getBody()->write(json_encode($timelineData->getEduData()));
}
else if($args["timeline"] == "work")
if($args["timeline"] == "work")
{
$result = $timelineData->getWorkData();
return $response->getBody()->write(json_encode($timelineData->getWorkData()));
}
else
{
$result = array(array("errorMessage" => "Error, timeline data not found"));
}
$json = json_encode($result);
$response->getBody()->write($json);
//if it is an error give a 404 code since it can't find the data
if(array_key_exists("errorMessage", $result))
{
$response = $response->withStatus(404);
}
//use content type json to indicate json data on frontend.
return $response->withHeader("Content-Type", "application/json");
// something went wrong
$response->getBody()->write(json_encode(array("errorMessage" => "Error, timeline data not found")));
return $response->withStatus(404);
});
$app->get('/projectData', function (Request $request, Response $response)
@@ -83,7 +83,7 @@ $app->get('/projectData', function (Request $request, Response $response)
}
//use content type json to indicate json data on frontend.
return $response->withHeader("Content-Type", "application/json");
return $response;
});
$app->post('/contact', function (Request $request, Response $response)
@@ -92,15 +92,14 @@ $app->post('/contact', function (Request $request, Response $response)
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
{
$response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
$response = $response->withStatus(400);
return $response->withHeader("Content-Type", "application/json");
return $response->withStatus(400);
}
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
{
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
$response = $response->withStatus(400);
return $response->withHeader("Content-Type", "application/json");
return $response;
}
// email form filler/conatcter
@@ -260,4 +259,47 @@ $app->post('/contact', function (Request $request, Response $response)
return $response->withStatus(201);
});
$app->post('/user/login', function (Request $request, Response $response) {
global $user;
// get request data
$data = $request->getParsedBody();
if (empty($data["username"]) || empty($data["password"]))
{
// uh oh user sent empty data
return $response->withStatus(400);
}
if ($user->checkUser($data["username"], $data["password"]))
{
// yay user is logged in
$_SESSION["token"] = $user->createToken();
$_SESSION["username"] = $data["username"];
return $response;
}
return $response->withStatus(401);
});
$app->get('/user/isLoggedIn', function (Request $request, Response $response) {
global $user;
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
{
// uh oh user not logged in
return $response->withStatus(401);
}
if (empty($_SESSION["token"]))
{
// user is logged in but no token was created
$_SESSION["token"] = $user->createToken();
return $response;
}
return $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
});
$app->run();
src/api/projectData.php
+2 -5
View File
@@ -10,7 +10,7 @@ require_once "./config.php";
*/
class projectData
{
function getProjectData()
function getProjectData(): array
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, githubLink FROM projects order by date LIMIT 4;");
@@ -23,9 +23,6 @@ class projectData
{
return $result;
}
else
{
return array(array("errorMessage" => "Error, project data not found"));
}
return array("errorMessage" => "Error, project data not found");
}
}
src/api/timelineData.php
+4 -10
View File
@@ -10,7 +10,7 @@ require_once "./config.php";
*/
class timelineData
{
function getEduData()
function getEduData(): array
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, grade, course FROM edu ORDER BY startPeriod DESC;");
@@ -23,13 +23,10 @@ class timelineData
{
return $result;
}
else
{
return array("errorMessage" => "Error, edu data not found");
}
return array("errorMessage" => "Error, edu data not found");
}
function getWorkData()
function getWorkData(): array
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title FROM work ORDER BY work.startPeriod DESC;");
@@ -42,10 +39,7 @@ class timelineData
{
return $result;
}
else
{
return array("errorMessage" => "Error, work data not found");
}
return array("errorMessage" => "Error, work data not found");
}
src/api/user.php
+38
View File
@@ -0,0 +1,38 @@
<?php
namespace api;
use PDO;
require_once "./config.php";
/**
* User Class
* Define all functions which either check, update or delete user data
*/
class user
{
function checkUser($username, $password): bool
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT * FROM users WHERE username = :username");
$stmt->bindParam(":username", $username);
$stmt->execute();
// set the resulting array to associative
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($result)
{
if (password_verify($password, $result[0]["password"]))
{
return true;
}
return false;
}
return false;
}
function createToken(): string
{
return uniqid("rpe-");
}
}
src/css/contact.css
-90
View File
@@ -66,96 +66,6 @@ div#sayHello #contactForm{
gap: 1em;
}
#contactForm .formControl {
width: 100%;
}
#contactForm input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
#contactForm .formControl textarea {
padding: 0.5em;
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
#contactForm .formControl input:not([type="submit"]) {
height: 3em;
}
#contactForm .flName {
display: flex;
flex-direction: row;
gap: 1em;
}
#contactForm .formControl {
width: 100%;
}
#contactForm input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
#contactForm .formControl textarea {
padding: 0.5em;
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
#contactForm .formControl input:not([type="submit"]) {
height: 3em;
}
div.message {
background: var(--primaryDefault);
color: #FFFFFF;
src/css/main.css
-28
View File
@@ -10,34 +10,6 @@
@import "contact.css";
@import "footer.css";
/****** Root Style ******/
:root {
/* Colours */
--mainHue: 79;
--mainSat: 62%;
--mainLight: 51%;
--primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
--primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
--errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
--errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
--grey: hsla(0, 0%, 39%, 1);
--notAvailableDefault: hsla(0, 0%, 39%, 1);
--notAvailableHover: hsla(0, 0%,32%, 1);
--mutedGrey: hsla(0, 0%, 78%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25);
--navBack: hsla(0, 0%, 30%, 1);
/* Font Sizes */
--titleFS: 2.25rem;
--generalFS: 1.125rem;
--headingFS: 1.5rem;
}
*{
box-sizing: border-box;
}
/**** Media Queries *****/
@media screen and (max-width: 90em) {
src/css/templateStyles.css
+113 -1
View File
@@ -1,4 +1,33 @@
/*** Template Styles ****/
/*** Template Styles ***/
/*** Root Style ***/
:root {
/* Colours */
--mainHue: 80;
--mainSat: 60%;
--mainLight: 50%;
--primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
--primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
--errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
--errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
--grey: hsla(0, 0%, 39%, 1);
--notAvailableDefault: hsla(0, 0%, 39%, 1);
--notAvailableHover: hsla(0, 0%,32%, 1);
--mutedGrey: hsla(0, 0%, 78%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25);
--navBack: hsla(0, 0%, 30%, 1);
/* Font Sizes */
--titleFS: 2.25rem;
--generalFS: 1.125rem;
--headingFS: 1.5rem;
}
*{
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
@@ -88,6 +117,89 @@ a.btn:active, form input[type="submit"]:active {
text-shadow: 0 6px 4px var(--mutedBlack);
}
form .formControl {
width: 100%;
}
form input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
form .formControl input:not([type="submit"]), form .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
form .formControl textarea {
padding: 0.5em;
}
form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
form .formControl input:not([type="submit"]).invalid:invalid:focus, form .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
form .formControl input:not([type="submit"]) {
height: 3em;
}
form .formControl {
width: 100%;
}
form input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
form .formControl input:not([type="submit"]), form .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
form .formControl textarea {
padding: 0.5em;
}
form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
form .formControl input:not([type="submit"]).invalid:invalid:focus, form .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
form .formControl input:not([type="submit"]) {
height: 3em;
}
section#about, section#curriculumVitae h1 {
padding: 0 5rem;
}
src/editor/css/login.css
+100
View File
@@ -0,0 +1,100 @@
/*** Login Styles ***/
h1 {
text-transform: none;
}
html, body {
height: 100%;
}
main {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: radial-gradient(var(--primaryDefault), hsl(80, 50%, 30%));
}
div#login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
padding: 2em 5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
box-shadow: 0 6px 4px 0 var(--mutedBlack);
}
div#login form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
}
div#login #password {
font-family: Verdana, serif;
letter-spacing: 0.125em;
}
div#login input[type=submit]{
margin: 0;
}
div.error {
background: var(--errorDefault);
color: #FFFFFF;
padding: 0.5em 0.8em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
align-self: flex-start;
flex-direction: row-reverse;
position: relative;
height: 75px;
visibility: visible;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
opacity: 1;
margin-top: 1em;
}
div.error button {
border: none;
background: none;
outline: none;
cursor: pointer;
color: #FFFFFF;
font-size: 1.25rem;
margin-top: -5px;
position: absolute;
transform: translate(0, 0);
transform-origin: 0 0;
right: 10px;
top: 10px;
}
div.error.hidden {
opacity: 0;
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}
div.error button:hover {
text-shadow: -1px 2px var(--mutedBlack);
}
src/editor/css/main.css
+8
View File
@@ -0,0 +1,8 @@
/******** Imports *******/
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "../../css/templateStyles.css";
@import "login.css";
/*other styles*/
src/editor/editor.html
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
</head>
<body>
<h1>Editor</h1>
<script src="js/editor.js"></script>
</body>
</html>
src/editor/index.html
+36
View File
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<div id="login">
<h1>Login To Editor</h1>
<form action="" method="POST">
<div class="formControl">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="formControl">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="error hidden" id="loginError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
<input type="submit" value="Submit">
</form>
</div>
</main>
<script src="js/index.js"></script>
</body>
</html>
src/editor/js/editor.js
+12
View File
@@ -0,0 +1,12 @@
document.addEventListener('DOMContentLoaded', e =>
{
// check if the user is logged in, if not redirect to login
fetch('/api/user/isLoggedIn').then(res =>
{
if (!res.ok)
{
window.location.href = './';
}
});
})
src/editor/js/index.js
+54
View File
@@ -0,0 +1,54 @@
document.addEventListener("DOMContentLoaded", e =>
{
// check if the user is logged in and if so load the editor
fetch("/api/user/isLoggedIn").then(res =>
{
if (res.ok)
{
window.location.href = "./editor.html";
}
});
});
function showErrorMessage(message)
{
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerText = message;
}
document.querySelector("#login form").addEventListener("submit", e =>
{
e.preventDefault();
let loginData = new FormData();
if (e.target.username.value.length > 0 && e.target.password.value.length > 0)
{
loginData.append("username", e.target.username.value);
loginData.append("password", e.target.password.value);
fetch("/api/user/login",
{
method: "POST",
body: loginData
}).then(res =>
{
if (res.ok)
{
window.location.href = "./editor.html";
return;
}
if (res.status === 400)
{
showErrorMessage("Please type in a username and password.");
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Invalid username or password";
});
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Please type in a username and password";
});
document.querySelector("#loginError .close").addEventListener("click", () =>
document.querySelector("#loginError").classList.toggle("hidden"));