From 559fabe71e27ff360dc934c78a1d0abbdf233659 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20EFF?= <86823724+Nefer-Hotep@users.noreply.github.com> Date: Fri, 9 Feb 2024 09:24:44 +0100 Subject: [PATCH] Feat : Add #2 US (Login) + Add Login and Profile pages, update main.css and FeatureItem.jsx, and update NavBar.jsx and Home.jsx --- frontend/src/App.jsx | 8 +-- frontend/src/assets/css/main.css | 3 ++ frontend/src/components/FeatureItem.jsx | 30 +++++------ frontend/src/layout/NavBar.jsx | 10 ++-- frontend/src/pages/Home.jsx | 61 ++++++++++++----------- frontend/src/pages/Login.jsx | 66 +++++++++++++++++++++++++ frontend/src/pages/Profile.jsx | 48 ++++++++++++++++++ 7 files changed, 173 insertions(+), 53 deletions(-) create mode 100644 frontend/src/pages/Login.jsx create mode 100644 frontend/src/pages/Profile.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 259360815..7fcfab372 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -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([ { @@ -16,10 +18,8 @@ const router = createBrowserRouter([ ), children: [ { path: '/', element: }, - // { path: '/profile', element: }, - // { path: '/transfer', element: }, - // { path: '/deposit', element: }, - // { path: '/withdraw', element: }, + { path: '/login', element: }, + { path: '/profile', element: }, // { path: '/transactions', element: }, ], }, diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css index 47ee63267..7c08d53aa 100644 --- a/frontend/src/assets/css/main.css +++ b/frontend/src/assets/css/main.css @@ -8,6 +8,9 @@ html { body { margin: 0; +} + +#root { display: flex; flex-direction: column; min-height: 100vh; diff --git a/frontend/src/components/FeatureItem.jsx b/frontend/src/components/FeatureItem.jsx index c3b8b09b2..902e51a9f 100644 --- a/frontend/src/components/FeatureItem.jsx +++ b/frontend/src/components/FeatureItem.jsx @@ -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 ( +
+ Feature Icon +

{title}

+

{children}

+
+ ); +}; -const FeatureItem = ({icon, title, children}) => { - return ( -
- Feature Icon -

{title}

-

{children}

-
- ); -} +FeatureItem.propTypes = { + icon: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + children: PropTypes.string.isRequired, +}; -export default FeatureItem; \ No newline at end of file +export default FeatureItem; diff --git a/frontend/src/layout/NavBar.jsx b/frontend/src/layout/NavBar.jsx index 15a608e5c..b6ac8afda 100644 --- a/frontend/src/layout/NavBar.jsx +++ b/frontend/src/layout/NavBar.jsx @@ -1,22 +1,22 @@ +import { NavLink } from 'react-router-dom'; import argBankLogo from '../assets/img/argentBankLogo.png'; const Navbar = () => { return ( ); diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 116e07327..97a52bce9 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -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 ( -
- -
- {featureItems.map((item, index) => ( - - {item.description} - - ))} -
-
- ); + return ( +
+ +
+ {featureItems.map((item, index) => ( + + {item.description} + + ))} +
+
+ ); }; export default Home; diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx new file mode 100644 index 000000000..3f94114f6 --- /dev/null +++ b/frontend/src/pages/Login.jsx @@ -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 ( +
+
+ +

Sign In

+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ + +
+ +
+
+
+ ); +}; + +export default Login; diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx new file mode 100644 index 000000000..3157e0416 --- /dev/null +++ b/frontend/src/pages/Profile.jsx @@ -0,0 +1,48 @@ +const Profile = () => { + // const { user } = useAuth(); + return ( +
+
+

+ Welcome back +
+ Tony Jarvis! +

+ +
+

Accounts

+
+
+

Argent Bank Checking (x8349)

+

$2,082.79

+

Available Balance

+
+
+ +
+
+
+
+

Argent Bank Savings (x6712)

+

$10,928.42

+

Available Balance

+
+
+ +
+
+
+
+

Argent Bank Credit Card (x8349)

+

$184.30

+

Current Balance

+
+
+ +
+
+
+ ); +}; + +export default Profile; \ No newline at end of file