Hema Coding Bank Application
Day 5:
Image:
AccountDetails.js
import React from "react";
import './AccountDetails.css';
import logoImage from "../../src/Images/Logo.png";
const AccountDetails = ({customer}) => {
console.log(customer)
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>
</div>
</div>
);
};
export default AccountDetails;
AccountDetails.css
.account-container{
display: flex;
}
.image-account-container{
background-image: url("../Images/Account\ Details.jpg");
background-size: 100% 100%;
width: 130vh;
height: 90vh;
}
.text-account-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);
}
.account-container img{
height: 60px;
padding: 20px;
}
.account-container h2{
color: #333366;
padding-left: 40px;
}
Login.js
import React, { useState } from "react";
import axios from "axios";
import "./Login.css";
import logoImage from "../../src/Images/Logo.png";
import { useNavigate } from "react-router-dom";
const Login = ({updateCustomer}) => {
const navigate = useNavigate();
const [loginError, setLoginError] = useState("");
const [loginData, setLoginData] = useState({
username: "",
password: "",
});
const handleLogin = async (e) => {
e.preventDefault();
try {
const response = await axios.post("http://localhost:3001/api/login", loginData);
navigate("/account-details");
updateCustomer(response.data.customer)
} catch (error) {
console.error("Login failed", error);
setLoginError("Invalid username or password. Please try again.");
}
console.log(loginData);
};
const handleClear = () => {
setLoginData({
username: "",
password: "",
});
};
return (
<div className="login-container">
<div className="image-login-container"></div>
<div className="text-login-container">
<img src={logoImage} alt="Hema Coding Bank logo" />
<form onSubmit={handleLogin}>
<label>Username:</label>
<input
type="text"
value={loginData.username}
onChange={(e) =>
setLoginData({ ...loginData, username: e.target.value })
}
required
/>
<label>Password:</label>
<input
type="password"
value={loginData.password}
onChange={(e) =>
setLoginData({ ...loginData, password: e.target.value })
}
maxLength={8}
required
/>
<h3 className="error-msg">{loginError}</h3>
<button type="submit">Login</button>
<button type="submit" onClick={handleClear}>
Clear
</button>
</form>
<p>Welcome back! Log in to manage your finances securely. </p>
<p> If you're new here, sign up for an account to get started. </p>
<p>Explore our features to make the most of your banking experience.</p>
<p>We prioritize your security.</p>
<p>Rest assured, your data is safe with us.</p>
<p>24/7 customer support is available. Contact us for assistance.</p>
</div>
</div>
);
};
export default Login;
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",
});
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
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"
function App() {
const [customer, setCustomer] = useState();
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">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} />} />
</Routes>
</div>
</Router>
);
}
export default App;
No comments:
Post a Comment