akf-forum/views/user.ejs

154 lines
5.1 KiB
Text
Raw Normal View History

2022-03-13 16:16:46 +03:00
<!DOCTYPE html>
<html lang="en">
<%- include("extra/meta", {title: member.name }) %>
2022-03-26 23:28:10 +03:00
2022-08-28 19:03:32 +03:00
<body>
2022-09-08 15:08:34 +03:00
<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" />
2022-09-16 23:12:06 +03:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
2022-09-08 15:08:34 +03:00
<link rel="stylesheet" href="/css/user.css" />
2022-08-28 18:10:41 +03:00
<%- include("extra/navbar") %>
2022-09-08 15:08:34 +03:00
2022-09-16 23:12:06 +03:00
<div class="content">
<% if (user?.admin || user?.id === member.id) { %>
2022-09-09 16:29:36 +03:00
<a href="/users/<%=member.id%>/avatar" class="btn-outline-primary">Upload avatar</a>
<link rel="stylesheet" href="/css/modal.css" />
<a class="btn-outline-primary" id="toogle">Edit user!</a>
<div class="modal no-active" id="user-edit">
<div class="modal-content">
<div class="modal-close">
<i id="toogle" class="fa-solid fa-square-xmark"></i>
</div>
<h1 class="title" style="text-align:center;">Edit <a class="see" href="/users/<%= member.id %>"><%= member.name %></a></h1>
<div class="content">
<form id="form" class="see" style="box-shadow:none">
2022-09-17 00:27:38 +03:00
<input type="text" name="name" minlength="3" maxlength="25" placeholder="<%=member.name%>" class="input" required>
2022-09-16 23:12:06 +03:00
2022-09-17 00:27:38 +03:00
<textarea class="input" name="about" maxlength="256" required 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'>
<% } %>
<button class="btn-primary" style="width:100%;">Update User!</button>
</form>
</div>
</div>
</div>
<script type="module">
import request from "../../js/request.js";
const form = document.getElementById("form");
document.addEventListener("click", async e => {
if (e.target.id == "delete") {
const response = await request("/api/users/<%= member.id %>", "DELETE");
if (!response.deleted) return
alert("User is deleted!");
location.reload()
} else if (e.target.id == "undelete") {
const response = await request("/api/users/<%= member.id %>/undelete");
if (response.deleted) return;
alert("User is undeleted successfully!");
location.reload()
} else if (e.target.id == "toogle")
document.getElementById('user-edit').classList.toggle('no-active')
});
form.addEventListener("submit", async e => {
e.preventDefault();
document.getElementById('adminHidden').disabled = document.getElementById("admin").checked;
const object = {};
new FormData(e.target).forEach((value, key) => object[key] = value);
const res = await request("/api/users/<%=member.id%>", "PATCH", object);
if (res) alert(`User is updated!`);
location.reload();
});
</script>
<% } %>
<% 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>
<% } %>
2022-09-17 16:36:48 +03:00
<% if (user?.admin) {%>
<details>
<summary class="btn-outline-primary">IP adresses of user:</summary>
<select>
<% for(const ip of member.ips) { %>
<option><%= ip %></option>
<% } %>
</select>
</details>
<% } %>
2022-08-28 18:10:41 +03:00
<div class="box" style="justify-content:center;">
2022-09-08 15:08:34 +03:00
<img style="width:150px;height:150px;border-radius:50%;" src="<%=member.avatar %>">
2022-08-28 18:10:41 +03:00
</div>
2022-09-08 15:08:34 +03:00
<% if (member.admin) { %>
<h2 class="box-value" style="align-self: center;">Admin</h2>
<% } %>
2022-09-17 01:15:44 +03:00
2022-09-16 23:12:06 +03:00
<div class="box-value" id="about" style="
2022-09-08 15:08:34 +03:00
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;
2022-09-09 17:38:13 +03:00
color: var(--anti);
">
2022-09-08 15:08:34 +03:00
<%= member.about %>
</div>
2022-09-16 23:12:06 +03:00
<script>
const converter = new showdown.Converter();
const about = document.getElementById("about")
2022-09-17 00:51:52 +03:00
about.innerHTML = converter.makeHtml(about.innerText);
2022-09-16 23:12:06 +03:00
</script>
2022-08-28 18:10:41 +03:00
<div class="box">
2022-08-28 19:03:32 +03:00
<h2 class="box-title">Name:</h2>
2022-08-28 20:32:52 +03:00
<h2 class="box-value"><%= member.name %></h2>
2022-08-28 18:10:41 +03:00
</div>
<div class="box">
2022-08-28 20:32:52 +03:00
<h2 class="box-title">Created at:</h2>
<h2 class="box-value"><%= new Date(member.time).toLocaleString() %></h2>
</div>
2022-09-09 18:00:32 +03:00
<% if(!member.hideLastSeen || user?.admin) {%>
<div class="box">
<h2 class="box-title">Last seen at:</h2>
<h2 class="box-value"><%= new Date(member.lastSeen).toLocaleString() %></h2>
</div>
<% } %>
2022-08-28 18:10:41 +03:00
<div class="box">
<h2 class="box-title">Message:</h2>
2022-08-28 20:32:52 +03:00
<h2 class="box-value"><%= counts.message %></h2>
</div>
<div class="box">
<h2 class="box-title">Thread:</h2>
<h2 class="box-value"><%= counts.thread %></h2>
2022-08-28 18:10:41 +03:00
</div>
</div>
2022-09-17 00:51:52 +03:00
<%- include("extra/footer") %>
2022-08-28 18:10:41 +03:00
</body>
2022-03-13 16:16:46 +03:00
</html>