comepleted forgetPW & SignUp

component/forgetPasswordMultiStepForm/formComponent/form.tsx

@@ -48,7 +48,7 @@ const ForgetPasswordForm: React.FC<ForgetPasswordFormProps> = ({
                 enableOnAndroid={true}
                 resetScrollToCoords={{ x: 0, y: 0 }}
                 style={{
-                    height: "100%"
+                    height: '100%'
                 }}
             >
                 {screen === 0 && (

component/forgetPasswordMultiStepForm/formComponent/formPages/resetSuccessful.tsx

@@ -1,17 +1,17 @@
-import { View, Text, StyleSheet, Image } from 'react-native';
+import { View, Text, StyleSheet, Image, SafeAreaView } from 'react-native';
 import { Link } from 'expo-router';
 import { Dimensions } from 'react-native';
 
 const ResetSuccessful = ({}) => {
     const width = Dimensions.get('window').width;
     const height = Dimensions.get('window').height;
-    const imageSize = 200;
+    const imageSize = 300;
     return (
         <View
-            className=" items-center justify-center"
-            style={{ width: width, height: height }}
+            className="flex-1 items-center justify-center"
+            style={{ width: width, height: height - height * 0.2 }}
         >
-            <View className="items-center justify-center">
+            <View className="items-center justify-center space-y-5">
                 <Text style={styles.titleText}>重置密碼成功</Text>
                 <Text style={styles.text}>歡迎使用 Crazy Charge</Text>
                 <Text style={styles.text}>祝你一路順“瘋“</Text>
@@ -54,9 +54,9 @@ const ResetSuccessful = ({}) => {
     );
 };
 const styles = StyleSheet.create({
-    titleText: { fontSize: 32, paddingBottom: 24 },
+    titleText: { fontSize: 32, fontWeight:"400" },
     text: {
-        fontSize: 16
+        fontSize: 18
     }
 });
 export default ResetSuccessful;

component/registrationMultiStepForm/formComponent/formPages/basicInformation.tsx

@@ -17,7 +17,7 @@ const BasicInformation: React.FC<basicInformationProps> = ({
     const [error, setError] = useState('');
     const handleNext = () => {
         if (
-            signUpFormData.name === '' ||
+            signUpFormData.nickName === '' ||
             signUpFormData.password === '' ||
             signUpFormData.birthDate === ''
         ) {
@@ -28,9 +28,9 @@ const BasicInformation: React.FC<basicInformationProps> = ({
         }
     };
 
-    const nameFieldPlaceholder = signUpFormData.name
-        ? signUpFormData.name
-        : '姓名';
+    const nameFieldPlaceholder = signUpFormData.nickName
+        ? signUpFormData.nickName
+        : '暱稱';
 
     const genderDropdownOptions = [
         { label: '男', value: 'man' },
@@ -48,12 +48,12 @@ const BasicInformation: React.FC<basicInformationProps> = ({
                     }}
                 >
                     <NormalInput
-                        value={signUpFormData.name}
+                        value={signUpFormData.nickName}
                         placeholder={nameFieldPlaceholder}
                         onChangeText={(text) => {
                             setSignUpFormData({
                                 ...signUpFormData,
-                                name: text
+                                nickName: text
                             });
                         }}
                     />

component/registrationMultiStepForm/formComponent/formPages/createWallet.tsx

@@ -5,9 +5,8 @@ import { useState } from 'react';
 import SingleSelectButtonGroup from '../../../global/select_button';
 import useSignUpStore from '../../../../providers/signup_form_store';
 import PhoneInput from '../../../global/phone_input';
-import axios from 'axios';
-import { EXPO_PUBLIC_API_URL } from '@env';
 import { SignUp } from '../../../../service/authService';
+import { CustomerData } from '../../../../types/signUpFormData';
 
 type CreateWalletProps = {
     goToNextPage: () => void;
@@ -59,49 +58,33 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
 
     const [error, setError] = useState('');
 
-    let customerData: {
-        customerBaseInfo: {
-            name: string;
-            email: string;
-            password: string;
-            gender: string;
-            birthday: string;
-            address: string | undefined;
-            isUberDriver: boolean | undefined;
-        };
-        customerCarInfo?: {
-            type_id: string | undefined;
-            brand_id: string | undefined;
-            licensePlate: string | undefined;
-        };
-    };
-    //if signUpFormData.selectedCarModel is empty,
-    //it means user clicks 略過 and did not fill out information
-    //So, I only send customerData.customerBaseInfo to the back end.
-    //And I don't send customerCarInfo (since I don't have it)
+
+   
+    let customerData: CustomerData;
     if (signUpFormData.selectedCarModel === '') {
+        // Empty SelectedCarModel means user has clicked "略過"
         customerData = {
             customerBaseInfo: {
-                name: signUpFormData.name,
+                name: signUpFormData.nickName.trim(),
                 email: signUpFormData.email,
                 password: signUpFormData.password,
                 gender: signUpFormData.gender,
                 birthday: signUpFormData.birthDate,
                 address: signUpFormData.address,
+                phone: signUpFormData.phone,
                 isUberDriver: signUpFormData.isUberDriver
             }
         };
     } else {
-        //but if signUpFormData.licensePlate is not empty
-        //then I send everything to the back end.
         customerData = {
             customerBaseInfo: {
-                name: signUpFormData.name,
+                name: signUpFormData.nickName.trim(),
                 email: signUpFormData.email,
                 password: signUpFormData.password,
                 gender: signUpFormData.gender,
                 birthday: signUpFormData.birthDate,
                 address: signUpFormData.address,
+                phone: signUpFormData.phone,
                 isUberDriver: signUpFormData.isUberDriver
             },
             customerCarInfo: {

component/registrationMultiStepForm/formComponent/formPages/finishSignUp.tsx

@@ -1,42 +1,43 @@
-import { View, Text, StyleSheet } from "react-native";
-import NormalButton from "../../../global/normal_button";
+import { View, Text, StyleSheet } from 'react-native';
+import NormalButton from '../../../global/normal_button';
+import { router } from 'expo-router';
 
 type FinishSignUpProps = {};
 
 const FinishSignUp: React.FC<FinishSignUpProps> = ({}) => {
-	return (
-		<>
-			<View style={styles.container}>
-				<View style={styles.textContainer}>
-					<Text style={styles.titleText}>註冊成功</Text>
-					<Text style={styles.text}>歡迎使用 Crazy Charge</Text>
-					<Text style={styles.text}>祝你一路順“瘋“</Text>
-				</View>
-				<NormalButton
-					title={<Text style={{ color: "#fff" }}>下一步</Text>}
-					onPress={() => console.log("clicked")}
-				/>
-			</View>
-		</>
-	);
+    return (
+        <>
+            <View style={styles.container}>
+                <View style={styles.textContainer}>
+                    <Text style={styles.titleText}>註冊成功</Text>
+                    <Text style={styles.text}>歡迎使用 Crazy Charge</Text>
+                    <Text style={styles.text}>祝你一路順“瘋“</Text>
+                </View>
+                <NormalButton
+                    title={<Text style={{ color: '#fff' }}>下一步</Text>}
+                    onPress={() => router.replace('/')}
+                />
+            </View>
+        </>
+    );
 };
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		marginHorizontal: 20,
-		gap: 180,
-	},
-	textContainer: {
-		justifyContent: "center",
-		alignItems: "center",
-		backgroundColor: "white",
-		paddingTop: "30%",
-		gap: 20,
-	},
-	titleText: { fontSize: 28 },
-	text: {
-		fontSize: 16,
-	},
+    container: {
+        flex: 1,
+        marginHorizontal: 20,
+        gap: 180
+    },
+    textContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        paddingTop: '30%',
+        gap: 20
+    },
+    titleText: { fontSize: 28 },
+    text: {
+        fontSize: 16
+    }
 });
 export default FinishSignUp;

component/registrationMultiStepForm/multi_step_form.tsx

@@ -6,10 +6,10 @@ import Form from '../registrationMultiStepForm/formComponent/form';
 
 const MultiStepForm: React.FC = () => {
     const { signUpFormData } = useSignUpStore();
-    //logging to check if parent component can successfully receive user input in the multi-step form
-    // useEffect(() => {
-    //     console.log('Current Zustand Store:', signUpFormData);
-    // }, [signUpFormData]);
+    // logging to check if parent component can successfully receive user input in the multi-step form
+    useEffect(() => {
+        console.log('Current Zustand Store:', signUpFormData);
+    }, [signUpFormData]);
 
     return (
         <View style={styles.container}>
@@ -22,7 +22,7 @@ const MultiStepForm: React.FC = () => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        paddingTop: '15%',
+        paddingVertical: '15%',
         backgroundColor: '#FFFFFF'
     }
 });

context/AuthProvider.tsx

@@ -4,7 +4,7 @@ import { router, useSegments } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import * as SecureStore from 'expo-secure-store';
-import { AuthService } from '../service/authService'
+import { AuthService } from '../service/authService';
 
 type User = {
     id: string;
@@ -26,7 +26,7 @@ function useProtectedRoute(user: User | null) {
         if (!user && inAuthGroup) {
             router.replace('/login');
         } else if (user && !inAuthGroup) {
-            router.replace('/(auth)/(tabs)/');
+            router.replace('/(auth)/(tabs)/(home)/mainPage');
         }
     }, [user, segments]);
 }

providers/signup_form_store.tsx

@@ -4,21 +4,18 @@ import { SignUpFormState } from '../types/signUpFormData';
 const useSignUpStore = create<SignUpFormState>((set) => ({
     signUpFormData: {
         phone: '',
-        phoneVerificationStatus: false,
-        name: '',
+        nickName: '',
+        gender: '',
         password: '',
         email: '',
         birthDate: '',
         isUberDriver: false,
-        vehicleType: '',
-        vehicleModel: '',
+        selectedCarModel: '',
+        selectedCarBrand: '',
+        selectedCarSeries:'',
         licensePlate: '',
         address: '',
-        paymentMethod: '',
-        gender: '',
-        selectedCarBrand: '',
-        selectedCarSeries: '',
-        selectedCarModel: ''
+        paymentMethod: ''
     },
     setSignUpFormData: (newFormData) =>
         set((state) => ({

service/authService.tsx

@@ -4,6 +4,8 @@ import { Alert } from 'react-native';
 import * as SecureStore from 'expo-secure-store';
 import { EXPO_PUBLIC_API_URL } from '@env';
 import { SignUpFormData, forgetPasswordFormData } from '../types/signup';
+import { CustomerData } from '../types/signUpFormData';
+import { router } from 'expo-router';
 
 const login = async (username: string, password: string) => {
     try {
@@ -30,6 +32,7 @@ const login = async (username: string, password: string) => {
             await SecureStore.setItemAsync('accessToken', token);
             await AsyncStorage.setItem('username', username);
             console.log('Login successful!');
+
             return true;
         } else {
             console.error('Login failed:', response.status);
@@ -91,7 +94,7 @@ export const verifyingSignUpOtpPutRequest = async (
 };
 
 //User SignUp
-export const SignUp = async (data:any) => {
+export const SignUp = async (data: CustomerData) => {
     try {
         const res = await axios.post(
             `${EXPO_PUBLIC_API_URL}/clients/customer`,
@@ -102,6 +105,7 @@ export const SignUp = async (data:any) => {
         console.log('error message:', error.response.data.message);
     }
 };
+
 //BELOW CODES RELATE TO "FORGET PASSWORD"
 //customer enters their email and click 驗證
 //this function will then send an verification email to their email address

types/signUpFormData.d.ts

@@ -1,6 +1,6 @@
 export interface SignUpFormData {
     phone?: string | undefined;
-    name: string;
+    nickName: string;
     gender: string;
     password: string;
     email: string;
@@ -8,6 +8,7 @@ export interface SignUpFormData {
     isUberDriver?: boolean;
     selectedCarModel?: string;
     selectedCarBrand?: string;
+    selectedCarSeries?: string;
     licensePlate?: string;
     address?: string;
     paymentMethod?: string;
@@ -17,3 +18,25 @@ export interface SignUpFormState {
     signUpFormData: SignUpFormData;
     setSignUpFormData: (newFormData: Partial<SignUpFormData>) => void;
 }
+
+interface CustomerBaseInfo {
+    name: string;
+    email: string;
+    password: string;
+    gender: string;
+    birthday: string;
+    address?: string;
+    phone?: string;
+    isUberDriver?: boolean;
+}
+
+interface CustomerCarInfo {
+    type_id?: string;
+    brand_id?: string;
+    licensePlate?: string;
+}
+
+interface CustomerData {
+    customerBaseInfo: CustomerBaseInfo;
+    customerCarInfo?: CustomerCarInfo;
+}