Skip to main content
Glama
lallen30
by lallen30
VerifyEmailScreen.tsx3.26 kB
import React, { useState, useRef } from 'react'; import { View, Text, TextInput, TouchableOpacity, Alert, KeyboardAvoidingView, Platform, } from 'react-native'; import axios from 'axios'; import { styles } from './Styles'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { API } from '../../../config/apiConfig'; const VerifyEmailScreen = ({ route, navigation }: any) => { const { registerData, otp } = route.params; const [otpValue, setOtpValue] = useState(''); const inputRefs = useRef<Array<TextInput | null>>([]); const handleOtpChange = (value: string, index: number) => { const newOtp = otpValue.split(''); newOtp[index] = value; const newOtpString = newOtp.join(''); setOtpValue(newOtpString); // Move to next input if value is entered if (value && index < 3) { inputRefs.current[index + 1]?.focus(); } }; const handleSubmit = async () => { if (!otpValue || otpValue.length !== 4) { Alert.alert('Error', 'Please enter the complete OTP'); return; } if (parseInt(otpValue) !== parseInt(otp)) { Alert.alert('Error', 'OTP does not match. Please try again.'); return; } try { const response = await axios.post( `${API.BASE_URL}${API.ENDPOINTS.MOBILEAPI}/v1/register`, { ...registerData, user_otp: otpValue, sent_opt: otp, signup_step1_email_otp: 'done', } ); if (response.data.loginInfo) { // Store login info in AsyncStorage await AsyncStorage.setItem('userToken', response.data.loginInfo.token); await AsyncStorage.setItem('userData', JSON.stringify(response.data.loginInfo)); // Navigate to DrawerNavigator navigation.reset({ index: 0, routes: [{ name: 'DrawerNavigator' }], }); } } catch (error: any) { Alert.alert( 'Error', error.response?.data?.msg || 'Unable to verify OTP. Please try again later.' ); } }; return ( <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} > <View style={styles.header}> <Text style={styles.title}>Verify Email</Text> <Text style={styles.subtitle}> Please enter the verification code sent to your email </Text> </View> <View style={styles.otpContainer}> {[0, 1, 2, 3].map((index) => ( <TextInput key={index} ref={(ref) => (inputRefs.current[index] = ref)} style={styles.otpInput} maxLength={1} keyboardType="number-pad" onChangeText={(value) => handleOtpChange(value, index)} value={otpValue[index] || ''} /> ))} </View> <TouchableOpacity style={styles.button} onPress={handleSubmit}> <Text style={styles.buttonText}>Verify</Text> </TouchableOpacity> <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()} > <Text style={styles.backButtonText}>Go Back</Text> </TouchableOpacity> </KeyboardAvoidingView> ); }; export default VerifyEmailScreen;

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lallen30/mcp-remote-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server