103 lines
3.8 KiB
TypeScript
103 lines
3.8 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 { 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 [otpFix, setOtpFix] = useState(otp)
|
|
const ref = useBlurOnFulfill({ value, cellCount: 4 });
|
|
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
|
|
value,
|
|
setValue,
|
|
});
|
|
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>
|
|
<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={() => { onCheckOtp() }}
|
|
/>
|
|
<Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
|
|
Tidak Menerima kode verifikasi? <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
|
|
</Text>
|
|
</View>
|
|
</>
|
|
)
|
|
} |