113 lines
4.6 KiB
TypeScript
113 lines
4.6 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { apiSendOtp } from "@/lib/api";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { StatusBar } from "expo-status-bar";
|
|
import { useState } from "react";
|
|
import { Image, SafeAreaView, View } from "react-native";
|
|
import { OtpInput } from "react-native-otp-entry";
|
|
import Toast from 'react-native-toast-message';
|
|
import { ButtonForm } from "../buttonForm";
|
|
import Text from "../Text";
|
|
import ToastCustom from "../toastCustom";
|
|
|
|
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 { colors, theme } = useTheme();
|
|
|
|
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 Toast.show({ type: 'small', text1: 'Terjadi kesalahan', position: 'bottom' })
|
|
}
|
|
}
|
|
|
|
const onCheckOtp = () => {
|
|
if (value === otpFix.toString()) {
|
|
login()
|
|
} else {
|
|
return Toast.show({ type: 'small', text1: 'Kode OTP tidak sesuai', position: 'bottom' });
|
|
}
|
|
}
|
|
|
|
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 Toast.show({ type: 'small', text1: 'Kode OTP berhasil dikirim ulang', })
|
|
}
|
|
return Toast.show({ type: 'small', text1: 'Terjadi kesalahan dalam mengirim kode OTP', })
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
|
|
<StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
|
|
<View style={[Styles.p20, Styles.h100]} >
|
|
<View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
|
|
<Image
|
|
source={theme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
|
|
style={[{ width: 300, height: 150 }]}
|
|
width={270}
|
|
height={110}
|
|
/>
|
|
{/* <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={colors.tint}
|
|
type="numeric"
|
|
theme={{
|
|
containerStyle: {
|
|
width: '80%',
|
|
alignSelf: 'center'
|
|
},
|
|
pinCodeContainerStyle: { ...Styles.verificationCell, borderColor: colors.icon },
|
|
pinCodeTextStyle: { color: colors.text }
|
|
}}
|
|
/>
|
|
<View style={[{ width: '50%', alignSelf: 'center' }]}>
|
|
<ButtonForm
|
|
text="SUBMIT"
|
|
onPress={() => { onCheckOtp() }}
|
|
/>
|
|
</View>
|
|
<Text style={[Styles.textInformation, Styles.mt05, { textAlign: 'center', color: colors.dimmed }]}>
|
|
Tidak Menerima kode verifikasi? <Text onPress={() => { resendOtp() }} style={[{ color: colors.tint }]}>Kirim Ulang</Text>
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
<View style={[{ alignItems: 'center' }]}>
|
|
<Image
|
|
source={theme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
|
|
style={{ width: 86, height: 27 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
</View>
|
|
<ToastCustom position="bottom" />
|
|
</SafeAreaView>
|
|
)
|
|
} |