Compare commits

...

9 Commits

10 changed files with 290 additions and 93 deletions
+4
View File
@@ -21,6 +21,10 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
REACT_APP_SESSION_EXPIRE_CHECKER=60000
REACT_APP_LOGIN_ERROR_TIMEOUT=7000
REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
# Had to change the error time to 3sec cause it took too long
REACT_APP_RESET_START_ERROR_TIMEOUT=3000
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
#apigate.orion.g1.wrenchboard.com:76.209.103.227
+140 -36
View File
@@ -1,49 +1,153 @@
import React from "react";
import { Link } from 'react-router-dom';
import titleShape from "../../../assets/images/shape/title-shape-two.svg";
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import usersService from "../../../services/UsersService";
export default function ForgotPassword() {
const [checked, setValue] = useState(false);
const [resetLoading, setResetLoading] = useState(false)
// email
const [email, setMail] = useState("");
const [msgError, setMsgError] = useState('');
const navigate = useNavigate();
const userApi = new usersService();
const handleEmail = (e) => {
setMail(e?.target.value);
};
const humanChecker = () => {
setValue(!checked);
};
const resetHandler = async () => {
if (email == '') {
setMsgError('An email is required')
} else if (!checked) {
setMsgError('Check if you are human')
}
if (email != '' && checked) {
const reqData = { email }
setResetLoading(true)
try {
const res = await userApi.StartResetPassword(reqData)
if (res.status === 200) {
const { data } = res
if (data.status == -1) {
setMsgError('This is an incorrect or duplicate email')
setResetLoading(false)
} else if (data.status > 0) {
setResetLoading(false)
navigate("/verify-you", { replace: true })
} else{
setMsgError("reset was not successful")
setResetLoading(false)
}
setMail("")
}
} catch (error) {
setResetLoading(false)
setMail("")
setMsgError('An error occurred')
throw new Error(error)
} finally {
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
}
}
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
}
return (
<>
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<div className="content-wrapper xl:bg-white dark:bg-dark-white xl:px-[70px] w-full sm:w-auto 2xl:px-[100px] h-[818px] rounded-xl ">
<div className="flex flex-col justify-center w-full h-full px-5">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="sm:text-5xl text-4xl font-bold sm:leading-[74px] text-dark-gray dark:text-white">
Forget Password
</h1>
<div className="shape sm:w-[377px] w-[270px] -mt-1 ml-0">
<img src={titleShape} alt="shape" />
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
</Link>
</div>
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
<div className="flex flex-col justify-center w-full h-full px-5">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
fontSize: 'calc(1rem + .6vw)'
}}>
Forget Password
</h1>
<span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
</div>
</div>
<div className="input-area">
<div className="input-item mb-5">
<InputCom
placeholder="example@quomodosoft.com"
label="Email Address"
name="email"
type="email"
iconName="message"
/>
</div>
<div className="signin-area mb-3.5">
<a
href="/verify-you"
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
>
Send Code
</a>
<Link to="/"
className=" my-40 font-bold flex justify-center text-red-500 items-center"
>
Back to Home
</Link>
<div className="input-area">
<div className="input-item mb-10">
<InputCom
placeholder="Your Username/Email"
label="Email"
name="email"
type="email"
value={email}
inputHandler={handleEmail}
iconName="message"
/>
</div>
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
{/* hCaptha clone for the time being */}
<div className="mb-10">
<div className="w-[303px] h-[78px] mx-auto overflow-hidden">
<div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
{/* Checkbox */}
<div className="h-full relative inline-block">
<div className="relative table top-0 h-full">
<div className="table-cell align-middle">
<div className="relative w-[30px] h-[30px] mx-[15px]">
<input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
</div>
</div>
</div>
</div>
<div className="h-full relative inline-block w-[170px]">
<label className="relative table top-0 h-full">
<label className="table-cell align-middle">
<label className="text-800 text-sm" htmlFor="human-checkbox">
I am human
</label>
</label>
</label>
</div>
<div className="h-full relative inline-block w-16"></div>
</div>
</div>
</div>
<div className="signin-area mb-3.5">
<div className="flex justify-center items-center gap-2">
<button
type="button"
onClick={resetHandler}
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
>
{resetLoading ? (
<div className="signup btn-loader"></div>
) : (
<span>Send Code</span>
)}
</button>
<button
type="button"
onClick={() => navigate("/login")}
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
+1 -5
View File
@@ -4,8 +4,6 @@ import { toast } from "react-toastify";
import googleLogo from "../../../assets/images/google-logo.svg";
import appleLogo from "../../../assets/images/apple-black.svg";
import facebookLogo from "../../../assets/images/facebook-4.svg";
// import titleShape from "../../../assets/images/shape/title-shape.svg";
import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
@@ -24,8 +22,6 @@ export default function Login() {
setValue(!checked);
};
console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
// email
const [email, setMail] = useState("");
const handleEmail = (e) => {
@@ -168,7 +164,7 @@ export default function Login() {
Forgot Password
</a>
</div> */}
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
<div className="signin-area mb-3.5">
<div className="flex justify-center">
+10 -4
View File
@@ -29,14 +29,15 @@ export default function SignUp() {
// To Show and Hide Password
const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
// return console.log('showPassword')
};
const rememberMe = () => {
setValue(!checked);
};
const navigate = useNavigate();
const userApi = new usersService();
// Get Country Api
const getCountryList = async () => {
const res = await userApi.getSignupCountryData()
@@ -74,27 +75,32 @@ export default function SignUp() {
}
const res = await userApi.CreateUser(reqData)
setSignUpLoading(true)
if (res.status === 200) {
const { data } = res
if (data.status == -1 && data.acc == 'DULPICATE') {
setMsgError('This account has been already created')
setSignUpLoading(false)
}
if (data.status > 0 && data.internal_return == 100 && data.session != '') {
localStorage.setItem("email", `${data.email}`);
localStorage.setItem("country", `${data.country}`);
localStorage.setItem("firstname", `${data.firstname}`);
localStorage.setItem("lastname", `${data.lastname}`);
setSignUpLoading(true)
setTimeout(() => {
navigate("/", { replace: true });
setSignUpLoading(false)
}, 2000)
console.log('Success')
} else {
setMsgError(data.status)
setSignUpLoading(false)
}
}
} else {
setMsgError('This account does not exist')
setSignUpLoading(false)
}
} catch (error) {
throw new Error(error)
@@ -102,7 +108,7 @@ export default function SignUp() {
} finally {
setTimeout(() => {
setMsgError(null)
}, 7000)
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
}
}
@@ -25,7 +25,7 @@ export default function InputCom({
{label}
</label>
)}
{forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
{forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
</div>
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
<input
+95 -36
View File
@@ -1,19 +1,58 @@
import React, {useState} from 'react'
import React, {useEffect, useState} from 'react'
import { Link } from 'react-router-dom'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function TransferFund({payment}) {
import usersService from '../../services/UsersService'
function TransferFund({payment, wallet}) {
const apiCall = new usersService()
let [newFee, setNewFee] = useState(false)
let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
loading: true,
data: [],
error: false
})
let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
//STATE FOR CONTROLLED INPUTS
let [inputs, setInputs] = useState({
amount: '0',
fee: '0',
recipient: '',
total: '0',
comment: ''
})
//FUNCTION TO GET RECIPIENT LIST
const getRecipients = ()=>{
apiCall.getRecipient().then((res)=>{
if(res.data.internal_return < 0){ // success but no data
setRecipients(prev => ({...prev, loading: false}))
return
}
setRecipients(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setRecipients(prev => ({...prev, loading: false, error: true}))
})
}
//FUNCTION TO GET SEND MONEY FEE
const getSendMoneyFee = ()=>{
let {amount} = inputs
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
setSendMoneyFee({fee: 0, total: 0})
return
}
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
}).catch((error)=>{
setSendMoneyFee({fee: 0, total: 0})
})
}
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({target:{name, value}}) => {
setInputs(prev => ({...prev, [name]:value}))
@@ -23,22 +62,41 @@ function TransferFund({payment}) {
const handleSubmit = (e) => {
e.preventDefault();
//valid inputs before submitting. Just for texting remove later
//valid inputs before submitting. Just for texting remove later. check amoutn to be number
setInputs({
amount: '0',
fee: '0',
recipient: '',
total: '0',
comment: ''
})
}
useEffect(()=>{
getRecipients()
getSendMoneyFee()
},[newFee])
return (
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
<form className='transfer-fund-info'>
<h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : &#8358;0.00</h2>
<form className='transfer-fund-info' onSubmit={handleSubmit}>
{wallet.loading ?
<LoadingSpinner size='8' color='sky-blue' />
:
wallet.data.length ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
{wallet.data.map(item => {
if(item.description == 'Naira'){
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
}
})}
</h2>
:
wallet.error ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
:
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
}
<div className='my-3 md:flex items-center justify-between space-x-2'>
<div className='transfer-input w-full md:w-1/2'>
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
@@ -49,31 +107,33 @@ function TransferFund({payment}) {
placeholder='Amount'
required
onChange={handleChange}
onMouseEnter={()=>{setNewFee(false)}}
onMouseLeave={()=>{setNewFee(true)}}
/>
</div>
<div className='transfer-input w-full md:w-1/2'>
<label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
<input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.fee}
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={sendMoneyFee.fee}
name='fee'
type="text"
placeholder='Fee'
required
onChange={handleChange}
disabled
/>
</div>
</div>
<div className='my-3 md:flex items-center justify-end space-x-2'>
<div className='transfer-input w-full md:w-1/2'>
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
<input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.total}
<label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={sendMoneyFee.total}
name='total'
type="text"
placeholder='Total'
required
onChange={handleChange}
disabled
/>
</div>
</div>
@@ -87,8 +147,23 @@ function TransferFund({payment}) {
</label>
<Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
</div>
<select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
<option className='text-slate-500 text-lg' value="">Select...</option>
<select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
{recepients.loading ?
<option className='text-slate-500 text-lg' value="">Loading...</option>
:
recepients.data.length ?
<>
<option className='text-slate-500 text-lg' value="">Select...</option>
{recepients.data.map((item, index)=>(
<option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
))}
</>
:
recepients.error ?
<option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
:
<option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
}
</select>
</div>
</div>
@@ -108,7 +183,7 @@ function TransferFund({payment}) {
</div>
<div className='transfer-fund-btn flex justify-end items-center py-4'>
<button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
</div>
</form>
</div>
@@ -118,22 +193,6 @@ function TransferFund({payment}) {
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
{/* <table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="py-3">Date</th>
<th className="py-3">Recipient</th>
<th className="py-3">Amount/FeeConf/Status</th>
</tr>
</thead>
<tbody>
<tr className='text-slate-500'>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
</tr>
</tbody>
</table> */}
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
+2 -2
View File
@@ -55,7 +55,6 @@ const WalletRoutes = () => {
setWalletList(prev => ({...prev, loading: false}))
return
}
console.log('wallet', res)
setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setWalletList(prev => ({...prev, loading: false, error: true}))
@@ -82,6 +81,7 @@ const WalletRoutes = () => {
setPurchaseHistory(prev => ({...prev, loading: false}))
return
}
// console.log('purchase',res.data)
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
@@ -111,7 +111,7 @@ const WalletRoutes = () => {
<Routes>
<Route element={<Wallet />}>
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} />} />
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
<Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
<Route path='*' element={<Navigate to='/' />} />
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
@@ -16,10 +16,10 @@ function PurchasesTable({purchase}) {
<tbody>
{purchase.data.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.trx_date}</td>
<td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
<td className="p-2">{item.added_date}</td>
<td className="p-2">{item.confirmation}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.status}</td>
<td className="p-2">{item.fee}</td>
</tr>
))}
</tbody>
-1
View File
@@ -8,7 +8,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
const navigate = useNavigate();
const { pathname } = useLocation();
//Removing Data stored at localStorage after session expires
const expireSession = () => {
localStorage.removeItem("email");
+34 -5
View File
@@ -6,6 +6,11 @@ class usersService {
console.log("WRB Service Entry");
}
CreateUser(reqData){
localStorage.setItem("session_token", ``);
return this.postAuxEnd("/createuser", reqData);
}
getHomeDate(){
var postData = {
uuid: localStorage.getItem("uuid"),
@@ -48,11 +53,6 @@ class usersService {
return this.postAuxEnd("/apigate", null);
}
CreateUser(reqData){
localStorage.setItem("session_token", ``);
return this.postAuxEnd("/createuser", reqData);
}
getLoadProfile(){
var postData = {
uuid: localStorage.getItem("uid"),
@@ -140,6 +140,31 @@ class usersService {
return this.postAuxEnd("/couponpending", postData);
}
// API FUNCTION TO GET COUPON HISTORY
getRecipient(){
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page:1,
limit :20,
action: 11175
};
return this.postAuxEnd("/recipients", postData);
}
// API FUNCTION TO GET SEND MONEY FEE
getSendMoneyFee(amount){
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
amount,
action: 33025
};
return this.postAuxEnd("/sendmoneyfee", postData);
}
// API FUNCTION TO GET COUPON HISTORY
getCouponHx(){
var postData = {
@@ -196,6 +221,10 @@ class usersService {
return this.postAuxEnd("/sendreferral", postData);
}
StartResetPassword(reqData){
return this.postAuxEnd("/startresetpasword", reqData)
}
getCouponRedeem(){
var postData = {
uuid: localStorage.getItem("uid"),