implement sign up page

src/components/AuthPages/Login/index.jsx

@@ -81,7 +81,6 @@ export default function Login() {
         }
       }
     } catch (error) {
-      console.log(error)
       setMsgError('An error occurred')
     } finally {
       setTimeout(() => {

src/components/AuthPages/SignUp/index.jsx

@@ -1,144 +1,254 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import loginThumb from "../../../assets/images/auth-thumb.svg";
+import { useNavigate, Link } from "react-router-dom";
-import googleLogo from "../../../assets/images/google-logo.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
-import logo from "../../../assets/images/light-logo.png"; //logo-1.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
-import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function SignUp() {
+  const [signUpLoading, setSignUpLoading] = useState(false)
   const [checked, setValue] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [countries, setCountries] = useState([]);
+
+  const [formData, setFormData] = useState({
+    country: "",
+    first_name: "",
+    last_name: "",
+    email: "",
+    password: ""
+  });
+
+  const handleInputChange = (event) => {
+    const { name, value } = event?.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  // 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()
+
+    try {
+      if (res.status === 200) {
+        const { signup_country } = await res.data
+        setCountries(signup_country)
+      } else if (res.data.result != 100) {
+        setCountries('Nothing see here!')
+      }
+    } catch (error) {
+      throw new Error(error)
+    }
+  }
+
+  const handleSignUp = async () => {
+    let { country, first_name, last_name, email, password } = formData
+
+    if (email == '' && password == '' && first_name == '') {
+      setMsgError('Please fill in fields')
+    }
+
+    try {
+      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+        const reqData = {
+          country: country,
+          firstname: first_name,
+          lastname: last_name,
+          email: email,
+          username: email,
+          password: password,
+          terms: 1,
+          news: 1
+        }
+
+        const res = await userApi.CreateUser(reqData)
+        if (res.status === 200) {
+          const { data } = res
+          if (data.status == -1 && data.acc == 'DULPICATE') {
+            setMsgError('This account has been already created')
+          }
+          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)
+          }
+        }
+      }
+    } catch (error) {
+      throw new Error(error)
+      setMsgError('An error occurred')
+    } finally {
+      setTimeout(() => {
+        setMsgError(null)
+      }, 7000)
+    }
+  }
+
+  useEffect(() => {
+    getCountryList()
+  }, [])
+
   return (
     <>
-      <div className="layout-wrapper">
+      <div className="layout-wrapper login">
-        <div className="main-wrapper w-full xl:h-screen h-full xl:py-0 py-12">
+        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12">
-          <div className="flex w-full h-full">
+          <div className=" h-full">
             <div className="flex-1 flex justify-center items-center">
-              <div className="content-wrapper xl:bg-white dark:bg-dark-white   xl:px-7 px-5 2xl:px-[100px] h-[840px] rounded-xl flex flex-col justify-center">
+              <div className="w-full">
-                <div>
+                <div className='mb-12'>
-                  <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <Link to='#'>
-                    <h1 className="sm:text-5xl text-4xl font-bold  text-dark-gray dark:text-white leading-2">
+                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-                      Create Account
+                  </Link>
-                    </h1>
+                </div>
-                    <div className="shape sm:w-[377px] w-[280px] mb-[10px] ml-5">
+                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] 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">
-                      <img src={titleShape} alt="shape" />
+                  <div>
+                    <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)'
+                      }}>
+                        Create Account
+                      </h1>
+                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
                     </div>
-                  </div>
+                    <button
-                  <div className="input-area">
+                      type="button"
-                    <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] 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]`}
-                      <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+                    >
+                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
+                      Sign in with Facebook
+                    </button>
+                    <div className="w-full flex items-center gap-2">
+                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
+                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                    </div>
+                    <div className="input-area">
+                      <SelectOption
+                        label='Country'
+                        data={countries}
+                        name="country"
+                        value={formData.country}
+                        inputHandler={handleInputChange}
+                      />
+                      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+                        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+                          <InputCom
+                            placeholder="Firstname"
+                            label="First Name"
+                            name="first_name"
+                            type="text"
+                            value={formData.first_name}
+                            inputHandler={handleInputChange}
+                          />
+                        </div>
+                        <div className="input-item flex-1">
+                          <InputCom
+                            placeholder="Lastname"
+                            label="Last Name"
+                            name="last_name"
+                            type="text"
+                            value={formData.last_name}
+                            inputHandler={handleInputChange}
+                          />
+                        </div>
+                      </div>
+                      <div className="input-item mb-5">
                         <InputCom
-                          placeholder="Adam"
+                          placeholder="support@mermsemr.com"
-                          label="First Name"
+                          label="Email"
-                          name="first_name"
+                          name="email"
-                          type="text"
+                          type="email"
-                          iconName="people"
+                          value={formData.email}
+                          inputHandler={handleInputChange}
                         />
                       </div>
-                      <div className="input-item flex-1">
+                      <div className="input-item mb-5">
                         <InputCom
-                          placeholder="Wathon"
+                          placeholder="● ● ● ● ● ●"
-                          label="Last Name"
+                          label="Password"
-                          name="Last_name"
+                          name="password"
-                          type="text"
+                          type={showPassword ? 'text' : 'password'}
-                          iconName="people"
+                          onClick={togglePasswordVisibility}
+                          passIcon={showPassword ? "show-password" : "hide-password"}
+                          value={formData.password}
+                          inputHandler={handleInputChange}
                         />
                       </div>
-                    </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="input-item mb-5">
+                      <div className="forgot-password-area flex justify-between items-center mb-6">
-                      <InputCom
+                        <div className="remember-checkbox flex items-center space-x-2.5">
-                        placeholder="example@quomodosoft.com"
+                          <button
-                        label="Email Address"
+                            onClick={rememberMe}
-                        name="email"
+                            type="button"
-                        type="email"
+                            className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
-                        iconName="message"
-                      />
-                    </div>
-                    <div className="input-item mb-5">
-                      <InputCom
-                        placeholder="*********"
-                        label="Password"
-                        name="password"
-                        type="password"
-                        iconName="password"
-                      />
-                    </div>
-                    <div className="input-item mb-5">
-                      <InputCom
-                        placeholder="*********"
-                        label="Re-enter Password"
-                        name="password"
-                        type="password"
-                        iconName="password"
-                      />
-                    </div>
-                    <div className="forgot-password-area flex justify-between items-center mb-6">
-                      <div className="remember-checkbox flex items-center space-x-2.5">
-                        <button
-                          onClick={rememberMe}
-                          type="button"
-                          className="w-5 h-5 text-dark-gray dark:text-white flex justify-center items-center border border-light-gray"
-                        >
-                          {checked && (
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              className="h-5 w-5"
-                              viewBox="0 0 20 20"
-                              fill="currentColor"
-                            >
-                              <path
-                                fillRule="evenodd"
-                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          )}
-                        </button>
-                        <span
-                          onClick={rememberMe}
-                          className="text-base   text-dark-gray dark:text-white"
-                        >
-                          I agree all
-                          <a
-                            href="#"
-                            className="text-base text-purple mx-1 inline-block"
                           >
-                            terms and condition
+                            {checked && (
-                          </a>
+                              <svg
-                          in WrenchBoard.
+                                xmlns="http://www.w3.org/2000/svg"
-                        </span>
+                                className="h-5 w-5"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            )}
+                          </button>
+                          <span
+                            onClick={rememberMe}
+                            className="text-base   text-dark-gray dark:text-white"
+                          >
+                            I agree with all
+                            <a
+                              href="#"
+                              className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                            >
+                              terms and condition
+                            </a>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="signin-area mb-1">
+                        <div className="flex justify-center">
+                          <button
+                            type="button"
+                            onClick={handleSignUp}
+                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
+                              }`}
+                          >
+                            {signUpLoading ? (
+                              <div className="signup btn-loader"></div>
+                            ) : (
+                              <span>Sign Up</span>
+                            )}
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                    <div className="signin-area mb-1">
-                      <a
-                        href="#"
-                        className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
-                      >
-                        Sign Up
-                      </a>
-                      <a
-                        href="#"
-                        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                      >
-                        <img
-                          className="mr-3"
-                          src={googleLogo}
-                          alt="google logo"
-                        />
-                        <span className="text-lg text-thin-light-gray font-normal">
-                          Sign Up with Google
-                        </span>
-                      </a>
-                    </div>
-                    <div className="signup-area flex justify-center">
-                      <p className="text-lg text-thin-light-gray font-normal">
-                        Already have account?
-                        <a href="/login" className="ml-2   text-dark-gray dark:text-white">
-                          Log In
-                        </a>
-                      </p>
                     </div>
                   </div>
                 </div>
@@ -150,3 +260,32 @@ export default function SignUp() {
     </>
   );
 }
+
+const SelectOption = ({
+  label,
+  name,
+  inputHandler,
+  value,
+  data // passing the data from parent 
+}) => {
+  return (
+    <div className="input-com mb-7">
+      <div className="flex items-center justify-between">
+        <label
+          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          htmlFor={name}
+        >
+          {label}
+        </label>
+      </div>
+      <div>
+        <select name={name} id={name} 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 " onChange={inputHandler} value={value}>
+          <option value={""}>Select your Country</option>
+          {data?.length > 0 && data?.map((item, idx) => (
+            <option value={item[0]} key={idx}>{item[1]}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -8,9 +8,11 @@ export default function InputCom({
   name,
   placeholder,
   iconName,
+  passIcon,
   inputHandler,
   value,
-  forgotPassword
+  forgotPassword,
+  onClick
 }) {
   return (
     <div className="input-com">
@@ -25,7 +27,7 @@ export default function InputCom({
       )}
       {forgotPassword && <Link href="/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-[58px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
+      <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
           placeholder={placeholder}
           value={value}
@@ -33,13 +35,19 @@ export default function InputCom({
           className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
+          name={name}
           required
         />
         {iconName && (
-          <div className="absolute right-6 bottom-[19px] z-10">
+          <div className="absolute right-6 bottom-[10px] z-10">
             <Icons name={iconName} />
           </div>
         )}
+        {passIcon && (
+          <div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
+            <Icons name={passIcon} />
+          </div>
+        )}
       </div>
     </div>
   );

src/index.css

@@ -712,4 +712,18 @@ TODO: Responsive ===========================
 .content-wrapper.login{
   --bg-color: 255,255,255;
   background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
+}
+
+.content-wrapper select {
+  /* for Firefox */
+  -moz-appearance: none;
+  /* for Chrome */
+  -webkit-appearance: none;
+  appearance: none;
+  padding-inline: 1rem;
+}
+
+/* For IE10 */
+.content-wrapper select::-ms-expand {
+  display: none;
 }

src/services/UsersService.js

@@ -48,9 +48,9 @@ class usersService {
         return this.postAuxEnd("/apigate", null);
     }
 
-    CreateUser(){
+    CreateUser(reqData){
-        // localStorage.setItem("session_token", ``);
+        localStorage.setItem("session_token", ``);
-        return this.postAuxEnd("/createuser", null);
+        return this.postAuxEnd("/createuser", reqData);
     }
 
     getLoadProfile(){
@@ -162,6 +162,11 @@ class usersService {
         return this.postAuxEnd("/couponredeem", postData);
     }
 
+    // Country Data {GET}
+    getSignupCountryData() {
+        return this.postAuxEnd("/signupcountry", null);
+    }
+
     /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)