upd: proses login

nb: blm selesai

app/index.tsx

@@ -1,17 +1,17 @@
-import { ButtonForm } from "@/components/buttonForm";
-import { InputForm } from "@/components/inputForm";
-import ModalLoading from "@/components/modalLoading";
-import Styles from "@/constants/Styles";
-import { apiCheckPhoneLogin } from "@/lib/api";
+import ViewLogin from "@/components/auth/viewLogin";
+import ViewVerification from "@/components/auth/viewVerification";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Redirect, router } from "expo-router";
+import { Redirect } from "expo-router";
 import { useState } from "react";
-import { Image, Text, ToastAndroid, View } from "react-native";
+import { Text } from "react-native";
 
 
 export default function Index() {
-   const [loadingLogin, setLoadingLogin] = useState(false)
+   // const [loadingLogin, setLoadingLogin] = useState(false)
+   // const [disableLogin, setDisableLogin] = useState(true)
+   const [isValid, setValid] = useState(false)
    const [phone, setPhone] = useState('')
+   const [otp, setOtp] = useState(0)
 
    const { token, isLoading } = useAuthSession()
    if (isLoading) {
@@ -22,27 +22,29 @@ export default function Index() {
       return <Redirect href="/home" />;
    }
 
-   const handleCheckPhone = async () => {
-      try {
-         setLoadingLogin(true)
-         const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
-         if (response.success) {
-            const otp = Math.floor(1000 + Math.random() * 9000);
-            console.log(otp);
-            // return router.push('/verification')
-         }
-         return ToastAndroid.show(response.message, ToastAndroid.SHORT)
-      } catch (error) {
-         console.error('Error fetching data:', error);
-         return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
-      } finally {
-         setLoadingLogin(false)
-      }
-   };
+   // const handleCheckPhone = async () => {
+   //    try {
+   //       setLoadingLogin(true)
+   //       const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
+   //       if (response.success) {
+   //          const otp = Math.floor(1000 + Math.random() * 9000);
+   //          console.log(otp);
+   //          // return router.push('/verification')
+   //       }
+   //       return ToastAndroid.show(response.message, ToastAndroid.SHORT)
+   //    } catch (error) {
+   //       console.error('Error fetching data:', error);
+   //       return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+   //    } finally {
+   //       setLoadingLogin(false)
+   //    }
+   // };
+
+   if (isValid) { return <ViewVerification phone={phone} otp={otp} /> }
 
    return (
       <>
-         <View style={Styles.wrapLogin} >
+         {/* <View style={Styles.wrapLogin} >
             <View style={{ alignItems: "center", marginVertical: 50 }}>
                <Image
                   source={require("../assets/images/splash-icon.png")}
@@ -51,7 +53,10 @@ export default function Index() {
                <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
             </View>
             <InputForm
-               onChange={setPhone}
+               onChange={(val) => {
+                  val == "" ? setDisableLogin(true) : setDisableLogin(false)
+                  setPhone(val)
+               }}
                type="numeric"
                placeholder="XXX-XXX-XXXX"
                round
@@ -59,14 +64,20 @@ export default function Index() {
                info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
             <ButtonForm
                text="MASUK"
-               onPress={() => {
-                  handleCheckPhone()
-               }}
+               onPress={() => { handleCheckPhone() }}
+               disabled={disableLogin}
             />
          </View>
          {
             loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
-         }
+         } */}
+         <ViewLogin
+            onValidate={(val) => {
+               setPhone(val.phone)
+               setOtp(val.otp)
+               setValid(true)
+            }}
+         />
       </>
    );
 }

components/auth/viewLogin.tsx

@@ -0,0 +1,70 @@
+import Styles from "@/constants/Styles"
+import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
+import { useState } from "react"
+import { Image, Text, ToastAndroid, View } from "react-native"
+import { ButtonForm } from "../buttonForm"
+import { InputForm } from "../inputForm"
+import ModalLoading from "../modalLoading"
+
+
+type Props = {
+   onValidate: ({ phone, otp }: { phone: string, otp: number }) => void
+}
+
+export default function ViewLogin({ onValidate }: Props) {
+   const [loadingLogin, setLoadingLogin] = useState(false)
+   const [disableLogin, setDisableLogin] = useState(true)
+   const [phone, setPhone] = useState('')
+
+   const handleCheckPhone = async () => {
+      try {
+         setLoadingLogin(true)
+         const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
+         if (response.success) {
+            const otp = Math.floor(1000 + Math.random() * 9000)
+            const responseOtp = await apiSendOtp({ phone: `62${phone}`, otp })
+            console.log(responseOtp)
+            // return onValidate({ phone: `62${phone}`, otp })
+         }
+         return ToastAndroid.show(response.message, ToastAndroid.SHORT)
+      } catch (error) {
+         console.error('Error fetching data:', error);
+         return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setLoadingLogin(false)
+      }
+   };
+
+   return (
+      <>
+         <View style={Styles.wrapLogin} >
+            <View style={{ alignItems: "center", marginVertical: 50 }}>
+               <Image
+                  source={require("../../assets/images/splash-icon.png")}
+                  style={{ width: 130, height: 130 }}
+               />
+               <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
+            </View>
+            <InputForm
+               onChange={(val) => {
+                  val == "" ? setDisableLogin(true) : setDisableLogin(false)
+                  setPhone(val)
+               }}
+               type="numeric"
+               placeholder="XXX-XXX-XXXX"
+               round
+               itemLeft={<Text>+62</Text>}
+               info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
+            <ButtonForm
+               text="MASUK"
+               onPress={() => { handleCheckPhone() }}
+               disabled={disableLogin}
+            />
+         </View>
+         {
+            loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
+         }
+      </>
+
+   )
+}

components/auth/viewVerification.tsx

@@ -0,0 +1,85 @@
+import Styles from "@/constants/Styles";
+import { useAuthSession } from "@/providers/AuthProvider";
+import CryptoES from "crypto-es";
+import { useState } from "react";
+import { Image, Text, View } from "react-native";
+import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from "react-native-confirmation-code-field";
+import { ButtonForm } from "../buttonForm";
+
+type Props = {
+   phone: string
+   otp: number
+}
+
+export default function ViewVerification({ phone, otp }: Props) {
+   const [value, setValue] = useState('');
+   const ref = useBlurOnFulfill({ value, cellCount: 4 });
+   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+      value,
+      setValue,
+   });
+
+   const { signIn } = useAuthSession();
+   const login = (): void => {
+      const random: string = 'contohLoginMobileDarmasaba';
+      var mytexttoEncryption = "contohLoginMobileDarmasaba"
+      const encrypted = CryptoES.AES.encrypt(mytexttoEncryption, "your password").toString();
+      // var C = require("crypto-js");
+      // var Decrypted = C.AES.decrypt(encrypted, "your password");
+      // var result = Decrypted.toString(C.enc.Utf8);
+      signIn(encrypted);
+   }
+
+   const onCheckOtp = () => {
+      if (value === otp.toString()) {
+      }
+   }
+
+   const resendOtp = () => {
+      
+   }
+
+   return (
+      <>
+         <View style={Styles.wrapLogin} >
+            <View style={{ alignItems: "center", marginVertical: 50 }}>
+               <Image
+                  source={require("../../assets/images/splash-icon.png")}
+                  style={{ width: 130, height: 130 }}
+               />
+               <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
+            </View>
+            <View style={[Styles.mb30]}>
+               <Text style={[Styles.textDefaultSemiBold]}>Verifikasi Nomor Telepon</Text>
+               <Text style={[Styles.textMediumNormal]}>Masukkan kode yang kami kirimkan melalui WhatsApp</Text>
+               <Text style={[Styles.textMediumSemiBold]}>+{phone}</Text>
+            </View>
+            <CodeField
+               ref={ref}
+               {...props}
+               value={value}
+               rootStyle={{ width: '80%', alignSelf: 'center' }}
+               onChangeText={setValue}
+               cellCount={4}
+               keyboardType="number-pad"
+               renderCell={({ index, symbol, isFocused }) => (
+                  <Text
+                     key={index}
+                     style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]}
+                     onLayout={getCellOnLayoutHandler(index)}>
+                     {symbol || (isFocused ? <Cursor /> : null)}
+                  </Text>
+               )}
+            />
+            <ButtonForm
+               text="SUBMIT"
+               // onPress={() => { router.push("/home") }}
+               onPress={login}
+            />
+            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
+               Tidak Menerima kode verifikasi? Kirim Ulang
+            </Text>
+         </View>
+      </>
+   )
+}

components/buttonForm.tsx

@@ -1,14 +1,16 @@
+import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { Text, TouchableOpacity } from "react-native";
 
 type Props = {
    text: string;
    onPress: () => void;
+   disabled?: boolean
 };
 
-export function ButtonForm({ text, onPress }: Props) {
+export function ButtonForm({ text, onPress, disabled }: Props) {
    return (
-      <TouchableOpacity style={[Styles.btnRound, { marginTop: 30 }]} onPress={onPress}>
+      <TouchableOpacity style={[Styles.btnRound, { marginTop: 30,}, disabled && ColorsStatus.gray]} onPress={onPress} disabled={disabled}>
          <Text style={[Styles.textDefaultSemiBold, Styles.cWhite]}>{text}</Text>
       </TouchableOpacity>
    );

lib/api.ts

@@ -9,6 +9,12 @@ export const apiCheckPhoneLogin = async (body: { phone: string }) => {
    return response.data;
 }
 
+export const apiSendOtp = async (body: { phone: string, otp:number }) => {
+   const res = await axios.get(`https://wa.wibudev.com/code?nom=${body.phone}&text=*DARMASABA*%0A%0A
+      JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masukkan otentikasi:  *${encodeURIComponent(body.otp)}*`)
+   return res.status
+}
+
 // export const getEntities = async () => {
 //    const response = await axios.get('https://stg-darmasaba.wibudev.com/api/version-app');
 //    return response.data;