Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
1d5875d4e2 |
@@ -1,8 +1,6 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import method1 from "../../../assets/images/payment-cards/discover-card.svg";
|
||||
import method1 from "../../../assets/images/payment-method-1.png";
|
||||
import LoadingSpinner from '../../Spinners/LoadingSpinner';
|
||||
import localImgLoad from '../../../lib/localImgLoad';
|
||||
|
||||
import usersService from "../../../services/UsersService";
|
||||
import { handlePagingFunc } from '../../Pagination';
|
||||
import PaginatedList from '../../Pagination/PaginatedList';
|
||||
@@ -23,7 +21,6 @@ function CardList() {
|
||||
|
||||
useEffect(()=>{
|
||||
api.payListCard().then(res=>{
|
||||
console.log('TESTING', res.data?.result_list)
|
||||
setCardList({loading: false, data:res.data?.result_list})
|
||||
}).catch(err => {
|
||||
setCardList({loading: false, data:[]})
|
||||
@@ -39,37 +36,34 @@ function CardList() {
|
||||
</div>
|
||||
:
|
||||
cardList.data.length ?
|
||||
currentCardList.map(item =>{
|
||||
let image = item.description && localImgLoad(`images/payment-cards/${item.description.toLowerCase()}-card.svg`)
|
||||
return(
|
||||
<li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-2 sm:mb-0">
|
||||
<div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={image ? image : method1} className='w-[50px] h-[50px]' alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Added: {item.added}
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
{item.description} **********{item.digits}
|
||||
</p>
|
||||
{/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p> */}
|
||||
</div>
|
||||
currentCardList.map(item =>(
|
||||
<li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-2 sm:mb-0">
|
||||
<div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img className='rounded-full w-full h-full' src={method1} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Added: {item.added}
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
{item.description} **********{item.digits}
|
||||
</p>
|
||||
{/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p> */}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
)
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
:
|
||||
<h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
|
||||
}
|
||||
|
||||
@@ -3,11 +3,39 @@
|
||||
import React, { useState } from "react";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
import PasswordSvg from "../PasswordSvg";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function ChangePasswordTab() {
|
||||
const apiUrl = new usersService()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [oldPass, setOldPass] = useState("hide-password");
|
||||
const [newPass, setNewPass] = useState("hide-password");
|
||||
const [confirmPass, setConfirmPass] = useState("hide-password");
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
|
||||
|
||||
const [inputEmpty, setInputEmpty] = useState(false)
|
||||
let [inputs, setInputs] = useState({
|
||||
old_pwd: '',
|
||||
new_pwd: '',
|
||||
confirm_new_pwd: ''
|
||||
})
|
||||
|
||||
const handleInputChange = ({target:{name, value}}) => { // FUNCTION TO HANDLE WHEN AN INPUT CHANGES
|
||||
setInputs(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
const handleCancel = () => { // FUNCTION TO CLEAR ALL TYPED INPUTS
|
||||
setInputs({
|
||||
old_pwd: '',
|
||||
new_pwd: '',
|
||||
confirm_new_pwd: ''
|
||||
})
|
||||
}
|
||||
|
||||
const showPassword = (value) => {
|
||||
const password = document.getElementById(`${value}`);
|
||||
if (value && value === "old_password") {
|
||||
@@ -38,16 +66,61 @@ export default function ChangePasswordTab() {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handlePwdUpdate = () => {
|
||||
setInputEmpty(false) // SETS THE STATE OF ANY INPUT IS EMPTY TO FALSE
|
||||
if(!inputs.old_pwd || !inputs.new_pwd || !inputs.confirm_new_pwd){ // CHECKS IF ANY INPUT FIELD IS EMPTY AND SETS INPUT EMPTY TO TRUE
|
||||
setInputEmpty(true)
|
||||
return setTimeout(()=>{setInputEmpty(false)},3000)
|
||||
}
|
||||
|
||||
if(inputs.new_pwd != inputs.confirm_new_pwd){ // CHECKS IF PASSWORD MATCHES CONFIRM PASSWORD
|
||||
setRequestStatus({loading: false, status: false, message: 'new password must match confirm password'})
|
||||
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
||||
}
|
||||
|
||||
if(/^[a-zA-Z0-9]*$/.test(inputs.new_pwd) == false){ // CHECKS IF PASSWORD IS ALPHANUMERIC
|
||||
setRequestStatus({loading: false, status: false, message: 'password must be alphanumeric'})
|
||||
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
||||
}
|
||||
|
||||
if(inputs.new_pwd.length < 6){ // CHECKS IF PASSWORD IS UPTO SIX CHARACTERS
|
||||
setRequestStatus({loading: false, status: false, message: 'password must be upto six characters'})
|
||||
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
||||
}
|
||||
|
||||
|
||||
let reqData = { // REQUEST PAYLOAD
|
||||
current_pass: inputs.old_pwd,
|
||||
new_pass: inputs.new_pwd
|
||||
}
|
||||
|
||||
|
||||
setRequestStatus({loading: true, status: false, message: ''})
|
||||
|
||||
apiUrl.profilePassChange(reqData).then(res => {
|
||||
if(res.status != 200 || res.data.internal_return < 0){
|
||||
setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
|
||||
return
|
||||
}
|
||||
setRequestStatus({loading: false, status: true, message: 'password update was successful'})
|
||||
setTimeout(()=>{navigate('/settings', {replace: true})}, 5000)
|
||||
}).catch(err => {
|
||||
setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},4000)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className="changePasswordTab w-full">
|
||||
<div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xl:items-center">
|
||||
<div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
|
||||
<div className="flex-1 mb-10">
|
||||
<div className="input-field mb-6">
|
||||
<label
|
||||
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
||||
htmlFor="old_password"
|
||||
>
|
||||
Old Password
|
||||
Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
|
||||
</label>
|
||||
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
||||
<div className="absolute left-6 bottom-[17px] z-10">
|
||||
@@ -58,6 +131,10 @@ export default function ChangePasswordTab() {
|
||||
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
||||
type="password"
|
||||
id="old_password"
|
||||
value={inputs.old_pwd}
|
||||
name='old_pwd'
|
||||
onChange={handleInputChange}
|
||||
autoComplete='false'
|
||||
/>
|
||||
<div
|
||||
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
||||
@@ -72,7 +149,7 @@ export default function ChangePasswordTab() {
|
||||
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
||||
htmlFor="new_password"
|
||||
>
|
||||
New Password
|
||||
New Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
|
||||
</label>
|
||||
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
||||
<div className="absolute left-6 bottom-[17px] z-10">
|
||||
@@ -83,6 +160,10 @@ export default function ChangePasswordTab() {
|
||||
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
||||
type="password"
|
||||
id="new_password"
|
||||
value={inputs.new_pwd}
|
||||
name='new_pwd'
|
||||
onChange={handleInputChange}
|
||||
autoComplete='false'
|
||||
/>
|
||||
<div
|
||||
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
||||
@@ -97,7 +178,7 @@ export default function ChangePasswordTab() {
|
||||
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
||||
htmlFor="confirm_password"
|
||||
>
|
||||
Confirm Password
|
||||
Confirm Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
|
||||
</label>
|
||||
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
||||
<div className="absolute left-6 bottom-[17px] z-10">
|
||||
@@ -108,6 +189,10 @@ export default function ChangePasswordTab() {
|
||||
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
||||
type="password"
|
||||
id="confirm_password"
|
||||
value={inputs.confirm_new_pwd}
|
||||
name='confirm_new_pwd'
|
||||
onChange={handleInputChange}
|
||||
autoComplete='false'
|
||||
/>
|
||||
<div
|
||||
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
||||
@@ -120,19 +205,46 @@ export default function ChangePasswordTab() {
|
||||
<div className="flex justify-center space-x-4 items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29] border-light-red "
|
||||
className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29] border-light-red"
|
||||
disabled={requestStatus.loading}
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
|
||||
>
|
||||
<span className="font-thin text-18 tracking-wide antialiased text-white">
|
||||
Change Password
|
||||
</span>
|
||||
</button>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
type="button"
|
||||
className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
|
||||
disabled={requestStatus.loading}
|
||||
onClick={handlePwdUpdate}
|
||||
>
|
||||
<span className="font-thin text-18 tracking-wide antialiased text-white">
|
||||
Change Password
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</div>
|
||||
<div className="w-[440px] sm:flex hidden justify-end">
|
||||
<PasswordSvg />
|
||||
|
||||
@@ -12,6 +12,20 @@ export default function PaymentMathodsTab() {
|
||||
<div className="payment-method-tab w-full">
|
||||
<div className="payment-item-wrapper w-full">
|
||||
<CardList />
|
||||
<div className="py-7 flex space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-shine text-white text-18 bg-pink tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
Add Bank
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-white text-18 bg-light-green tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
Add Card
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function Settings({ faq }) {
|
||||
{
|
||||
id: 2,
|
||||
name: "payment",
|
||||
title: "Payment Cards",
|
||||
title: "Payment Method",
|
||||
iconName: "bank-card",
|
||||
},
|
||||
{
|
||||
|
||||
@@ -921,6 +921,18 @@ class usersService {
|
||||
return this.postAuxEnd("/familysuggestlist", postData);
|
||||
}
|
||||
|
||||
// FUNCTION TO CHANGE PROFILE PASSWORD
|
||||
profilePassChange(reqData) {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: 11005,
|
||||
...reqData,
|
||||
};
|
||||
return this.postAuxEnd("/profilepasschange", postData);
|
||||
}
|
||||
|
||||
/*
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
|
||||
|
||||
Reference in New Issue
Block a user