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

add: added register page

Browse source
This commit is contained in:
Lukian 2025-04-25 10:42:40 +02:00
parent 0a05039b8b
commit 37c96f5341
5 changed files with 139 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
front/src/main.tsx
View file

@ -4,12 +4,18 @@ import './index.css'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'
import Admin from './pages/Admin'
import AddUser from './pages/AddUser'
createRoot(document.getElementById('root')!).render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/admin" element={<Admin />} />
<Route path="/admin/adduser" element={<AddUser />} />
</Routes>
</BrowserRouter>,
)

59
front/src/pages/AddUser.tsx Normal file
View file

@ -0,0 +1,59 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
export default function AddUser () {
const navigate = useNavigate();
const [token, setToken] = useState<string>("");
const [name, setName] = useState<string>("");
const [lastname, setLastname] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [numero, setNumero] = useState<string>("");
const [password, setPassword] = useState<string>("");
useEffect(() => {
const storedToken = localStorage.getItem("token");
if (storedToken) {
setToken(storedToken);
} else {
navigate("/login");
}
}, []);
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (name === "" || lastname === "" || email === "" || numero === "" || password === "") {
alert("Please fill in all fields");
return;
}
axios
.post("/api/users/add", {
token,
name,
lastname,
email,
numero,
password
})
.then(() => {
navigate("/admin");
})
.catch((error) => {
console.log(error.response.data);
});
}
return (
<div>
<h1>Add User</h1>
<form onSubmit={handleSubmit}>
<input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
<input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
<input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
<input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button type="submit">Add User</button>
</form>
</div>
)
}

14
front/src/pages/Admin.tsx Normal file
View file

@ -0,0 +1,14 @@
import { Link } from 'react-router-dom';
export default function Admin () {
return (
<div>
<h1>Admin</h1>
<p>Welcome Admin</p>
<div>
<h2>Admin Panel</h2>
<p>Manage users, accounts, and cards.</p>
</div>
</div>
);
}

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

@ -24,7 +24,7 @@ export default function Login () {
navigate("/")
})
.catch((error) => {
alert("Login failed : " + error.response.data)
alert("Login failed : " + error.response)
})
}

59
front/src/pages/Register.tsx Normal file
View file

@ -0,0 +1,59 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
export default function Register () {
const navigate = useNavigate();
const [name, setName] = useState<string>("");
const [lastname, setLastname] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [numero, setNumero] = useState<string>("");
const [password, setPassword] = useState<string>("");
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (name === "" || lastname === "" || email === "" || numero === "" || password === "") {
alert("Please fill in all fields");
return;
}
axios
.post("/api/auth/register", {
name,
lastname,
email,
numero,
password
})
.then(() => {
axios
.post("/api/auth/login", {
email,
password
})
.then((response) => {
localStorage.setItem("token", response.data.token);
navigate("/");
})
.catch((error) => {
console.error(error.response.data);
});
})
.catch((error) => {
console.error(error.response.data);
});
}
return (
<div>
<h1>Add User</h1>
<form onSubmit={handleSubmit}>
<input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
<input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
<input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
<input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button type="submit">Add User</button>
</form>
</div>
)
}