ChargEco/Strides-SPAPP/app/pages/signLumi/LoginVL.js

/**
 * LUMI版本Login页面
 * @邠心vbe on 2024/05/31
 */
import React from 'react';
import { BackHandler, Image, ScrollView, StyleSheet, TextInput, View } from 'react-native';
import { PageList } from '../Router';
import apiUser from '../../api/apiUser';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { setAccessToken } from '../../api/http';
import TextView from '../../components/TextView';
import { BackButton } from '../../components/Toolbar';
import CheckBoxText from '../../components/CheckBoxText';
import { getStorageJsonSync, setStorageJson } from '../../utils/storage';

export default class LoginVL extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      rememberMe: false,
      showPassword: false
    }
    this.isHide = false;
    this.backHandler = undefined;
  }

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.toExit)
    this.props.navigation.addListener('focus', () => {
      this.isHide = false;
    });

    this.props.navigation.addListener('blur', () => {
      this.isHide = true;
    });

    //this.getEmail();
  }

  componentWillUnmount() {
    if (this.backHandler) {
      this.backHandler.remove();
    }
  }

  toExit = () => {
    if (!this.isHide)
      return true;
  }

  async getEmail() {
    const data = await getStorageJsonSync('loginData');
    if (data && data.email) {
      this.setState({
        email: data.email
      });
    }
  }

  onLogin() {
    //console.log(this.state);
    if (this.state.email == '') {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (this.state.password == '') {
      toastShort($t('sign.plsInputPassword'));
      return;
    }
    Dialog.showProgressDialog();
    apiUser.login(this.state).then(res => {
      console.log('res.data', res);
      if (res.data.accessToken) {
        setAccessToken(res.data.accessToken);
        Dialog.dismissLoading();
        if (this.state.rememberMe) {
          setStorageJson('loginData', this.state);
        } else {
          setStorageJson('loginData', {});
        }
        startPage(PageList.home);
        //this.props.navigation.goBack();
      } else {
        toastShort(res.msg);
        Dialog.dismissLoading();
      }
    }).catch(err => {
      toastShort(err);
      Dialog.dismissLoading();
    });
  }

  getBackTopPosition() {
    return isIOS ? statusHeight : 4;
  }

  togglePassword() {
    this.setState({
      showPassword: !this.state.showPassword
    })
  }

  render() {
    return (
      <View style={ui.flex1}>
      {/* <View style={[styles.backBtn, {top: this.getBackTopPosition()}]}>
        <BackButton/>
      </View> */}
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
        <View style={styles.header}>
          <Image
            style={styles.headerImg}
            resizeMode='contain'
            source={require('../../images/app-logo.png')} />
        </View>
        <View style={styles.loginView}>
          <View style={ui.center}>
            {/* <Image 
              style={styles.logoImg}
              resizeMode='contain'
              source={require('../../images/app-logo.png')} /> */}
            <TextView style={styles.loginTitle}>{$t('sign.plsLoginTitle')}</TextView>
          </View>
          <View style={styles.loginForm}>
            <View style={styles.inputView}>
              {/* <Zocial name='email' size={28} color='#999999' /> */}
              {/* <Image 
                style={styles.inputIcon}
                source={require('../../images/user/sign-email.png')}
              /> */}
              <TextInput
                style={styles.inputText}
                placeholder={"example@email.com"}
                placeholderTextColor={textPlacehoder}
                keyboardType="email-address"
                textContentType='emailAddress'
                defaultValue={this.state.email}
                maxLength={50}
                clearButtonMode='while-editing'
                autoCapitalize="none"
                autoComplete="off"
                autoCorrect={false}
                onChangeText={(v) => {
                  this.setState({
                    email: v
                  })
                }}/>
            </View>
            <View style={styles.inputView}>
              {/* <Fontisto name='locked' size={28} color='#999999' style={{marginLeft: 3, marginRight: 2}} /> */}
              {/* <Image 
                style={styles.inputIcon}
                source={require('../../images/user/sign-password.png')}
              /> */}
              <TextInput 
                style={styles.inputText}
                placeholder={$t('sign.labelPassword')}
                placeholderTextColor={textPlacehoder}
                textContentType='password'
                secureTextEntry={!this.state.showPassword}
                maxLength={20}
                onChangeText={(v) => {
                  this.setState({
                    password: v
                  })
                }}
                onSubmitEditing={() => {
                  //this.onLogin();
                }}/>
              <MaterialCommunityIcons
                name={this.state.showPassword ? 'eye' : 'eye-off' }
                size={14}
                color={"#ccc"}
                onPress={() => this.togglePassword()}/>
            </View>
            <View style={ui.flexcw}>
              <View style={$padding(12, 8)}>
                {/* <CheckBoxText
                  value={this.state.rememberMe}
                  onValueChange={(newValue) => {
                    this.setState({ rememberMe: newValue });
                  }}
                  text={$t('sign.rememberMe')}
                /> */}
              </View>
              <TextView
                style={styles.linksText}
                onPress={() => startPage(PageList.forgotPasswordLumi)}>{$t('sign.forgotPassword')}</TextView>
            </View>
            <Button
              style={styles.loginButton}
              text={$t('sign.btnSignIn')}
              elevation={1.5}
              onClick={() => {
                this.onLogin()
              }}
            />
          </View>
        </View>
        <View style={styles.signView}>
          <TextView style={{color: textPrimary}}>{$t('sign.tipNewUser')}</TextView>
          {/* <Text
            style={styles.linksText}
            onPress={() => {
              startPage(PageList.register);
            }}
          >Click here to sign up</Text> */}
          <TextView 
            style={styles.linksText}
            onPress={() => startPage(PageList.registerLumi)}>{$t('sign.registerPublicUser')}</TextView>
          {/* <Text 
            style={styles.linksText}
            onPress={() => startPage(PageList.register, {isFleetUser: true})}>{$t('sign.registerDriverUser')}</Text> */}
        </View>
      </ScrollView>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  backBtn:{
    top: 4,
    left: 2,
    zIndex: 1,
    position: 'absolute'
  },
  header: {
    paddingTop: 22,
    paddingBottom: 20,
    paddingLeft: 32,
    paddingRight: 32,
    alignItems: 'center',
    backgroundColor: colorPrimary
  },
  headerImg: {
    width: $vw(65),
    height: $vw(56.118)
  },
  loginView: {
    padding: 16,
    marginTop: -24,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    backgroundColor: colorLight
  },
  logoImg: {
    width:136.19,
    height: 42.85,
    marginTop: 18
  },
  loginForm: {
    paddingLeft: 16,
    paddingRight: 16,
  },
  loginTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: textPrimary
  },
  inputIcon: {
    width: 24,
    height: 24
  },
  inputView: {
    marginTop: 30,
    borderRadius: 0,
    paddingTop: 6,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 6,
    alignItems: 'center',
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: '#DADADA',
    borderRadius: 4
  },
  inputText: {
    flex: 1,
    color: textPrimary,
    fontSize: 12,
    paddingTop: 6,
    paddingLeft: 6,
    paddingBottom: 6
  },
  loginButton: {
    marginTop: 32,
    borderRadius: 4,
    backgroundColor: colorPrimary
  },
  signView: {
    paddingTop: 32,
    paddingBottom: 16,
    alignItems: 'center',
  },
  checkText: {
    color: textPrimary,
    fontSize: 14,
    paddingLeft: 8
  },
  linksText: {
    ...ui.link,
    fontSize: 14,
    padding: 4,
    marginTop: 5,
    //fontWeight: 'bold',
    textDecorationLine: 'underline'
  }
});