AxiomChat/axiom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Login and working api with simple chat

Browse Source
This commit is contained in:
selimaj-dev
2025-09-27 09:17:22 +02:00
parent 412eb3fe77
commit 24aefe7838
7 changed files with 194 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/user/route.ts
+53 -10
View File
@@ -12,7 +12,10 @@ export async function POST(req: NextRequest) {
);
if (user_.rows.length > 0) {
return NextResponse.json({ message: "Username already used" }, { status: StatusCodes.CONFLICT });
return NextResponse.json(
{ message: "Username already used" },
{ status: StatusCodes.CONFLICT }
);
}
const user_email = await pool.query(
@@ -21,16 +24,53 @@ export async function POST(req: NextRequest) {
);
if (user_email.rows.length > 0) {
return NextResponse.json({ message: "Email already used" }, { status: StatusCodes.CONFLICT });
return NextResponse.json(
{ message: "Email already used" },
{ status: StatusCodes.CONFLICT }
);
}
// TODO: Hash the password
const result = await pool.query("INSERT INTO users (username, email, password_hash) VALUES ($1, $2, $3) RETURNING id;", [username, email, password]);
const result = await pool.query(
"INSERT INTO users (username, email, password_hash) VALUES ($1, $2, $3) RETURNING id;",
[username, email, password]
);
const token = crypto.randomUUID();
CLIENT_AUTH_TOKENS[token] = parseInt(result.rows[0].id);
return NextResponse.json({ message: "ok", token, user_id: result.rows[0].id });
return NextResponse.json({
message: "ok",
token,
user_id: result.rows[0].id,
});
}
export async function PUT(req: NextRequest) {
const { username, password } = await req.json();
if (!username || !password)
return NextResponse.json(
{ message: "Body must have username and password" },
{ status: StatusCodes.BAD_REQUEST }
);
const user = await pool.query(
"SELECT id, username, email FROM users WHERE password_hash = $2 AND username = $1 OR email = $1;",
[username, password]
);
if (user.rowCount === 0)
return NextResponse.json(
{ message: "Invalid credentials" },
{ status: StatusCodes.UNAUTHORIZED }
);
const token = crypto.randomUUID();
CLIENT_AUTH_TOKENS[token] = parseInt(user.rows[0].id);
return NextResponse.json({ message: "ok", token });
}
export async function GET(req: NextRequest) {
@@ -39,12 +79,18 @@ export async function GET(req: NextRequest) {
const token = url.searchParams.get("token");
if (!query_id && !token)
return NextResponse.json({ message: "Query arg should be token or id" }, { status: StatusCodes.BAD_REQUEST });
return NextResponse.json(
{ message: "Query arg should be token or id" },
{ status: StatusCodes.BAD_REQUEST }
);
else {
const id = query_id ? query_id : token ? CLIENT_AUTH_TOKENS[token] : null;
if (!id)
return NextResponse.json({ message: "Invalid token" }, { status: StatusCodes.NOT_FOUND });
return NextResponse.json(
{ message: "Invalid token" },
{ status: StatusCodes.NOT_FOUND }
);
const user = await pool.query(
"SELECT id, username, email FROM users WHERE id = $1;",
@@ -58,10 +104,7 @@ export async function GET(req: NextRequest) {
export async function DELETE(req: NextRequest) {
let { username } = await req.json();
await pool.query(
"DELETE FROM users WHERE username = $1;",
[username]
);
await pool.query("DELETE FROM users WHERE username = $1;", [username]);
return NextResponse.json({ message: "ok" });
}
src/app/login/page.tsx
+35 -2
View File
@@ -1,7 +1,40 @@
"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import axios from "axios";
import { useState } from "react";
import Cookies from "js-cookie";
import { redirect } from "next/navigation";
export default function Login() {
return <div>
<Input />
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
return (
<div className="h-screen flex items-center">
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
<h1 className="mx-auto text-3xl">Login</h1>
<span>
Username
<Input onChange={(e) => setUsername(e.target.value)} />
</span>
<span>
Password
<Input onChange={(e) => setPassword(e.target.value)} />
</span>
<Button
className="mt-4"
onClick={async () => {
const res = await axios.put("/api/user", { username, password });
Cookies.set("token", (res.data as any).token);
redirect("/");
}}
>
Login
</Button>
</div>
</div>
);
}
src/app/server/[id]/page.tsx
+38 -23
View File
@@ -5,24 +5,30 @@ import { useParams } from "next/navigation";
import MessageBox from "@/components/MessageBox";
import AppSidebar from "@/components/Sidebar";
import Message from "@/types/message";
import getUser from "@/hooks/get-user";
import useUser, { User } from "@/hooks/get-user";
import Cookies from "js-cookie";
import axios from "axios";
import { StringMap } from "@/types/typeUtils";
export default function Server() {
const { id: ip } = useParams<{ id: string }>();
const wsRef = useRef<WebSocket | null>(null);
const [messages, setMessages] = useState<Message[]>([]);
const user = getUser();
const { user, loading } = useUser();
const [userList, setUserList] = useState<StringMap<User>>({});
useEffect(() => {
if (!ip || !user) return;
if (!ip || !user || loading) return;
async function auth() {
const server_auth = ((await axios.post('http://localhost:3000/api/auth', {
server_ip: ip === 'localhost' ? '127.0.0.1' : ip,
session_token: Cookies.get('token'),
})).data as any).token;
const server_auth = (
(
await axios.post("http://localhost:3000/api/auth", {
server_ip: ip === "localhost" ? "127.0.0.1" : ip,
session_token: Cookies.get("token"),
})
).data as any
).token;
// Open the WebSocket connection
const ws = new WebSocket(`ws://${ip}:7080`);
@@ -30,11 +36,13 @@ export default function Server() {
ws.onopen = () => {
console.log("Connected to WebSocket:", ip);
ws.send(JSON.stringify({
version: '0.0.1',
ws.send(
JSON.stringify({
version: "0.0.1",
auth_token: server_auth,
last_message: 0
}))
last_message: 0,
})
);
};
ws.onmessage = (m) => {
@@ -42,10 +50,10 @@ export default function Server() {
console.log("Message received:", data);
switch (data.type) {
case 'authenticated':
case "authenticated":
setMessages(data.params.messages);
case 'message_create':
case "message_create":
// setMessages([...messages, data.params]);
setMessages((prev) => [...prev, data.params]);
}
@@ -66,7 +74,11 @@ export default function Server() {
}
auth();
}, [ip]);
setUserList((prev) => {
prev[user.id] = user;
return prev;
});
}, [ip, user, loading]);
return (
<AppSidebar
@@ -82,17 +94,20 @@ export default function Server() {
}}
>
<MessageBox
messages={messages.filter(m => m.channel_id === 'general').toReversed()}
userList={userList}
messages={messages
.filter((m) => m.channel_id === "general")
.toReversed()}
sendMessage={(message) => {
wsRef.current?.send(JSON.stringify(
{
type: 'send_message',
wsRef.current?.send(
JSON.stringify({
type: "send_message",
params: {
channel_id: 'general',
contents: message
}
}
));
channel_id: "general",
contents: message,
},
})
);
}}
/>
</AppSidebar>
src/components/MessageBox.tsx
+23 -5
View File
@@ -15,15 +15,25 @@ import { useRef, useState } from "react";
import { format, isToday, isYesterday } from "date-fns";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { StringMap } from "@/types/typeUtils";
import { User } from "@/hooks/get-user";
function MessageContainer({ message }: { message: Message }) {
function MessageContainer({
message,
userList,
}: {
message: Message;
userList: StringMap<User>;
}) {
return (
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
<div className="flex gap-2">
<div className="w-8 h-8 rounded-full bg-gray-400" />
<div className="flex flex-col flex-1">
<span className="font-bold flex gap-1 items-center">
{message.from}
{userList[message.from]
? userList[message.from].username
: message.from}
<p className="text-neutral-500 text-xs">
{isToday(message.timestamp * 1000)
@@ -86,14 +96,22 @@ function MessageContainer({ message }: { message: Message }) {
);
}
export default function MessageBox({ messages, sendMessage }: { messages: Message[], sendMessage: (m: string) => void }) {
export default function MessageBox({
messages,
userList,
sendMessage,
}: {
messages: Message[];
userList: StringMap<User>;
sendMessage: (m: string) => void;
}) {
const [text, setText] = useState("");
return (
<div className="h-screen w-full flex flex-col py-5 pl-5 gap-5">
<div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
{messages.map((msg) => (
<MessageContainer key={msg.id} message={msg} />
<MessageContainer key={msg.id} message={msg} userList={userList} />
))}
</div>
<div className="w-full flex gap-3 pr-5">
@@ -105,7 +123,7 @@ export default function MessageBox({ messages, sendMessage }: { messages: Messag
onKeyDown={(e) => {
if (e.key === "Enter") {
sendMessage(text);
setText('');
setText("");
}
}}
/>
src/hooks/get-user.ts
+22 -10
View File
@@ -1,6 +1,8 @@
"use client";
import axios from "axios";
import Cookies from "js-cookie";
import { redirect } from "next/navigation";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
export interface User {
@@ -9,26 +11,36 @@ export interface User {
email: string;
}
export default function getUser() {
const [user, setUser] = useState<undefined | User>();
export default function useUser() {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const router = useRouter();
useEffect(() => {
async function fetchUser() {
const token = Cookies.get("token");
if (!token) {
redirect('/login')
router.push("/login");
return;
}
const res = (await axios.get('http://localhost:3000/api/user', {
params: { token }
})).data as User;
try {
const res = (
await axios.get("http://localhost:3000/api/user", {
params: { token },
})
).data as User;
setUser(res);
} catch {
router.push("/login");
} finally {
setLoading(false);
}
}
fetchUser();
});
}, [router]);
return user;
return { user, loading };
}
src/lib/api-wrapper/auth.ts
-10
View File
@@ -1,10 +0,0 @@
import axios from "axios";
export async function auth(session_token: string, server_ip: string) {
const res = (await axios.post('http://localhost:3000/api/auth', {
server_ip,
session_token,
})).data;
return (res as any).token;
}
src/lib/api-wrapper/user.ts
-16
View File
@@ -1,16 +0,0 @@
import axios from "axios";
export async function getUser() {
console.log((await axios.delete("http://localhost:3000/api/user", {
data: { username: "leo" },
})).data);
return ((await axios.post('http://localhost:3000/api/user', {
username: 'leo',
name: 'Leo',
email: '',
password: 'Idk123',
})).data).token;
}
// await getUser();