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

add: added routes and improved frontend

Browse source
This commit is contained in:
Lukian 2025-04-27 18:23:16 +02:00
parent 37c96f5341
commit 94e4d5750f
15 changed files with 1039 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

52
back/api/@me.js
View file

@ -1,11 +1,11 @@
const express = require('express');
const router = express.Router();
const { getConnection, getUserAccounts, getUserCards } = require('../libs/mysql');
const { getConnection, getUserAccounts, getUserCards, getUserTransfers, setAccountBalance, getAccount, addTransfer } = require('../libs/mysql');
const { checkAuth } = require('../libs/middlewares');
router.post('/', checkAuth, async (req, res) => {
const user = req.user;
res.send({ id: user.id, name: user.name, lastname: user.lastname, admin: user.admin });
res.send(user);
});
router.post('/accounts', checkAuth, async (req, res) => {
@ -13,11 +13,7 @@ router.post('/accounts', checkAuth, async (req, res) => {
const connection = await getConnection();
const accounts = await getUserAccounts(connection, user.id);
connection.end();
if (!accounts[0]) {
return res.status(404).send({ error: 'No accounts found' });
}
res.send({ accounts: accounts });
res.send(accounts);
});
router.post('/cards', checkAuth, async (req, res) => {
@ -25,11 +21,47 @@ router.post('/cards', checkAuth, async (req, res) => {
const connection = await getConnection();
const cards = await getUserCards(connection, user.id);
connection.end();
res.send(cards);
});
if (!cards[0]) {
return res.status(404).send({ error: 'No cards found' });
router.post('/transfers', checkAuth, async (req, res) => {
const user = req.user;
const connection = await getConnection();
const transfers = await getUserTransfers(connection, user.id);
connection.end();
res.send(transfers);
});
router.post('/send-money', checkAuth, async (req, res) => {
const user = req.user;
const { account_from_id, account_to_id, amount, name } = req.body;
if (!account_from_id || !account_to_id || !amount || !name) {
return res.status(400).send({ error: 'Missing required fields' });
}
res.send({ cards: cards });
const connection = await getConnection();
const accountFrom = await getAccount(connection, account_from_id);
const accountTo = await getAccount(connection, account_to_id);
if (!accountFrom[0] || !accountTo[0]) {
return res.status(400).send({ error: 'Invalid account ID' });
}
if (accountFrom[0].client_id !== user.id) {
return res.status(403).send({ error: 'You are not authorized to send money from this account' });
}
if (accountFrom[0].balance < amount) {
return res.status(400).send({ error: 'Insufficient funds' });
}
await setAccountBalance(connection, account_from_id, accountFrom[0].balance - amount);
await setAccountBalance(connection, account_to_id, accountTo[0].balance + amount);
await addTransfer(connection, account_from_id, account_to_id, name, amount);
connection.end();
res.send({ message: 'Money sent successfully' });
});
module.exports = router;

9
back/api/accounts.js
View file

@ -1,9 +0,0 @@
const express = require('express');
const { getConnection } = require('../libs/mysql');
const { checkAuth } = require('../libs/middlewares');
const router = express.Router();
module.exports = router;

205
back/api/users.js
View file

@ -1,9 +1,212 @@
const express = require('express');
const { getConnection, addUser } = require('../libs/mysql');
const { getConnection, addUser, getUsers, getUser, getUserAccounts, addAccount, removeAccount, getUserCards, addCard, removeCard, setAccountBalance, getAccount } = require('../libs/mysql');
const { checkAuth } = require('../libs/middlewares');
const router = express.Router();
router.post('/', checkAuth, async (req, res) => {
const user = req.user;
if (!user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const users = await getUsers(connection);
connection.end();
res.send(users );
});
router.post('/:id', checkAuth, async (req, res) => {
const this_user = req.user;
const { id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, id);
connection.end();
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
res.send(user[0]);
});
router.post('/:id/accounts', checkAuth, async (req, res) => {
const this_user = req.user;
const { id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
const accounts = await getUserAccounts(connection, id);
connection.end();
res.send(accounts);
});
router.post('/:user_id/accounts/:account_id/delete', checkAuth, async (req, res) => {
const this_user = req.user;
const { user_id, account_id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, user_id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
await removeAccount(connection, account_id);
connection.end();
res.send({ message: 'Account removed' });
});
router.post('/:user_id/accounts/:account_id/add-balance', checkAuth, async (req, res) => {
const this_user = req.user;
const { user_id, account_id } = req.params;
const { balance } = req.body;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
if (!balance) {
return res.status(400).json({ error: 'Balance is required' });
}
const connection = await getConnection();
const user = await getUser(connection, user_id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
const account = await getAccount(connection, account_id);
if (!account[0]) {
return res.status(404).send({ error: 'Account not found' });
}
await setAccountBalance(connection, account_id, account[0].balance + balance);
connection.end();
res.send({ message: 'Balance added' });
});
router.post('/:id/create-account', checkAuth, async (req, res) => {
const this_user = req.user;
const { name } = req.body;
const { id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
if (!name) {
return res.status(400).json({ error: 'Name is required' });
}
const connection = await getConnection();
const user = await getUser(connection, id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
await addAccount(connection, id, name);
connection.end();
res.send({ message: 'Account created' });
});
router.post('/:id/cards', checkAuth, async (req, res) => {
const this_user = req.user;
const { id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
const cards = await getUserCards(connection, id);
connection.end();
res.send(cards);
});
router.post('/:user_id/cards/:card_id/delete', checkAuth, async (req, res) => {
const this_user = req.user;
const { user_id, card_id } = req.params;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, user_id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
await removeCard(connection, card_id);
connection.end();
res.send({ message: 'Card removed' });
});
router.post('/:user_id/create-card', checkAuth, async (req, res) => {
const this_user = req.user;
const { user_id } = req.params;
const { account_id } = req.body;
if (!this_user.admin) {
return res.status(403).json({ error: 'Permission denied' });
}
const connection = await getConnection();
const user = await getUser(connection, user_id);
if (!user[0]) {
return res.status(404).send({ error: 'User not found' });
}
const numero = Math.floor(Math.random() * 1000000000);
const expiration = new Date();
expiration.setFullYear(expiration.getFullYear() + 5);
const expirationString = `${expiration.getMonth() + 1}/${expiration.getFullYear() % 100}`;
const cvc = Math.floor(Math.random() * 1000);
await addCard(connection, account_id, numero, expirationString, cvc);
connection.end();
res.send({ message: 'Card created' });
});
router.post('/add', checkAuth, async (req, res) => {
const user = req.user;
const { name, lastname, email, numero, password } = req.body;

89
back/bank.sql
View file

@ -2,8 +2,8 @@
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: leizour.fr
-- Generation Time: Apr 09, 2025 at 02:41 PM
-- Host: mysql
-- Generation Time: Apr 27, 2025 at 01:27 PM
-- Server version: 10.11.3-MariaDB-1:10.11.3+maria~ubu2204
-- PHP Version: 8.1.19
@ -20,6 +20,8 @@ SET time_zone = "+00:00";
--
-- Database: `bank`
--
CREATE DATABASE IF NOT EXISTS `bank` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `bank`;
-- --------------------------------------------------------
@ -27,12 +29,14 @@ SET time_zone = "+00:00";
-- Table structure for table `accounts`
--
CREATE TABLE `accounts` (
`id` int(11) NOT NULL,
`balance` bigint(20) NOT NULL,
CREATE TABLE IF NOT EXISTS `accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`balance` bigint(20) NOT NULL DEFAULT 0,
`client_id` int(11) NOT NULL,
`name` varchar(20) NOT NULL,
`interest` float NOT NULL DEFAULT 0
`interest` float NOT NULL DEFAULT 0,
PRIMARY KEY (`id`),
KEY `client_id` (`client_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-- --------------------------------------------------------
@ -41,12 +45,14 @@ CREATE TABLE `accounts` (
-- Table structure for table `cards`
--
CREATE TABLE `cards` (
`id` int(11) NOT NULL,
CREATE TABLE IF NOT EXISTS `cards` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`account_id` int(11) NOT NULL,
`number` int(11) NOT NULL,
`expiration` timestamp NOT NULL,
`cvc` int(11) NOT NULL
`cvc` int(11) NOT NULL,
PRIMARY KEY (`id`),
KEY `account_id` (`account_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-- --------------------------------------------------------
@ -55,12 +61,15 @@ CREATE TABLE `cards` (
-- Table structure for table `transfers`
--
CREATE TABLE `transfers` (
`id` int(11) NOT NULL,
CREATE TABLE IF NOT EXISTS `transfers` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`account_from_id` int(11) NOT NULL,
`account_to_id` int(11) NOT NULL,
`name` varchar(30) NOT NULL,
`value` int(11) NOT NULL
`value` int(11) NOT NULL,
PRIMARY KEY (`id`),
KEY `account_from_id` (`account_from_id`),
KEY `account_to_id` (`account_to_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-- --------------------------------------------------------
@ -69,71 +78,39 @@ CREATE TABLE `transfers` (
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(11) NOT NULL,
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`lastname` varchar(20) NOT NULL,
`password` varchar(150) NOT NULL,
`email` varchar(100) NOT NULL,
`numero` varchar(20) NOT NULL,
`admin` tinyint(1) NOT NULL
`admin` tinyint(1) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Indexes for dumped tables
-- Constraints for dumped tables
--
--
-- Indexes for table `accounts`
-- Constraints for table `accounts`
--
ALTER TABLE `accounts`
ADD PRIMARY KEY (`id`);
ADD CONSTRAINT `client_id` FOREIGN KEY (`client_id`) REFERENCES `users` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
--
-- Indexes for table `cards`
-- Constraints for table `cards`
--
ALTER TABLE `cards`
ADD PRIMARY KEY (`id`);
ADD CONSTRAINT `account_id` FOREIGN KEY (`account_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
--
-- Indexes for table `transfers`
-- Constraints for table `transfers`
--
ALTER TABLE `transfers`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `accounts`
--
ALTER TABLE `accounts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `cards`
--
ALTER TABLE `cards`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `transfers`
--
ALTER TABLE `transfers`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
ADD CONSTRAINT `account_from_id` FOREIGN KEY (`account_from_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT `account_to_id` FOREIGN KEY (`account_to_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

142
back/libs/mysql.js
View file

@ -91,6 +91,66 @@ function getUserAccounts(connection, id) {
});
}
function getAccount(connection, id) {
return new Promise((resolve, reject) => {
connection.query(
`SELECT * FROM accounts WHERE id = ?`,
[id],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function addAccount(connection, client_id, name) {
return new Promise((resolve, reject) => {
connection.query(
`INSERT INTO accounts (client_id, name) VALUES (?, ?)`,
[client_id, name],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function removeAccount(connection, id) {
return new Promise((resolve, reject) => {
connection.query(
`DELETE FROM accounts WHERE id = ?`,
[id],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function setAccountBalance(connection, id, balance) {
return new Promise((resolve, reject) => {
connection.query(
`UPDATE accounts SET balance = ? WHERE id = ?`,
[balance, id],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
// +-------------------------------+
// | Cards |
// +-------------------------------+
@ -98,10 +158,11 @@ function getUserAccounts(connection, id) {
function getUserCards(connection, id) {
return new Promise((resolve, reject) => {
connection.query(
`SELECT cards.*
`SELECT cards.*, accounts.name AS account_name
FROM cards
JOIN accounts ON cards.account_id = accounts.id
WHERE client_id = ?`,
JOIN users ON accounts.client_id = users.id
WHERE users.id = ?`,
[id],
(error, result) => {
if (error) {
@ -113,6 +174,74 @@ function getUserCards(connection, id) {
});
}
function addCard(connection, account_id, number, expiration, cvc) {
return new Promise((resolve, reject) => {
connection.query(
`INSERT INTO cards (account_id, number, expiration, cvc) VALUES (?, ?, ?, ?)`,
[account_id, number, expiration, cvc],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function removeCard(connection, id) {
return new Promise((resolve, reject) => {
connection.query(
`DELETE FROM cards WHERE id = ?`,
[id],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
// +-------------------------------+
// | Transfers |
// +-------------------------------+
function getUserTransfers(connection, id) {
return new Promise((resolve, reject) => {
connection.query(
`SELECT *
FROM transfers
JOIN accounts as sender ON transfers.account_from_id = sender.id
JOIN accounts as receiver ON transfers.account_to_id = receiver.id
WHERE sender.client_id = ? OR receiver.client_id = ?`,
[id, id],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function addTransfer(connection, account_from_id, account_to_id, name, amount) {
return new Promise((resolve, reject) => {
connection.query(
`INSERT INTO transfers (account_from_id, account_to_id, name, value) VALUES (?, ?, ?, ?)`,
[account_from_id, account_to_id, name, amount],
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
module.exports = {
getConnection,
@ -122,6 +251,15 @@ module.exports = {
getUserByEmail,
getUserAccounts,
getAccount,
addAccount,
removeAccount,
setAccountBalance,
getUserCards,
addCard,
removeCard,
getUserTransfers,
addTransfer,
};

67
front/src/components/TopBar.tsx Normal file
View file

@ -0,0 +1,67 @@
import { useState } from "react"
import { Link } from "react-router-dom"
import { User } from "../types"
export default function TopBar({ user }: { user: User | undefined }) {
const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
return (
<div className="bank-section topbar">
<div className="topbar-left">
<Link to="/">Home</Link>
{user?.admin == 1 && (
<Link to="/admin">Admin</Link>
)}
</div>
<div className="topbar-center">
<h1>Tanuki's Bank</h1>
</div>
{user ? (
<div className="topbar-right">
<span>{user.name}</span>
<button onClick={() => {
localStorage.removeItem("token")
window.location.reload()
}}>
Logout
</button>
</div>
) : (
<div className="topbar-right">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
)}
<div className="burger-menu">
{burgerMenuOpen && (
<div className="burger-menu-content">
<Link to="/">Home</Link>
{user?.admin == 1 && (
<Link to="/admin">Admin</Link>
)}
{user ? (
<div className="burger-menu-user">
<span>{user.name}</span>
<button onClick={() => {
localStorage.removeItem("token")
window.location.reload()
}}>
Logout
</button>
</div>
) : (
<div className="burger-menu-user">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
)}
</div>
)}
<button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
{burgerMenuOpen ? "Close" : "Menu"}
</button>
</div>
</div>
)
}

82
front/src/index.css
View file

@ -0,0 +1,82 @@
html {
background: #2a6c9b;
background: linear-gradient(167deg, rgba(42, 108, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(163, 237, 83, 1) 100%);
}
.bank-page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 10px;
}
.bank-section {
width: 97%;
display: flex;
flex-direction: column;
border: 0.5px solid #000;
padding: 10px;
background: #fcf2b5;
}
.topbar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.topbar-left {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.topbar-right {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.burger-menu {
display: none;
}
.burger-menu-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.burger-menu-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@media (max-width: 780px) {
.topbar {
flex-direction: column;
align-items: center;
}
.topbar-left {
display: none;
}
.topbar-right {
display: none;
}
.burger-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
}

4
front/src/main.tsx
View file

@ -6,7 +6,7 @@ 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'
import UserPage from './pages/UserPage'
createRoot(document.getElementById('root')!).render(
<BrowserRouter>
@ -15,7 +15,7 @@ createRoot(document.getElementById('root')!).render(
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/admin" element={<Admin />} />
<Route path="/admin/adduser" element={<AddUser />} />
<Route path="/admin/user/:id" element={<UserPage />} />
</Routes>
</BrowserRouter>,
)

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

@ -1,59 +0,0 @@
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>
)
}

73
front/src/pages/Admin.tsx
View file

@ -1,14 +1,77 @@
import { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios'
import { User, Users } from '../types';
import TopBar from '../components/TopBar';
export default function Admin () {
const navigate = useNavigate();
const [user, setUser] = useState<User>();
const [users, setUsers] = useState<Users>([]);
useEffect(() => {
const token = localStorage.getItem('token');
if (!token) {
navigate('/login');
} else {
axios
.post('/api/@me', {
token: token
})
.then((response) => {
setUser(response.data);
})
.catch(() => {
navigate('/login');
});
axios
.post('/api/users', {
token: token
})
.then((response) => {
setUsers(response.data);
})
.catch((error) => {
console.error('Error fetching users:', error.response.data);
});
}
}, []);
if (!user) {
return (
<div className='bank-page'>
<TopBar user={user} />
<div className='bank-section'>
<h1>Loading...</h1>
</div>
</div>
);
}
return (
<div>
<h1>Admin</h1>
<p>Welcome Admin</p>
<div>
<div className='bank-page'>
<TopBar user={user} />
<div className='bank-section'>
<h2>Admin Panel</h2>
<p>Manage users, accounts, and cards.</p>
</div>
<div className='bank-section'>
<h2>Users</h2>
{users.length > 0 ? (
users.map((user) => (
<div key={user.id}>
<p>
<strong>{user.name}</strong> - {user.lastname}
</p>
<Link to={`/admin/user/${user.id}`}>View Details</Link>
</div>
))
) : (
<p>No users found.</p>
)}
</div>
</div>
);
}

107
front/src/pages/Home.tsx
View file

@ -1,19 +1,54 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { User, Accounts, Cards } from '../types';
import { User, Accounts, Cards, Transfers } from '../types';
import axios from 'axios';
import TopBar from '../components/TopBar';
export default function Home () {
const navigate = useNavigate();
const [token, setToken] = useState<string>("");
const [user, setUser] = useState<User>();
const [transfers, setTransfers] = useState<Transfers>([]);
const [accounts, setAccounts] = useState<Accounts>([]);
const [cards, setCards] = useState<Cards>([]);
const [accountId, setAccountId] = useState<number>(0);
const [accountToId, setAccountToId] = useState<number>(0);
const [amount, setAmount] = useState<number>(0);
const [message, setMessage] = useState<string>("");
const token = localStorage.getItem("token");
function sendMoney (e: React.FormEvent) {
e.preventDefault();
axios
.post("/api/@me/send-money", {
token: token,
account_from_id: accountId,
account_to_id: accountToId,
amount: amount,
name: message
})
.then(() => {
axios
.post("/api/@me/accounts", { token: token })
.then((response) => {
setAccounts(response.data);
if (response.data.length > 0) {
setAccountId(response.data[0].id);
}
})
.catch(() => {
console.error("Failed to fetch accounts");
});
})
.catch((error) => {
console.error("Failed to send money", error.response.data);
});
}
useEffect(() => {
const storedToken = localStorage.getItem("token");
if (storedToken) {
setToken(storedToken);
axios
.post("/api/@me", { token: storedToken })
.then((response) => {
@ -23,10 +58,22 @@ export default function Home () {
navigate("/login");
});
axios
.post("/api/@me/transfers", { token: storedToken })
.then((response) => {
setTransfers(response.data);
})
.catch(() => {
console.error("Failed to fetch transfers");
});
axios
.post("/api/@me/accounts", { token: storedToken })
.then((response) => {
setAccounts(response.data);
if (response.data.length > 0) {
setAccountId(response.data[0].id);
}
})
.catch(() => {
console.error("Failed to fetch accounts");
@ -40,22 +87,62 @@ export default function Home () {
.catch(() => {
console.error("Failed to fetch cards");
});
} else {
navigate("/login");
}
}, []);
if (!user) {
return (
<div>
<h1>Loading...</h1>
<div className='bank-page'>
<TopBar user={user} />
<div className='bank-section'>
<h1>Loading...</h1>
</div>
</div>
);
}
return (
<div>
<h1>Home</h1>
<p>Welcome {user.name} {user.lastname}</p>
<div>
<div className='bank-page'>
<TopBar user={user} />
<div className='bank-section'>
<h1>Home</h1>
<p>Welcome {user.name} {user.lastname}</p>
</div>
<div className='bank-section'>
<h2>Your Transfers</h2>
{transfers.length > 0 ? (
<ul>
{transfers.map((transfer) => (
<li key={transfer.id}>
Transfer ID: {transfer.id}, Amount: {transfer.value}
</li>
))}
</ul>
) : (
<p>No transfers found.</p>
)}
</div>
{accounts.length > 0 && (
<div className='bank-section'>
<h2>Send money</h2>
<form onSubmit={sendMoney}>
<select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
{accounts.map((account: any) => (
<option key={account.id} value={account.id}>
{account.name}
</option>
))}
</select>
<input type="number" placeholder="Amount" onChange={(e) => setAmount(Number(e.target.value))} value={amount}/>
<input type="text" placeholder="Recipient Account ID" onChange={(e) => setAccountToId(Number(e.target.value))} value={accountToId}/>
<input type="text" placeholder="Message" onChange={(e) => setMessage(e.target.value)} value={message}/>
<button type="submit">Send</button>
</form>
</div>
)}
<div className='bank-section'>
<h2>Your Accounts</h2>
{accounts.length > 0 ? (
<ul>
@ -69,7 +156,7 @@ export default function Home () {
<p>No accounts found.</p>
)}
</div>
<div>
<div className='bank-section'>
<h2>Your Cards</h2>
{cards.length > 0 ? (
<ul>

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

@ -2,6 +2,8 @@ import axios from "axios"
import { useState } from "react"
import { useNavigate } from "react-router-dom"
import TopBar from "../components/TopBar"
export default function Login () {
const navigate = useNavigate()
const [email, setEmail] = useState("")
@ -29,13 +31,16 @@ export default function Login () {
}
return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
<input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
<button type="submit" >Login</button>
</form>
<div className="bank-page">
<TopBar user={undefined} />
<div className="bank-section">
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
<input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
<button type="submit" >Login</button>
</form>
</div>
</div>
)
}

27
front/src/pages/Register.tsx
View file

@ -1,7 +1,9 @@
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import TopBar from '../components/TopBar';
export default function Register () {
const navigate = useNavigate();
const [name, setName] = useState<string>("");
@ -44,16 +46,19 @@ export default function Register () {
}
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 className='bank-page'>
<TopBar user={undefined} />
<div className='bank-section'>
<h1>Register</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">Register</button>
</form>
</div>
</div>
)
}

261
front/src/pages/UserPage.tsx Normal file
View file

@ -0,0 +1,261 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { User } from '../types';
import TopBar from '../components/TopBar';
export default function UserPage() {
const navigate = useNavigate();
const [user, setUser] = useState<User>();
const [thisUser, setThisUser] = useState<User>();
const [accounts, setAccounts] = useState([]);
const [cards, setCards] = useState([]);
const [name, setName] = useState('');
const [balance, setBalance] = useState(0);
const [accountId, setAccountId] = useState<Number>();
const token = localStorage.getItem('token');
const { id } = useParams();
function handleSubmit(event: React.FormEvent) {
event.preventDefault();
axios
.post(`/api/users/${id}/create-account`, { token: token, name: name })
.then(() => {
axios
.post(`/api/users/${id}/accounts`, { token: token })
.then((response) => {
setAccounts(response.data);
setName('');
setAccountId(response.data[0]?.id);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
})
.catch((error) => {
console.error('Error creating account:', error.response.data);
});
}
function deleteAccount(accountId: number) {
if (!window.confirm('Are you sure you want to delete this account?')) {
return;
}
axios
.post(`/api/users/${id}/accounts/${accountId}/delete`, { token: token })
.then(() => {
axios
.post(`/api/users/${id}/accounts`, { token: token })
.then((response) => {
setAccounts(response.data);
setName('');
setAccountId(response.data[0]?.id);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
})
.catch((error) => {
console.error('Error deleting account:', error.response.data);
});
}
function addCard(event: React.FormEvent) {
event.preventDefault();
axios
.post(`/api/users/${id}/create-card`, { token: token, account_id: accountId })
.then(() => {
axios
.post(`/api/users/${id}/cards`, { token: token })
.then((response) => {
setCards(response.data);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
})
.catch((error) => {
console.error('Error creating account:', error.response.data);
});
}
function deleteCard(cardId: number) {
if (!window.confirm('Are you sure you want to delete this card?')) {
return;
}
axios
.post(`/api/users/${id}/cards/${cardId}/delete`, { token: token })
.then(() => {
axios
.post(`/api/users/${id}/cards`, { token: token })
.then((response) => {
setCards(response.data);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
})
.catch((error) => {
console.error('Error deleting account:', error.response.data);
});
}
function addBalance(event: React.FormEvent) {
event.preventDefault();
axios
.post(`/api/users/${id}/accounts/${accountId}/add-balance`, { token: token, balance: balance })
.then(() => {
axios
.post(`/api/users/${id}/accounts`, { token: token })
.then((response) => {
setAccounts(response.data);
setBalance(0);
setAccountId(response.data[0]?.id);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
})
.catch((error) => {
console.error('Error creating account:', error.response.data);
});
}
useEffect(() => {
if (token) {
axios
.post('/api/@me', { token: token })
.then((response) => {
setThisUser(response.data);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
axios
.post(`/api/users/${id}`, { token: token })
.then((response) => {
setUser(response.data);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
axios
.post(`/api/users/${id}/accounts`, { token: token })
.then((response) => {
setAccounts(response.data);
setAccountId(response.data[0]?.id);
})
.catch((error) => {
console.error('Error fetching user:', error.response.data);
});
axios
.post(`/api/users/${id}/cards`, { token: token })
.then((response) => {
setCards(response.data);
})
.catch((error) => {
console.error('Error fetching cards:', error.response.data);
});
} else {
navigate('/login');
}
}, [token]);
if (!user || !thisUser) {
return (
<div className='bank-page'>
<TopBar user={thisUser} />
<div className='bank-section'>
<h1>Loading...</h1>
</div>
</div>
)
}
return (
<div className='bank-page'>
<TopBar user={thisUser} />
<div className='bank-section'>
<h2>{user.name} {user.lastname}</h2>
<p><strong>Email:</strong> {user.email}</p>
<p><strong>Phone Number:</strong> {user.numero}</p>
<p><strong>Admin:</strong> {user.admin === 1 ? 'Yes' : 'No'}</p>
</div>
<div className='bank-section'>
<h2>User Accounts</h2>
{accounts.length > 0 ? (
accounts.map((account: any) => (
<div key={account.id}>
<p>
<strong>Name:</strong> {account.name} - <strong>Balance:</strong> {account.balance} - <strong>Interest:</strong> {account.interest}
</p>
<button onClick={() => deleteAccount(account.id)}>Delete account</button>
</div>
))
) : (
<p>No accounts found.</p>
)}
</div>
{accounts.length > 0 && (
<div className='bank-section'>
<h2>Add balance</h2>
<form onSubmit={addBalance}>
<select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
{accounts.map((account: any) => (
<option key={account.id} value={account.id}>
{account.name}
</option>
))}
</select>
<input type="number" placeholder='Balance' id='balance' onChange={(e) => setBalance(Number(e.target.value))} value={balance} />
<button type='submit'>Add balance</button>
</form>
</div>
)}
<div className='bank-section'>
<h2>Create Account</h2>
<form onSubmit={handleSubmit}>
<input type="text" placeholder='Account name' id='name' onChange={(e) => setName(e.target.value)} value={name} />
<button type="submit">Create account</button>
</form>
</div>
<div className='bank-section'>
<h2>User Cards</h2>
{cards.length > 0 ? (
cards.map((card: any) => (
<div key={card.id}>
<p>
<strong>Card Account:</strong> {card.account_name} - <strong>Card Number:</strong> {card.number} - <strong>Expiration:</strong> {card.expiration} - <strong>CVC:</strong> {card.cvc}
</p>
<button onClick={() => deleteCard(card.id)}>Delete card</button>
</div>
))
) : (
<p>No cards found.</p>
)}
</div>
{accounts.length > 0 && (
<div className='bank-section'>
<h2>Add card</h2>
<form onSubmit={addCard}>
<select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
{accounts.map((account: any) => (
<option key={account.id} value={account.id}>
{account.name}
</option>
))}
</select>
<button type='submit'>Add card</button>
</form>
</div>
)}
</div>
);
}

15
front/src/types.ts
View file

@ -2,9 +2,24 @@ export type User = {
id: number;
name: string;
lastname: string;
email: string;
numero: string;
password: string;
admin: number;
}
export type Users = User[];
export type Transfer = {
id: number;
account_from_id: number;
account_to_id: number;
name: string;
value: number;
}
export type Transfers = Transfer[];
export type Account = {
id: number;
balance: number;