add app/pages/sign/LoginV2.js

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

@@ -0,0 +1,292 @@
+/**
+ * 登录页面V2
+ * @邠心vbe on 2022/12/23
+ */
+import React from 'react';
+import {View, Text, StyleSheet, Image, TextInput, ScrollView, Platform} 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';
+
+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
+    }
+  }
+
+  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('Please enter email address');
+      return;
+    }
+    if (this.state.password == '') {
+      toastShort('Please enter password');
+      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;
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+      <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={styles.loginForm}>
+            <View style={styles.inputView}>
+              <Zocial name='email' size={28} color='#999999' />
+              <TextInput 
+                style={styles.inputText}
+                placeholder={"E-mail"}
+                placeholderTextColor={textPlacehoder}
+                textContentType='emailAddress'
+                defaultValue={this.state.email}
+                clearButtonMode='while-editing'
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect={false}
+                maxLength={50}
+                onChangeText={(v) => {
+                  this.setState({
+                    email: v
+                  })
+                }}/>
+            </View>
+            <View style={styles.inputView}>
+              <Fontisto name='locked' size={28} color='#999999' style={{marginLeft: 3, marginRight: 2}} />
+              <TextInput 
+                style={styles.inputText}
+                placeholder="Password"
+                placeholderTextColor={textPlacehoder}
+                textContentType='password'
+                secureTextEntry={true}
+                maxLength={20}
+                onChangeText={(v) => {
+                  this.setState({
+                    password: v
+                  })
+                }}
+                onSubmitEditing={() => {
+                  this.onLogin();
+                }}/>
+            </View>
+            <View style={ui.flexcw}>
+              <View style={$padding(12, 8)}>
+                <CheckBoxText
+                  value={this.state.rememberMe}
+                  onValueChange={(newValue) => {
+                    this.setState({ rememberMe: newValue });
+                  }}
+                  text={'Remember me'}
+                />
+              </View>
+              <TextView
+                style={styles.linksText}
+                onPress={() => startPage(PageList.forgotPassword)}>Forgot Password</TextView>
+            </View>
+            <Button
+              style={styles.loginButton}
+              text='SIGN IN'
+              elevation={1.5}
+              onClick={() => {
+                this.onLogin()
+              }}
+            />
+          </View>
+        </View>
+        <View style={styles.signView}>
+          <TextView style={{color: textPrimary}}>New User?</TextView>
+          <TextView
+            style={styles.linksText}
+            onPress={() => {
+              startPage(PageList.register);
+            }}
+          >Click here to sign up</TextView>
+        </View>
+      </ScrollView>
+      </View>
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colorThemes
+  },
+  backBtn:{
+    top: 4,
+    left: 2,
+    zIndex: 1,
+    position: 'absolute'
+  },
+  header: {
+    height: 260,
+    paddingTop: 56,
+    paddingBottom: 20,
+    paddingLeft: 32,
+    paddingRight: 32,
+    alignItems: 'center'
+  },
+  headerImg: {
+    width: $vw(63),
+    height: 60,
+    marginTop: 60
+  },
+  loginView: {
+    padding: 16,
+    marginTop: -24,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24
+  },
+  logoImg: {
+    width:136.19,
+    height: 40,
+    marginTop: 18
+  },
+  loginForm: {
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  inputView: {
+    marginTop: 30,
+    borderRadius: 8,
+    paddingTop: 6,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 6,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5'
+  },
+  inputText: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 15,
+    paddingTop: 6,
+    paddingLeft: 16,
+    paddingBottom: 6
+  },
+  loginButton: {
+    marginTop: 32
+  },
+  signView: {
+    paddingTop: 32,
+    paddingBottom: 16,
+    alignItems: 'center',
+  },
+  checkText: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingLeft: 8
+  },
+  linksText: {
+    ...ui.link,
+    padding: 8,
+    fontSize: 14,
+    textDecorationLine: 'underline'
+  }
+});