add app/pages/sign/Login.js

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

@@ -0,0 +1,351 @@
+/**
+ * 登录页面
+ * @邠心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'
+  }
+});