Skip to content

Commit 5c0f3a5

Browse files
shanuvrshanuvr
committed
fix: fixed otp issue
1 parent 3ab1b9a commit 5c0f3a5

3 files changed

Lines changed: 272 additions & 60 deletions

File tree

‎frontend/lib/api.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from 'axios';
22
const api = axios.create({
3-
baseURL: 'http://10.10.1.200:4000',
3+
baseURL: 'http://10.222.145.137:4000',
44
timeout: 20000,
55
headers: {
66
'Content-Type': 'application/json',

‎frontend/screens/auth/OtpScreen.tsx‎

Lines changed: 148 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,160 @@
1-
import { View, Text, TextInput, Button } from 'react-native';
2-
import { useState } from 'react';
3-
import { useRouter } from 'expo-router';
4-
import { verifyOtp } from '@/services/auth/otp.service';
5-
import { useLocalSearchParams, useSearchParams } from 'expo-router/build/hooks';
1+
import {
2+
View,
3+
Text,
4+
TextInput,
5+
StyleSheet,
6+
Pressable,
7+
} from "react-native";
8+
import { SafeAreaView } from "react-native-safe-area-context";
9+
import { useState } from "react";
10+
import { useRouter } from "expo-router";
11+
import { verifyOtp } from "@/services/auth/otp.service";
12+
import { useLocalSearchParams } from "expo-router/build/hooks";
613

714
export default function OtpScreen() {
8-
const [otp, setOtp] = useState('');
15+
const [otp, setOtp] = useState("");
16+
const [loading, setLoading] = useState(false);
917
const router = useRouter();
10-
const { phoneNumber } = useLocalSearchParams();
18+
const { phone } = useLocalSearchParams();
1119

1220
const handleVerify = async () => {
13-
const res = await verifyOtp(phoneNumber.toString(), otp);
14-
console.log(res);
21+
if (!otp || otp.length < 4) return;
22+
23+
setLoading(true);
24+
const res = await verifyOtp(phone.toString(), otp);
25+
setLoading(false);
26+
1527
if (!res?.success) return;
16-
if (res.success) {
17-
if (res.userExists) {
18-
router.replace('/(tabs)/home');
19-
} else {
20-
router.replace({
21-
pathname: '/(auth)/register',
22-
params: {
23-
otpId: res.otpId,
24-
phoneNumber: phoneNumber.toString(),
25-
},
26-
});
27-
}
28+
29+
if (res.userExists) {
30+
router.replace("/(tabs)/home");
31+
} else {
32+
router.replace({
33+
pathname: "/(auth)/register",
34+
params: {
35+
otpId: res.otpId,
36+
phoneNumber: phone.toString(),
37+
},
38+
});
2839
}
2940
};
3041

3142
return (
32-
<View>
33-
<Text>Enter OTP</Text>
34-
35-
<TextInput
36-
placeholder="OTP"
37-
keyboardType="number-pad"
38-
value={otp}
39-
onChangeText={setOtp}
40-
/>
41-
42-
<Button title="Verify OTP" onPress={handleVerify} />
43-
</View>
43+
<SafeAreaView style={styles.safeArea}>
44+
<View style={styles.container}>
45+
<View style={styles.content}>
46+
<Text style={styles.title}>Enter OTP</Text>
47+
48+
<Text style={styles.description}>
49+
We’ve sent a one-time password to{" "}
50+
<Text style={styles.phone}>
51+
{phone}
52+
</Text>
53+
</Text>
54+
55+
<TextInput
56+
style={styles.otpInput}
57+
placeholder="••••"
58+
keyboardType="number-pad"
59+
value={otp}
60+
onChangeText={setOtp}
61+
maxLength={6}
62+
textAlign="center"
63+
/>
64+
65+
<Pressable
66+
style={[
67+
styles.button,
68+
(otp.length < 4 || loading) &&
69+
styles.buttonDisabled,
70+
]}
71+
onPress={handleVerify}
72+
disabled={otp.length < 4 || loading}
73+
>
74+
<Text style={styles.buttonText}>
75+
{loading ? "Verifying..." : "Verify OTP"}
76+
</Text>
77+
</Pressable>
78+
79+
<Text style={styles.resend}>
80+
Didn’t receive OTP?{" "}
81+
<Text style={styles.resendLink}>Resend</Text>
82+
</Text>
83+
</View>
84+
</View>
85+
</SafeAreaView>
4486
);
4587
}
88+
const styles = StyleSheet.create({
89+
safeArea: {
90+
flex: 1,
91+
backgroundColor: "#EAF5EC",
92+
},
93+
94+
container: {
95+
flex: 1,
96+
paddingHorizontal: 24,
97+
},
98+
99+
content: {
100+
flex: 1,
101+
justifyContent: "center",
102+
},
103+
104+
title: {
105+
fontSize: 24,
106+
fontWeight: "700",
107+
color: "#111",
108+
marginBottom: 8,
109+
},
110+
111+
description: {
112+
fontSize: 14,
113+
color: "#555",
114+
lineHeight: 20,
115+
marginBottom: 32,
116+
},
117+
118+
phone: {
119+
fontWeight: "600",
120+
color: "#111",
121+
},
122+
123+
otpInput: {
124+
backgroundColor: "#FFF",
125+
borderRadius: 16,
126+
height: 56,
127+
fontSize: 20,
128+
letterSpacing: 12,
129+
marginBottom: 24,
130+
},
131+
132+
button: {
133+
backgroundColor: "#000",
134+
paddingVertical: 16,
135+
borderRadius: 16,
136+
alignItems: "center",
137+
marginBottom: 16,
138+
},
139+
140+
buttonDisabled: {
141+
opacity: 0.5,
142+
},
143+
144+
buttonText: {
145+
color: "#FFF",
146+
fontSize: 16,
147+
fontWeight: "600",
148+
},
149+
150+
resend: {
151+
textAlign: "center",
152+
fontSize: 13,
153+
color: "#555",
154+
},
155+
156+
resendLink: {
157+
fontWeight: "600",
158+
color: "#000",
159+
},
160+
});

‎frontend/screens/auth/PhoneScreen.tsx‎

Lines changed: 123 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,135 @@
1-
import { View, Text, TextInput, Button } from 'react-native';
2-
import { sendOtp } from '@/services/auth/otp.service';
3-
import { useState } from 'react';
4-
import { useRouter } from 'expo-router';
1+
import {
2+
View,
3+
Text,
4+
TextInput,
5+
StyleSheet,
6+
Pressable,
7+
} from "react-native";
8+
import { SafeAreaView } from "react-native-safe-area-context";
9+
import { useState } from "react";
10+
import { router } from "expo-router";
11+
import { sendOtp } from "@/services/auth/otp.service";
512

613
export default function PhoneScreen() {
7-
const [phone, setPhone] = useState('');
8-
const router = useRouter();
14+
const [phone, setPhone] = useState("");
915

10-
const handleContinue = async () => {
11-
const res = await sendOtp(phone);
12-
console.log(res);
16+
const handleContinue = async() => {
17+
if (!phone) return;
18+
const res = await sendOtp(phone)
1319

14-
if (res.success) {
20+
if(res.success){
1521
router.push({
16-
pathname: '/(auth)/otp',
17-
params: {
18-
phoneNumber: phone,
19-
},
22+
pathname: "/(auth)/otp",
23+
params: { phone },
2024
});
2125
}
26+
2227
};
2328

2429
return (
25-
<View>
26-
<Text>Enter your phone number</Text>
27-
28-
<TextInput
29-
placeholder="Phone number"
30-
keyboardType="phone-pad"
31-
value={phone}
32-
onChangeText={setPhone}
33-
/>
34-
35-
<Button title="Continue" onPress={handleContinue} />
36-
</View>
30+
<SafeAreaView style={styles.safeArea}>
31+
<View style={styles.container}>
32+
33+
<View style={styles.content}>
34+
<Text style={styles.title}>Enter your phone number</Text>
35+
36+
<Text style={styles.description}>
37+
We’ll send you a one-time password to verify your number.
38+
</Text>
39+
40+
<View style={styles.inputWrapper}>
41+
<Text style={styles.countryCode}>+91</Text>
42+
<TextInput
43+
style={styles.input}
44+
placeholder="Phone number"
45+
keyboardType="phone-pad"
46+
value={phone}
47+
onChangeText={setPhone}
48+
maxLength={13}
49+
/>
50+
</View>
51+
52+
53+
<Pressable
54+
style={[
55+
styles.button,
56+
!phone && styles.buttonDisabled,
57+
]}
58+
onPress={handleContinue}
59+
disabled={!phone}
60+
>
61+
<Text style={styles.buttonText}>Continue</Text>
62+
</Pressable>
63+
</View>
64+
</View>
65+
</SafeAreaView>
3766
);
3867
}
68+
const styles = StyleSheet.create({
69+
safeArea: {
70+
flex: 1,
71+
backgroundColor: "#EAF5EC",
72+
},
73+
74+
container: {
75+
flex: 1,
76+
paddingHorizontal: 24,
77+
},
78+
79+
content: {
80+
flex: 1,
81+
justifyContent: "center",
82+
},
83+
84+
title: {
85+
fontSize: 24,
86+
fontWeight: "700",
87+
color: "#111",
88+
marginBottom: 8,
89+
},
90+
91+
description: {
92+
fontSize: 14,
93+
color: "#555",
94+
lineHeight: 20,
95+
marginBottom: 24,
96+
},
97+
98+
inputWrapper: {
99+
flexDirection: "row",
100+
alignItems: "center",
101+
backgroundColor: "#FFF",
102+
borderRadius: 14,
103+
paddingHorizontal: 14,
104+
height: 52,
105+
marginBottom: 24,
106+
},
107+
108+
countryCode: {
109+
fontSize: 16,
110+
fontWeight: "600",
111+
marginRight: 8,
112+
},
113+
114+
input: {
115+
flex: 1,
116+
fontSize: 16,
117+
},
118+
119+
button: {
120+
backgroundColor: "#000",
121+
paddingVertical: 16,
122+
borderRadius: 16,
123+
alignItems: "center",
124+
},
125+
126+
buttonDisabled: {
127+
opacity: 0.5,
128+
},
129+
130+
buttonText: {
131+
color: "#FFF",
132+
fontSize: 16,
133+
fontWeight: "600",
134+
},
135+
});

0 commit comments

Comments
 (0)