Compare commits

..

2 Commits

Author SHA1 Message Date
victorAnumudu 48ea72270f verified that otp is six digits 2023-02-22 11:35:35 +01:00
victorAnumudu 9cb773d360 added signup authentication and signup otp verification 2023-02-20 20:45:34 +01:00
10 changed files with 31 additions and 112 deletions
-2
View File
@@ -31,7 +31,6 @@ import CalendarPage from "./views/CalendarPage";
import ResourcePage from "./views/ResourcePage"; import ResourcePage from "./views/ResourcePage";
import TrackActionPage from "./views/TrackActionPage"; import TrackActionPage from "./views/TrackActionPage";
import SubscriptionPage from "./views/SubscriptionPage"; import SubscriptionPage from "./views/SubscriptionPage";
import VerifySignupCompletePage from "./views/VerifySignupCompletePage";
export default function Routers() { export default function Routers() {
return ( return (
@@ -52,7 +51,6 @@ export default function Routers() {
/> />
<Route exact path="/verify-you" element={<VerifyYouPages />} /> <Route exact path="/verify-you" element={<VerifyYouPages />} />
<Route exact path="/verify-signup" element={<VerifySignupPage />} /> <Route exact path="/verify-signup" element={<VerifySignupPage />} />
<Route exact path="/complete-signup" element={<VerifySignupCompletePage />} />
{/* private route */} {/* private route */}
<Route element={<AuthRoute />}> <Route element={<AuthRoute />}>
@@ -3,49 +3,34 @@ import { Link, useNavigate } from 'react-router-dom';
import titleShape from "../../../assets/images/shape/title-shape-two.svg"; import titleShape from "../../../assets/images/shape/title-shape-two.svg";
import InputCom from "../../Helpers/Inputs/InputCom"; import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout"; import AuthLayout from "../AuthLayout";
import usersService from "../../../services/UsersService";
export default function ForgotPassword() { export default function ForgotPassword() {
const navigate = useNavigate(); const navigate = useNavigate();
const [validation, setValidation] = useState("") const [validation, setValidation] = useState("")
const [buttonDisabled, setButtonDisabled] = useState(true) const [buttonDisabled, setButtonDisabled] = useState(true)
const [loading, setLoading] = useState(false);
const user = new usersService()
// email
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const handleEmail = (e) => { const handleEmail = (e) => {
setEmail(e.target.value); setEmail(e.target.value);
}; };
function validationChecker(email) { function validationChecker(email) {
const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/; const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
if (email === "") { if (email === "") {
setValidation("email is required"); setValidation("email is required");
} else if (!email.match(emailCheck)) { } else if (!email.match(emailCheck)) {
setValidation('Please input a valid email address'); setValidation('Please input a valid email address');
} else { } else {
setValidation(""); setValidation("");
setButtonDisabled(false) setButtonDisabled(false)
} }
} }
const handleSubmit = async() => {
const resetEmail = {
username: email,
stage: 100
}
const reset = await user.resetPassword(resetEmail);
setLoading(true)
if (reset.status == 200){
setTimeout(() => {
navigate("/verify-you", {replace : true});
setLoading(false)
}, 2000);
}else{
setValidation('An error occurred')
}
}
useEffect(() => { useEffect(() => {
validationChecker(email) validationChecker(email)
}, [email]) }, [email])
@@ -76,21 +61,21 @@ export default function ForgotPassword() {
inputHandler={handleEmail} inputHandler={handleEmail}
value={email} value={email}
/> />
{validation && <p className="my-5 text-center font-light italic subpixel-antialiased tracking-wide text-red-500">{validation}</p>} {validation && <p className="my-5 font-bold text-red-500">{validation}</p>}
</div> </div>
<div className="signin-area mb-3.5"> <div className="signin-area mb-3.5">
<button <button
className="w-full rounded-[50px] h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center" className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
disabled={buttonDisabled} disabled={buttonDisabled}
onClick={handleSubmit} onClick={() => navigate("/verify-you")}
> >
{loading ? <div className="signup btn-loader"></div> : <span>Send Code</span>} Send Code
</button> </button>
<Link to="/" <Link to="/"
className="mt-5 cursor-default font-bold flex justify-center subpixel-antialiased tracking-wide text-white items-center h-[58px] rounded-[50px] bg-[#1a3544a2]" className="my-40 font-bold flex justify-center text-red-500 items-center"
> >
Back to Home Back to Home
</Link> </Link>
@@ -1,14 +1,7 @@
import React from "react"; import React from "react";
import AuthLayout from "../../AuthLayout";
export default function ThankYou({ className }) {
export default function CompleteSignUp({ className }) {
return ( return (
<>
<AuthLayout
slogan="Welcome to myFit"
>
<div <div
className={`content-wrapper xl:bg-white dark:xl:bg-dark-white sm:px-[70px] px-5 2xl:px-[100px] 2xl:h-[818px] xl:h-[650px] rounded-xl flex flex-col justify-center ${ className={`content-wrapper xl:bg-white dark:xl:bg-dark-white sm:px-[70px] px-5 2xl:px-[100px] 2xl:h-[818px] xl:h-[650px] rounded-xl flex flex-col justify-center ${
className || "" className || ""
@@ -51,7 +44,5 @@ export default function CompleteSignUp({ className }) {
</a> </a>
</div> </div>
</div> </div>
</AuthLayout>
</>
); );
} }
@@ -10,7 +10,7 @@ export default function VerifyYou() {
const navigate = useNavigate(); const navigate = useNavigate();
const verifyOTP = new usersService(); const verify = new usersService();
const [loading, setLoading] = useState(false) // For loading spinner const [loading, setLoading] = useState(false) // For loading spinner
@@ -45,12 +45,12 @@ export default function VerifyYou() {
setLoading(true) // Sets loading spinner setLoading(true) // Sets loading spinner
let otpCode = ''; let code = '';
for(let values in verificationCode){ for(let values in verificationCode){
otpCode+=verificationCode[values] code+=verificationCode[values]
} }
if(!otpCode){ // checks if code is empty if(!code){ // checks if code is empty
setLoading(false) setLoading(false)
setErrorMessage({ setErrorMessage({
success: false, success: false,
@@ -58,7 +58,7 @@ export default function VerifyYou() {
}) })
return return
} }
if(otpCode.length < 6){ // checks if verifiedCode is empty if(code.length < 6){ // checks if verifiedCode is empty
setLoading(false) setLoading(false)
setErrorMessage({ setErrorMessage({
success: false, success: false,
@@ -67,18 +67,8 @@ export default function VerifyYou() {
return return
} }
let apiInput = {
username: 'anumuduchukwuebuka@gmail.com',
pend_uid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de',
random_text: otpCode,
mode: 'VERIFY',
// loc: 'Desktop',
// sessionid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de',
// code: otpCode,
}
try { try {
const res = await verifyOTP.signupOTPVerify(apiInput); const res = await verify.signupOTPVerify(code);
console.log(res) console.log(res)
if(res.status != 200){ if(res.status != 200){
setLoading(false) setLoading(false)
@@ -95,7 +85,7 @@ export default function VerifyYou() {
}) })
setTimeout(()=>{ setTimeout(()=>{
setLoading(false) setLoading(false)
navigate('/complete-signup', { replace: true }) navigate('/update-password', { replace: true })
}, 1000) }, 1000)
} catch (error) { } catch (error) {
setLoading(false) setLoading(false)
+7 -34
View File
@@ -6,12 +6,12 @@ import titleShape from "../../../assets/images/shape/title-shape-two.svg";
import InputCom from "../../Helpers/Inputs/InputCom"; import InputCom from "../../Helpers/Inputs/InputCom";
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import usersService from "../../../services/UsersService"; // site api services import usersService from "../../../services/UsersService";
export default function SignUp() { export default function SignUp() {
const navigate = useNavigate(); const navigate = useNavigate();
const userSignup = new usersService(); const userSignupAuth = new usersService();
const [loading, setLoading] = useState(false) // For loading spinner const [loading, setLoading] = useState(false) // For loading spinner
@@ -62,16 +62,6 @@ export default function SignUp() {
}) })
return return
} }
//checks if email is a valid email address
let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
if (regEx.test(email) == false) {
setLoading(false)
setErrorMessage({
success: false,
message: 'Please Input a valid email; e.g: text@gmail.com'
})
return
}
if(password != confirm_password){ //checks if password matches confirm password if(password != confirm_password){ //checks if password matches confirm password
setLoading(false) setLoading(false)
@@ -82,25 +72,11 @@ export default function SignUp() {
return return
} }
//checks if password is matches alphanumeric with at least one uppercase letter
// let PwdRegEx = /[A-Z]/;
if (/[A-Z]/.test(password) == false) {
setLoading(false)
setErrorMessage({
success: false,
message: 'Password must contain at least one uppercase character; e.g: Text123'
})
return
}
userInfo.username = email // assigns email as username also
userInfo.mode = 'START' // assigns mode as START
delete userInfo.confirm_password // deletes confrim password before making API call delete userInfo.confirm_password // deletes confrim password before making API call
try { try {
const res = await userSignup.signupUser(userInfo); const res = await userSignupAuth.signupAuth(userInfo);
if(res.status != 200 || res.data.status < 1){ if(res.status != 200){
setLoading(false) setLoading(false)
setErrorMessage({ setErrorMessage({
success: false, success: false,
@@ -125,7 +101,6 @@ export default function SignUp() {
}) })
} }
} }
return ( return (
<> <>
<div className="layout-wrapper"> <div className="layout-wrapper">
@@ -166,7 +141,7 @@ export default function SignUp() {
name="firstname" name="firstname"
type="text" type="text"
iconName="people" iconName="people"
value={userDetails.first_name} value={userDetails.firstname}
inputHandler={handleInputChange} inputHandler={handleInputChange}
/> />
</div> </div>
@@ -177,7 +152,7 @@ export default function SignUp() {
name="lastname" name="lastname"
type="text" type="text"
iconName="people" iconName="people"
value={userDetails.Last_name} value={userDetails.lastname}
inputHandler={handleInputChange} inputHandler={handleInputChange}
/> />
</div> </div>
@@ -253,9 +228,7 @@ export default function SignUp() {
</div> </div>
</div> </div>
<div className="signin-area mb-1"> <div className="signin-area mb-1">
{errorMessage.message != '' && <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
{errorMessage.message != '' && <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
<button <button
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center" className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
// onClick={() => navigate("/verify-signup")} // onClick={() => navigate("/verify-signup")}
+2 -1
View File
@@ -76,7 +76,8 @@ export default function TrackItemCard({ datas, hidden = false }) {
</div> </div>
</div> </div>
{/* user */} {/* user */}
<div className="user w-full text-center mt-[14px]"> <div className="user w-full text-center">
<p className="text-sm text-thin-light-gray dark:text-white"> <p className="text-sm text-thin-light-gray dark:text-white">
<Link <Link
to={`/track-action/${datas.widget}`} to={`/track-action/${datas.widget}`}
+1 -1
View File
@@ -76,7 +76,7 @@ export default function AddEditReminder({ className }) {
setMessage({status: true, message: ''}) setMessage({status: true, message: ''})
let {description, notes, category, mode} = infoDetail let {description, notes, category, mode} = infoDetail
//CHECKING IF AN EMPTY FIELD WAS PASSED //CHECKING IF AN EMPTY FIELD WAS PASSED
if(!description || !category || !mode){ if(!description || !notes || !category || !mode){
setSuccess(false) setSuccess(false)
setMessage({status: false, message: 'All fields must be filled'}) setMessage({status: false, message: 'All fields must be filled'})
return return
-8
View File
@@ -669,7 +669,6 @@ TODO: Responsive ===========================
.nft-userprofile-wrapper .content-wrapper-profile-only .auth { .nft-userprofile-wrapper .content-wrapper-profile-only .auth {
margin-top: -70px; margin-top: -70px;
} }
.react-date-picker__calendar {width: 290px;}
} }
@media (max-width: 376px) { @media (max-width: 376px) {
.notification-page .content-item .notifications { .notification-page .content-item .notifications {
@@ -678,7 +677,6 @@ TODO: Responsive ===========================
.notification-page .content-item .notifications .icon { .notification-page .content-item .notifications .icon {
@apply mb-2; @apply mb-2;
} }
} }
/* Calendar */ /* Calendar */
@@ -768,11 +766,6 @@ TODO: Responsive ===========================
} }
/* Date Picker */ /* Date Picker */
.react-date-picker{
display: flex !important;
flex: 1;
}
.react-date-picker__wrapper{ .react-date-picker__wrapper{
border: 0.5px solid #E3E4FE; border: 0.5px solid #E3E4FE;
padding: 1.25rem; padding: 1.25rem;
@@ -790,7 +783,6 @@ TODO: Responsive ===========================
.dark .react-date-picker__button svg{stroke: #7B818D;} .dark .react-date-picker__button svg{stroke: #7B818D;}
.react-date-picker__calendar {inset: 100% 25px auto auto !important;}
.react-date-picker__calendar .react-calendar{ .react-date-picker__calendar .react-calendar{
min-height: 18.4rem; min-height: 18.4rem;
} }
+3 -8
View File
@@ -5,11 +5,6 @@ class usersService {
console.log("Er are here anyway"); console.log("Er are here anyway");
} }
// Reset Password
resetPassword(reqData) {
return this.postAuxEnd('/resetpass', reqData);
}
logInUser(reqData) { logInUser(reqData) {
localStorage.setItem("session_token", ``); localStorage.setItem("session_token", ``);
return this.postAuxEnd("/login", reqData); return this.postAuxEnd("/login", reqData);
@@ -21,13 +16,13 @@ class usersService {
} }
//SIGNUP AUTH //SIGNUP AUTH
signupUser(reqData){ signupAuth(reqData){
return this.postAuxEnd("/account", reqData); return this.postAuxEnd("/account", reqData);
} }
//SIGNUP OTP VERIFICATION AUTH //SIGNUP OTP VERIFICATION AUTH
signupOTPVerify(reqData){ signupOTPVerify(reqData){
return this.postAuxEnd("/signup-code", reqData); return this.postAuxEnd("/signup-code", reqData);
} }
getUserReminders(){ getUserReminders(){
@@ -138,7 +133,7 @@ class usersService {
if (error.response) { if (error.response) {
//response status is an error code //response status is an error code
console.log("ERROR-------------------------------------------------------"); console.log("ERROR-------------------------------------------------------");
console.log(error.response.status, 'err'); console.log(error.response.status);
console.log("ERROR-------------------------------------------------------"); console.log("ERROR-------------------------------------------------------");
} else if (error.request) { } else if (error.request) {
//response not received though the request was sent //response not received though the request was sent
-6
View File
@@ -1,6 +0,0 @@
import React from "react";
import CompleteSignUp from "../components/AuthPages/SignUp/CompleteSignUp";
export default function VerifySignupCompletePage() {
return <CompleteSignUp />;
}