|
|
@@ -0,0 +1,214 @@
|
|
|
+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
|
|
|
+ })
|
|
|
+ debugger
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ debugger
|
|
|
+ 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>
|
|
|
+}
|
