397 lines
14 KiB
TypeScript
397 lines
14 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 { router } from "expo-router";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Mail,
|
|
Lock,
|
|
ArrowRight,
|
|
Eye,
|
|
EyeOff,
|
|
Chrome,
|
|
User,
|
|
Globe,
|
|
Phone,
|
|
} 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";
|
|
// Lazy-load Google Sign-In to prevent crash when native module is missing (e.g. Expo Go)
|
|
let GoogleSignin: any = null;
|
|
let statusCodes: any = {};
|
|
let googleAvailable = false;
|
|
|
|
try {
|
|
const gsi = require("@react-native-google-signin/google-signin");
|
|
GoogleSignin = gsi.GoogleSignin;
|
|
statusCodes = gsi.statusCodes;
|
|
googleAvailable = true;
|
|
|
|
GoogleSignin.configure({
|
|
webClientId:
|
|
"1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com",
|
|
iosClientId:
|
|
"1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com",
|
|
offlineAccess: true,
|
|
});
|
|
} catch (e) {
|
|
console.warn("[Login] Google Sign-In native module not available:", (e as any).message);
|
|
}
|
|
|
|
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 [loginMode, setLoginMode] = useState<"email" | "phone">("email");
|
|
|
|
const handleLogin = async () => {
|
|
if (loginMode === "phone") {
|
|
if (!identifier) {
|
|
toast.error("Required Field", "Please enter your phone number");
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
const fullPhone = `+251${identifier}`;
|
|
try {
|
|
const response = await api.auth.sendOtp({ body: { phone: fullPhone } });
|
|
toast.success("Success", response.message || "OTP sent successfully");
|
|
// Navigate to OTP screen
|
|
router.push({
|
|
pathname: "/otp",
|
|
params: { phone: fullPhone, verificationId: response.verificationId },
|
|
});
|
|
} catch (err: any) {
|
|
if (
|
|
err.message?.includes("Unable to send a verification code to this number") ||
|
|
err.status === 401
|
|
) {
|
|
toast.info("Account Not Found", "Let's create one for you.");
|
|
router.push({
|
|
pathname: "/register",
|
|
params: { phone: identifier },
|
|
});
|
|
} else {
|
|
toast.error("Error", err.message || "Failed to send OTP");
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
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: `+251${identifier}`, password };
|
|
|
|
try {
|
|
// Using the new api.auth.login which is powered by simple-api
|
|
const response = await api.auth.login({ body: payload });
|
|
const permissions: string[] = [];
|
|
setAuth(
|
|
response.user,
|
|
response.accessToken,
|
|
response.refreshToken,
|
|
permissions,
|
|
);
|
|
toast.success("Welcome Back!", "You have successfully logged in.");
|
|
nav.go("(tabs)");
|
|
} catch (err: any) {
|
|
toast.error("Login Failed", err.message || "Invalid credentials");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleGoogleLogin = async () => {
|
|
if (!googleAvailable || !GoogleSignin) {
|
|
toast.error("Unavailable", "Google Sign-In requires a native build. Please use email/phone login.");
|
|
return;
|
|
}
|
|
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-8">
|
|
<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>
|
|
|
|
{/* Login Type Toggle */}
|
|
<View className="flex-row bg-card border border-border rounded-xl p-1 mb-6">
|
|
<Pressable
|
|
onPress={() => {
|
|
setLoginMode("email");
|
|
setIdentifier("");
|
|
}}
|
|
className={`flex-1 py-2 rounded-lg items-center ${loginMode === "email" ? "bg-primary" : ""}`}
|
|
>
|
|
<Text
|
|
className={`font-bold text-sm ${loginMode === "email" ? "text-white" : "text-muted-foreground"}`}
|
|
>
|
|
Email Login
|
|
</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={() => {
|
|
setLoginMode("phone");
|
|
setIdentifier("");
|
|
}}
|
|
className={`flex-1 py-2 rounded-lg items-center ${loginMode === "phone" ? "bg-primary" : ""}`}
|
|
>
|
|
<Text
|
|
className={`font-bold text-sm ${loginMode === "phone" ? "text-white" : "text-muted-foreground"}`}
|
|
>
|
|
Phone Number
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* Form */}
|
|
<View className="gap-5">
|
|
<View>
|
|
<Text variant="small" className="font-semibold mb-2 ml-1">
|
|
{loginMode === "email" ? "Email Address" : "Phone Number"}
|
|
</Text>
|
|
<View className="flex-row items-center rounded-xl px-4 border border-border h-12">
|
|
{loginMode === "email" ? (
|
|
<Mail size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
) : (
|
|
<View className="flex-row items-center">
|
|
<Phone size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
<Text className="ml-2 text-foreground font-bold">+251</Text>
|
|
</View>
|
|
)}
|
|
<TextInput
|
|
className="flex-1 ml-3 text-foreground"
|
|
placeholder={
|
|
loginMode === "email" ? "john@example.com" : "912345678"
|
|
}
|
|
placeholderTextColor={getPlaceholderColor(isDark)}
|
|
value={identifier}
|
|
onChangeText={setIdentifier}
|
|
autoCapitalize="none"
|
|
keyboardType={
|
|
loginMode === "email" ? "email-address" : "phone-pad"
|
|
}
|
|
maxLength={loginMode === "phone" ? 9 : undefined}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{loginMode === "email" && (
|
|
<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">
|
|
{loginMode === "email"
|
|
? "Sign In"
|
|
: "Send Verification Code"}
|
|
</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>
|
|
);
|
|
}
|