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

Completed reset password section and added in eye button to toggle between shown and hidden password.

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-09-14 13:35:58 +01:00
parent d8e16e8de1
commit d963904174
14 changed files with 191 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.php
+40 -12
View File
@@ -37,10 +37,10 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
$app->setBasePath("/api");
// return all responses as JSON
$app->add(function($request, $handler) {
/*$app->add(function($request, $handler) {
$response = $handler->handle($request);
return $response->withHeader("Content-Type", "application/json");
});
});*/
$timelineData = new timelineData();
$projectData = new projectData();
@@ -100,8 +100,7 @@ $app->post("/contact", function (Request $request, Response $response)
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;
return $response->withStatus(400);
}
// email form filler/conatcter
@@ -261,7 +260,8 @@ $app->post("/contact", function (Request $request, Response $response)
return $response->withStatus(201);
});
$app->post("/user/login", function (Request $request, Response $response) {
$app->post("/user/login", function (Request $request, Response $response)
{
global $user;
@@ -276,7 +276,7 @@ $app->post("/user/login", function (Request $request, Response $response) {
if ($user->checkUser($data["username"], $data["password"]))
{
// yay user is logged in
// yay, user is logged in
$_SESSION["token"] = $user->createToken();
$_SESSION["username"] = $data["username"];
return $response;
@@ -284,8 +284,8 @@ $app->post("/user/login", function (Request $request, Response $response) {
return $response->withStatus(401);
});
$app->get("/user/isLoggedIn", function (Request $request, Response $response) {
$app->get("/user/isLoggedIn", function (Request $request, Response $response)
{
global $user;
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
@@ -299,9 +299,11 @@ $app->get("/user/isLoggedIn", function (Request $request, Response $response) {
// user is logged in but no token was created
$_SESSION["token"] = $user->createToken();
return $response;
}
}
$response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
return $response;
return $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
});
$app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args)
@@ -339,8 +341,6 @@ $app->get("/user/resendEmail", function (Request $request, Response $response)
$app->get("/user/checkResetCode/{code}", function (Request $request, Response $response, array $args)
{
global $user;
if (empty($args["code"]))
{
// uh oh sent empty data
@@ -352,7 +352,35 @@ $app->get("/user/checkResetCode/{code}", function (Request $request, Response $r
// yay, code code matches
return $response;
}
return $response->withStatus(401);
});
$app->post("/user/changePassword", function (Request $request, Response $response)
{
global $user;
if (empty($_SESSION["resetToken"]) && empty($_SESSION["resetEmail"]))
{
// uh oh not authorized to change password
return $response->withStatus(401);
}
$data = $request->getParsedBody();
if (empty($data["password"]))
{
// uh oh sent empty data
return $response->withStatus(400);
}
if ($user->changePassword($_SESSION["resetEmail"], $data["password"]))
{
// yay, password changed
unset($_SESSION["resetToken"]);
unset($_SESSION["resetEmail"]);
return $response;
}
return $response->withStatus(500);
});
$app->run();
src/api/user.php
+15
View File
@@ -81,4 +81,19 @@ class user
mail($email, "Reset Password Verification Code", $message, $headers1);
return $token;
}
function changePassword($email, $password): bool
{
$conn = dbConn();
$stmt = $conn->prepare("UPDATE users SET password = :password WHERE email = :email");
$newPwd = password_hash($password, PASSWORD_BCRYPT);
$stmt->bindParam(":password", $newPwd);
$stmt->bindParam(":email", $email);
if ($stmt->execute())
{
return true;
}
return false;
}
}
src/css/templateStyles.css
+11 -2
View File
@@ -140,7 +140,6 @@ form .formControl textarea {
padding: 0.5em;
}
form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
@@ -163,7 +162,6 @@ form .formControl {
}
form input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
@@ -199,6 +197,17 @@ form .formControl input:not([type="submit"]) {
height: 3em;
}
form .formControl i.fa-eye, form .formControl i.fa-eye-slash {
margin-left: -40px;
cursor: pointer;
color: var(--primaryDefault);
}
form .formControl input:not([type="submit"]):focus + i.fa-eye,
form .formControl input:not([type="submit"]):focus + i.fa-eye-slash {
color: var(--primaryHover);
}
section#about, section#curriculumVitae h1 {
padding: 0 5rem;
}
src/editor/css/login.css
+1 -5
View File
@@ -18,7 +18,7 @@ main {
}
div.container {
display: flex;
/*display: flex;*/
flex-direction: column;
justify-content: center;
align-items: center;
@@ -129,7 +129,3 @@ div.btnContainer {
div.btnContainer a:not(.btn) {
color: #000000;
}
div.btnContainer a.btn {
align-self: flex-end;
}
src/editor/index.html
+6 -3
View File
@@ -5,7 +5,7 @@
<title>Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
@@ -21,6 +21,7 @@
<div class="formControl">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<i class="fa-solid fa-eye"></i>
</div>
@@ -67,7 +68,7 @@
<input type="text" id="code" name="code">
</div>
<div class="error hidden" id="codeError">
<div class="error hidden" id="resetCodeError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
@@ -85,15 +86,17 @@
<div class="formControl">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass">
<i class="fa-solid fa-eye"></i>
</div>
<div class="formControl">
<label for="rePass">Password</label>
<input type="password" name="rePass" id="rePass">
<i class="fa-solid fa-eye"></i>
</div>
<div class="error hidden" id="changeError">
<button class="close">&times;</button>
<button class="close" type="button">&times;</button>
<div></div>
</div>
src/editor/js/index.js
+56 -1
View File
@@ -61,6 +61,30 @@ document.querySelector("#login form").addEventListener("submit", e =>
document.querySelector("#loginError .close").addEventListener("click", () =>
document.querySelector("#loginError").classList.toggle("hidden"));
document.querySelector("#resetError .close").addEventListener("click", () =>
document.querySelector("#resetError").classList.toggle("hidden"));
document.querySelector("#changeError .close").addEventListener("click", () =>
document.querySelector("#changeError").classList.toggle("hidden"));
document.querySelectorAll("form i.fa-eye").forEach(i =>
{
i.addEventListener("click", e =>
{
if (e.target.previousElementSibling.type === "password")
{
e.target.previousElementSibling.type = "text";
e.target.classList.remove("fa-eye");
e.target.classList.add("fa-eye-slash");
return;
}
e.target.previousElementSibling.type = "password";
e.target.classList.remove("fa-eye-slash");
e.target.classList.add("fa-eye");
});
});
// showing and hiding different forms
document.querySelector("#resetPwd").addEventListener("click", () =>
@@ -105,7 +129,7 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
return;
}
resetCode.append("code", e.target.code.value);
fetch(`/api/user/checkResetCode//${e.target.code.value}`).then(res =>
fetch(`/api/user/checkResetCode/${e.target.code.value}`).then(res =>
{
if (res.ok)
{
@@ -114,5 +138,36 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
}
showErrorMessage("Invalid code.", "resetCode");
});
});
document.querySelector("#changePassword form").addEventListener("submit", e =>
{
e.preventDefault();
let resetPassword = new FormData();
if (e.target.pass.value === "" && e.target.rePass.value === "")
{
showErrorMessage("Please type in a new password.", "change");
return;
}
if (e.target.pass.value !== e.target.rePass.value)
{
showErrorMessage("Passwords do not match.", "change");
return;
}
resetPassword.append("password", e.target.pass.value);
fetch(`/api/user/changePassword`,
{
method: "POST",
body: resetPassword
}).then(res =>
{
if (res.ok)
{
// show login form
switchView("#changePassword", "#login");
}
showErrorMessage("Something went wrong.", "change");
});
});
src/index.html
+2 -2
View File
@@ -37,7 +37,7 @@
<div>
<h1>full stack developer</h1>
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
<a href="#about"><i class="fas fa-chevron-down"></i></a>
<a href="#about"><i class="fa-solid fa-chevron-down"></i></a>
</div>
</header>
@@ -157,7 +157,7 @@
<div class="spacer"></div>
<p>&copy; 2021 Rohit Pai all rights reserved</p>
<div class="button">
<button id="goBackToTop"><i class="fas fa-chevron-up"></i></button>
<button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button>
</div>
</footer>
</main>