Change password page

src/navigation/LinkingConfiguration.ts

@@ -20,11 +20,6 @@ const linking: LinkingOptions<RootStackParamList> = {
               TabOneScreen: "one",
             },
           },
-          TabTwo: {
-            screens: {
-              TabTwoScreen: "two",
-            },
-          },
         },
       },
       Modal: "modal",

src/navigation/ProfileStackNavigator.tsx

 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
-import { StyleSheet } from "react-native";
 import AccountSettingsScreen from "../screens/profile/AccountSettingsScreen";
 import ChangePasswordScreen from "../screens/profile/ChangePasswordScreen";
 import ProfileScreen from "../screens/profile/ProfileScreen";
@@ -8,7 +7,7 @@ import { ProfileStackParamList } from "../types/navigation/ProfileStack";
 
 const ProfileStack = createNativeStackNavigator<ProfileStackParamList>();
 
-const AuthStackNavigator = () => {
+const ProfileStackNavigator = () => {
   return (
     <ProfileStack.Navigator initialRouteName="ProfileScreen">
       <ProfileStack.Screen
@@ -24,7 +23,7 @@ const AuthStackNavigator = () => {
       <ProfileStack.Screen
         name="ChangePassword"
         component={ChangePasswordScreen}
-        options={{ title: "Change Password" }}
+        options={{ title: "Ganti Password" }}
       />
     </ProfileStack.Navigator>
   );
@@ -36,4 +35,4 @@ const AuthStackNavigator = () => {
 //   }
 // })
 
-export default AuthStackNavigator;
+export default ProfileStackNavigator;

src/navigation/RootNavigator.tsx

@@ -3,7 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import BottomTabNavigator from "./BottomTabNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
-import ProfileStackNavigator from "./ProfileStackNavigator";
+import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
@@ -24,6 +24,11 @@ const RootNavigator = () => {
         component={BottomTabNavigator}
         options={{ headerShown: false }}
       />
+      <RootStack.Screen
+        name="SuccessChangePassword"
+        component={SuccessChangePasswordScreen}
+        options={{ headerShown: false }}
+      />
     </RootStack.Navigator>
   );
 };

src/screens/SuccessChangePasswordScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import MainButton from "../components/button/MainButton";
+import Spacer from "../components/Spacer/Spacer";
+
+import { Text, View } from "../components/Themed";
+import Colors from "../constants/Colors";
+import { ProfileStackParamList } from "../types/navigation";
+
+export default function SuccessChangePasswordScreen() {
+  const nav = useNavigation<NativeStackNavigationProp<ProfileStackParamList>>();
+  return (
+    <View style={styles.container}>
+      <Spacer variant={"xl"} />
+      <Text style={styles.title}>Ganti Password Berhasil</Text>
+      <Spacer variant={"xl"} />
+      <Text style={styles.paragraph}>
+        Anda sudah bisa masuk menggunakan password baru anda.
+      </Text>
+      <Spacer variant={"xl"} />
+      <View style={styles.buttonContainer}>
+        <MainButton
+          text={"Kembali"}
+          onPress={() => nav.goBack()}
+          colors={"Secondary"}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 50,
+    paddingHorizontal: 24,
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "400",
+    fontStyle: "normal",
+    fontFamily: "HelveticaNeue",
+  },
+  paragraph: {
+    fontFamily: "HelveticaNeue",
+    fontSize: 20,
+    fontWeight: "300",
+    fontStyle: "normal",
+  },
+  buttonContainer: {
+    width: "100%",
+  },
+});

src/screens/profile/ChangePasswordScreen.tsx

-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/core";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Keyboard } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import MainButton from "../../components/button/MainButton";
+import IconForm from "../../components/Forms/IconForm";
+import Spacer from "../../components/Spacer/Spacer";
 import Colors from "../../constants/Colors";
 
-const ChangePasswordScreen = ({ navigation }) => {
+const ChangePasswordScreen = () => {
+  const nav = useNavigation();
+
+  const [oldPassword, onChangeOldPassword] = useState("");
+  const [newPassword, onChangeNewPassword] = useState("");
+
   return (
     <View style={styles.container}>
-      <Text>gantis</Text>
+      <Spacer variant={"xl"} />
+      <IconForm
+        formTitle={"Password Lama"}
+        placeholder={"Masukkan Password Lama"}
+        setText={onChangeOldPassword}
+        text={oldPassword}
+        iconType={"10k"}
+        password={true}
+      />
+      <Spacer variant={"m"} />
+      <TouchableOpacity>
+        <Text style={styles.link}>Lupa password lama anda</Text>
+      </TouchableOpacity>
+      <Spacer variant={"l"} />
+      <IconForm
+        formTitle={"Password Baru"}
+        placeholder={"Masukkan Password Baru"}
+        setText={onChangeNewPassword}
+        text={newPassword}
+        iconType={"10k"}
+        password={true}
+      />
+      <Spacer variant={"xl"} />
+      <View style={styles.buttonContainer}>
+        <MainButton
+          text={"Ganti Password"}
+          onPress={() => {
+            Keyboard.dismiss();
+            nav.navigate("SuccessChangePassword");
+          }}
+          colors={"Secondary"}
+        />
+      </View>
     </View>
   );
 };
@@ -13,18 +55,18 @@ const ChangePasswordScreen = ({ navigation }) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
     backgroundColor: Colors.background,
+    paddingHorizontal: 24,
   },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
+  link: {
+    color: Colors.text.link,
+    fontFamily: "HelveticaNeue",
+    fontStyle: "normal",
+    fontSize: 14,
+    fontWeight: "400",
   },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: "80%",
+  buttonContainer: {
+    width: "100%",
   },
 });
 

src/types/navigation/RootStack.ts

@@ -14,6 +14,7 @@ export type RootStackParamList = {
   Profile: NavigatorScreenParams<ProfileStackParamList>;
   Modal: undefined;
   NotFound: undefined;
+  SuccessChangePassword: undefined;
 };
 
 export type RootStackScreenProps<Screen extends keyof RootStackParamList> =