add app/pages/signLumi/LoginVL.js

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

@@ -0,0 +1,319 @@
+/**
+ * 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'
+  }
+});