memowake-front/components/login/login.tsx

import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Alert, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
import { useAuth } from "../../contexts/auth-context";
import { API_ENDPOINT, fetchApi } from "../../lib/server-api-util";
import { User } from "../../types/user";
import { ThemedText } from "../ThemedText";

const REMEMBER_ACCOUNT_KEY = 'fairclip_remembered_account';
interface LoginProps {
    updateUrlParam: (status: string, value: string) => void;
    setError: (error: string) => void;
    setShowPassword: (showPassword: boolean) => void;
    showPassword: boolean;
}

const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: LoginProps) => {
    const { t } = useTranslation();
    const { login } = useAuth();
    const [isLoading, setIsLoading] = useState(false);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [rememberMe, setRememberMe] = useState(false);

    const handleLogin = async () => {
        if (!email) {
            setError(t('auth.login.emailPlaceholder', { ns: 'login' }));
            return;
        };
        if (!password) {
            setError(t('auth.login.passwordPlaceholder', { ns: 'login' }));
            return;
        }
        setIsLoading(true);
        try {
            const body = {
                account: email,
                password: password,
            };

            const res = await fetchApi<User>('/iam/login/password-login', {
                method: 'POST',
                body: JSON.stringify(body),
            }, true, false);
            login({ ...res, email: res?.account }, res.access_token || '');
            const userInfo = await fetchApi<User>("/iam/user-info");
            if (userInfo?.nickname) {
                router.replace('/ask');
            } else {
                router.replace('/user-message');
            }
        } catch (error) {
            Alert.alert("API_ENDPOINT", API_ENDPOINT);
            const errorMessage = error instanceof Error ? error.message : t('auth.login.loginError', { ns: 'login' });
            setError(errorMessage);
        } finally {
            setIsLoading(false);
        }
    };

    const handleForgotPassword = () => {
        updateUrlParam('status', 'forgetPwd');
    };

    const handleSignUp = () => {
        updateUrlParam('status', 'signUp');
    };

    return (
        <View style={styles.container}>
            <View style={[styles.inputContainer, { marginBottom: 20 }]}>
                <ThemedText style={styles.inputLabel}>
                    {t('auth.login.email', { ns: 'login' })}
                </ThemedText>
                <TextInput
                    style={styles.textInput}
                    placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
                    placeholderTextColor="#ccc"
                    value={email}
                    onChangeText={(text) => {
                        setEmail(text);
                        setError('123');
                    }}
                    autoCapitalize="none"
                />
            </View>

            <View style={styles.inputContainer}>
                <ThemedText style={styles.inputLabel}>
                    {t('auth.login.password', { ns: 'login' })}
                </ThemedText>
                <View style={styles.passwordInputContainer}>
                    <TextInput
                        style={[styles.textInput, { paddingRight: 48 }]}
                        placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
                        placeholderTextColor="#ccc"
                        value={password}
                        onChangeText={(text) => {
                            setPassword(text);
                            setError('123');
                        }}
                        secureTextEntry={!showPassword}
                    />
                    <TouchableOpacity
                        style={styles.eyeIcon}
                        onPress={() => setShowPassword(!showPassword)}
                    >
                        <Ionicons
                            name={showPassword ? 'eye' : 'eye-off'}
                            size={20}
                            color="#666"
                        />
                    </TouchableOpacity>
                </View>
            </View>

            <TouchableOpacity
                style={styles.forgotPassword}
                onPress={handleForgotPassword}
            >
                <ThemedText style={styles.forgotPasswordText}>
                    {t('auth.login.forgotPassword', { ns: 'login' })}
                </ThemedText>
            </TouchableOpacity>

            <TouchableOpacity
                style={[styles.loginButton, isLoading && { opacity: 0.7 }]}
                onPress={handleLogin}
                disabled={isLoading}
            >
                {isLoading ? (
                    <ActivityIndicator color="#fff" />
                ) : (
                    <ThemedText style={styles.loginButtonText}>
                        {t('auth.login.loginButton', { ns: 'login' })}
                    </ThemedText>
                )}
            </TouchableOpacity>

            <View style={styles.signupContainer}>
                <ThemedText style={styles.signupText}>
                    {t('auth.login.signUpMessage', { ns: 'login' })}
                </ThemedText>
                <TouchableOpacity onPress={handleSignUp}>
                    <ThemedText style={styles.signupLink}>
                        {t('auth.login.signUp', { ns: 'login' })}
                    </ThemedText>
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    inputContainer: {
        marginBottom: 20,
    },
    inputLabel: {
        fontSize: 16,
        color: '#1F2937',
        marginBottom: 8,
        marginLeft: 8,
    },
    textInput: {
        borderRadius: 12,
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontSize: 16,
        textAlignVertical: 'center',
        backgroundColor: '#FFF8DE'
    },
    passwordInputContainer: {
        position: 'relative',
    },
    eyeIcon: {
        position: 'absolute',
        right: 12,
        top: 14,
    },
    forgotPassword: {
        alignSelf: 'flex-end',
        marginBottom: 24,
    },
    forgotPasswordText: {
        color: '#1F2937',
        fontSize: 14,
    },
    loginButton: {
        width: '100%',
        backgroundColor: '#E2793F',
        borderRadius: 28,
        padding: 16,
        alignItems: 'center',
        marginBottom: 24,
    },
    loginButtonText: {
        color: '#FFFFFF',
        fontWeight: '600',
    },
    signupContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: 8,
    },
    signupText: {
        color: '#1F2937',
        fontSize: 14,
    },
    signupLink: {
        color: '#E2793F',
        fontSize: 14,
        fontWeight: '600',
        marginLeft: 4,
    },
});

export default Login;