85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import Styles from "@/constants/Styles"
|
|
import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
|
|
import { useAuthSession } from "@/providers/AuthProvider"
|
|
import AsyncStorage from "@react-native-async-storage/async-storage"
|
|
import { StatusBar } from "expo-status-bar"
|
|
import { useState } from "react"
|
|
import { Image, Platform, SafeAreaView, View } from "react-native"
|
|
import Toast from "react-native-toast-message"
|
|
import { ButtonForm } from "../buttonForm"
|
|
import { InputForm } from "../inputForm"
|
|
import ModalLoading from "../modalLoading"
|
|
import Text from "../Text"
|
|
import ToastCustom from "../toastCustom"
|
|
|
|
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 { signIn, encryptToken } = useAuthSession();
|
|
|
|
const handleCheckPhone = async () => {
|
|
try {
|
|
setLoadingLogin(true)
|
|
const response = await apiCheckPhoneLogin({ phone: `62${phone}` })
|
|
if (response.success) {
|
|
if (response.isWithoutOTP) {
|
|
const encrypted = await encryptToken(response.id)
|
|
signIn(encrypted)
|
|
} else {
|
|
const otp = Math.floor(1000 + Math.random() * 9000)
|
|
const responseOtp = await apiSendOtp({ phone: `62${phone}`, otp })
|
|
if (responseOtp == 200) {
|
|
await AsyncStorage.setItem('user', response.id)
|
|
return onValidate({ phone: `62${phone}`, otp })
|
|
}
|
|
}
|
|
} else {
|
|
return Toast.show({ type: 'small', text1: response.message, position: 'top' })
|
|
}
|
|
} catch (error) {
|
|
return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', position: 'top' })
|
|
} finally {
|
|
setLoadingLogin(false)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView>
|
|
<StatusBar style={Platform.OS === 'ios' ? 'auto' : 'light'} translucent={false} backgroundColor="black" />
|
|
<ToastCustom />
|
|
<View style={[Styles.p20, Styles.h100]}>
|
|
<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} />
|
|
}
|
|
</SafeAreaView>
|
|
|
|
)
|
|
} |