taro/src/features/auth/components/Login.tsx

import Inputs from "@/components/input/Inputs";
import { View, Text, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import check from '@/assets/svg/check.svg'
import Texts from "@/components/basic/Texts";
import Box from "@/components/layout/Box";
import { ComponentStatus, TextType } from "@/utils/types";
import Buttons from "@/components/basic/Buttons";
import './Auth.scss'
import { clientId, login } from "@/services/user";
import { useDispatch, useSelector } from "react-redux";
import Taro from "@tarojs/taro";
import { ColorType } from "@/context/themes/color";
import { loginSuccess } from "@/store/user";
import { IconCheck, IconRadio, IconRadioCheck } from "@/components/basic/Icons";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Login(props: { register: () => void }) {
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const user = useSelector((state: any) => state.user);
    const common = useSelector((state: any) => state.common);
    const [checked, setChecked] = useState(true)

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (user.isLogin) {
            //上报用户登录完成


            if (process.env.TARO_ENV == 'rn') {
                navigation.pop(2)
                return
            }

            if (user.is_new_user) {
                Taro.navigateBack({
                    delta: 1
                })
                Taro.redirectTo({
                    url: '/pages/clock/ChooseScenario?trigger_event=SETUP_UPON_ACCOUNT_CREATION'
                })
            }
            else {
                Taro.navigateBack({
                    delta: 2
                })
            }

            // if (user.scenario_select_count > 0 || user.ongoing) {
            //     Taro.navigateBack({
            //         delta: 2
            //     })
            // }
            // else {
            //     Taro.navigateBack({
            //         delta: 1
            //     })
            //     Taro.redirectTo({
            //         url: '/pages/clock/ChooseScenario?trigger_event=SETUP_UPON_ACCOUNT_CREATION'
            //     })
            // }

        }
    }, [user.isLogin])

    const handleNameChange = (value: string) => {
        setName(value);
    };

    const handlePasswordChange = (value: string) => {
        setPassword(value);
    }
    const isLoginButtonDisabled = name === '' || password === '';

    function loginComponent() {
        return <View>
            <Inputs autoFocus={true} value={name} onChange={handleNameChange} onConfirm={(e) => { }} placeholder={t('feature.auth.login.input_account_placeholder')}></Inputs>
            <View style={{ height: 20 }} />
            <Inputs value={password} isSecure={true} onChange={handlePasswordChange} onConfirm={(e) => { }} placeholder={t('feature.auth.login.input_password_placeholder')}></Inputs>
        </View>
    }

    function LoginF() {
        if (isLoginButtonDisabled) {
            return;
        }
        login(name, password).then(res => {
            dispatch(loginSuccess(res))
            clientId()
            // navigation.goBack(3)
        }).catch(e => {
            // alert(e.data.error_message)
            // alert(''+JSON.stringify(e))
            Taro.showToast({
                icon: 'none',
                title: e.error_message
            })
        })
        // dispatch(login(name, password) as any);
    }

    function tapCheck() {
        setChecked(!checked)
    }

    function agreement() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'user_agreement'
        })

        if (!resource || resource.length == 0) {
            Taro.showToast({
                title: 'Not found.',
                icon: 'none'
            })
            return
        }

        jumpPage('/pages/common/H5?title=User Agreement&url=' + resource[0].url, 'H5', navigation, {
            title: 'User Agreement',
            url: resource[0].url
        })
    }

    function privacy() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'privacy'
        })
        
        if (!resource || resource.length == 0) {
            Taro.showToast({
                title: 'Not found.',
                icon: 'none'
            })
            return
        }

        jumpPage('/pages/common/H5?title=Privacy Policy&url=' + resource[0].url, 'H5', navigation, {
            title: 'Privacy Policy',
            url: resource[0].url
        })
    }

    return <View style={{ width: '100%', height: '100%' }}>
        <Texts text={'fast16cc'} type={TextType.primary}></Texts>
        {
            loginComponent()
        }
        <Buttons
            onClick={LoginF}
            title={t('feature.auth.create_account.login')}
            btnStyle={{
                marginLeft: 23, marginRight: 23, marginTop: 20,
                color: ColorType.black,
                marginBottom: 20, height: 44,
                borderRadius: 22, backgroundColor: ColorType.fast
            }}
            disabled={isLoginButtonDisabled || !checked}></Buttons>

        <View className="agree_view">
            {/* <Image style='width:12px;height:12px;' src={check} /> */}
            <View onClick={tapCheck}>
                {
                    checked ? <IconRadioCheck width={20} color={ColorType.fast} /> :
                        <IconRadio width={20} color={ColorType.fast} />
                }
            </View>

            <View style={{ width: 10 }} />
            <Text className='agree_text' style={{ color: '#ffffff66' }}>I agree to <Text onClick={privacy} style={{ color: '#ffffff' }}> Privacy Policy.</Text></Text>
        </View>
        <View style={{ flex: 1 }} />
        <View className="footer">
            <Text className="have_account">{t('feature.auth.login.footer_desc')}</Text>
            <Text className="login2" onClick={() => props.register()}> {t('feature.auth.login.footer_sign_up')}</Text>
        </View>
    </View>

    return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100%', height: '100%' }}>
        <Texts text={'fast16cc'} type={TextType.primary}></Texts>
        {/* <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts> */}
        <Box children={loginComponent()}></Box>

        {/* <Buttons
            onClick={LoginF}
            title={t('feature.auth.create_account.btn_next')}
            style={{ marginLeft: 23, marginRight: 23, marginTop: 20, marginBottom: 20 }}
            status={isLoginButtonDisabled ? ComponentStatus.disable : ComponentStatus.enable}></Buttons>

        <View className="agree_view">
            <Image style='width:12px;height:12px;' src={check} />
            <Text className='agree_text'>{t('page.auth.agreement')}</Text>
        </View> */}
        <View style={{ flex: 1 }} />
        <View className="footer">
            <Text className="have_account">{t('feature.auth.login.footer_desc')}</Text>
            <Text className="login2" onClick={() => props.register()}>{t('feature.auth.login.footer_sign_up')}</Text>
        </View>
    </View>
}