mirror of
https://github.com/Akif9748/akf-forum.git
synced 2024-11-22 12:00:41 +03:00
Better user.ejs
This commit is contained in:
parent
6b983f9e55
commit
ef8cb5e819
10 changed files with 215 additions and 134 deletions
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 704 KiB After Width: | Height: | Size: 206 KiB |
3
src/public/libs/showdown/showdown.min.js
vendored
Normal file
3
src/public/libs/showdown/showdown.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
BIN
src/themes/bootstrap_black/public/upload.png
Normal file
BIN
src/themes/bootstrap_black/public/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
60
src/themes/bootstrap_black/views/edit_user.ejs
Normal file
60
src/themes/bootstrap_black/views/edit_user.ejs
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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")) %>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Reference in a new issue