289 lines
10 KiB
TypeScript
289 lines
10 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
ScrollView,
|
|
Pressable,
|
|
TextInput,
|
|
StyleSheet,
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Image,
|
|
} from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Mail, Lock, ArrowRight, Eye, EyeOff, Chrome, User, Globe } from "@/lib/icons";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { useAuthStore } from "@/lib/auth-store";
|
|
import * as Linking from "expo-linking";
|
|
import { api, BASE_URL, rbacApi } from "@/lib/api";
|
|
import { useColorScheme } from "nativewind";
|
|
import { toast } from "@/lib/toast-store";
|
|
import { useLanguageStore, AppLanguage } from "@/lib/language-store";
|
|
import { getPlaceholderColor } from "@/lib/colors";
|
|
import { LanguageModal } from "@/components/LanguageModal";
|
|
import {
|
|
GoogleSignin,
|
|
statusCodes,
|
|
} from "@react-native-google-signin/google-signin";
|
|
|
|
GoogleSignin.configure({
|
|
webClientId:
|
|
"1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com",
|
|
iosClientId:
|
|
"1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com", // Placeholder: replace with your actual iOS Client ID from Google Cloud Console
|
|
offlineAccess: true,
|
|
});
|
|
|
|
export default function LoginScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const setAuth = useAuthStore((state) => state.setAuth);
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
const { language, setLanguage } = useLanguageStore();
|
|
const [languageModalVisible, setLanguageModalVisible] = useState(false);
|
|
|
|
const [identifier, setIdentifier] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleLogin = async () => {
|
|
if (!identifier || !password) {
|
|
toast.error(
|
|
"Required Fields",
|
|
"Please enter both identifier and password",
|
|
);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
const isEmail = identifier.includes("@");
|
|
const payload = isEmail
|
|
? { email: identifier, password }
|
|
: { phone: identifier, password };
|
|
|
|
try {
|
|
// Using the new api.auth.login which is powered by simple-api
|
|
const response = await api.auth.login({ body: payload });
|
|
|
|
// Store user, access token, refresh token, and permissions
|
|
// // Fetch roles to get permissions
|
|
// const rolesResponse = await rbacApi.roles();
|
|
// const userRole = response.user.role;
|
|
// const roleData = rolesResponse.find((r: any) => r.role === userRole);
|
|
// const permissions = roleData ? roleData.permissions : [];
|
|
const permissions: string[] = [];
|
|
|
|
// Store user, access token, refresh token, and permissions
|
|
setAuth(response.user, response.accessToken, response.refreshToken, permissions);
|
|
toast.success("Welcome Back!", "You have successfully logged in.");
|
|
|
|
// Explicitly navigate to home
|
|
nav.go("(tabs)");
|
|
} catch (err: any) {
|
|
toast.error("Login Failed", err.message || "Invalid credentials");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleGoogleLogin = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await GoogleSignin.hasPlayServices();
|
|
const userInfo = await GoogleSignin.signIn();
|
|
|
|
// In newer versions of the library, the response is in data
|
|
// If using idToken, ensure you configured webClientId
|
|
const idToken = userInfo.data?.idToken || (userInfo as any).idToken;
|
|
|
|
if (!idToken) {
|
|
throw new Error("Failed to obtain Google ID Token");
|
|
}
|
|
|
|
// Send idToken to our new consolidated endpoint
|
|
const response = await api.auth.googleMobile({ body: { idToken } });
|
|
|
|
// Fetch roles to get permissions
|
|
// const rolesResponse = await rbacApi.roles();
|
|
// const userRole = response.user.role;
|
|
// const roleData = rolesResponse.find((r: any) => r.role === userRole);
|
|
// const permissions = roleData ? roleData.permissions : [];
|
|
const permissions: string[] = [];
|
|
|
|
setAuth(response.user, response.accessToken, response.refreshToken, permissions);
|
|
toast.success("Welcome!", "Signed in with Google.");
|
|
nav.go("(tabs)");
|
|
} catch (error: any) {
|
|
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
|
|
// User cancelled the login flow
|
|
} else if (error.code === statusCodes.IN_PROGRESS) {
|
|
toast.error("Login in progress", "Please wait...");
|
|
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
|
|
toast.error("Play Services", "Google Play Services not available");
|
|
} else {
|
|
console.error("[Login] Google Error:", error);
|
|
toast.error(
|
|
"Google Login Failed",
|
|
error.message || "An error occurred",
|
|
);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenWrapper>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
className="flex-1"
|
|
>
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 10 }}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
<View className="flex-row justify-end mb-4">
|
|
<Pressable
|
|
onPress={() => setLanguageModalVisible(true)}
|
|
className="p-2 rounded-full bg-card border border-border"
|
|
>
|
|
<Globe color={isDark ? "#f1f5f9" : "#0f172a"} size={20} />
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* Logo / Branding */}
|
|
<View className="items-center mb-10">
|
|
<Text variant="h2" className="mt-6 font-bold text-foreground">
|
|
Login
|
|
</Text>
|
|
<Text variant="muted" className="mt-2 text-center">
|
|
Sign in to manage your tickets & invoices
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Form */}
|
|
<View className="gap-5">
|
|
<View>
|
|
<Text variant="small" className="font-semibold mb-2 ml-1">
|
|
Email or Phone Number
|
|
</Text>
|
|
<View className="flex-row items-center rounded-xl px-4 border border-border h-12">
|
|
<User size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
<TextInput
|
|
className="flex-1 ml-3 text-foreground"
|
|
placeholder="john@example.com or +251..."
|
|
placeholderTextColor={getPlaceholderColor(isDark)}
|
|
value={identifier}
|
|
onChangeText={setIdentifier}
|
|
autoCapitalize="none"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View>
|
|
<Text variant="small" className="font-semibold mb-2 ml-1">
|
|
Password
|
|
</Text>
|
|
<View className="flex-row items-center rounded-xl px-4 border border-border h-12">
|
|
<Lock size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
<TextInput
|
|
className="flex-1 ml-3 text-foreground"
|
|
placeholder="••••••••"
|
|
placeholderTextColor={getPlaceholderColor(isDark)}
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry={!showPassword}
|
|
/>
|
|
<Pressable onPress={() => setShowPassword(!showPassword)}>
|
|
{showPassword ? (
|
|
<EyeOff size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
) : (
|
|
<Eye size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
<Button
|
|
className="h-10 bg-primary rounded-[6px] shadow-lg shadow-primary/30 mt-2"
|
|
onPress={handleLogin}
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color="white" />
|
|
) : (
|
|
<>
|
|
<Text className="text-white font-bold text-base mr-2">
|
|
Sign In
|
|
</Text>
|
|
<ArrowRight color="white" size={18} strokeWidth={2.5} />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</View>
|
|
|
|
{/* Social / Other */}
|
|
<View className="mt-12">
|
|
<View className="flex-row items-center mb-8">
|
|
<View className="flex-1 h-[1px] bg-border" />
|
|
<Text
|
|
variant="small"
|
|
className="mx-4 text-muted-foreground uppercase font-bold tracking-widest text-[10px]"
|
|
>
|
|
or
|
|
</Text>
|
|
<View className="flex-1 h-[1px] bg-border" />
|
|
</View>
|
|
|
|
<View className="flex-row gap-4">
|
|
<Pressable
|
|
onPress={handleGoogleLogin}
|
|
disabled={loading}
|
|
className="flex-1 h-10 border border-border rounded-[6px] items-center justify-center flex-row bg-card"
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color={isDark ? "white" : "black"} />
|
|
) : (
|
|
<>
|
|
<Image
|
|
source={require("@/assets/google-logo.png")}
|
|
style={{ width: 22, height: 22 }}
|
|
resizeMode="contain"
|
|
/>
|
|
<Text className="ml-3 font-bold text-foreground text-base">
|
|
Continue with Google
|
|
</Text>
|
|
</>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
|
|
<Pressable
|
|
className="mt-10 items-center justify-center py-2"
|
|
onPress={() => nav.go("register")}
|
|
>
|
|
<Text className="text-muted-foreground">
|
|
Don't have an account?{" "}
|
|
<Text className="text-primary">Create one</Text>
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
|
|
<LanguageModal
|
|
visible={languageModalVisible}
|
|
current={language}
|
|
onSelect={(lang) => setLanguage(lang)}
|
|
onClose={() => setLanguageModalVisible(false)}
|
|
/>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|