mirror of
https://github.com/Akif9748/akf-forum.git
synced 2024-11-22 20:10:40 +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
|
- Profile Message or DM
|
||||||
- Upload other photos, model for it
|
- Upload other photos, model for it
|
||||||
- Edit & download template
|
- Edit & download template
|
||||||
|
- Banner
|
||||||
- Roles & Permissions
|
- Roles & Permissions
|
||||||
```
|
```
|
||||||
role: "moderator",
|
role: "moderator",
|
||||||
|
|
@ -76,9 +77,8 @@ permissions: ["see_deleted_message"]
|
||||||
|
|
||||||
#### Fixes:
|
#### Fixes:
|
||||||
- BETTER SETUP PAGE: use setup everytime
|
- BETTER SETUP PAGE: use setup everytime
|
||||||
- better user.ejs: https://github.com/mdbootstrap/bootstrap-profiles
|
|
||||||
- add threads, messages etc. to extra folder
|
- add threads, messages etc. to extra folder
|
||||||
- add category to threads
|
- add category to thread list page
|
||||||
- working reset button
|
- working reset button
|
||||||
- better pagination
|
- better pagination
|
||||||
- text alling center body
|
- 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 (typeof admin === "boolean" || ["false", "true"].includes(admin)) member.admin = admin;
|
||||||
if (deleted === false) member.deleted = false;
|
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;
|
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>
|
<body>
|
||||||
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
|
<%- 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 href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
|
||||||
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
|
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
|
||||||
<script src="/libs/simplemde/simplemde.min.js"></script>
|
<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" />
|
<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){ %>
|
<% if(user?.admin || user?.id === member.id){ %>
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<a href="/users/<%=member.id%>/edit" type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark" style="z-index: 1;">
|
||||||
<div class="container-fluid">
|
Edit profile
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#userMenu" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<% if (member.deleted) {%>
|
||||||
</button>
|
<a id="undelete" class="btn btn-outline-dark">Undelete user</a>
|
||||||
<div class="collapse navbar-collapse" id="userMenu">
|
<% } else if (user?.admin){ %>
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
<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) { %>
|
<% if (!member.discordID && discord && user?.id === member.id) { %>
|
||||||
<a href="<%=discord%>" class="btn-outline-primary">Discord auth</a>
|
<a href="<%=discord%>" class="btn-outline-primary">Discord auth</a>
|
||||||
<% } else if(member.discordID && user?.id === member.id) { %>
|
<% } else if(member.discordID && user?.id === member.id) { %>
|
||||||
<a class="btn-primary" id="un_discord">Unauth Discord</a>
|
<a class="btn-primary" id="un_discord">Unauth Discord</a>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (member.hideLastSeen) {%>
|
<% if (user.admin) { %>
|
||||||
<a id="last_unhide" class="btn-primary">Unhide last seen</a>
|
<select>
|
||||||
<% } else { %>
|
<option selected>IP LIST</option>
|
||||||
<a id="last_hide" class="btn-outline-primary">Hide last seen</a>
|
<% for(const ip of member.ips) { %>
|
||||||
|
<option><%= ip %></option>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (member.deleted) {%>
|
</select>
|
||||||
<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>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
<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>
|
</ul>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
|
@ -66,96 +163,17 @@
|
||||||
});
|
});
|
||||||
alert(await response.text());
|
alert(await response.text());
|
||||||
location.reload()
|
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")
|
} else if (e.target.id == "toogle")
|
||||||
document.getElementById('user-edit').classList.toggle('no-active')
|
document.getElementById('user-edit').classList.toggle('no-active')
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</nav>
|
</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>
|
</div>
|
||||||
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>
|
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<body>
|
<body>
|
||||||
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
|
<%- 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 href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
|
||||||
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
|
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
|
||||||
<script src="/libs/simplemde/simplemde.min.js"></script>
|
<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" />
|
<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">
|
<div class="usercontent">
|
||||||
|
|
||||||
|
|
@ -108,6 +107,7 @@ color: var(--anti);
|
||||||
">
|
">
|
||||||
<%= member.about %>
|
<%= member.about %>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="/libs/showdown/showdown.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const converter = new showdown.Converter();
|
const converter = new showdown.Converter();
|
||||||
const about = document.getElementById("about")
|
const about = document.getElementById("about")
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue