lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: added pfps and user profile modification

Browse source
This commit is contained in:
Lukian 2025-04-18 15:42:55 +02:00
parent 56d171439e
commit 7781e6b8a1
20 changed files with 404 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

30
front/src/components/MessageComponent.tsx
View file

@ -13,20 +13,24 @@ export default function MessageComponent({ message, user, channel, deleteMessage
return (
<div key={message.id} className="message">
<div className="message-content">
<Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
{message.content.split(" ").map((word, index) => {
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}
<img src={`/api/users/${message.username}/pfp`} alt="" className="message-user-pfp" />
<div className="message-content-right">
<span><Link to={`/u/${message.username}`}>{message.username}</Link> {new Date(message.date * 1000).toLocaleString()}</span>
<div className="message-text">
{message.content.split(" ").map((word, index) => {
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}
</div>
</div>
</div>
<p>{new Date(message.date * 1000).toLocaleString()}</p>
<div>
{message.content.toLocaleLowerCase().includes("gros cochon") && (
<img src="/pig.png" alt="Gros cochon" className="pig" />

1
front/src/components/TopBar.tsx
View file

@ -27,6 +27,7 @@ export default function TopBar({ user }: { user: User | undefined }) {
}}>
Logout
</button>
<img src={`/api/users/${user.username}/pfp`} alt="pfp" className="topbar-user-pfp" />
</div>
) : (
<div className="topbar-right">

2
front/src/main.tsx
View file

@ -10,6 +10,7 @@ import Register from './pages/Register'
import CreateChannel from './pages/CreateChannel'
import ChannelsPage from './pages/ChannelsPage'
import UsersPage from './pages/UsersPage'
import EditProfile from './pages/EditProfile'
const socket = new WebSocket("/api/ws");
@ -33,6 +34,7 @@ createRoot(document.getElementById('root')!).render(
<Route path="/create-channel" element={<CreateChannel />} />
<Route path="/channels" element={<ChannelsPage socket={socket} />} />
<Route path="/users" element={<UsersPage socket={socket} />} />
<Route path="/edit-profile" element={<EditProfile />} />
</Routes>
</BrowserRouter>
)

134
front/src/pages/EditProfile.tsx Normal file
View file

@ -0,0 +1,134 @@
import { useState, useEffect } from "react"
import { User } from "../types"
import { Link } from "react-router-dom"
import axios from "axios"
import TopBar from "../components/TopBar"
import "../styles/EditProfile.css"
export default function EditProfile() {
const [token, setToken] = useState<string>("");
const [user, setUser] = useState<User>();
useEffect(() => {
const localToken = localStorage.getItem("token");
if (localToken) {
setToken(localToken)
axios
.post("/api/auth/me", { token: localToken })
.then((res) => {
setUser(res.data);
});
}
}, []);
function uploadPfp(e: React.FormEvent) {
e.preventDefault();
const formData = new FormData();
const fileInput = document.getElementById("pfp") as HTMLInputElement;
if (fileInput.files) {
formData.append("pfp", fileInput.files[0]);
}
formData.append("token", token);
axios
.post("/api/auth/me/uploadpfp", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(() => {
window.location.reload();
})
.catch((err) => {
console.error(err.response.data);
});
}
function deletePfp(e: React.FormEvent) {
e.preventDefault();
axios
.post("/api/auth/me/deletepfp", { token: token })
.then(() => {
window.location.reload();
})
.catch((err) => {
console.error(err.response.data);
});
}
function editUsername(e: React.FormEvent) {
e.preventDefault();
const newUsername = (document.getElementById("username") as HTMLInputElement).value;
axios
.post("/api/auth/me/setusername", { token: token, username: newUsername })
.then(() => {
window.location.reload();
})
.catch((err) => {
console.error(err.response.data);
});
}
function editPassword(e: React.FormEvent) {
e.preventDefault();
const oldPassword = (document.getElementById("old-password") as HTMLInputElement).value;
const newPassword = (document.getElementById("password") as HTMLInputElement).value;
const confirmPassword = (document.getElementById("confirm-password") as HTMLInputElement).value;
if (newPassword !== confirmPassword) {
alert("Passwords do not match");
return;
}
axios
.post("/api/auth/me/setpassword", { token: token, oldPassword: oldPassword, password: newPassword })
.then(() => {
window.location.reload();
})
.catch((err) => {
console.error(err.response.data);
});
}
if (!user) {
return (
<div className="edit-profile-page">
<TopBar user={user}/>
<div className="edit-login">
<p>Please log in to edit your profile</p>
<Link to="/login">Login</Link>
</div>
</div>
)
}
return (
<div className="edit-profile-page">
<TopBar user={user}/>
<div className="edit-pfp">
<h2>Edit Profile Picture</h2>
<form>
<input type="file" name="pfp" id="pfp" />
<button onClick={uploadPfp}>Save</button>
<button onClick={deletePfp}>Delete</button>
</form>
</div>
<div className="edit-username">
<h2>Edit Username</h2>
<form>
<input type="text" name="username" id="username" placeholder={user?.username} />
<button onClick={editUsername}>Save</button>
</form>
</div>
<div className="edit-password">
<h2>Edit Password</h2>
<form>
<input type="password" name="old-password" id="old-password" placeholder="Old password" />
<input type="password" name="password" id="password" placeholder="New password" />
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm new password" />
<button onClick={editPassword}>Save</button>
</form>
</div>
</div>
)
}

10
front/src/pages/UserPage.tsx
View file

@ -1,4 +1,4 @@
import { useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { User, Messages } from "../types";
import TopBar from "../components/TopBar";
@ -75,8 +75,14 @@ export default function UserPage({socket}: {socket: WebSocket}) {
<div className="user-page">
<TopBar user={user} />
<div className="user">
<h2>{pageUser.username}</h2>
<div className="user-top">
<img src={`/api/users/${pageUser.username}/pfp`} alt="pfp" className="user-page-pfp" />
<h2>{pageUser.username}</h2>
</div>
{pageUser.admin ? <p>Admin</p> : <p>User</p>}
{pageUser.id === user?.id && (
<Link to="/edit-profile">Edit profile</Link>
)}
</div>
<div className="user-messages">
<h2>Last messages</h2>

2
front/src/pages/UsersPage.tsx
View file

@ -74,7 +74,7 @@ export default function UsersPage({socket}: {socket: WebSocket}) {
return (
<div className="users-page">
<TopBar user={thisUser} />
<div className="users-page-channels">
<div className="users-page-users">
<h2>Users</h2>
<input
type="text"

44
front/src/styles/EditProfile.css Normal file
View file

@ -0,0 +1,44 @@
.edit-profile-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.edit-login {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}
.edit-pfp {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}
.edit-username {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}
.edit-password {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}

17
front/src/styles/MessageComponent.css
View file

@ -4,7 +4,24 @@
padding: 10px;
}
.message-user-pfp {
width: 40px;
height: 40px;
border-radius: 50%;
}
.message-content {
display: flex;
gap: 10px;
}
.message-content-right {
display: flex;
flex-direction: column;
gap: 5px;
}
.message-text {
word-break: break-word;
overflow-wrap: break-word;
display: -webkit-box;

6
front/src/styles/TopBar.css
View file

@ -22,6 +22,12 @@
gap: 10px;
}
.topbar-user-pfp {
width: 50px;
height: 50px;
border-radius: 50%;
}
@media (max-width: 560px) {
.topbar {
flex-direction: column;

12
front/src/styles/UserPage.css
View file

@ -16,6 +16,18 @@
background-color: #fff6fd;
}
.user-top {
display: flex;
align-items: center;
gap: 10px;
}
.user-page-pfp {
width: 50px;
height: 50px;
border-radius: 50%;
}
.user-messages {
width: 97%;
border: 1px solid #270722;

2
front/src/styles/UsersPage.css
View file

@ -7,7 +7,7 @@
gap: 20px;
}
.users-page-channels {
.users-page-users {
width: 97%;
border: 1px solid #270722;
padding: 10px;

15
front/src/types.tsx
View file

@ -26,12 +26,12 @@ export type Mention = {
export type Mentions = Mention[]
export type Message = {
id: number,
user_id: number,
username: string,
content: string,
date: number,
channel_id: number,
id: number
user_id: number
username: string
content: string
date: number
channel_id: number
channel_name: string
mentions: Mentions
}
@ -39,9 +39,10 @@ export type Message = {
export type Messages = Message[]
export type User = {
id: number,
id: number
username: string
admin: number
pfp: string
}
export type Users = User[]