Hema Coding Bank Application
Day 4:
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 = () => {
const navigate = useNavigate();
const [loginError, setLoginError] = useState("");
const [loginData, setLoginData] = useState({
username: "",
password: "",
});
const handleLogin = async (e) => {
e.preventDefault();
try {
await axios.post("http://localhost:3001/api/login", loginData);
navigate("/account-details");
} 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;
Login.css
.login-container {
display: flex;
}
.image-login-container {
background-image: url("../Images/Login.png");
background-size: 100% 100%;
width: 130vh;
height: 90vh;
}
.text-login-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-login-container button {
border: 1px solid rgb(131, 140, 239);
padding: 0.8vw 1vw;
border-radius: 10px;
margin: 5px;
margin-left: 40px;
}
.text-login-container button:hover {
background-color: #a4a4db;
cursor: pointer;
}
.text-login-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-login-container img{
height: 60px;
padding: 20px;
}
.text-login-container label{
padding: 40px;
}
.error-msg{
color: #ff0000;
padding-left: 40px;
font-size: 14px;
}
p{
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";
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link className="nav-link" to="/">Home</Link>
</li>
<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>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Registration />} />
<Route path="/account-details" element={<AccountDetails/>} />
</Routes>
</div>
</Router>
);
}
export default App;
App.css
nav {
background-color: #36366f;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover {
text-decoration: underline;
cursor: pointer;
}
Registration.js
import React from "react";
import { useState } from "react";
import axios from "axios";
import "./Registration.css";
import logoImage from "../../src/Images/Logo.png";
import { useNavigate } from "react-router-dom";
const Registration = () => {
const navigate = useNavigate();
const [signupData, setSignupData] = useState({
username: "",
password: "",
accountNumber: "",
branch: "",
phoneNumber: "",
});
const handleSignup = async (e) => {
e.preventDefault();
try {
await axios.post("http://localhost:3001/api/signup", signupData);
console.log("Signup successful");
navigate("/login")
} catch (error) {
console.error("Signup failed", error);
}
};
const handleClear = () => {
setSignupData({
username: "",
password: "",
accountNumber: "",
branch: "",
phoneNumber: "",
});
};
return (
<div className="signup-Container">
<div className="image-signup-container"></div>
<div className="signUp-text">
<img src={logoImage} alt="Hema Coding Bank logo" />
<form onSubmit={handleSignup}>
<div>
<label>Username:</label>
<input
type="text"
value={signupData.username}
onChange={(e) =>
setSignupData({ ...signupData, username: e.target.value })
}
required
/>
</div>
<div>
<label>Password:</label>
<input
type="password"
value={signupData.password}
onChange={(e) =>
setSignupData({ ...signupData, password: e.target.value })
}
maxLength={8}
required
/>
</div>
<div>
<label>Account Number:</label>
<input
type="number"
value={signupData.accountNumber}
onChange={(e) => {
if (e.target.value.length <= 14) {
setSignupData({
...signupData,
accountNumber: e.target.value,
});
}
}}
required
/>
</div>
<div>
<label>Branch:</label>
<input
type="text"
value={signupData.branch}
onChange={(e) =>
setSignupData({ ...signupData, branch: e.target.value })
}
required
/>
</div>
<div>
<label>Registered Phone Number:</label>
<input
type="number"
value={signupData.phoneNumber}
onChange={(e) => {
if (e.target.value.length <= 10) {
setSignupData({ ...signupData, phoneNumber: e.target.value });
}
}}
required
/>
</div>
<div>
<button type="submit">Sign Up</button>
<button type="submit" onClick={handleClear}>
Clear
</button>
</div>
</form>
</div>
</div>
);
};
export default Registration;
No comments:
Post a Comment