Merge pull request #6314 from abpframework/fix/6231

Fix/6231
5 years ago · 1fc47b9e06
12 changed files with 2619 additions and 2528 deletions
--- a/templates/app/react-native/.prettierrc
+++ b/templates/app/react-native/.prettierrc
@ -4,5 +4,6 @@
  "jsxSingleQuote": false,
  "printWidth": 100,
  "semi": true,
-  "jsxBracketSameLine": true
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid"
 }
--- a/templates/app/react-native/Environment.js
+++ b/templates/app/react-native/Environment.js
@ -5,7 +5,7 @@ const ENV = {
      issuer: 'http://localhost:44305',
      clientId: 'MyProjectName_App',
      clientSecret: '1q2w3e*',
-      scope: 'MyProjectName',
+      scope: 'offline_access MyProjectName',
    },
    localization: {
      defaultResourceName: 'MyProjectName',
@ -17,7 +17,7 @@ const ENV = {
      issuer: 'http://localhost:44305',
      clientId: 'MyProjectName_App',
      clientSecret: '1q2w3e*',
-      scope: 'MyProjectName',
+      scope: 'offline_access MyProjectName',
    },
    localization: {
      defaultResourceName: 'MyProjectName',
--- a/templates/app/react-native/app.json
+++ b/templates/app/react-native/app.json
@ -2,9 +2,6 @@
  "expo": {
    "name": "MyProjectName",
    "slug": "MyProjectName",
-    "privacy": "public",
-    "sdkVersion": "36.0.0",
-    "platforms": ["ios", "android", "web"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
@ -25,6 +22,9 @@
    "android": {
      "package": "com.MyCompanyName.MyProjectName",
      "versionCode": 1
+    },
+    "web": {
+      "favicon": "./assets/icon.png"
    }
  }
 }
--- a/templates/app/react-native/package.json
+++ b/templates/app/react-native/package.json
@ -10,53 +10,55 @@
    "lint:fix": "yarn lint --fix"
  },
  "dependencies": {
-    "@expo/vector-icons": "^10.0.6",
-    "@react-native-community/masked-view": "0.1.5",
-    "@react-navigation/drawer": "^5.1.1",
-    "@react-navigation/native": "^5.0.9",
-    "@react-navigation/stack": "^5.1.1",
-    "@reduxjs/toolkit": "^1.2.3",
-    "axios": "^0.19.2",
-    "color": "^3.1.2",
-    "expo": "~36.0.0",
-    "expo-constants": "~8.0.0",
-    "expo-font": "~8.0.0",
-    "formik": "^2.1.2",
-    "i18n-js": "^3.5.1",
-    "lodash": "^4.17.15",
-    "native-base": "2.13.8",
+    "@expo/vector-icons": "^10.2.1",
+    "@react-native-async-storage/async-storage": "^1.13.2",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/drawer": "^5.11.3",
+    "@react-navigation/native": "^5.8.9",
+    "@react-navigation/stack": "^5.12.6",
+    "@reduxjs/toolkit": "^1.4.0",
+    "axios": "^0.21.0",
+    "color": "^3.1.3",
+    "expo": "~39.0.4",
+    "expo-constants": "~9.2.0",
+    "expo-font": "~8.3.0",
+    "expo-status-bar": "~1.0.2",
+    "formik": "^2.2.5",
+    "i18n-js": "^3.8.0",
+    "lodash": "^4.17.20",
+    "native-base": "2.13.14",
    "prop-types": "^15.7.2",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.5.0",
-    "react-native-reanimated": "~1.4.0",
-    "react-native-safe-area-context": "0.6.0",
-    "react-native-safe-area-view": "^1.0.0",
-    "react-native-screens": "2.0.0-alpha.12",
-    "react-native-web": "~0.11.7",
-    "react-redux": "^7.1.3",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-gesture-handler": "~1.7.0 ",
+    "react-native-reanimated": "~1.13.2",
+    "react-native-safe-area-context": "3.1.4",
+    "react-native-safe-area-view": "^1.1.1",
+    "react-native-screens": "~2.10.1",
+    "react-native-web": "~0.14.8",
+    "react-redux": "^7.2.2",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
-    "yup": "^0.28.0"
+    "yup": "^0.29.3"
  },
  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@types/i18n-js": "^3.0.1",
-    "@types/react": "~16.9.0",
-    "@types/react-native": "~0.60.23",
-    "@types/react-redux": "^7.1.7",
-    "@types/yup": "^0.26.29",
-    "babel-eslint": "^10.0.3",
-    "babel-preset-expo": "~8.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "prettier": "^1.19.1"
+    "@babel/core": "~7.12.3",
+    "@types/i18n-js": "^3.0.3",
+    "@types/react": "~16.9.56",
+    "@types/react-native": "~0.63.35",
+    "@types/react-redux": "^7.1.11",
+    "@types/yup": "^0.29.9",
+    "babel-eslint": "~10.1.0",
+    "babel-preset-expo": "~8.3.0",
+    "eslint": "^7.13.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "prettier": "^2.1.2"
  },
  "private": true
 }
--- a/templates/app/react-native/src/api/API.js
+++ b/templates/app/react-native/src/api/API.js
@ -5,6 +5,7 @@ const { apiUrl } = getEnvVars();

 const axiosInstance = axios.create({
  baseURL: apiUrl,
+  withCredentials: false
 });

 export default axiosInstance;
--- a/templates/app/react-native/src/api/AccountAPI.js
+++ b/templates/app/react-native/src/api/AccountAPI.js
@ -4,22 +4,13 @@ import { getEnvVars } from '../../Environment';
 const { oAuthConfig } = getEnvVars();

 export const login = ({ username, password }) => {
-  // eslint-disable-next-line no-undef
-  const formData = new FormData();
-  formData.append('username', username);
-  formData.append('password', password);
-  formData.append('grant_type', 'password');
-  formData.append('scope', `${oAuthConfig.scope} offline_access`);
-  formData.append('client_id', oAuthConfig.clientId);
-  formData.append('client_secret', oAuthConfig.clientSecret);
-
  return api({
    method: 'POST',
    url: '/connect/token',
-    headers: { 'Content-Type': 'multipart/form-data' },
-    data: formData,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    data: `grant_type=password&scope=${oAuthConfig.scope}&username=${username}&password=${password}&client_id=${oAuthConfig.clientId}&client_secret=${oAuthConfig.clientSecret}`,
    baseURL: oAuthConfig.issuer,
-  }).then(({ data }) => data);
+  }).then(({ data }) => data)
 };

 export const logout = () =>
--- a/templates/app/react-native/src/components/TenantBox/TenantBox.js
+++ b/templates/app/react-native/src/components/TenantBox/TenantBox.js
@ -62,7 +62,7 @@ function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleT
        <Content px20 style={{ flex: 1 }}>
          <InputGroup abpInputGroup>
            <Label abpLabel>{i18n.t('AbpUiMultiTenancy::Name')}</Label>
-            <Input abpInput value={tenantName} onChangeText={setTenantName} />
+            <Input abpInput value={tenantName} onChangeText={setTenantName} autoCapitalize = 'none'/>
          </InputGroup>
          <Text style={style.hint}>{i18n.t('AbpUiMultiTenancy::SwitchTenantHint')}</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
--- a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js
+++ b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js
@ -49,8 +49,6 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
        }),
      })}
      initialValues={{
-        lockoutEnabled: false,
-        twoFactorEnabled: false,
        ...editingTenant,
      }}
      onSubmit={values => onSubmit(values)}>
@ -70,6 +68,7 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
                  onChangeText={handleChange('name')}
                  onBlur={handleBlur('name')}
                  value={values.name}
+                  autoCapitalize = 'none'
                />
              </InputGroup>
              <ValidationMessage>{errors.name}</ValidationMessage>
@ -87,6 +86,7 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
                      onChangeText={handleChange('adminEmailAddress')}
                      onBlur={handleBlur('adminEmailAddress')}
                      value={values.adminEmailAddress}
+                      autoCapitalize = 'none'
                    />
                  </InputGroup>
                  <ValidationMessage>{errors.adminEmailAddress}</ValidationMessage>
@ -102,6 +102,7 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
                        onChangeText={handleChange('adminPassword')}
                        onBlur={handleBlur('adminPassword')}
                        value={values.adminPassword}
+                        autoCapitalize = 'none'
                      />
                      <Icon
                        name={showAdminPassword ? 'eye-off' : 'eye'}
--- a/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js
+++ b/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js
@ -74,7 +74,6 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
      })}
      initialValues={{
        lockoutEnabled: false,
-        twoFactorEnabled: false,
        ...editingUser,
      }}
      onSubmit={values => onSubmit(values)}>
@ -106,6 +105,7 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
                    onChangeText={handleChange('userName')}
                    onBlur={handleBlur('userName')}
                    value={values.userName}
+                    autoCapitalize = 'none'
                  />
                </InputGroup>
                <ValidationMessage>{errors.userName}</ValidationMessage>
@ -143,6 +143,7 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    value={values.email}
+                    autoCapitalize = 'none'
                  />
                </InputGroup>
                <ValidationMessage>{errors.email}</ValidationMessage>
@ -151,10 +152,12 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
                  <Input
                    abpInput
                    ref={phoneNumberRef}
+                    onSubmitEditing={() => passwordRef.current._root.focus()}
                    returnKeyType={!editingUser.id ? 'next' : 'default'}
                    onChangeText={handleChange('phoneNumber')}
                    onBlur={handleBlur('phoneNumber')}
                    value={values.phoneNumber}
+                    autoCapitalize = 'none'
                  />
                </InputGroup>
                {!editingUser.id ? (
@ -168,6 +171,7 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
                          onChangeText={handleChange('password')}
                          onBlur={handleBlur('password')}
                          value={values.password}
+                          autoCapitalize = 'none'
                        />
                        <Icon
                          name={showPassword ? 'eye-off' : 'eye'}
@ -190,18 +194,6 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
                    </TouchableOpacity>
                  </Body>
                </ListItem>
-                <ListItem>
-                  <CheckBox
-                    checked={values.twoFactorEnabled}
-                    onPress={() => setFieldValue('twoFactorEnabled', !values.twoFactorEnabled)}
-                  />
-                  <Body>
-                    <TouchableOpacity
-                      onPress={() => setFieldValue('twoFactorEnabled', !values.twoFactorEnabled)}>
-                      <Text>{i18n.t('AbpIdentity::DisplayName:TwoFactorEnabled')}</Text>
-                    </TouchableOpacity>
-                  </Body>
-                </ListItem>
              </View>
              <View
                style={{
--- a/templates/app/react-native/src/screens/Login/LoginScreen.js
+++ b/templates/app/react-native/src/screens/Login/LoginScreen.js
@ -13,7 +13,7 @@ import {
  Icon,
 } from 'native-base';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useRef  } from 'react';
 import { View } from 'react-native';
 import * as Yup from 'yup';
 import { login } from '../../api/AccountAPI';
@ -32,6 +32,7 @@ const ValidationSchema = Yup.object().shape({
 function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) {
  const [showTenantSelection, setShowTenantSelection] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
+  const passwordRef = useRef(null)

  const toggleTenantSelection = () => {
    setShowTenantSelection(!showTenantSelection);
@ -77,6 +78,9 @@ function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) {
                    onChangeText={handleChange('username')}
                    onBlur={handleBlur('username')}
                    value={values.username}
+                    onSubmitEditing={() => passwordRef.current._root.focus()}
+                    returnKeyType="next"
+                    autoCapitalize = 'none'
                  />
                </InputGroup>
                <ValidationMessage>{errors.username}</ValidationMessage>
@ -88,6 +92,8 @@ function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) {
                      onChangeText={handleChange('password')}
                      onBlur={handleBlur('password')}
                      value={values.password}
+                      ref={passwordRef}
+                      autoCapitalize = 'none'
                    />
                    <Icon
                      name={showPassword ? 'eye-off' : 'eye'}
--- a/templates/app/react-native/src/store/index.js
+++ b/templates/app/react-native/src/store/index.js
@ -1,9 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
 import createSagaMiddleware from 'redux-saga';
 import { persistStore, persistReducer } from 'redux-persist';
-import { AsyncStorage } from 'react-native';
 import { rootSaga } from './sagas';
 import rootReducer from './reducers';
+import AsyncStorage from '@react-native-async-storage/async-storage';

 const sagaMiddleware = createSagaMiddleware();

--- a/templates/app/react-native/yarn.lock
+++ b/templates/app/react-native/yarn.lock