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

add: improved UI by adding CSS files

Browse source
This commit is contained in:
Lukian 2025-04-06 17:47:51 +02:00
parent 1656e95557
commit 42e6acd9ca
19 changed files with 543 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

66
front/src/pages/CreateChannel.tsx
View file

@ -1,17 +1,29 @@
import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { User } from "../types";
import axios from "axios";
import TopBar from "../components/TopBar";
import "../styles/CreateChannel.css";
export default function CreateChannel() {
const navigate = useNavigate();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [token, setToken] = useState<string>("");
const [user , setUser] = useState<User>();
useEffect(() => {
const localToken = localStorage.getItem("token");
if (localToken) setToken(localToken);
if (localToken) {
setToken(localToken)
axios
.post("/api/auth/me", { token: localToken })
.then((res) => {
setUser(res.data);
});
}
}, []);
function handleSubmit(e: React.FormEvent) {
@ -27,31 +39,33 @@ export default function CreateChannel() {
}
return (
<div>
<Link to="/">Home</Link>
<h1>Create Channel</h1>
<form onSubmit={handleSubmit}>
<p>
{!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
<span>Channel name can only contain letters, numbers, - and _</span>
)}
</p>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
Create
</button>
</form>
<div className="create-channel-page">
<TopBar user={user}/>
<div className="create-channel">
<h1>Create Channel</h1>
<form onSubmit={handleSubmit}>
<p>
{!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
<span>Channel name can only contain letters, numbers, - and _</span>
)}
</p>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
Create
</button>
</form>
</div>
</div>
);
}