Hema Coding Bank Application
Day 6:
Image:
DepositForm.js
import React, { useState } from "react";
import axios from "axios";
import Swal from "sweetalert";
import "./DepositForm.css";
import logoImage from "../../src/Images/Logo.png";
const DepositForm = ({ customer, upadetBalance }) => {
const [depositData, setDepositData] = useState({
username: customer.username,
accountNumber: customer.accountNumber,
date: "",
depositAmount: "",
depositType: "",
});
const handleDeposit = async (e) => {
e.preventDefault();
console.log(depositData);
try {
const response = await axios.post(
"http://localhost:3001/api/deposit",
depositData
);
console.log(response.data.balance);
upadetBalance(response.data.balance);
Swal({
title: "Deposit Successful!",
text: `Amount deposited: ${depositData.depositAmount}`,
icon: "success",
});
} catch (error) {
console.error("Deposit failed", error);
}
};
const handleClear = () => {
setDepositData({
date: "",
depositAmount: "",
depositType: "",
});
};
return (
<div className="deposit-container">
<div className="image-deposit-container"></div>
<div className="text-deposit-container">
<img src={logoImage} alt="Hema Coding Bank logo" />
<form onSubmit={handleDeposit}>
<h2>Deposit Form :</h2>
<p>Username:{customer.username} </p>
<p>Account Number:{customer.accountNumber}</p>
<label>Date:</label>
<input
type="date"
value={depositData.date}
onChange={(e) =>
setDepositData({ ...depositData, date: e.target.value })
}
required
/>
<label>Deposit Amount:</label>
<input
type="number"
value={depositData.depositAmount}
onChange={(e) =>
setDepositData({ ...depositData, depositAmount: e.target.value })
}
required
/>
<label>Deposit Type:</label>
<input
type="text"
value={depositData.depositType}
onChange={(e) =>
setDepositData({ ...depositData, depositType: e.target.value })
}
required
/>
<button type="submit">Deposit</button>
<button type="submit" onClick={handleClear}>
Clear
</button>
</form>
</div>
</div>
);
};
export default DepositForm;
DepositForm.css
.deposit-container{
display: flex;
}
.image-deposit-container{
background-image: url("../Images/Deposit.jpg");
background-size: 100% 100%;
width: 130vh;
height: 90vh;
}
.text-deposit-container{
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-deposit-container input{
border: 1px solid rgb(131, 140, 239);
padding: 1vw 1vw;
border-radius: 10px;
width: 300px;
display: flex;
margin: 5px;
margin-left: 40px;
}
.text-deposit-container button{
border: 1px solid rgb(131, 140, 239);
padding: 0.8vw 1vw;
border-radius: 10px;
margin: 5px;
margin-left: 40px;
}
.text-deposit-container button:hover{
background-color: #a4a4db;
}
.text-deposit-container img{
height: 60px;
padding: 20px;
}
.text-deposit-container label{
padding-left: 40px;
}
.text-deposit-container h2{
color: #333366;
padding-left: 40px;
}
App.js
import "./App.css";
import Home from "./Home";
import Login from "./Forms/Login";
import Registration from "./Forms/Registration";
import AccountDetails from "./Forms/AccountDetails";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
import DepositForm from "./Forms/DepositForm";
function App() {
const [customer, setCustomer] = useState();
const [updatedBalance,setUpdatedBalance] = useState(0)
const upadetBalance = (newBalance)=>{
setUpdatedBalance(newBalance)
}
console.log(updatedBalance)
const updateCustomer = (userData) => {
setCustomer(userData);
console.log(userData);
};
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link className="nav-link" to="/">
Home
</Link>
</li>
{!customer ? (
<>
<li>
<Link className="nav-link" to="/login">
Login
</Link>
</li>
<li>
<Link className="nav-link" to="/register">
Register
</Link>
</li>
</>
) : (
<>
<li>
<Link className="nav-link" to="/account-details">
Account Details
</Link>
</li>
<li>
<Link className="nav-link" to="/deposit">
Deposit
</Link>
</li>
<li>
<Link className="nav-link">Withdraw</Link>
</li>
<li>
<button>Logout</button>
</li>
</>
)}
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/login"
element={<Login updateCustomer={updateCustomer} />}
/>
<Route path="/register" element={<Registration />} />
<Route
path="/account-details"
element={<AccountDetails customer={customer} updatedBalance={updatedBalance}/>}
/>
<Route path="/deposit" element={<DepositForm customer={customer} upadetBalance={upadetBalance}/>} />
</Routes>
</div>
</Router>
);
}
export default App;
AccountDetails.js
import React from "react";
import './AccountDetails.css';
import logoImage from "../../src/Images/Logo.png";
const AccountDetails = ({customer, updatedBalance}) => {
return (
<div className="account-container">
<div className="image-account-container"></div>
<div className="text-account-container">
<img src={logoImage} alt="Hema Coding Bank logo" />
<h2>Account Details :</h2>
<p>Username:{customer.username}</p>
<p>Account Number:{customer.accountNumber}</p>
<p>Branch:{customer.branch}</p>
<p>Phone Number:{customer.phoneNumber}</p>
{/* <p>Available Balance:{customer.balance}</p> */}
<p>Available Balance:{updatedBalance === 0 ? customer.balance : updatedBalance} Balance</p>
</div>
</div>
);
};
export default AccountDetails;
server.js
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const port = 3001;
app.use(bodyParser.json());
app.use(cors());
mongoose.connect("mongodb://localhost:27017/Hema_Coding_Bank", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.once("open", () => {
console.log("Connected to MongoDB");
});
const userSchema = new mongoose.Schema({
username: String,
password: String,
accountNumber: Number,
branch: String,
phoneNumber: Number,
balance: {
type: Number,
default: 0,
},
});
const Customer = mongoose.model("Customer", userSchema);
app.post("/api/signup", async (req, res) => {
try {
const { username, password, accountNumber, branch, phoneNumber } = req.body;
const newCustomer = new Customer({
username,
password,
accountNumber,
branch,
phoneNumber,
});
await newCustomer.save();
res.status(201).json({ message: "User created successfully" });
} catch (error) {
console.error(error);
res.status(500).json({ message: "Internal server error" });
}
});
app.post("/api/login", async (req, res) => {
try {
const { username, password } = req.body;
const customer = await Customer.findOne({ username });
if (!customer) {
res.status(401).json({
message: "Invalid username ",
});
}
if (customer.password !== password) {
res.status(401).json({
message: "Invalid password ",
});
}
res.status(200).json({
message: "Login successful",
customer: {
username: customer.username,
accountNumber: customer.accountNumber,
branch: customer.branch,
phoneNumber: customer.phoneNumber,
balance: customer.balance,
},
});
console.log(customer);
} catch (error) {
console.error(error);
res.status(500).json({
message: "Internal server error",
});
}
});
const depositSchema = new mongoose.Schema({
username: String,
accountNumber: Number,
date: String,
depositAmount: Number,
depositType: String,
});
const Deposit = mongoose.model("Deposit", depositSchema);
app.post("/api/deposit", async (req, res) => {
try {
const { username, accountNumber, date, depositAmount, depositType } =
req.body;
console.log(req.body);
const customer = await Customer.findOne({ username, accountNumber });
console.log(customer);
console.log(customer.balance)
console.log(depositAmount)
customer.balance = Number(customer.balance) + Number(depositAmount)
console.log(customer.balance)
await customer.save()
if (!customer) {
res.status(401).json({ message: "Invalid username and account number" });
}
const newDeposit = new Deposit({
username,
accountNumber,
date,
depositAmount,
depositType,
});
await newDeposit.save();
return res.status(200).json({
message:"Deposit successful",
balance:customer.balance
});
} catch (error) {
console.error(error);
res.status(500).json({
message: "Internal server error",
});
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
No comments:
Post a Comment