ChargEco/Strides-SPAPP/app/pages/sign/Login.js

/**
 * 登录页面
 * @邠心vbe on 2021/03/18
 */
import React from 'react';
import {View, Text, StyleSheet, Image, TextInput, ScrollView, Platform, Pressable} from 'react-native';
import { BackButton } from '../../components/Toolbar';
import apiUser from '../../api/apiUser';
import { setAccessToken } from '../../api/http';
import { getStorageJsonSync, setStorageJson } from '../../utils/storage';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
import CheckBoxText from '../../components/CheckBoxText';
import TextView from '../../components/TextView';
import { Linking } from 'react-native';
import app from "../../../app.json";

export const AutoLogin = async (back) => {
  const data = await getStorageJsonSync('loginData')
  if (data && data.email && data.password) {
    apiUser.login(data).then(res => {
      if (res.data.accessToken) {
        setAccessToken(res.data.accessToken);
        if (back) back();
      }
    }).catch(err => {
      console.warn('AutoLogin', err);
      toastShort('Sign in failed')
    });
  }
}

export default class Login extends React.Component {

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

  componentDidMount() {
    /*if (this.props.route.params.action) {
      this.props.navigation.addListener('beforeRemove', (e) => {
        if (this.props.route.params.action == '401') {
          //dispatchPage(StackActions.push('home'));
          dispatchPage(state => {
            console.log('routes', state);
            const r = [];
            var index = 0;
            var homekey = '';
            for (let i = 0; i < state.routes.length; i++) {
              const item = state.routes[i];
              if (item.name == 'home') {
                r.push(item);
                index = i;
                homekey = item.key;
                break;
              } else {
                r.push(item);
              }
            }
            console.log('new routes', r);
            return {
              ...CommonActions.goBack(),
              source: this.props.route.key,
              target: homekey,
            };
          });
        }
      });
    }*/
    this.getEmail();
  }

  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 statusHeight;
  }

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

  startWebApp() {
    Linking.openURL(app.product ? "https://webapp.chargeco.global/" : "https://uat.chargeco.global/webapp")
  }

  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={$t('sign.labelE_mail')}
                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={20}
                color={textCancel}
                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.forgotPassword)}>{$t('sign.forgotPassword')}</TextView>
            </View>
            <Button
              style={styles.loginButton}
              text={$t('sign.btnLogin')}
              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.register)}>Sign up and enjoy more perks</TextView>
          {/* <Text 
            style={styles.linksText}
            onPress={() => startPage(PageList.register, {isFleetUser: true})}>{$t('sign.registerDriverUser')}</Text> */}
          <TextView style={{color: textPrimary, paddingTop: 12}}>Or</TextView>
          <TextView 
            style={styles.linksText}
            onPress={() => this.startWebApp()}>Continue as guest</TextView>
        </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: 22,
    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',
    borderBottomWidth: 1,
    borderBottomColor: '#F5F5F5'
    //backgroundColor: '#F5F5F5'
  },
  inputText: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    paddingTop: 6,
    paddingLeft: 16,
    paddingBottom: 6
  },
  loginButton: {
    marginTop: 32,
    borderRadius: 40
  },
  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'
  }
});