Skip to content

Commit

Permalink
Merge pull request #83 from VictoriqueMoe/move-userpanel
Browse files Browse the repository at this point in the history 
Move user control to its own page, restyle navbar
  • Loading branch information
@nakedmcse
nakedmcse authored Mar 3, 2024
2 parents c21682d + 452dca6 commit 0e2dd5f
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 85 deletions.
15 changes: 11 additions & 4 deletions src/controllers/secure/AdminView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ export class AdminView {
@Get("/files")
@Authorize("loginAuthProvider")
@View("/secure/files.ejs")
public showFileAdmin(@Req() req: Req): unknown {
return {
user: req.user as CustomUserInfoModel,
};
public showFileAdmin(): unknown {
return null;
}

@Get("/stats")
Expand All @@ -31,4 +29,13 @@ export class AdminView {
public showStatistics(): unknown {
return null;
}

@Get("/user")
@Authorize("loginAuthProvider")
@View("/secure/user.ejs")
public showUserAdmin(@Req() req: Req): unknown {
return {
user: req.user as CustomUserInfoModel,
};
}
}
80 changes: 2 additions & 78 deletions src/public/secure/files.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,50 +74,9 @@
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12 text-center">
<div class="btn-group" role="group" aria-label="Basic example">
<form method="get" action="/rest/auth/logout" class="d-inline">
<button class="btn btn-outline-primary" type="submit">Logout</button>
</form>
<button class="btn btn-outline-primary" type="button" data-bs-toggle="modal"
data-bs-target="#changeDetailsModel">Change Details
</button>
</div>
</div>
</div>
</div>
<!--modals-->
<div id="modals">
<div class="modal fade" id="changeDetailsModel" tabindex="-1" aria-labelledby="changeDetailsModelLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="changeDetailsModelLabel">Change account details</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="changeDetailsModelInfoContent">
<div class="mb-3">
<label for="changeEmail" class="form-label">Email address</label>
<input type="email" class="form-control" name="email" id="changeEmail" value="<%- user.email; -%>">
</div>
<div class="mb-3">
<label for="changePassword" class="form-label">New Password</label>
<input type="password" class="form-control" name="password" id="changePassword">
</div>
<div class="mb-3">
<label for="changePasswordRepeat" class="form-label">Repeat Password</label>
<input type="password" class="form-control" id="changePasswordRepeat">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" id="changeDetailsModelOk">Ok</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="fileDetailsModel" tabindex="-1" aria-labelledby="fileDetailsModelLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
Expand Down Expand Up @@ -155,6 +114,8 @@
Site.loadPage(async site => {
const dtMap = new Map();
document.getElementById("filesNav").classList.add("active");
function loadDt() {
const detailsModal = new bootstrap.Modal(document.getElementById('fileDetailsModel'), {keyboard: false});
Expand Down Expand Up @@ -513,44 +474,7 @@
});
}
function loadEventListeners() {
((() => {
document.getElementById("changeDetailsModelOk").addEventListener("click", async e => {
const formData = new URLSearchParams();
const email = document.getElementById("changeEmail").value;
const password = document.getElementById("changePassword").value;
const repeatPassword = document.getElementById("changePasswordRepeat").value;
if (!email) {
return alert("Please specify email.");
}
if (!password) {
return alert("password must not be blank.");
}
if (password !== repeatPassword) {
return alert("Passwords do not match.");
}
formData.append("email", email);
formData.append("password", password);
site.loading(true);
try {
await fetch(`${baseUrl}/auth/changeDetails`, {
method: 'POST',
body: formData
});
} catch (e) {
alert(e.message);
return;
} finally {
Site.loading(false);
}
alert("User details changed successfully.");
changeDetailsModal.hide();
});
})());
}
loadDt();
loadEventListeners();
});
</script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions src/public/secure/stats.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
<script>
document.getElementById("statsNav").classList.add("active");
function sizeReadable(data) {
const sizeKB = Math.floor(data / 1024);
const sizeMB = Math.floor(sizeKB / 1024);
Expand Down
84 changes: 84 additions & 0 deletions src/public/secure/user.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head prefix="og: https://ogp.me/ns#">
<%- include('../snippets/head.ejs'); %>
<link href="/assets/custom/css/index.css" rel="stylesheet">
<title>User</title>
</head>
<body>
<div>
<div id="overlay" class="hidden">
<div id="loader" class="hidden"></div>
</div>
</div>
<div class="container mt-4">
<%- include('../snippets/navbar.ejs'); %>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card border-primary mb-3">
<div class="card-header">User Login Details</div>
<div class="card-body">
<div class="mb-3">
<label for="changeEmail" class="form-label">Username</label>
<input type="email" class="form-control" name="email" id="changeEmail" value="<%- user.email; -%>">
</div>
<div class="mb-3">
<label for="changePassword" class="form-label">New Password</label>
<input type="password" class="form-control" name="password" id="changePassword">
</div>
<div class="mb-3">
<label for="changePasswordRepeat" class="form-label">Repeat Password</label>
<input type="password" class="form-control" id="changePasswordRepeat">
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-outline-primary" id="changeDetailsSet">Set Details</button>
</div>
</div>
</div>
</div>
</div>
<%- include('../snippets/scripts.ejs'); %>
<script>
Site.loadPage(async site => {
function loadEventListeners() {
((() => {
document.getElementById("userNav").classList.add("active");
document.getElementById("changeDetailsSet").addEventListener("click", async e => {
const formData = new URLSearchParams();
const email = document.getElementById("changeEmail").value;
const password = document.getElementById("changePassword").value;
const repeatPassword = document.getElementById("changePasswordRepeat").value;
if (!email) {
return alert("Please specify email.");
}
if (!password) {
return alert("password must not be blank.");
}
if (password !== repeatPassword) {
return alert("Passwords do not match.");
}
formData.append("email", email);
formData.append("password", password);
Site.loading(true);
try {
await fetch(`${baseUrl}/auth/changeDetails`, {
method: 'POST',
body: formData
});
} catch (e) {
alert(e.message);
return;
} finally {
Site.loading(false);
}
alert("User details changed successfully.");
});
})());
}
loadEventListeners();
});
</script>
</body>
</html>
9 changes: 6 additions & 3 deletions src/public/snippets/navbar.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="/admin/files">File Management</a>
<a class="nav-link" id="filesNav" href="/admin/files">File Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin/stats">Statistics</a>
<a class="nav-link" id="statsNav" href="/admin/stats">Statistics</a>
</li>
<li class="nav-item">
<a class="nav-link" id="userNav" href="/admin/user">User</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/rest/auth/logout">Logout</a>
Expand Down

0 comments on commit 0e2dd5f

Please sign in to comment.