update login

connect with api
n-festa · Jan 3, 2024 · ef230c4 · ef230c4
1 parent 49963a6
commit ef230c4
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 194 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -23,7 +23,6 @@ body {
 .border-none{
     border:none;
 }
-
 /* header  */
 .header-section {
     border-bottom: 1px solid rgba(0, 71, 60, 0.20);

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 4001",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

diff --git a/src/components/OTPinput/index.tsx b/src/components/OTPinput/index.tsx
@@ -35,11 +35,11 @@ const OTPInput = ({
         // placeholder="0"
         onChange={(e) => {
           const { value } = e.target;
-          console.log("onChange input", megaIndex, "; value : ", value);
+          //console.log("onChange input", megaIndex, "; value : ", value);
           onChange(megaIndex, value);
         }}
         onSelect={() => {
-          console.log("onclick/select input", megaIndex);
+          //console.log("onclick/select input", megaIndex);
           onSelect(megaIndex);
         }}
         value={value}

diff --git a/src/components/loginSteps/Additional.tsx b/src/components/loginSteps/Additional.tsx
@@ -38,6 +38,8 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
 
 
     const { register,handleSubmit } = useForm();
+
+   // const onSubmit = async (data: LoginType) => {
     const onSubmit = async (data: LoginType) => {
         let selectedDate = document.getElementById('birthDate') as HTMLInputElement;
         data.ngaySinh = selectedDate.value;
@@ -47,14 +49,18 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
         setHeight(data.chieuCao);
         setWeight(data.canNang);
 
+        /*
         const res = await postData(`${server}auth/setEnergy`, {
             data: data,
         });
         
         setKcal(res.result.result.nangLuongKhuyenNghi.giaTri_Min);
+        */
+        console.log(data);
+        /*
         setTimeout(() => {
             onChange(4);
-        }, 2000);
+        }, 2000);*/
     };
 
     return (

diff --git a/src/components/loginSteps/LoginComponent.tsx b/src/components/loginSteps/LoginComponent.tsx
@@ -24,7 +24,6 @@ const LoginComponent = ({ onChange, setPhone }: StepType) => {
         if (phone) {
             if (phone.length == 12) {
                 phone = phone.substring(1);
-                //http://localhost:3010/web-customer/auth/request-otp
 
                 await fetch(`${server}web-customer/auth/request-otp`, {
                     method: "post",
@@ -33,6 +32,7 @@ const LoginComponent = ({ onChange, setPhone }: StepType) => {
                     headers: {
                         Accept: "application/json",
                         "Content-Type": "application/json",
+
                     },
                     credentials: "include",
                     body: JSON.stringify({
@@ -41,12 +41,18 @@ const LoginComponent = ({ onChange, setPhone }: StepType) => {
                 })
                 .then((res) => res.json())
                 .then((json) => {
-                    console.log(json);
+                    console.log(json.message.otpCode);
+
+                    if (json.statusCode == 200) {
+                        toast.success(" Success!", { autoClose: 1000 });
+                        setTimeout(() => {
+                            onChange(2);
+                        }, 3000);
+                    }
                 })
                 .catch((error) => {
                     console.log(error);
                 });
-                toast.success(" Success!", { autoClose: 1500 });
 
             } else {
                 toast.error(" Số điện thoại của bạn dường như chưa chính xác.", { autoClose: 1500 });

diff --git a/src/components/loginSteps/PhoneVerificationComponent.tsx b/src/components/loginSteps/PhoneVerificationComponent.tsx
@@ -2,6 +2,7 @@
 import TimerContainer from "../time/TimerContainer";
 import { useState, useEffect, createRef, useMemo } from "react";
 import { server } from "@utils/server";
+import { toast } from "react-toastify";
 import OTPInput from "@components/OTPinput";
 
 type StepType = {
@@ -10,8 +11,7 @@ type StepType = {
 };
 
 const PhoneVerificationComponent = ({ phone, onChange }: StepType) => {
-    console.log("render PhoneVerificationComponent");
-  // show 6 input
+    // show 6 input
     const numberOfInputs = 6;
     const [inputRefsArray] = useState(() =>
         Array.from({ length: numberOfInputs }, () => createRef())
@@ -24,79 +24,81 @@ const PhoneVerificationComponent = ({ phone, onChange }: StepType) => {
     );
 
     const authenticateOTP = async (phoneNumber: string, inputOTP: string) => {
-    await fetch(`${server}auth/authenticateOTP`, {
-      method: "post",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-      body: JSON.stringify({
-        phoneNumber: phoneNumber.substring(1),
-        inputOTP: inputOTP,
-      }),
-    })
-      .then((res) => res.json())
-      .then((json) => {
-        console.log(json);
-        if (json.status == "success") {
-          setTimeout(() => {
-            onChange(3);
-          }, 1000);
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+
+        await fetch(`${server}web-customer/auth/authenticate-otp`, {
+            method: "post",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+            },
+            credentials: "include",
+            body: JSON.stringify({
+                phoneNumber: phoneNumber.substring(1),
+                inputOTP: inputOTP,
+            }),
+        })
+        .then((res) => res.json())
+        .then((json) => {
+            console.log(json);
+            if (json.statusCode == 200) {
+                toast.success(" Success!", { autoClose: 1000 });
+                setTimeout(() => {
+                    onChange(3);
+                }, 3000);
+            }
+        })
+        .catch((error) => {
+            console.log(error);
+        });
     };
+
     const handleLetterChange = (letters: Array<string>) => {
-    console.log("start handleLetterChange");
 
-    //Check if inputRefsArray is inital state -> return
-    if (inputRefsArray[0].current == null) {
-      return;
-    }
-    //Check if there is any value at current index
-    if (letters[currentIndex] == "") {
-      return;
-    }
-    //Calculate NextIndex & get nextInput
-    const nextIndex = currentIndex + 1;
-    // const nextInput: any =
-    //   inputRefsArray?.[nextIndex % numberOfInputs]?.current;
-    //Update currentIndex
-    setCurrentIndex(nextIndex % numberOfInputs);
-    //Move cursor to nextInput
-    // nextInput.focus();
-    // nextInput.select();
-    //Authenticate OTP if user finishes
-    if (nextIndex === numberOfInputs) {
-      //array letters to string without separator
-      const inputOTP = letters.join("");
-      authenticateOTP(phoneNumber, inputOTP);
-      //clear letters
-      setLetters(() => Array.from({ length: numberOfInputs }, () => ""));
-    }
-    console.log("end handleLetterChange");
+        //Check if inputRefsArray is inital state -> return
+        if (inputRefsArray[0].current == null) {
+            return;
+        }
+        //Check if there is any value at current index
+        if (letters[currentIndex] == "") {
+            return;
+        }
+        //Calculate NextIndex & get nextInput
+        const nextIndex = currentIndex + 1;
+        // const nextInput: any =
+        //   inputRefsArray?.[nextIndex % numberOfInputs]?.current;
+        //Update currentIndex
+        setCurrentIndex(nextIndex % numberOfInputs);
+        //Move cursor to nextInput
+        // nextInput.focus();
+        // nextInput.select();
+        //Authenticate OTP if user finishes
+        if (nextIndex === numberOfInputs) {
+              //array letters to string without separator
+            const inputOTP = letters.join("");
+            console.log(inputOTP);  
+            authenticateOTP(phoneNumber, inputOTP);
+              //clear letters
+            setLetters(() => Array.from({ length: numberOfInputs }, () => ""));
+        }
     };
 
     const handleOTPInputChange = (megaIndex: number, value: string) => {
-    setLetters((letters) =>
-      letters.map((letter, letterIndex) =>
-        letterIndex === megaIndex ? value : letter
-      )
-    );
+        setLetters((letters) =>
+            letters.map((letter, letterIndex) =>
+                letterIndex === megaIndex ? value : letter
+            )
+        );
     };
     const handleOTPInputSelect = (megaIndex: number) => {
         setCurrentIndex(megaIndex);
     };
     const focusOnCurrentInput = () => {
-    console.log("focusOnCurrentInput");
-    //focus on current input when user click on the the page
-    console.log("currentIndex", currentIndex);
-    const currentInput: any = inputRefsArray?.[currentIndex]?.current;
-    currentInput.focus();
-    currentInput.select();
+        //console.log("focusOnCurrentInput");
+        //focus on current input when user click on the the page
+        //console.log("currentIndex", currentIndex);
+        const currentInput: any = inputRefsArray?.[currentIndex]?.current;
+        currentInput.focus();
+        currentInput.select();
     };
 
     useMemo(() => handleLetterChange(letters), [letters]);
@@ -121,26 +123,26 @@ const PhoneVerificationComponent = ({ phone, onChange }: StepType) => {
                     </div>
                 </div>
                 <div className="verification-code-input-field-parent content26 text-gray-7001 text-sm-semibold-size">
-                  <div className="verification-code-input-field">
-                    <div className="input-with-label">
-                      <div className="input7" id={`${currentIndex}`}>
-                        {inputRefsArray.map((ref: any, index) => {
-                          return (
-                            <OTPInput
-                              megaIndex={index}
-                              inputRef={ref}
-                              onChange={handleOTPInputChange}
-                              onSelect={handleOTPInputSelect}
-                              value={letters[index]}
-                              disabled={currentIndex != index}
-                            />
-                          );
-                        })}
-                      </div>
+                    <div className="verification-code-input-field">
+                        <div className="input-with-label">
+                            <div className="input7" id={`${currentIndex}`}>
+                            {inputRefsArray.map((ref: any, index) => {
+                              return (
+                                <OTPInput
+                                    megaIndex={index}
+                                    inputRef={ref}
+                                    onChange={handleOTPInputChange}
+                                    onSelect={handleOTPInputSelect}
+                                    value={letters[index]}
+                                    disabled={currentIndex != index}
+                                />
+                              );
+                            })}
+                            </div>
+                        </div>
                     </div>
-                  </div>
 
-                  <TimerContainer phone={phone} />
+                    <TimerContainer phone={phone} />
                 </div>
             </div>
         </div>

diff --git a/src/components/time/TimerContainer.tsx b/src/components/time/TimerContainer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { server } from "@utils/server";
 
 interface TimerType {
   phone: string;
@@ -14,45 +15,45 @@ const TimerContainer = ({ phone }: TimerType) => {
     );
 
     const active = Boolean(secondsAmount <= 0) || false;
-
-      useEffect(() => {
+    useEffect(() => {
         if (secondsAmount > 0) {
-          var interval = setInterval(() => tick(), 1000);
+            var interval = setInterval(() => tick(), 1000);
         }
         return () => {
-          clearInterval(interval);
+            clearInterval(interval);
         };
-      }, [secondsAmount]);
-      function tick() {
+    }, [secondsAmount]);
+
+    function tick() {
         setSecondsAmount((state) => state - 1);
-      }
+    }
 
-  const minutes = Math.floor(secondsAmount / 60);
-  const seconds = secondsAmount % 60;
+    const minutes = Math.floor(secondsAmount / 60);
+    const seconds = secondsAmount % 60;
 
-  //gui lai ma
+    //gui lai ma
     const { handleSubmit } = useForm();
 
     const ReSendOTP = async () => {
     setSecondsAmount(COUNTDOWN_INICIAL_TIME_IN_SECONDS);
-    await fetch("http://localhost:3000/api/v1/auth/requestOTP", {
-      method: "post",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-      body: JSON.stringify({
-        phoneNumber: phone,
-      }),
-    })
-      .then((res) => res.json())
-      .then((json) => {
-        console.log(json.status);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+    await fetch(`${server}web-customer/auth/request-otp`, {
+        method: "post",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({
+            phoneNumber: phone,
+        }),
+        })
+        .then((res) => res.json())
+        .then((json) => {
+            console.log(json);
+        })
+        .catch((error) => {
+            console.log(error);
+        });
     };
 
     return (

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -18,6 +18,7 @@ import '@assets/css/bootstrap.min.css';
 import '@assets/css/global.css';
 import '@assets/css/fonts.css';
 import '@assets/css/login.css';
+import '@assets/css/old_style.css';
 import '@assets/css/style.css';
 
 type ExtendedAppProps = AppProps & {