ui
This commit is contained in:
@@ -26,6 +26,35 @@ export default function TabsLayout() {
|
||||
tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
{/* Ẩn các tab này khỏi bottom bar */}
|
||||
<Tabs.Screen
|
||||
name="cart"
|
||||
options={{
|
||||
href: null, // ẩn khỏi bottom tab bar
|
||||
tabBarIcon: ({ color }) => <Ionicons name="cart-outline" size={24} color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="orders"
|
||||
options={{
|
||||
href: null, // ẩn khỏi bottom tab bar
|
||||
tabBarIcon: ({ color }) => <Ionicons name="list-outline" size={24} color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="checkout"
|
||||
options={{
|
||||
href: null, // ẩn khỏi bottom tab bar
|
||||
tabBarIcon: ({ color }) => <Ionicons name="checkmark-done-outline" size={24} color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="wishlist"
|
||||
options={{
|
||||
href: null, // ẩn khỏi bottom tab bar
|
||||
tabBarIcon: ({ color }) => <Ionicons name="heart-outline" size={24} color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,22 @@
|
||||
import React from "react";
|
||||
import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { useRouter } from "expo-router";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
ScrollView,
|
||||
Image,
|
||||
} from "react-native";
|
||||
import { useNavigation, useRouter } from "expo-router";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useAuth } from "../../hooks/useAuth";
|
||||
|
||||
export default function AccountScreen() {
|
||||
const router = useRouter();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const handleLogout = async () => {
|
||||
Alert.alert("Đăng xuất", "Bạn có chắc muốn đăng xuất?", [
|
||||
@@ -18,28 +28,96 @@ export default function AccountScreen() {
|
||||
text: "Đăng xuất",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await AsyncStorage.removeItem("authToken");
|
||||
router.replace("/"); // quay về màn hình đăng nhập
|
||||
const success = await logout();
|
||||
if (success) {
|
||||
router.replace("/");
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 🔘 Nút đăng xuất góc trên phải */}
|
||||
<TouchableOpacity
|
||||
style={[styles.logoutBtn, { top: insets.top + 10 }]} // đảm bảo không bị che bởi status bar
|
||||
onPress={handleLogout}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.logoutText}>Đăng xuất</Text>
|
||||
</TouchableOpacity>
|
||||
const menuItems = [
|
||||
{ id: "address", label: "Address", icon: "location" },
|
||||
{ id: "payment", label: "Payment method", icon: "card" },
|
||||
{ id: "voucher", label: "Voucher", icon: "ticket" },
|
||||
{ id: "wishlist", label: "My Wishlist", icon: "heart" , screen: "wishlist"},
|
||||
{ id: "rate", label: "Rate this app", icon: "star" },
|
||||
];
|
||||
|
||||
{/* Nội dung giữa màn hình */}
|
||||
<View style={styles.centerContent}>
|
||||
<Text style={styles.title}>Xin chào, User 👋</Text>
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header with Settings Icon */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>My Profile</Text>
|
||||
<TouchableOpacity style={styles.settingsBtn}>
|
||||
<Ionicons name="settings" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} style={styles.scrollView}>
|
||||
{/* User Profile Section */}
|
||||
<View style={styles.profileSection}>
|
||||
<View style={styles.profileContent}>
|
||||
{/* Avatar */}
|
||||
<View style={styles.avatarContainer}>
|
||||
<View style={styles.avatar}>
|
||||
<Ionicons name="person" size={32} color="#fff" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* User Info */}
|
||||
<View style={styles.userInfo}>
|
||||
<Text style={styles.userName}>
|
||||
{user?.email?.split("@")[0] || "User"}
|
||||
</Text>
|
||||
<Text style={styles.userEmail}>{user?.email || "email@example.com"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Menu Items */}
|
||||
<View style={styles.menuContainer}>
|
||||
{menuItems.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={styles.menuItem}
|
||||
activeOpacity={0.7}
|
||||
onPress={() => {
|
||||
if (item.screen) {
|
||||
navigation.navigate(item.screen);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View style={styles.menuItemContent}>
|
||||
<View style={styles.menuItemLeft}>
|
||||
<Ionicons name={item.icon} size={20} color="#9B9B9B" />
|
||||
<Text style={styles.menuItemText}>{item.label}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
|
||||
{/* Logout Button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.menuItem, styles.logoutMenuItem]}
|
||||
onPress={handleLogout}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.menuItemContent}>
|
||||
<View style={styles.menuItemLeft}>
|
||||
<Ionicons name="log-out" size={20} color="#9B9B9B" />
|
||||
<Text style={[styles.menuItemText, styles.logoutText]}>
|
||||
Log out
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -47,34 +125,91 @@ export default function AccountScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
centerContent: {
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f0f0f0",
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
color: "#333",
|
||||
},
|
||||
settingsBtn: {
|
||||
padding: 8,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
profileSection: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 24,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f5f5f5",
|
||||
},
|
||||
profileContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
avatarContainer: {
|
||||
marginRight: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#D4A574",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: "600",
|
||||
marginBottom: 20,
|
||||
userInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
logoutBtn: {
|
||||
position: "absolute",
|
||||
right: 16, // sát mép phải
|
||||
backgroundColor: "#f44336",
|
||||
userName: {
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
color: "#333",
|
||||
marginBottom: 4,
|
||||
textTransform: "capitalize",
|
||||
},
|
||||
userEmail: {
|
||||
fontSize: 13,
|
||||
color: "#999",
|
||||
},
|
||||
menuContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
zIndex: 999,
|
||||
elevation: 4,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.5,
|
||||
paddingVertical: 16,
|
||||
},
|
||||
menuItem: {
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f5f5f5",
|
||||
},
|
||||
menuItemContent: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
menuItemLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
menuItemText: {
|
||||
marginLeft: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
color: "#333",
|
||||
},
|
||||
logoutMenuItem: {
|
||||
marginTop: 8,
|
||||
},
|
||||
logoutText: {
|
||||
color: "#fff",
|
||||
fontWeight: "700",
|
||||
fontSize: 14,
|
||||
color: "#E74C3C",
|
||||
},
|
||||
});
|
||||
@@ -1,9 +1,332 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Modal,
|
||||
Image,
|
||||
Animated,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { useAuth } from "../../hooks/useAuth";
|
||||
|
||||
// Side Menu Component
|
||||
function SideMenu({ visible, onClose }) {
|
||||
const navigation = useNavigation();
|
||||
const slideAnim = React.useRef(new Animated.Value(visible ? 0 : -300)).current;
|
||||
const { user } = useAuth();
|
||||
|
||||
React.useEffect(() => {
|
||||
Animated.timing(slideAnim, {
|
||||
toValue: visible ? 0 : -300,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, [visible, slideAnim]);
|
||||
|
||||
const menuItems = [
|
||||
{ id: "home", label: "Homepage", icon: "home", screen: "home" },
|
||||
{ id: "discover", label: "Discover", icon: "search", screen: "discover" },
|
||||
{ id: "orders", label: "My Order", icon: "list", screen: "orders" },
|
||||
{ id: "profile", label: "My profile", icon: "person", screen: "account" },
|
||||
];
|
||||
|
||||
const otherItems = [
|
||||
{ id: "setting", label: "Setting", icon: "settings", screen: "setting" },
|
||||
{ id: "support", label: "Support", icon: "help-circle", screen: "support" },
|
||||
{ id: "about", label: "About us", icon: "information-circle", screen: "about" },
|
||||
];
|
||||
|
||||
const dropdownItems = [
|
||||
{ id: "cart", label: "Giỏ hàng", icon: "cart", screen: "cart" },
|
||||
{ id: "wishlist", label: "Yêu thích", icon: "heart", screen: "wishlist" },
|
||||
{ id: "checkout", label: "Thanh toán", icon: "checkmark-circle", screen: "checkout" },
|
||||
];
|
||||
|
||||
export default function HomeScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>Chào mừng đến Trang chủ!</Text>
|
||||
<Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
{/* Overlay */}
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.3)" }}
|
||||
onPress={onClose}
|
||||
/>
|
||||
|
||||
{/* Animated Menu */}
|
||||
<Animated.View
|
||||
style={{
|
||||
width: 280,
|
||||
backgroundColor: "#fff",
|
||||
transform: [{ translateX: slideAnim }],
|
||||
paddingTop: 40,
|
||||
paddingHorizontal: 16,
|
||||
}}
|
||||
>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{/* User Profile */}
|
||||
<View style={{ flexDirection: "row", alignItems: "center", marginBottom: 32 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: "#E8B4A0",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="person" size={28} color="#fff" />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={{ fontSize: 14, fontWeight: "600", color: "#333" }}>
|
||||
{user?.email?.split("@")[0] || "Guest"}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 11, color: "#999" }}>
|
||||
{user?.email || "guest@example.com"}
|
||||
</Text>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Main Menu */}
|
||||
{menuItems.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
||||
onPress={() => {
|
||||
navigation.navigate(item.screen);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
||||
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
|
||||
{/* Other Section */}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
color: "#999",
|
||||
marginTop: 24,
|
||||
marginBottom: 16,
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
OTHER
|
||||
</Text>
|
||||
|
||||
{otherItems.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
||||
onPress={() => {
|
||||
navigation.navigate(item.screen);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
||||
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
|
||||
{/* Dropdown Items Section */}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
color: "#999",
|
||||
marginTop: 24,
|
||||
marginBottom: 16,
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
QUICK ACCESS
|
||||
</Text>
|
||||
|
||||
{dropdownItems.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
||||
onPress={() => {
|
||||
navigation.navigate(item.screen);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
||||
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginTop: 32,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#f5f5f5",
|
||||
}}
|
||||
>
|
||||
<Ionicons name="sunny" size={16} color="#333" />
|
||||
<Text style={{ marginLeft: 6, fontSize: 12, color: "#333" }}>Light</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="moon" size={16} color="#999" />
|
||||
<Text style={{ marginLeft: 6, fontSize: 12, color: "#999" }}>Dark</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Product Card Component
|
||||
function ProductCard({ product }) {
|
||||
return (
|
||||
<View style={{ flex: 1, margin: 8 }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#f5f5f5",
|
||||
borderRadius: 8,
|
||||
height: 200,
|
||||
marginBottom: 8,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Ionicons name="image" size={40} color="#ccc" />
|
||||
</View>
|
||||
<Text style={{ fontSize: 12, fontWeight: "600", color: "#333", marginBottom: 4 }}>
|
||||
{product.name}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 14, fontWeight: "700", color: "#6C5CE7" }}>
|
||||
{product.price} đ
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// Home Screen
|
||||
export default function HomeScreen() {
|
||||
const [sideMenuVisible, setSideMenuVisible] = useState(false);
|
||||
|
||||
const featureProducts = [
|
||||
{ id: 1, name: "iphone 15 Pro Max 256GB", price: "29.990.000" },
|
||||
{ id: 2, name: "Samsung Galaxy S24 Ultra", price: "27.990.000" },
|
||||
{ id: 3, name: "Xiaomi 14 Ultra", price: "24.990.0000" },
|
||||
];
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: "#fff", paddingTop: 20 }}>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#eee",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity onPress={() => setSideMenuVisible(true)}>
|
||||
<Ionicons name="menu" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
<Text style={{ fontSize: 18, fontWeight: "700", color: "#333" }}>
|
||||
Gemstore
|
||||
</Text>
|
||||
<TouchableOpacity>
|
||||
<Ionicons name="notifications" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Main Content */}
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{/* Banner */}
|
||||
<View
|
||||
style={{
|
||||
height: 200,
|
||||
backgroundColor: "#d4a574",
|
||||
marginHorizontal: 16,
|
||||
marginVertical: 16,
|
||||
borderRadius: 12,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
|
||||
Autumn
|
||||
</Text>
|
||||
<Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
|
||||
Collection
|
||||
</Text>
|
||||
<Text style={{ fontSize: 20, fontWeight: "600", color: "#fff", marginTop: 8 }}>
|
||||
2022
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Feature Products */}
|
||||
<View style={{ paddingHorizontal: 16, marginBottom: 24 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 16, fontWeight: "700", color: "#333" }}>
|
||||
Feature Products
|
||||
</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={{ fontSize: 12, color: "#6C5CE7" }}>Show all</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
|
||||
{featureProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Side Menu */}
|
||||
<SideMenu
|
||||
visible={sideMenuVisible}
|
||||
onClose={() => setSideMenuVisible(false)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -19,7 +19,7 @@ export default function RootLayout() {
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
{!isLoggedIn && <Stack.Screen name="index" options={{ title: "Đăng ký / Đăng nhập" }} />}
|
||||
{!isLoggedIn && <Stack.Screen name="index" options={{ headerShown: false }} />}
|
||||
{isLoggedIn && <Stack.Screen name="(tabs)" options={{ headerShown: false }} />}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user