WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added the email and offed the autocomplete attr for the component

Browse Source
This commit was merged in pull request #567.
This commit is contained in:
Chukwumdiebube Ojinta
2024-02-04 00:29:09 +01:00
parent 6268d68b67
commit 77ac52820d
4 changed files with 146 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/SignUp/index2.jsx
+73 -58
View File
@@ -9,19 +9,21 @@ export default function SignUp() {
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
const queryParams = new URLSearchParams(location?.search); const queryParams = new URLSearchParams(location?.search);
const country = queryParams.get("cnt")?.toUpperCase(); const country = queryParams.get("cnt")?.toUpperCase();
const {pathname} = useLocation() const { pathname } = useLocation();
const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist const currentPath = country
? `${pathname}?cnt=${country.toLowerCase()}`
: pathname; // Determines the new pathname is country query params exist
const [signUpLoading, setSignUpLoading] = useState(false); const [signUpLoading, setSignUpLoading] = useState(false);
const [checked, setValue] = useState(false); const [checked, setValue] = useState(false);
// for the catch error // for the catch error
const [msgError, setMsgError] = useState(""); const [msgError, setMsgError] = useState("");
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [countries, setCountries] = useState({loading:true, data:[]}); const [countries, setCountries] = useState({ loading: true, data: [] });
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
country: country? country : "", country: country ? country : "",
first_name: "", first_name: "",
last_name: "", last_name: "",
email: "", email: "",
@@ -47,22 +49,23 @@ export default function SignUp() {
// Get Country Api // Get Country Api
const getCountryList = useCallback(async () => { const getCountryList = useCallback(async () => {
try { try {
const res = await userApi.getSignupCountryData(); const res = await userApi.getSignupCountryData();
if (res.status === 200 && res.data.internal_return >= 0) { if (res.status === 200 && res.data.internal_return >= 0) {
const { result_list } = await res.data; const { result_list } = await res.data;
if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE if (country) {
let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API // IF LINK/PATHNAME HAS CNT QUERY VALUE
if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
setFormData(prev => ({...prev, country: ''})) if (!cnt.length) {
return setCountries({loading: false, data: result_list}); // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
setFormData((prev) => ({ ...prev, country: "" }));
return setCountries({ loading: false, data: result_list });
} }
return setCountries({loading: false, data: cnt}); return setCountries({ loading: false, data: cnt });
} }
setCountries({loading: false, data:result_list}); setCountries({ loading: false, data: result_list });
} else if (res.data.result !== 100) { } else if (res.data.result !== 100) {
setCountries({loading: false, data:[]}); setCountries({ loading: false, data: [] });
} }
} catch (error) { } catch (error) {
throw new Error(error); throw new Error(error);
@@ -113,9 +116,7 @@ export default function SignUp() {
if (res.status === 200) { if (res.status === 200) {
const { data } = res; const { data } = res;
if (data && data.acc === "DULPICATE") { if (data && data.acc === "DULPICATE") {
setMsgError( setMsgError("Duplicate username. Please try another email.");
"Unable to use this username. Please try another username."
);
setSignUpLoading(false); setSignUpLoading(false);
} }
if (data && data.status === "1") { if (data && data.status === "1") {
@@ -124,6 +125,11 @@ export default function SignUp() {
setSignUpLoading(false); setSignUpLoading(false);
}, 2000); }, 2000);
} }
if (data && data.status === "5") {
setMsgError("Something went wrong. Please try another email.");
setSignUpLoading(false);
}
} else { } else {
setSignUpLoading(false); setSignUpLoading(false);
setMsgError("An error occurred"); setMsgError("An error occurred");
@@ -187,7 +193,9 @@ export default function SignUp() {
name="country" name="country"
value={formData.country} value={formData.country}
inputHandler={handleInputChange} inputHandler={handleInputChange}
disable={country && countries?.data?.length <= 1 ? true : false} disable={
country && countries?.data?.length <= 1 ? true : false
}
/> />
<div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 "> <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
<div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0"> <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
@@ -339,27 +347,40 @@ export default function SignUp() {
{/* APP DOWNLOAD STORE */} {/* APP DOWNLOAD STORE */}
<div className="w-full mt-4"> <div className="w-full mt-4">
<div className="w-full flex justify-center items-center gap-4"> <div className="w-full flex justify-center items-center gap-4">
<div className='w-28 lg:w-32'> <div className="w-28 lg:w-32">
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_APPLE_APP}> <a
<i className="fa-brands fa-apple text-3xl"></i> className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
<div className="flex flex-col"> target="_blank"
<span className="text-[11px]">Available on the</span> href={process.env.REACT_APP_APPLE_APP}
<span className="text-[12px] lg:text-base">App Store</span> rel="noreferrer"
</div> >
</a> <i className="fa-brands fa-apple text-3xl"></i>
</div> <div className="flex flex-col">
<div className='w-28 lg:w-32'> <span className="text-[11px]">Available on the</span>
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}> <span className="text-[12px] lg:text-base">
<i className="fa-brands fa-google-play text-2xl"></i> App Store
<div className="flex flex-col"> </span>
<span className="text-[11px]">Available on the</span> </div>
<span className="text-[12px] lg:text-base">Google Play</span> </a>
</div>
</a>
</div>
</div> </div>
<div className="w-28 lg:w-32">
<a
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
target="_blank"
href={process.env.REACT_APP_ANDROID_APP}
rel="noreferrer"
>
<i className="fa-brands fa-google-play text-2xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">
Google Play
</span>
</div>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -375,7 +396,7 @@ const SelectOption = ({
inputHandler, inputHandler,
value, value,
data, // passing the data from parent data, // passing the data from parent
disable disable,
}) => { }) => {
return ( return (
<div className="input-com mb-7"> <div className="input-com mb-7">
@@ -389,39 +410,33 @@ const SelectOption = ({
</div> </div>
<div> <div>
<select <select
disabled={disable} disabled={disable}
name={name} name={name}
id={name} id={name}
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full 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 focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent " className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full 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 focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
onChange={inputHandler} onChange={inputHandler}
value={value} value={value}
> >
{data?.data?.length > 1 ? {data?.data?.length > 1 ? (
<> <>
<option value={""}>Select your Country</option> <option value={""}>Select your Country</option>
{data?.data?.map((item) => ( {data?.data?.map((item) => (
<option value={item.code} key={item.uid}> <option value={item.code} key={item.uid}>
{item.country} {item.country}
</option> </option>
))} ))}
</> </>
: ) : data?.data?.length == 1 ? (
data?.data?.length == 1 ?
data?.data?.map((item) => ( data?.data?.map((item) => (
<option value={item.code} key={item.uid}> <option value={item.code} key={item.uid}>
{item.country} {item.country}
</option> </option>
)) ))
: ) : data?.data?.length < 1 && data.loading ? (
data?.data?.length < 1 && data.loading ? <option value="">Loading...</option>
<option value=''> ) : (
Loading... <option value="">No Country Found!</option>
</option> )}
:
<option value=''>
No Country Found!
</option>
}
</select> </select>
</div> </div>
</div> </div>
src/components/AuthPages/VerifyLink/index.jsx
+59 -55
View File
@@ -51,8 +51,7 @@ export default function VerifyLink() {
localStorage.setItem("member_id", `${data?.member_id}`); localStorage.setItem("member_id", `${data?.member_id}`);
localStorage.setItem("session_token", `${data?.session}`); localStorage.setItem("session_token", `${data?.session}`);
localStorage.setItem("session", `${data?.session}`); localStorage.setItem("session", `${data?.session}`);
localStorage.setItem("uid", data?.uid) localStorage.setItem("uid", data?.uid);
navigate("/", { replace: true }); navigate("/", { replace: true });
setLinkLoader(false); setLinkLoader(false);
@@ -80,19 +79,19 @@ export default function VerifyLink() {
}; };
// for verifying the incoming verification link and render the correct component // for verifying the incoming verification link and render the correct component
const verifyEmail = useCallback(async (code) => { const verifyEmail = async (code) => {
try { try {
const verifyRes = await userApi.verifyEmail(code); const verifyRes = await userApi.verifyEmail(code);
if (verifyRes.status === 200) { if (verifyRes.status === 200) {
let { data } = verifyRes; let { data } = verifyRes;
console.log('TESTING VERIFY',data) console.log("TESTING VERIFY", data);
if ( if (
data && data &&
data.internal_return >= 0 && data.internal_return >= 0 &&
data.status == 0 && data.status == 0 &&
data.pending_id != '' && data.pending_id != "" &&
data.pending_uid != '' && data.pending_uid != "" &&
data.username != '' && data.username != "" &&
data.status_text === "Link Verified" data.status_text === "Link Verified"
) { ) {
setPageLoader(false); setPageLoader(false);
@@ -106,12 +105,13 @@ export default function VerifyLink() {
setLinkSuccess(false); setLinkSuccess(false);
throw new Error(error); throw new Error(error);
} }
}, []); };
// delay verify requests by 10000ms // delay verify requests by 10000ms
const debouncedEmail = debounce(verifyEmail, 1000); const debouncedEmail = debounce(verifyEmail, 1000);
useEffect(() => { useEffect(() => {
setEmail("")
debouncedEmail(token); debouncedEmail(token);
}, []); }, []);
@@ -171,53 +171,57 @@ const SuccessfulComponent = ({
handleEmail, handleEmail,
msgErr, msgErr,
loader, loader,
}) => ( }) => {
<div className="input-area"> return (
{/* INPUT */} <div className="input-area">
<div className="mb-5"> {/* INPUT */}
<InputCom <div className="mb-5">
fieldClass="px-6" <InputCom
value={email} fieldClass="px-6"
inputHandler={handleEmail} value={email}
placeholder="support@mermsemr.com" inputHandler={handleEmail}
label="Email" placeholder="support@mermsemr.com"
name="email" label="Email"
type="email" name="email"
iconName="message" type="email"
/> iconName="message"
</div> autoComplete="off"
<div className="mb-5"> />
<InputCom </div>
fieldClass="px-6" <div className="mb-5">
value={password} <InputCom
inputHandler={handlePassword} fieldClass="px-6"
placeholder="● ● ● ● ● ●" value={password}
label="Password" inputHandler={handlePassword}
name="password" placeholder="● ● ● ● ● ●"
type="password" label="Password"
iconName="password" name="password"
/> type="password"
</div> iconName="password"
{msgErr && ( autoComplete="off"
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]"> />
{msgErr} </div>
{msgErr && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
{msgErr}
</div>
)}
<div className="signin-area mb-3.5">
<button
onClick={onSubmit}
type="button"
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
>
{loader ? (
<div className="signup btn-loader"></div>
) : (
<span>Continue</span>
)}
</button>
</div> </div>
)}
<div className="signin-area mb-3.5">
<button
onClick={onSubmit}
type="button"
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
>
{loader ? (
<div className="signup btn-loader"></div>
) : (
<span>Continue</span>
)}
</button>
</div> </div>
</div> );
); };
const ErrorComponent = ({ onClick }) => ( const ErrorComponent = ({ onClick }) => (
<div className="input-area"> <div className="input-area">
src/components/AuthPages/VerifyLink/index2.jsx
+12 -8
View File
@@ -51,8 +51,7 @@ export default function VerifyLink() {
localStorage.setItem("member_id", `${data?.member_id}`); localStorage.setItem("member_id", `${data?.member_id}`);
localStorage.setItem("session_token", `${data?.session}`); localStorage.setItem("session_token", `${data?.session}`);
localStorage.setItem("session", `${data?.session}`); localStorage.setItem("session", `${data?.session}`);
localStorage.setItem("uid", data?.uid) localStorage.setItem("uid", data?.uid);
navigate("/", { replace: true }); navigate("/", { replace: true });
setLinkLoader(false); setLinkLoader(false);
@@ -85,16 +84,17 @@ export default function VerifyLink() {
const verifyRes = await userApi.verifyEmail(code); const verifyRes = await userApi.verifyEmail(code);
if (verifyRes.status === 200) { if (verifyRes.status === 200) {
let { data } = verifyRes; let { data } = verifyRes;
console.log('TESTING VERIFY',data) console.log("TESTING VERIFY", data);
if ( if (
data && data &&
data.internal_return >= 0 && data.internal_return >= 0 &&
data.status == 0 && data.status == 0 &&
data.pending_id != '' && data.pending_id != "" &&
data.pending_uid != '' && data.pending_uid != "" &&
data.username != '' && data.username != "" &&
data.status_text === "Link Verified" data.status_text === "Link Verified"
) { ) {
setEmail(data.username);
setPageLoader(false); setPageLoader(false);
} else { } else {
setPageLoader(false); setPageLoader(false);
@@ -115,6 +115,8 @@ export default function VerifyLink() {
debouncedEmail(token); debouncedEmail(token);
}, []); }, []);
// ebube.ojinta+ga1@chiefsoft.com
return ( return (
<> <>
<AuthLayout slogan="Welcome to WrenchBoard"> <AuthLayout slogan="Welcome to WrenchBoard">
@@ -184,6 +186,7 @@ const SuccessfulComponent = ({
name="email" name="email"
type="email" type="email"
iconName="message" iconName="message"
autoComplete="off"
/> />
</div> </div>
<div className="mb-5"> <div className="mb-5">
@@ -196,6 +199,7 @@ const SuccessfulComponent = ({
name="password" name="password"
type="password" type="password"
iconName="password" iconName="password"
autoComplete="off"
/> />
</div> </div>
{msgErr && ( {msgErr && (
src/components/Helpers/Inputs/InputCom/index.jsx
+2
View File
@@ -27,6 +27,7 @@ export default function InputCom({
direction, direction,
tabIndex, tabIndex,
error, error,
autoComplete="on"
}) { }) {
const inputRef = useRef(null); const inputRef = useRef(null);
// Entry Validation // Entry Validation
@@ -107,6 +108,7 @@ export default function InputCom({
readOnly={disable} readOnly={disable}
onBlur={blurHandler} onBlur={blurHandler}
dir={direction} dir={direction}
autoComplete={autoComplete}
/> />
{iconName && ( {iconName && (
<div className="absolute right-6 bottom-3 z-10 flex gap-2"> <div className="absolute right-6 bottom-3 z-10 flex gap-2">