190 lines
5.5 KiB
JavaScript
190 lines
5.5 KiB
JavaScript
// import React, { useState } from "react";
|
|
// import {
|
|
// View,
|
|
// Text,
|
|
// TextInput,
|
|
// TouchableOpacity,
|
|
// StyleSheet,
|
|
// ScrollView,
|
|
// StatusBar,
|
|
// Image,
|
|
// } from "react-native";
|
|
// import { Ionicons, FontAwesome } from "@expo/vector-icons";
|
|
// import { useNavigation } from "@react-navigation/native";
|
|
|
|
// const Masuk = () => {
|
|
// const navigation = useNavigation();
|
|
// const [role, setRole] = useState(null); // null, "warga", atau "admin"
|
|
// const [email, setEmail] = useState("");
|
|
// const [password, setPassword] = useState("");
|
|
// const [showPassword, setShowPassword] = useState(false);
|
|
|
|
// // Fungsi handle login sesuai role
|
|
// const handleLogin = () => {
|
|
// if (role === "warga") {
|
|
// navigation.navigate("AksesWargaNavigator", { screen: "Home" });
|
|
// } else if (role === "admin") {
|
|
// navigation.navigate("AdminHome");
|
|
// }
|
|
// };
|
|
|
|
// return (
|
|
// <ScrollView style={{ flex: 1, backgroundColor: "#fff" }}>
|
|
// <StatusBar backgroundColor={"#fff"} barStyle={"dark-content"} />
|
|
|
|
// <View style={{ flex: 1, backgroundColor: "#fff", padding: 20 }}>
|
|
// <TouchableOpacity
|
|
// onPress={() => navigation.navigate("AksesAkun")}
|
|
// style={{ width: 45, height: 45, marginBottom: 10 }}
|
|
// >
|
|
// <Ionicons name="arrow-back" size={30} color="#000" />
|
|
// </TouchableOpacity>
|
|
|
|
// <View style={{ alignItems: "center", marginBottom: 20 }}>
|
|
// <Image
|
|
// source={require("../assets/images/sampah.png")}
|
|
// style={{ width: 250, height: 300 }}
|
|
// />
|
|
// <Text
|
|
// style={{
|
|
// color: "#000",
|
|
// fontWeight: "bold",
|
|
// fontSize: 40,
|
|
// textAlign: "center",
|
|
// }}
|
|
// >
|
|
// Selamat Datang Ecomapper!
|
|
// </Text>
|
|
// </View>
|
|
|
|
// {/* Form login muncul kalau role sudah dipilih */}
|
|
// {role && (
|
|
// <View style={styles.formContainer}>
|
|
// <Text style={[styles.label, { textTransform: "capitalize" }]}>
|
|
// Masuk sebagai {role}
|
|
// </Text>
|
|
|
|
// <Text style={styles.label}>Email</Text>
|
|
// <View style={styles.inputContainer}>
|
|
// <Ionicons
|
|
// name="mail"
|
|
// size={24}
|
|
// color="gray"
|
|
// style={styles.icon}
|
|
// />
|
|
// <TextInput
|
|
// style={styles.input}
|
|
// value={email}
|
|
// onChangeText={setEmail}
|
|
// placeholder="Masukkan email"
|
|
// keyboardType="email-address"
|
|
// autoCapitalize="none"
|
|
// />
|
|
// </View>
|
|
|
|
// <Text style={styles.label}>Kata Sandi</Text>
|
|
// <View style={styles.passwordContainer}>
|
|
// <FontAwesome
|
|
// name="lock"
|
|
// size={24}
|
|
// color="gray"
|
|
// style={styles.icon}
|
|
// />
|
|
// <TextInput
|
|
// style={styles.passwordInput}
|
|
// value={password}
|
|
// onChangeText={setPassword}
|
|
// placeholder="Masukkan Kata Sandi"
|
|
// secureTextEntry={!showPassword}
|
|
// autoCapitalize="none"
|
|
// />
|
|
// <TouchableOpacity
|
|
// onPress={() => setShowPassword(!showPassword)}
|
|
// style={styles.eyeIcon}
|
|
// >
|
|
// <Ionicons
|
|
// name={showPassword ? "eye-off" : "eye"}
|
|
// size={24}
|
|
// color="gray"
|
|
// />
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
|
|
// <TouchableOpacity style={styles.button} onPress={handleLogin}>
|
|
// <Text style={styles.buttonText}>Masuk</Text>
|
|
// </TouchableOpacity>
|
|
|
|
// {/* Tombol kembali untuk pilih ulang role */}
|
|
// <TouchableOpacity
|
|
// onPress={() => setRole(null)}
|
|
// style={{ marginTop: 15, alignItems: "center" }}
|
|
// >
|
|
// <Text style={{ color: "#2D572C", fontWeight: "bold" }}>
|
|
// Pilih ulang peran
|
|
// </Text>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// )}
|
|
// </View>
|
|
// </ScrollView>
|
|
// );
|
|
// };
|
|
|
|
// const styles = StyleSheet.create({
|
|
// formContainer: {
|
|
// marginTop: 20,
|
|
// },
|
|
// label: {
|
|
// fontSize: 18,
|
|
// marginBottom: 10,
|
|
// color: "#333",
|
|
// },
|
|
// inputContainer: {
|
|
// flexDirection: "row",
|
|
// alignItems: "center",
|
|
// borderColor: "#ddd",
|
|
// borderWidth: 1,
|
|
// borderRadius: 5,
|
|
// marginBottom: 20,
|
|
// },
|
|
// input: {
|
|
// flex: 1,
|
|
// height: 45,
|
|
// paddingLeft: 10,
|
|
// },
|
|
// icon: {
|
|
// paddingLeft: 10,
|
|
// },
|
|
// passwordContainer: {
|
|
// flexDirection: "row",
|
|
// alignItems: "center",
|
|
// borderColor: "#ddd",
|
|
// height: 45,
|
|
// borderWidth: 1,
|
|
// borderRadius: 5,
|
|
// marginBottom: 20,
|
|
// },
|
|
// passwordInput: {
|
|
// flex: 1,
|
|
// height: 45,
|
|
// paddingLeft: 10,
|
|
// },
|
|
// eyeIcon: {
|
|
// paddingRight: 10,
|
|
// },
|
|
// button: {
|
|
// backgroundColor: "#2D572C",
|
|
// paddingVertical: 15,
|
|
// borderRadius: 5,
|
|
// marginTop: 10,
|
|
// },
|
|
// buttonText: {
|
|
// textAlign: "center",
|
|
// color: "#fff",
|
|
// fontSize: 16,
|
|
// fontWeight: "bold",
|
|
// },
|
|
// });
|
|
|
|
// export default Masuk;
|