back button for forgetPW page

component/forgetPasswordMultiStepForm/formComponent/form.tsx

@@ -4,13 +4,16 @@ import {
     Text,
     StyleSheet,
     TouchableWithoutFeedback,
-    Keyboard
+    Keyboard,
+    Pressable
 } from 'react-native';
 
 import ResetSuccessful from './formPages/resetSuccessful';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import ForgetPasswordPage from './formPages/forgetPasswordPage';
 import { forgetPasswordFormData } from '../../../types/signup';
+import PaginationIndicator from '../../global/PaginationIndicator';
+import { router } from 'expo-router';
 
 type ForgetPasswordFormProps = {
     forgetPasswordFormData: forgetPasswordFormData;
@@ -24,7 +27,13 @@ const ForgetPasswordForm: React.FC<ForgetPasswordFormProps> = ({
 }) => {
     const [screen, setScreen] = useState<number>(0);
     const FormTitle = ['忘記密碼 - 電話驗證'];
-
+    const goToPreviousPage = () => {
+        if (router.canGoBack()) {
+            router.back();
+        } else {
+            router.replace('/');
+        }
+    };
     const ScreenDisplay = () => {
         switch (screen) {
             case 0:
@@ -55,6 +64,25 @@ const ForgetPasswordForm: React.FC<ForgetPasswordFormProps> = ({
                     <View style={styles.topContainer}>
                         <Text style={styles.text}>{FormTitle[screen]}</Text>
                         <View style={styles.breakline} />
+                        <View className="w-full flex-row justify-between items-center">
+                            <Pressable
+                                onPress={goToPreviousPage}
+                                className="flex-1"
+                            >
+                                <Text
+                                    style={{
+                                        color: '#888888',
+                                        fontSize: 18,
+                                        paddingLeft: 25
+                                    }}
+                                >{`<  上一步`}</Text>
+                            </Pressable>
+                            <PaginationIndicator
+                                totalPages={2}
+                                currentPage={0}
+                            />
+                            <View className="flex-1" />
+                        </View>
                     </View>
                 )}
                 <View style={styles.bottomContainer}>{ScreenDisplay()}</View>

component/global/PaginationIndicator.tsx

@@ -20,6 +20,7 @@ const styles = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "center",
 		alignItems: "center",
+		flex:1,
 	},
 	circle: {
 		width: 16,