9859a8534f
Deskripsi: - ganti package karena tidak kompatibel dengan versi react yg sekarang No Issues
92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { apiSendOtp } from "@/lib/api";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { useState } from "react";
|
|
import { Image, Text, ToastAndroid, View } from "react-native";
|
|
import { OtpInput } from "react-native-otp-entry";
|
|
import { ButtonForm } from "../buttonForm";
|
|
|
|
type Props = {
|
|
phone: string
|
|
otp: number
|
|
}
|
|
|
|
export default function ViewVerification({ phone, otp }: Props) {
|
|
const [value, setValue] = useState('');
|
|
const [otpFix, setOtpFix] = useState(otp)
|
|
const { signIn, encryptToken } = useAuthSession();
|
|
|
|
const login = async () => {
|
|
const valueUser = await AsyncStorage.getItem('user');
|
|
if (valueUser != null) {
|
|
await AsyncStorage.removeItem('user');
|
|
const encrypted = await encryptToken(valueUser);
|
|
signIn(encrypted);
|
|
} else {
|
|
return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
|
|
}
|
|
}
|
|
|
|
const onCheckOtp = () => {
|
|
if (value === otpFix.toString()) {
|
|
login()
|
|
} else {
|
|
return ToastAndroid.show('Kode OTP tidak sesuai', ToastAndroid.SHORT)
|
|
}
|
|
}
|
|
|
|
const resendOtp = async () => {
|
|
try {
|
|
const otpNew = Math.floor(1000 + Math.random() * 9000)
|
|
setOtpFix(otpNew)
|
|
const responseOtp = await apiSendOtp({ phone, otp: otpNew })
|
|
if (responseOtp == 200) {
|
|
return ToastAndroid.show('Kode OTP berhasil dikirim ulang', ToastAndroid.SHORT)
|
|
}
|
|
return ToastAndroid.show('Terjadi kesalahan dalam mengirim kode OTP', ToastAndroid.SHORT)
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
|
|
}
|
|
}
|
|
|
|
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>
|
|
<OtpInput
|
|
numberOfDigits={4}
|
|
onTextChange={(text) => setValue(text)}
|
|
focusColor={'#19345E'}
|
|
type="numeric"
|
|
theme={{
|
|
containerStyle: {
|
|
width: '80%',
|
|
alignSelf: 'center'
|
|
},
|
|
pinCodeContainerStyle: Styles.verificationCell,
|
|
}}
|
|
/>
|
|
<ButtonForm
|
|
text="SUBMIT"
|
|
onPress={() => { onCheckOtp() }}
|
|
/>
|
|
<Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
|
|
Tidak Menerima kode verifikasi? <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
|
|
</Text>
|
|
</View>
|
|
</>
|
|
)
|
|
} |