Compare commits

...

2 commits

Author SHA1 Message Date
f2da949114 5.5.2 2023-05-26 21:08:22 +03:00
ef8cb5e819 Better user.ejs 2023-05-26 21:08:14 +03:00
12 changed files with 218 additions and 137 deletions

View file

@ -50,6 +50,7 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
- Profile Message or DM
- Upload other photos, model for it
- Edit & download template
- Banner
- Roles & Permissions
```
role: "moderator",
@ -76,9 +77,8 @@ permissions: ["see_deleted_message"]
#### Fixes:
- BETTER SETUP PAGE: use setup everytime
- better user.ejs: https://github.com/mdbootstrap/bootstrap-profiles
- add threads, messages etc. to extra folder
- add category to threads
- add category to thread list page
- working reset button
- better pagination
- text alling center body

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "akf-forum",
"version": "5.5.1",
"version": "5.5.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "akf-forum",
"version": "5.5.1",
"version": "5.5.2",
"license": "GPL-3.0-or-later",
"dependencies": {
"bcrypt": "^5.1.0",

View file

@ -1,6 +1,6 @@
{
"name": "akf-forum",
"version": "5.5.1",
"version": "5.5.2",
"description": "A Node.js based forum software",
"main": "src/index.js",
"scripts": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 704 KiB

After

Width:  |  Height:  |  Size: 206 KiB

File diff suppressed because one or more lines are too long

View file

@ -63,7 +63,7 @@ app.patch("/:id", async (req, res) => {
if (typeof admin === "boolean" || ["false", "true"].includes(admin)) member.admin = admin;
if (deleted === false) member.deleted = false;
if (typeof hideLastSeen === "boolean") member.hideLastSeen = hideLastSeen;
if (typeof hideLastSeen === "boolean" || ["false", "true"].includes(admin)) member.hideLastSeen = hideLastSeen;
member.edited = true;

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/meta"), {title: member.name }) %>
<body>
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
<script src="/libs/simplemde/simplemde.min.js"></script>
<div class="container my-3">
<div class="col-12">
<h2 class="h4 text-white bg-info mb-3 p-4 rounded">Edit User</h2>
<form id="form" class="mb-3">
<input type="text" name="name" placeholder="<%= member.name %>" class="input">
<input type="email" name="email" placeholder="<%= member.email %>" class="input">
<textarea id="textarea" class="input" name="about" rows="4" cols="60" name="content" placeholder="<%=member.about%>"></textarea>
<% if (user?.admin){ %>
Is Admin? <input id='admin' type='checkbox' value='true' name='admin' <%=member.admin ? "checked": ""%>>
<input id='adminHidden' type='hidden' value='false' name='admin'>
<% } %>
Hide Last Seen? <input id='last' type='checkbox' value='true' name='hideLastSeen' <%=member.hideLastSeen ? "checked": ""%>>
<input id='lastHidden' type='hidden' value='false' name='admin'>
<button type="submit" class="btn-primary" style="width:100%;">Update User!</button>
</form>
</div>
</div>
<script src="/js/editor.js"></script>
<script type="module">
import request from "/js/request.js";
const simplemde = editor("user-edit-<%=member.id%>");
document.getElementById("form").addEventListener("submit", async e => {
e.preventDefault();
document.getElementById('adminHidden').disabled = document.getElementById("admin").checked;
document.getElementById('lastHidden').disabled = document.getElementById("last").checked;
const formdata = new FormData(e.target)
const res = await request("/api/users/<%=member.id%>", "PATCH", {
name: formdata.get("name"),
about: simplemde.value(),
admin: formdata.get("admin"),
email: formdata.get("email"),
hideLastSeen: formdata.get("hideLastSeen")
});
simplemde.clearAutosavedValue();
if (res) alert(`User is updated!`);
location.reload();
});
</script>
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>
</body>
</html>

View file

@ -7,7 +7,7 @@
<body>
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<script src="/libs/showdown/showdown.min.js"></script>
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
<script src="/libs/simplemde/simplemde.min.js"></script>

View file

@ -10,37 +10,134 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<style>
.img-div {
position: relative;
display: inline-block;
}
<div class="usercontent">
.img-div:hover:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100%;
background: url('/themes/bootstrap_black/upload.png') center no-repeat;
background-size: 50px;
}
.img-div:hover img {
opacity: 0.4;
}
</style>
<section class="h-100 gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-9 col-xl-7">
<% if (member.deleted) {%>
<h1>This user has been deleted!</h1>
<% } %>
<div class="card">
<div class="rounded-top text-white d-flex flex-row" style="background-color: #000; height:200px;">
<div class="ms-4 mt-5 d-flex flex-column img-div" style="width: 150px;">
<img onclick="location.href='/users/<%=member.id%>/avatar'" src="<%=member.avatar %>" alt="Generic placeholder image" class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
<% if(user?.admin || user?.id === member.id){ %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#userMenu" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="userMenu">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a href="/users/<%=member.id%>/edit" type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark" style="z-index: 1;">
Edit profile
</a>
<% if (member.deleted) {%>
<a id="undelete" class="btn btn-outline-dark">Undelete user</a>
<% } else if (user?.admin){ %>
<a id="delete" class="btn btn-outline-dark">Delete user</a>
<% } %>
<% } %>
</div>
<div class="ms-3 miniinfo" style="margin-top: 75px; background: rgba(0,0,0,0.4);">
<h5><%= member.name %></h5>
<% if (member.admin) { %>
<h2 class="userbox-value" style="align-self: center;">Admin</h2>
<% } %>
<p style="margin-bottom: 0px;">Join: <%= new Date(member.time).toLocaleDateString() %></p>
<% if(!member.hideLastSeen || user?.admin) {%>
<p>Last Seen: <%= new Date(member.lastSeen).toLocaleString() %></p>
<% } %>
</div>
</div>
<div class="p-4 text-black" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
<a href="/search/messages?authorID=<%= member.id %>">
<p class="mb-1 h5"><%= counts.message %></p>
<p class="small text-muted mb-0">Messages</p>
</a>
<a class="px-3" href="/search/threads?authorID=<%= member.id %>">
<p class="mb-1 h5"><%= counts.thread %></p>
<p class="small text-muted mb-0">Threads</p>
</a>
</div>
</div>
<% if (member.about?.length) { %>
<div class="card-body p-4 text-black">
<div class="mb-5">
<p class="lead fw-normal mb-1" style="color: aliceblue;">About</p>
<div class="p-4" style="background-color: #f8f9fa;">
<p id="about" class="font-italic mb-1"><%= member.about %></p>
</div>
<script src="/libs/showdown/showdown.min.js"></script>
<script>
const converter = new showdown.Converter();
const about = document.getElementById("about")
about.innerHTML = converter.makeHtml(about.innerText);
</script>
</div>
<% } %>
<div class="d-flex justify-content-between align-items-center mb-4">
<!--
<p class="lead fw-normal mb-0">Recent photos</p>
<p class="mb-0"><a href="#!" class="text-muted">Show all</a></p>
-->
<% if (!member.discordID && discord && user?.id === member.id) { %>
<a href="<%=discord%>" class="btn-outline-primary">Discord auth</a>
<% } else if(member.discordID && user?.id === member.id) { %>
<a class="btn-primary" id="un_discord">Unauth Discord</a>
<% } %>
<% if (member.hideLastSeen) {%>
<a id="last_unhide" class="btn-primary">Unhide last seen</a>
<% } else { %>
<a id="last_hide" class="btn-outline-primary">Hide last seen</a>
<% if (user.admin) { %>
<select>
<option selected>IP LIST</option>
<% for(const ip of member.ips) { %>
<option><%= ip %></option>
<% } %>
<% if (member.deleted) {%>
<h1>This user has been deleted!</h1>
<a id="undelete" class="btn-primary">Undelete user</a>
<% } else if (user?.admin){ %>
<a id="delete" class="btn-outline-primary">Delete user</a>
</select>
<% } %>
<a class="btn-outline-primary" href="/users/<%=member.id%>/edit">Edit user</a>
<a href="/users/<%=member.id%>/avatar" class="btn-outline-primary">Upload avatar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="usercontent">
<% if(user?.admin || user?.id === member.id){ %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<script type="module">
@ -66,96 +163,17 @@
});
alert(await response.text());
location.reload()
} else if (e.target.id.startsWith("last_")) {
let hideLastSeen = e.target.id.replace("last_", "") == "hide" ? true : false;
const response = await request("/api/users/<%= member.id %>/", "PATCH", {
hideLastSeen
});
alert(`Last seen is ${!hideLastSeen?"un":""}hided!`);
location.reload()
} else if (e.target.id == "toogle")
document.getElementById('user-edit').classList.toggle('no-active')
});
</script>
</div>
</div>
</nav>
<% if (user.admin) { %>
<select>
<option selected>IP LIST</option>
<% for(const ip of member.ips) { %>
<option><%= ip %></option>
<% } %>
</select>
<% } %>
<% } %>
<div class="userbox" style="justify-content:center;">
<img style="width:150px;height:150px;border-radius:50%;" src="<%=member.avatar %>">
</div>
<% if (member.admin) { %>
<h2 class="userbox-value" style="align-self: center;">Admin</h2>
<% } %>
<% if (member.about?.length) { %>
<div class="userbox-value" id="about" style="
margin: 10px auto;
box-shadow: 0 0 5px 0 var(--second);
padding: 10px;
width: 100%;
max-width: 800px;
text-align: center;
border-radius: 5px;
background: none;
color: var(--anti);
">
<%= member.about %>
</div>
<script>
const converter = new showdown.Converter();
const about = document.getElementById("about")
about.innerHTML = converter.makeHtml(about.innerText);
</script>
<% } %>
<div class="userbox">
<h2 class="userbox-title">Name:</h2>
<h2 class="userbox-value"><%= member.name %></h2>
</div>
<div class="userbox">
<h2 class="userbox-title">Created at:</h2>
<h2 class="userbox-value"><%= new Date(member.time).toLocaleString() %></h2>
</div>
<% if(!member.hideLastSeen || user?.admin) {%>
<div class="userbox">
<h2 class="userbox-title">Last seen at:</h2>
<h2 class="userbox-value"><%= new Date(member.lastSeen).toLocaleString() %></h2>
</div>
<% } %>
<div class="userbox">
<h2 class="userbox-title">Message:</h2>
<a class="userbox-value" href="/search/messages?authorID=<%= member.id %>">
<%= counts.message %>
</a>
</div>
<div class="userbox">
<h2 class="userbox-title">Thread:</h2>
<a class="userbox-value" href="/search/threads?authorID=<%= member.id %>">
<%= counts.thread %>
</a>
</div>
</div>
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>

View file

@ -7,7 +7,7 @@
<body>
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<script src="/libs/showdown/showdown.min.js"></script>
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
<script src="/libs/simplemde/simplemde.min.js"></script>

View file

@ -10,7 +10,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<div class="usercontent">
@ -108,6 +107,7 @@ color: var(--anti);
">
<%= member.about %>
</div>
<script src="/libs/showdown/showdown.min.js"></script>
<script>
const converter = new showdown.Converter();
const about = document.getElementById("about")