added callback to navigate to "forget pw" page" and remove unnecessary "index.tsx"

app/(tabs)/_layout.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { Tabs } from 'expo-router';
-
-export default function TabLayout() {
-    return (
-        <Tabs screenOptions={{ tabBarActiveTintColor: 'blue' }}>
-            <Tabs.Screen
-                name="index"
-                options={{
-                    title: 'Home',
-                    tabBarIcon: ({ color }) => (
-                        <FontAwesome size={28} name="home" color={color} />
-                    )
-                }}
-            />
-            <Tabs.Screen
-                name="settings/index"
-                options={{
-                    title: 'Settings',
-                    tabBarIcon: ({ color }) => (
-                        <FontAwesome size={28} name="cog" color={color} />
-                    )
-                }}
-            />
-            <Tabs.Screen
-                name="search/index"
-                options={{
-                    title: 'Search',
-                    tabBarIcon: ({ color }) => (
-                        <FontAwesome size={28} name="search" color={color} />
-                    )
-                }}
-            />
-            <Tabs.Screen
-                name="testing/index"
-                options={{
-                    title: 'Test Component',
-                    tabBarIcon: ({ color }) => (
-                        <FontAwesome size={28} name="hashtag" color={color} />
-                    )
-                }}
-            />
-        </Tabs>
-    );
-}

app/(tabs)/index.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, Pressable } from "react-native";
-import useTestStore from "../../providers/test_store";
-import useSignUpStore from "../../providers/signup_form_store";
-
-export default function Index() {
-  /**********************************狀態管理**********************************/
-  const value = useTestStore((state) => state.value);
-  const add = useTestStore((state) => state.add);
-  const minus = useTestStore((state) => state.minus);
-
-  /**********************************狀態管理**********************************/
-  /**********************************組件初始化**********************************/
-  /**********************************組件初始化**********************************/
-  /**********************************異步函數**********************************/
-  /**********************************異步函數**********************************/
-  return (
-    <View>
-      <TestButton cb={minus} label="Minus" />
-      <Text>States goes here: {value}</Text>
-      <TestButton cb={add} label="Add" />
-    </View>
-  );
-}
-
-const TestButton = ({ label, cb }: { label: string; cb: () => void }) => (
-  <Pressable
-    onPress={() => {
-      cb();
-    }}
-  >
-    <Text
-      style={{
-        color: "#02677D",
-        fontSize: 16,
-        paddingVertical: 5,
-      }}
-    >
-      {label}
-    </Text>
-  </Pressable>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  map: {
-    width: "100%",
-    height: "100%",
-  },
-});

app/(tabs)/search/index.tsx

@@ -1,16 +0,0 @@
-import { Text, View } from 'react-native';
-import React from 'react';
-import ForgetPasswordMultiStepForm from '../../../component/forgetPasswordMultiStepForm/forgetPasswordForm';
-export default function Index() {
-    /**********************************狀態管理**********************************/
-    /**********************************狀態管理**********************************/
-    /**********************************組件初始化**********************************/
-    /**********************************組件初始化**********************************/
-    /**********************************異步函數**********************************/
-    /**********************************異步函數**********************************/
-    return (
-        <View style={{ flex: 1 }}>
-            <ForgetPasswordMultiStepForm />
-        </View>
-    );
-}

app/(tabs)/settings/index.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import MultiStepForm from "../../../component/registrationMultiStepForm/multi_step_form";
-export default function Index() {
-	/**********************************狀態管理**********************************/
-	/**********************************狀態管理**********************************/
-	/**********************************組件初始化**********************************/
-	/**********************************組件初始化**********************************/
-	/**********************************異步函數**********************************/
-	/**********************************異步函數**********************************/
-
-	return (
-		////testing component here
-		<>
-			<MultiStepForm />
-		</>
-	);
-}

app/(tabs)/testing/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-export default function TestingPage() {
-    return (
-        <View>
-            <Text
-                className="bg-black text-center text-white"
-                // style={{
-                //     textAlign: 'center',
-                //     backgroundColor: 'black',
-                //     color: 'white'
-                // }}
-            >
-                This area only exist in dev mode
-            </Text>
-            {/* Put Test Component Below */}
-            {/* ... */}
-        </View>
-    );
-}

app/index.tsx

@@ -1,23 +0,0 @@
-import { View } from 'react-native';
-// import { Link } from 'expo-router';
-
-// import MultiStepForm from '../component/registrationMultiStepForm/multi_step_form';
-import BookingMenuPage from '../component/bookingMenuPage/bookingMenuPage';
-// import HomePage from '../component/homePage/homePage';
-
-export default function Index() {
-
-    return (
-        <View style={{ flex: 1 }}>
-            {/* <Link href="/about">About</Link> */}
-            {/* ...other links */}
-            {/* <Link href="/user/bacon">View user</Link> */}
-
-            {/* <MultiStepForm /> */}
-
-            <BookingMenuPage />
-
-            {/* <HomePage /> */}
-        </View>
-    );
-}

component/forgetPasswordMultiStepForm/formComponent/formPages/forgetPasswordPage.tsx

@@ -1,209 +1,259 @@
-import { View, Text, StyleSheet, Pressable } from "react-native";
-import { useState } from "react";
-import { forgetPasswordFormData, HandleForgetPasswordFormDataChange } from "../../../type";
-import PhoneInput from "../../../global/phone_input";
-import NumberInput from "../../../global/number_input";
-import NormalButton from "../../../global/normal_button";
-import NormalInput from "../../../global/normal_input";
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { useState } from 'react';
+import {
+    forgetPasswordFormData,
+    HandleForgetPasswordFormDataChange
+} from '../../../../types/signup';
+import PhoneInput from '../../../global/phone_input';
+import NumberInput from '../../../global/number_input';
+import NormalButton from '../../../global/normal_button';
+import NormalInput from '../../../global/normal_input';
 
 type ForgetPasswordPageProps = {
-	forgetPasswordFormData: forgetPasswordFormData;
-	setForgetPasswordFormData: React.Dispatch<React.SetStateAction<forgetPasswordFormData>>;
-	setScreen: React.Dispatch<React.SetStateAction<number>>;
+    forgetPasswordFormData: forgetPasswordFormData;
+    setForgetPasswordFormData: React.Dispatch<
+        React.SetStateAction<forgetPasswordFormData>
+    >;
+    setScreen: React.Dispatch<React.SetStateAction<number>>;
 };
 
 const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
-	forgetPasswordFormData,
-	setForgetPasswordFormData,
-	setScreen,
+    forgetPasswordFormData,
+    setForgetPasswordFormData,
+    setScreen
 }) => {
-	const [authError, setAuthError] = useState("");
-	const [error, setError] = useState("");
-	const [canSendOtp, setCanSendOtp] = useState(true);
-	const [lockPhoneInput, setLockPhoneInput] = useState(false);
+    const [authError, setAuthError] = useState('');
+    const [error, setError] = useState('');
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    const [lockPhoneInput, setLockPhoneInput] = useState(false);
 
-	const handleVerification = () => {
-		if (!forgetPasswordFormData.otp && !forgetPasswordFormData.phone) {
-			setAuthError("請確保所有資料都已填寫");
-		} else if (!forgetPasswordFormData.otp) {
-			setAuthError("請輸入OTP驗證碼");
-		} else if (!forgetPasswordFormData.phone) {
-			setAuthError("請輸入電話號碼");
-		} else {
-			setAuthError("");
-			setForgetPasswordFormData((prevFormData) => ({
-				...prevFormData,
-				otpAuthCompleted: true,
-			}));
-		}
-	};
+    const handleVerification = () => {
+        if (!forgetPasswordFormData.otp && !forgetPasswordFormData.phone) {
+            setAuthError('請確保所有資料都已填寫');
+        } else if (!forgetPasswordFormData.otp) {
+            setAuthError('請輸入OTP驗證碼');
+        } else if (!forgetPasswordFormData.phone) {
+            setAuthError('請輸入電話號碼');
+        } else {
+            setAuthError('');
+            setForgetPasswordFormData((prevFormData) => ({
+                ...prevFormData,
+                otpAuthCompleted: true
+            }));
+        }
+    };
 
-	const handleFormDataChange: HandleForgetPasswordFormDataChange = (field, value) => {
-		setForgetPasswordFormData((prevFormData) => ({
-			...prevFormData,
-			[field]: value,
-		}));
-	};
+    const handleFormDataChange: HandleForgetPasswordFormDataChange = (
+        field,
+        value
+    ) => {
+        setForgetPasswordFormData((prevFormData) => ({
+            ...prevFormData,
+            [field]: value
+        }));
+    };
 
-	const handleSubmitOtp = () => {
-		if (forgetPasswordFormData.phoneVerificationStatus) {
-			if (canSendOtp) {
-				setCanSendOtp(false);
-				setLockPhoneInput(true);
-				console.log(lockPhoneInput);
-				//can only request otp every 60 seconds
-				setTimeout(() => {
-					setCanSendOtp(true);
-					setLockPhoneInput(false);
-				}, 60000);
-				setAuthError("");
-			} else {
-				setAuthError("請等待一分鐘後再重新發送。");
-			}
-		} else {
-			setAuthError("請確保所有資料都已填寫。");
-		}
-	};
+    const handleSubmitOtp = () => {
+        if (forgetPasswordFormData.phone.length === 8) {
+            if (canSendOtp) {
+                setCanSendOtp(false);
+                setLockPhoneInput(true);
 
-	const handleFinishResetPassword = () => {
-		if (forgetPasswordFormData.newPassword !== forgetPasswordFormData.confirmedNewPassword) {
-			setError("請確保新密碼和確認密碼相同");
-		} else {
-			setError("");
-			setScreen(1);
-		}
-	};
-	return (
-		<>
-			<View style={styles.container}>
-				<View style={styles.bottomContainer}>
-					<Text style={styles.text}>驗證電話號碼後即可重置密碼</Text>
-					<PhoneInput
-						placeholder="輸入電話號碼"
-						handleForgetPasswordFormDataChange={handleFormDataChange}
-						editable={!lockPhoneInput}
-						extendedStyle={{ opacity: !lockPhoneInput ? 1 : 0.5 }}
-					/>
-					<View
-						style={{
-							display: "flex",
-							flexDirection: "row",
-							paddingVertical: 10,
-							gap: 10,
-						}}
-					>
-						<NumberInput
-							placeholder="OTP驗證碼"
-							onChangeText={(t) => handleFormDataChange("otp", t)}
-							editable={!forgetPasswordFormData.otpAuthCompleted}
-							extendedStyle={{ flex: 1, opacity: !forgetPasswordFormData.otpAuthCompleted ? 1 : 0.5 }}
-						/>
-						<NormalButton
-							title={<Text style={{ color: "#fff" }}>{lockPhoneInput ? "已發送" : "驗證"}</Text>}
-							onPress={handleSubmitOtp}
-							extendedStyle={{ flex: 1 / 2 }}
-						/>
-					</View>
-					<NormalButton
-						title={
-							<Text style={{ color: "#fff" }}>
-								{forgetPasswordFormData.otpAuthCompleted == true ? "已驗證" : "驗證"}
-							</Text>
-						}
-						onPress={handleVerification}
-						extendedStyle={
-							forgetPasswordFormData.otpAuthCompleted == true ? { backgroundColor: "#70787C" } : {}
-						}
-					/>
+                //can only request otp every 60 seconds
+                setTimeout(() => {
+                    setCanSendOtp(true);
+                    setLockPhoneInput(false);
+                }, 60000);
+                setAuthError('');
+            } else {
+                setAuthError('請等待一分鐘後再重新發送。');
+            }
+        } else {
+            setAuthError('請確保所有資料都已填寫。');
+        }
+    };
 
-					{authError && <Text style={styles.errorMessage}>{authError}</Text>}
-					{lockPhoneInput && (
-						<Pressable
-							disabled={forgetPasswordFormData.otpAuthCompleted}
-							onPress={() => setLockPhoneInput(false)}
-						>
-							<Text style={[styles.footer, forgetPasswordFormData.otpAuthCompleted && { opacity: 0.5 }]}>
-								修改電話號碼
-							</Text>
-						</Pressable>
-					)}
+    const handleFinishResetPassword = () => {
+        if (
+            forgetPasswordFormData.newPassword !==
+            forgetPasswordFormData.confirmedNewPassword
+        ) {
+            setError('請確保新密碼和確認密碼相同');
+        } else {
+            setError('');
+            setScreen(1);
+        }
+    };
+    return (
+        <>
+            <View style={styles.container}>
+                <View style={styles.bottomContainer}>
+                    <Text style={styles.text}>驗證電話號碼後即可重置密碼</Text>
+                    <PhoneInput
+                        placeholder="輸入電話號碼"
+                        onChangeText={(phone) =>
+                            setForgetPasswordFormData({
+                                ...forgetPasswordFormData,
+                                phone: phone
+                            })
+                        }
+                        editable={!lockPhoneInput}
+                        extendedStyle={{ opacity: !lockPhoneInput ? 1 : 0.5 }}
+                    />
+                    <View
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            paddingVertical: 10,
+                            gap: 10
+                        }}
+                    >
+                        <NumberInput
+                            placeholder="OTP驗證碼"
+                            onChangeText={(t) => handleFormDataChange('otp', t)}
+                            editable={!forgetPasswordFormData.otpAuthCompleted}
+                            extendedStyle={{
+                                flex: 1,
+                                opacity:
+                                    !forgetPasswordFormData.otpAuthCompleted
+                                        ? 1
+                                        : 0.5
+                            }}
+                        />
+                        <NormalButton
+                            title={
+                                <Text style={{ color: '#fff' }}>
+                                    {lockPhoneInput ? '已發送' : '驗證'}
+                                </Text>
+                            }
+                            onPress={handleSubmitOtp}
+                            extendedStyle={{ flex: 1 / 2 }}
+                        />
+                    </View>
+                    <NormalButton
+                        title={
+                            <Text style={{ color: '#fff' }}>
+                                {forgetPasswordFormData.otpAuthCompleted == true
+                                    ? '已驗證'
+                                    : '驗證'}
+                            </Text>
+                        }
+                        onPress={handleVerification}
+                        extendedStyle={
+                            forgetPasswordFormData.otpAuthCompleted == true
+                                ? { backgroundColor: '#70787C' }
+                                : {}
+                        }
+                    />
 
-					{forgetPasswordFormData.otpAuthCompleted && (
-						<View
-							style={[
-								styles.hiddenPasswordFields,
-								forgetPasswordFormData.otpAuthCompleted ? styles.opacityFull : styles.opacityZero,
-							]}
-						>
-							<NormalInput
-								placeholder="新密碼"
-								onChangeText={(t) => handleFormDataChange("newPassword", t)}
-								secureTextEntry={true}
-								textContentType={"oneTimeCode"}
-							/>
-							<NormalInput
-								placeholder="確認密碼"
-								onChangeText={(t) => handleFormDataChange("confirmedNewPassword", t)}
-								secureTextEntry={true}
-								textContentType={"oneTimeCode"}
-							/>
-							<NormalButton
-								title={<Text style={{ color: "#fff" }}>重置</Text>}
-								onPress={handleFinishResetPassword}
-								extendedStyle={{}}
-							/>
-						</View>
-					)}
+                    {authError && (
+                        <Text style={styles.errorMessage}>{authError}</Text>
+                    )}
+                    {lockPhoneInput && (
+                        <Pressable
+                            disabled={forgetPasswordFormData.otpAuthCompleted}
+                            onPress={() => setLockPhoneInput(false)}
+                        >
+                            <Text
+                                style={[
+                                    styles.footer,
+                                    forgetPasswordFormData.otpAuthCompleted && {
+                                        opacity: 0.5
+                                    }
+                                ]}
+                            >
+                                修改電話號碼
+                            </Text>
+                        </Pressable>
+                    )}
 
-					{error && <Text style={styles.errorMessage}>{error}</Text>}
-				</View>
-			</View>
-		</>
-	);
+                    {forgetPasswordFormData.otpAuthCompleted && (
+                        <View
+                            style={[
+                                styles.hiddenPasswordFields,
+                                forgetPasswordFormData.otpAuthCompleted
+                                    ? styles.opacityFull
+                                    : styles.opacityZero
+                            ]}
+                        >
+                            <NormalInput
+                                placeholder="新密碼"
+                                onChangeText={(t) =>
+                                    handleFormDataChange('newPassword', t)
+                                }
+                                secureTextEntry={true}
+                                textContentType={'oneTimeCode'}
+                            />
+                            <NormalInput
+                                placeholder="確認密碼"
+                                onChangeText={(t) =>
+                                    handleFormDataChange(
+                                        'confirmedNewPassword',
+                                        t
+                                    )
+                                }
+                                secureTextEntry={true}
+                                textContentType={'oneTimeCode'}
+                            />
+                            <NormalButton
+                                title={
+                                    <Text style={{ color: '#fff' }}>重置</Text>
+                                }
+                                onPress={handleFinishResetPassword}
+                                extendedStyle={{}}
+                            />
+                        </View>
+                    )}
+
+                    {error && <Text style={styles.errorMessage}>{error}</Text>}
+                </View>
+            </View>
+        </>
+    );
 };
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		marginHorizontal: 20,
-	},
+    container: {
+        flex: 1,
+        marginHorizontal: 20
+    },
 
-	titleText: {
-		fontSize: 24,
-		fontWeight: "300",
-	},
-	bottomContainer: {
-		flex: 3,
-		paddingBottom: 100,
-	},
-	breakline: {
-		width: 24,
-		height: 1,
-		backgroundColor: "#000000",
-		marginVertical: 17,
-	},
-	text: {
-		fontSize: 18,
-		paddingBottom: 10,
-	},
-	hiddenPasswordFields: {
-		gap: 10,
-		paddingTop: 10,
-	},
-	opacityZero: {
-		opacity: 0,
-	},
-	opacityFull: {
-		opacity: 1,
-	},
-	errorMessage: {
-		fontSize: 14,
-		color: "#ff0033",
-		fontWeight: "400",
-		marginLeft: 10,
-		marginTop: 10,
-	},
-	footer: { color: "#02677D", fontSize: 16, paddingVertical: 10 },
+    titleText: {
+        fontSize: 24,
+        fontWeight: '300'
+    },
+    bottomContainer: {
+        flex: 3,
+        paddingBottom: 100
+    },
+    breakline: {
+        width: 24,
+        height: 1,
+        backgroundColor: '#000000',
+        marginVertical: 17
+    },
+    text: {
+        fontSize: 18,
+        paddingBottom: 10
+    },
+    hiddenPasswordFields: {
+        gap: 10,
+        paddingTop: 10
+    },
+    opacityZero: {
+        opacity: 0
+    },
+    opacityFull: {
+        opacity: 1
+    },
+    errorMessage: {
+        fontSize: 14,
+        color: '#ff0033',
+        fontWeight: '400',
+        marginLeft: 10,
+        marginTop: 10
+    },
+    footer: { color: '#02677D', fontSize: 16, paddingVertical: 10 }
 });
 
 export default ForgetPasswordPage;

component/forgetPasswordMultiStepForm/formComponent/formPages/resetSuccessful.tsx

@@ -1,9 +1,10 @@
 import { View, Text, StyleSheet, Image } from 'react-native';
-import NormalButton from '../../../global/normal_button';
+
+import { Link } from 'expo-router';
 
 const successLogo = require('../../../../assets/successLogo.png');
 
-const ResetSuccessful = () => {
+const ResetSuccessful = ({}) => {
     const imageSize = 200;
     return (
         <>
@@ -18,14 +19,33 @@ const ResetSuccessful = () => {
                         width: imageSize,
                         height: imageSize,
                         alignSelf: 'center',
-						marginVertical: 9
+                        marginVertical: 9
                     }}
                     source={successLogo}
                 />
-                <NormalButton
-                    title={<Text style={{ color: '#fff' }}>下一步</Text>}
-                    onPress={() => console.log('clicked')}
-                />
+
+                <View
+                    style={{
+                        maxWidth: '100%',
+                        backgroundColor: '#025c72',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        borderRadius: 12,
+                        padding: 20
+                    }}
+                >
+                    <Link replace href="/">
+                        <Text
+                            style={{
+                                color: 'white',
+                                fontSize: 16,
+                                fontWeight: 500
+                            }}
+                        >
+                            返回登錄畫面
+                        </Text>
+                    </Link>
+                </View>
             </View>
         </>
     );
@@ -40,8 +60,8 @@ const styles = StyleSheet.create({
         justifyContent: 'flex-start',
         alignItems: 'center',
         // backgroundColor: 'black',
-        paddingTop: '10%',
-        gap: 15
+        gap: 15,
+        paddingTop: 160
     },
     titleText: { fontSize: 28 },
     text: {

component/registrationMultiStepForm/formComponent/form.tsx

@@ -19,6 +19,8 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
 import ChooseCarBrand from './formPages/chooseCarPage/carBrand';
 import ChooseCarSeries from './formPages/chooseCarPage/carSeries';
 import ChooseCarModel from './formPages/chooseCarPage/carModel';
+import ForgetPasswordPage from '../../forgetPasswordMultiStepForm/formComponent/formPages/forgetPasswordPage';
+import ForgetPasswordForm from '../../forgetPasswordMultiStepForm/forgetPasswordForm';
 
 type FormProps = {};
 const Form: React.FC<FormProps> = ({}) => {
@@ -35,7 +37,12 @@ const Form: React.FC<FormProps> = ({}) => {
     const ScreenDisplay = () => {
         switch (screen) {
             case 0:
-                return <LoginPage goToNextPage={goToNextPage} />;
+                return (
+                    <LoginPage
+                        goToNextPage={goToNextPage}
+                        goToForgetPassWordPage={goToForgetPassWordPage}
+                    />
+                );
             case 1:
                 return <Verification setScreen={setScreen} />;
             case 2:
@@ -75,6 +82,10 @@ const Form: React.FC<FormProps> = ({}) => {
                         goToCarInformation={goToCarInformation}
                     />
                 );
+            case 10:
+                return (
+                    <ForgetPasswordForm />
+                )
             default:
                 return <></>;
         }
@@ -121,6 +132,12 @@ const Form: React.FC<FormProps> = ({}) => {
             return 4;
         });
     };
+
+    const goToForgetPassWordPage = () => {
+        setScreen((prevState) => {
+            return 10;
+        });
+    };
     return (
         <>
             <KeyboardAwareScrollView

component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

@@ -15,9 +15,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAuth } from '../../../../context/AuthProvider';
 type LoginPageProps = {
     goToNextPage: () => void;
+    goToForgetPassWordPage: () => void;
 };
 
-const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage }) => {
+const LoginPage: React.FC<LoginPageProps> = ({
+    goToNextPage,
+    goToForgetPassWordPage
+}) => {
     // const [loginPhone, setLoginPhone] = useState(''); //This loginPhone useState is only a placeholder, will be updated in the future
     const [loginEmail, setLoginEmail] = useState('');
     const [loginPassword, setLoginPassword] = useState('');
@@ -55,16 +59,8 @@ const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage }) => {
                         secureTextEntry={true}
                         extendedStyle={{ borderRadius: 12, padding: 20 }}
                     />
-                    {/* <PhoneInput
-                        value={loginPhone}
-                        onChangeText={(t) => {
-                            setLoginPhone(t);
-                            console.log(loginPhone);
-                        }}
-                        placeholder="電話號碼"
-                        extendedStyle={{ borderRadius: 12, padding: 20 }}
-                    /> */}
-                    <Pressable>
+
+                    <Pressable onPress={() => goToForgetPassWordPage()}>
                         <Text style={styles.text}>忘記密碼</Text>
                     </Pressable>
                     <NormalButton