Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Linking pages of the front end #143

Merged
merged 5 commits into from
Jun 13, 2024
Merged

Linking pages of the front end #143

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f12638a
update(frontend): added links to be able to navigate through all page…
Motouom Jun 13, 2024
e865c92
update(frontend): added links to be able to navigate through all page…
Motouom Jun 13, 2024
d3e5d6f
update(frontend): added links to be able to navigate through all page…
Motouom Jun 13, 2024
c34f940
Modification(frontend): Modified the pages so that all the items shou…
Motouom Jun 13, 2024
227481e
Fix(frontend) Deleted the route.tsx file from the project
Motouom Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion power-pay-frontend/dev-dist/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.e7p0g793m68"
"revision": "0.238rr2rpmug"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
Expand Down
2 changes: 1 addition & 1 deletion power-pay-frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title></title>
</head>
<body>
<div id="root"></div>
Expand Down
2,450 changes: 1,368 additions & 1,082 deletions power-pay-frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions power-pay-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@
"preview": "vite preview"
},
"dependencies": {
"@yudiel/react-qr-scanner": "^2.0.0-beta.3",
"axios": "^1.6.8",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@yudiel/react-qr-scanner": "^2.0.0-beta.3",
"axios": "^1.6.8",
"formik": "^2.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3"
Expand Down
21 changes: 21 additions & 0 deletions power-pay-frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,35 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RegistrationForm from './components/RegistrationForm';
import OTPForm from './components/OTPForm';
import SuccessPage from './components/SuccessPage';
import Home from './components/Home';
import AccountBalance from './components/AccountBalance';
import PaymentOptions from './components/paymentoption';
import PinInput_For_Balance from './components/PinInput_Balance';
import PinInput from './components/pinInput';
import RecipientInfo from './components/RecipientInfo';
import SendMoneyConfirmation from './components/SendMoneyConfirmation';
import UserLogin from './components/UserLogin';
import QRScannerComponent from './components/scan_rq';


function App() {
return (
<Router>
<Routes>
<Route path="/" element={<RegistrationForm />} />
<Route path="/home" element={<Home />} />
<Route path="/balance" element={<AccountBalance />} />
<Route path="/payment" element={<PaymentOptions />} />
<Route path="/pin_balance" element={<PinInput_For_Balance />} />
<Route path="/pin_send" element={<PinInput />} />
<Route path="/send_money_confirmation" element={<SendMoneyConfirmation onSuccess={function (successMessage: string): void {
throw new Error('Function not implemented.');
} } />} />
<Route path="/recipient_info" element={<RecipientInfo />} />
<Route path="/user_login" element={<UserLogin />} />
<Route path="/otp" element={<OTPForm />} />
<Route path="/success" element={<SuccessPage />} />
<Route path="/QR_scan" element={<QRScannerComponent />} />
</Routes>
</Router>
);
Expand Down
Binary file added power-pay-frontend/src/assets/Logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions power-pay-frontend/src/components/AccountBalance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useNavigate } from 'react-router-dom';

const AccountBalance: React.FC = () => {
const navigate = useNavigate();

const handleOkClick = () => {
navigate('/home');
};
// success message to be displayed on the screen

return (
<div className="flex justify-center items-center mb-34 bg-800 text-black text-sm">
<div className="">
<div className="rounded-lg w-80 m-auto px-4 py-2 text-lg absolute inset-x-0 top-12 mt-12 bg-gray-100">
<div className="pt-12 pb-12">
<h1 className="text-2xl font-bold pb-10">Account Balance.</h1>
<p className="text-md">Balance: $Balance</p>
</div>
</div>
<div className="pt-12">
<button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
onClick={handleOkClick}
>
OK
</button>
</div>
</div>
</div>
);
};

export default AccountBalance;
38 changes: 38 additions & 0 deletions power-pay-frontend/src/components/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useNavigate } from 'react-router-dom';
import Logo from '../assets/Logo.png';
import React, { useState, useEffect } from 'react';

const Home: React.FC = () => {
const navigate = useNavigate();

const handleCheckBalanceClick = () => {
navigate('/pin_balance');
};
const handleSendMoneyClick = () => {
navigate('/payment');
};



return (
<div className="flex justify-center items-center mb-34 bg-800 text-black text-sm">
<div className="w-80 m-auto px-4 py-2 text-lg absolute inset-x-0 top-12">
<img src={Logo} alt="Logo" />
<p className="text-sm text-center text-black pb-4">Send money far and wide with ease.</p>
</div>
<div className="pt-12 w-80 m-auto">
<button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20"
onClick={handleSendMoneyClick}>
Send Money
</button>
<button
className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
onClick={handleCheckBalanceClick}>
Check Balance
</button>
</div>
</div>
);
};

export default Home;
31 changes: 21 additions & 10 deletions power-pay-frontend/src/components/OTPForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState } from 'react';
import { faAsterisk } from '@fortawesome/free-solid-svg-icons';
import { useNavigate } from 'react-router-dom';
import '../App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

function OTPForm() {
const [otp, setOTP] = useState('');
Expand Down Expand Up @@ -54,6 +56,9 @@ function OTPForm() {
const handleGoBack = () => {
navigate('/');
};
const handleConfirmClick = () => {
navigate('/home');
};

return (
<div className="flex flex-1 flex-col justify-center space-y-5 max-w-md mx-auto mt-24">
Expand All @@ -64,19 +69,25 @@ function OTPForm() {
</p>
</div>
<form className="flex flex-col max-w-md space-y-5" onSubmit={handleSubmit}>
<div style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)', width: '100%', textAlign: 'center' }}>
<input
type="text"
placeholder="OTP"
value={otp}
onChange={handleOTPChange}
className="text-lg text-center rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-900 dark:text-black"
style={{ marginTop: '-50px' }} // Adjust the marginTop as needed to bring the bar up
/>
</div>
<div className="input-group relative bottom-12 mb-12">
<input
type="password"
name="OTP"
onChange={handleOTPChange}
className="text-lg px-12 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required"
placeholder="OTP"
required
/>
<FontAwesomeIcon
icon={faAsterisk}
size="1x"
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
/>
</div>
<button
type="submit"
className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20"
onClick={handleConfirmClick}
>
Confirm
</button>
Expand Down
56 changes: 56 additions & 0 deletions power-pay-frontend/src/components/PinInput_Balance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { useNavigate } from 'react-router-dom';
import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const PinInput_For_Balance: React.FC = () => {
const navigate = useNavigate();

const handleCancelClick = () => {
navigate('/home');
};
const handleConfirmClick = () => {
navigate('/balance');
};

return (
<div className="flex justify-center items-center mb-34 bg-800 text-black text-sm">
<div className="">
<div className="input-area">
<form className="max-w-sm mx-auto flex rounded-lg w-80 m-auto text-lg absolute inset-x-0">
<div className="input-group">
<input
type="password"
maxLength={4}
id="number-input"
className="text-lg text-center rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black"
placeholder="Enter PIN"
required
/>
<FontAwesomeIcon
icon={faLock}
size="1x"
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
/>
</div>
</form>
</div>
<div className="pt-12">
<button
className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
onClick={handleCancelClick}
>
Cancel
</button>
<button
className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
onClick={handleConfirmClick}
>
Confirm
</button>
</div>
</div>
</div>
);
};

export default PinInput_For_Balance;
27 changes: 23 additions & 4 deletions power-pay-frontend/src/components/RecipientInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useFormik } from 'formik';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMoneyBill } from '@fortawesome/free-solid-svg-icons';
import { faPhone } from '@fortawesome/free-solid-svg-icons';
Expand All @@ -10,12 +10,20 @@ interface FormValues {
}

const RecipientInfo: React.FC = () => {
const navigate = useNavigate();

const handleCancelClick = () => {
navigate('/home');
};
const handleConfirmClick = () => {
navigate('/pin_send');
};
const formik = useFormik<FormValues>({
initialValues: {
phone: '',
amount: ''
},
onSubmit: (values) => {
onSubmit: (values: any) => {
// Handle form submission
console.log(values);
}
Expand All @@ -29,7 +37,7 @@ const RecipientInfo: React.FC = () => {
};

return (
<div className="flex flex-col items-center justify-center h-screen bg-800 text-black text-sm">
<div className="flex flex-col items-center justify-center bg-800 text-black text-sm">
<form onSubmit={formik.handleSubmit} className="max-w-sm mx-auto w-80 mb-12">
<div className="flex pb-4 flex-col items-center">
<div className="input-group">
Expand Down Expand Up @@ -60,7 +68,18 @@ const RecipientInfo: React.FC = () => {
<FontAwesomeIcon icon={faMoneyBill} size="1x" className="absolute text-red-500 left-2 top-1/2 transform -translate-y-1/2 color-red-100" />
</div>
</div>
<button type="submit" className="rounded-full bg-blue-950 hover:bg-blue-950 w-80 m-auto px-4 py-2 text-white text-lg absolute inset-x-0 bottom-12">Submit</button>
<div className="pt-12">
<button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
onClick={handleCancelClick}
>
Cancel
</button>
<button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
onClick={handleConfirmClick}
>
Confirm
</button>
</div>
</form>
</div>
);
Expand Down
Loading
Loading