Tronax/trxshortlink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Working login, but session not implemented yet

Browse source
This commit is contained in:
Janik 2025-07-20 14:45:16 +02:00
parent 84ff8df612
commit 241ebe07f2
9 changed files with 304 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/src/App.css
View file

@ -149,4 +149,26 @@ li {
}
#oriurl {
margin: 50px;
}
#shorturl {
margin: 50px;
}
#button_copy {
height: 100px;
width: 300px;
font-size: x-large;
border-radius: 15px;
will-change: filter;
transition: filter 400ms;
}
#button_copy:hover {
filter: drop-shadow(0 0 0.5em #f29732);
border-color: transparent;
transition: 0.3s;
}
#button_copy:active {
border-color: transparent;
background-color: transparent;
}

13
client/src/Home.tsx
View file

@ -8,18 +8,18 @@ const Home = () => {
<div className="nav">
<nav id="main-nav">
<ul id="centerlist">
<li id="home"> <a draggable="false" href="#">Home</a> </li>
<li id="home"> <a draggable="false" href="/home">Home</a> </li>
</ul>
<ul id="rightlist">
<li id="login"> <a draggable="false" href='login'>Login</a></li>
<li id="login"> <a draggable="false" href='/login'>Login</a></li>
</ul>
</nav>
</div>
</header>
<div id="logoname">
<a href="#" >
<a href="/home" >
<img src={shortlinkLogo} draggable="false" className="logo" alt="trx shortlink logo" />
</a>
<h1>trx shortlink</h1>
@ -38,8 +38,11 @@ const Home = () => {
export default Home;
async function shortenLink(url: string) {
if ((document.getElementById("oriurl") as HTMLInputElement).value == "") {
const inputi = (document.getElementById("oriurl") as HTMLInputElement).value;
if (inputi == "") {
alert("The url cannot be empty!")
} else if(!(inputi.startsWith("https://") || inputi.startsWith("http://"))) {
alert("Please provide a valid url!")
} else {
const res = await fetch("http://localhost:3000/api/shorten", {
method: "POST",
@ -49,7 +52,7 @@ async function shortenLink(url: string) {
const data = await res.json();
console.log(data.short_url);
(document.getElementById("oriurl") as HTMLInputElement).value = ""
location.href = "link/" + data.id;
location.href = "/link/" + data.id;
return data.id;
}
}

5
client/src/main.tsx
View file

@ -3,6 +3,7 @@ import './index.css';
import Home from './Home.tsx';
import Login from './pages/login.tsx'
import Copylink from './pages/copylink.tsx';
import Admin from './pages/admin.tsx';
import {
BrowserRouter as Router,
@ -22,6 +23,10 @@ createRoot(document.getElementById('root')!).render(
path='/login'
element={<Login />}
/>
<Route
path='/admin'
element={<Admin />}
/>
<Route
path='/link/:id'
element={<Copylink />}

40
client/src/pages/admin.tsx Normal file
View file

@ -0,0 +1,40 @@
import shortlinkLogo from '../assets/trx-shortlink-orange.png'
import '../App.css'
const Admin = () => {
return (
<>
<header>
<div className="nav">
<nav id="main-nav">
<ul id="centerlist">
<li id="home"> <a draggable="false" href="/home">Home</a> </li>
</ul>
<ul id="rightlist">
<li id="profile_pic"><a draggable="false" href='#wip'></a></li>
<li id="logout"> <a draggable="false" href='#wip'>Logout</a></li>
</ul>
</nav>
</div>
</header>
<div id="logoname">
<a href="/home" >
<img src={shortlinkLogo} draggable="false" className="logo" alt="trx shortlink logo" />
</a>
<h1>trx shortlink</h1>
</div>
<div className="card">
<h2>Admin Panel</h2>
<button>Button1</button>
<button>Button1</button>
</div>
</>
);
};
export default Admin;

11
client/src/pages/copylink.tsx
View file

@ -1,8 +1,11 @@
import shortlinkLogo from '../assets/trx-shortlink-orange.png'
import '../App.css'
import { useParams } from 'react-router-dom';
const Copylink = () => {
const { id } = useParams<{ id: string }>();
return (
<>
<header>
@ -14,20 +17,20 @@ const Copylink = () => {
</ul>
<ul id="rightlist">
<li id="login"> <a draggable="false" href='login'>Login</a></li>
<li id="login"> <a draggable="false" href='/login'>Login</a></li>
</ul>
</nav>
</div>
</header>
<div id="logoname">
<a href="#" >
<a href="/home" >
<img src={shortlinkLogo} draggable="false" className="logo" alt="trx shortlink logo" />
</a>
<h1>trx shortlink</h1>
</div>
<div className="card">
<input className="input" id="oriurl"></input>
<button id="button_short" onClick={() => 0}>
<input className="input" id="shorturl" readOnly value={`http://localhost:3000/${id}`}></input>
<button id="button_copy" onClick={() => navigator.clipboard.writeText((document.getElementById("shorturl") as HTMLInputElement).value) && alert("The shortlink was copied!")}>
Copy!
</button>
</div>

59
client/src/pages/login.tsx
View file

@ -1,8 +1,39 @@
import shortlinkLogo from '../assets/trx-shortlink-orange.png'
import '../App.css'
import { useState } from "react";
function App() {
function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const handleLogin = async () => {
try {
const res = await fetch("http://localhost:3000/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: (document.getElementById("username")as HTMLInputElement).value,
password: (document.getElementById("password")as HTMLInputElement).value
}),
credentials: "include", // wichtig für Cookies (Session)
});
const data = await res.json();
if (res.ok) {
// Login erfolgreich
console.log("Eingeloggt!");
location.href = "/admin"
} else {
setError(data.message || "Login fehlgeschlagen");
}
} catch (err) {
setError("Serverfehler beim Login \n\n\n" + err);
}
};
return (
<>
@ -21,22 +52,34 @@ function App() {
</div>
</header>
<div id="logoname">
<a href="#" >
<a href="/home" >
<img src={shortlinkLogo} draggable="false" className="logo" alt="trx shortlink logo" />
</a>
<h1>trx shortlink</h1>
</div>
<div className="card">
<h2>Login</h2>
<input className="login" id="username" defaultValue={"Username..."}></input><br></br>
<input className="login" id="password" type='password' defaultValue={"Password..."}></input><br></br>
<button id="login" onClick={() => 0+0}>
Login
</button>
<input
className="login"
id="username"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/><br />
<input
className="login"
id="password"
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/><br />
<button id="login" onClick={handleLogin}>Login</button>
{error && <p style={{ color: "red" }}>{error}</p>}
</div>
</>
)
}
export default App
export default Login;