Skip to content

Commit

Permalink
Feat : Add OpenClassrooms-Student-Center#2 US (Login) + Add Login and…
Browse files Browse the repository at this point in the history
… Profile pages, update main.css and FeatureItem.jsx, and update NavBar.jsx and Home.jsx
  • Loading branch information
reffinger committed Feb 9, 2024
1 parent 6f7f870 commit 559fabe
Show file tree
Hide file tree
Showing 7 changed files with 173 additions and 53 deletions.
8 changes: 4 additions & 4 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import './assets/css/main.css';
import Footer from './layout/Footer';
import Navbar from './layout/NavBar';
import Home from './pages/Home';
import Login from './pages/Login';
import Profile from './pages/Profile';

const router = createBrowserRouter([
{
Expand All @@ -16,10 +18,8 @@ const router = createBrowserRouter([
),
children: [
{ path: '/', element: <Home /> },
// { path: '/profile', element: <Profile /> },
// { path: '/transfer', element: <Transfer /> },
// { path: '/deposit', element: <Deposit /> },
// { path: '/withdraw', element: <Withdraw /> },
{ path: '/login', element: <Login /> },
{ path: '/profile', element: <Profile /> },
// { path: '/transactions', element: <Transactions /> },
],
},
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ html {

body {
margin: 0;
}

#root {
display: flex;
flex-direction: column;
min-height: 100vh;
Expand Down
30 changes: 15 additions & 15 deletions frontend/src/components/FeatureItem.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import PropTypes from 'prop-types';

FeatureItem.propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
children: PropTypes.string.isRequired
}
const FeatureItem = ({ icon, title, children }) => {
return (
<div className='feature-item'>
<img src={icon} alt='Feature Icon' className='feature-icon' />
<h3 className='feature-item-title'>{title}</h3>
<p>{children}</p>
</div>
);
};

const FeatureItem = ({icon, title, children}) => {
return (
<div className='feature-item'>
<img src={icon} alt='Feature Icon' className='feature-icon' />
<h3 className='feature-item-title'>{title}</h3>
<p>{children}</p>
</div>
);
}
FeatureItem.propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
children: PropTypes.string.isRequired,
};

export default FeatureItem;
export default FeatureItem;
10 changes: 5 additions & 5 deletions frontend/src/layout/NavBar.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { NavLink } from 'react-router-dom';
import argBankLogo from '../assets/img/argentBankLogo.png';

const Navbar = () => {
return (
<nav className='main-nav'>
<a className='main-nav-logo' href='./index.html'>
<NavLink className='main-nav-logo' to='/'>
<img
className='main-nav-logo-image'
src={argBankLogo}
alt='Argent Bank Logo'
/>
<h1 className='sr-only'>Argent Bank</h1>
</a>
</NavLink>
<div>
<a className='main-nav-item' href='./sign-in.html'>

<NavLink className='main-nav-item' to='/login'>
<i className='fa fa-user-circle'></i>
Sign In
</a>
</NavLink>
</div>
</nav>
);
Expand Down
61 changes: 32 additions & 29 deletions frontend/src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,39 @@ import FeatureItem from '../components/FeatureItem';
import Banner from '../components/Banner';

const Home = () => {
const featureItems = [
{
icon: iconChat,
title: 'You are our #1 priority',
description: 'Need to talk to a representative? You can get in touch through our 24/7 chat or through a phone call in less than 5 minutes.',
},
{
icon: iconMoney,
title: 'More savings means higher rates',
description: 'The more you save with us, the higher your interest rate will be!',
},
{
icon: iconSecurity,
title: 'Security you can trust',
description: 'We use top of the line encryption to make sure your data and money is always safe.',
},
];
const featureItems = [
{
icon: iconChat,
title: 'You are our #1 priority',
description:
'Need to talk to a representative? You can get in touch through our 24/7 chat or through a phone call in less than 5 minutes.',
},
{
icon: iconMoney,
title: 'More savings means higher rates',
description:
'The more you save with us, the higher your interest rate will be!',
},
{
icon: iconSecurity,
title: 'Security you can trust',
description:
'We use top of the line encryption to make sure your data and money is always safe.',
},
];

return (
<main>
<Banner />
<section className='features'>
{featureItems.map((item, index) => (
<FeatureItem key={index} icon={item.icon} title={item.title}>
{item.description}
</FeatureItem>
))}
</section>
</main>
);
return (
<main>
<Banner />
<section className='features'>
{featureItems.map((item, index) => (
<FeatureItem key={index} icon={item.icon} title={item.title}>
{item.description}
</FeatureItem>
))}
</section>
</main>
);
};

export default Home;
66 changes: 66 additions & 0 deletions frontend/src/pages/Login.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault();

const response = await fetch('http://localhost:3001/api/v1/user/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});

const data = await response.json();

if (response.ok) {
localStorage.setItem('token', data.body.token);
console.log(data.message);
navigate('/profile');
} else {
window.alert(data.message);
}
};

return (
<main className='main bg-dark'>
<section className='sign-in-content'>
<i className='fa fa-user-circle sign-in-icon'></i>
<h1>Sign In</h1>
<form onSubmit={handleSubmit}>
<div className='input-wrapper'>
<label htmlFor='username'>Username</label>
<input
type='email'
id='username'
placeholder='Email'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className='input-wrapper'>
<label htmlFor='password'>Password</label>
<input
type='password'
id='password'
placeholder='Password'
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className='input-remember'>
<input type='checkbox' id='remember-me' />
<label htmlFor='remember-me'>Remember me</label>
</div>
<button className='sign-in-button'>Sign In</button>
</form>
</section>
</main>
);
};

export default Login;
48 changes: 48 additions & 0 deletions frontend/src/pages/Profile.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
const Profile = () => {
// const { user } = useAuth();
return (
<main className='main bg-dark'>
<div className='header'>
<h1>
Welcome back
<br />
Tony Jarvis!
</h1>
<button className='edit-button'>Edit Name</button>
</div>
<h2 className='sr-only'>Accounts</h2>
<section className='account'>
<div className='account-content-wrapper'>
<h3 className='account-title'>Argent Bank Checking (x8349)</h3>
<p className='account-amount'>$2,082.79</p>
<p className='account-amount-description'>Available Balance</p>
</div>
<div className='account-content-wrapper cta'>
<button className='transaction-button'>View transactions</button>
</div>
</section>
<section className='account'>
<div className='account-content-wrapper'>
<h3 className='account-title'>Argent Bank Savings (x6712)</h3>
<p className='account-amount'>$10,928.42</p>
<p className='account-amount-description'>Available Balance</p>
</div>
<div className='account-content-wrapper cta'>
<button className='transaction-button'>View transactions</button>
</div>
</section>
<section className='account'>
<div className='account-content-wrapper'>
<h3 className='account-title'>Argent Bank Credit Card (x8349)</h3>
<p className='account-amount'>$184.30</p>
<p className='account-amount-description'>Current Balance</p>
</div>
<div className='account-content-wrapper cta'>
<button className='transaction-button'>View transactions</button>
</div>
</section>
</main>
);
};

export default Profile;

0 comments on commit 559fabe

Please sign in to comment.