Fakultas Ilmu Komputer UI

Commit 53612a9b authored by Abraham Rudolf Brahmana's avatar Abraham Rudolf Brahmana
Browse files

Change password page

parent 62003f76
......@@ -20,11 +20,6 @@ const linking: LinkingOptions<RootStackParamList> = {
TabOneScreen: "one",
},
},
TabTwo: {
screens: {
TabTwoScreen: "two",
},
},
},
},
Modal: "modal",
......
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;
......@@ -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>
);
};
......
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%",
},
});
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%",
},
});
......
......@@ -14,6 +14,7 @@ export type RootStackParamList = {
Profile: NavigatorScreenParams<ProfileStackParamList>;
Modal: undefined;
NotFound: undefined;
SuccessChangePassword: undefined;
};
export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment