Merge pull request #6314 from abpframework/fix/6231

Fix/6231

templates/app/react-native/.prettierrc

@@ -4,5 +4,6 @@
   "jsxSingleQuote": false,
   "printWidth": 100,
   "semi": true,
-  "jsxBracketSameLine": true
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid"
 }

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',

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"
     }
   }
 }

templates/app/react-native/package.json

@@ -10,53 +10,55 @@
     "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.6",
+    "@expo/vector-icons": "^10.2.1",
-    "@react-native-community/masked-view": "0.1.5",
+    "@react-native-async-storage/async-storage": "^1.13.2",
-    "@react-navigation/drawer": "^5.1.1",
+    "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/native": "^5.0.9",
+    "@react-navigation/drawer": "^5.11.3",
-    "@react-navigation/stack": "^5.1.1",
+    "@react-navigation/native": "^5.8.9",
-    "@reduxjs/toolkit": "^1.2.3",
+    "@react-navigation/stack": "^5.12.6",
-    "axios": "^0.19.2",
+    "@reduxjs/toolkit": "^1.4.0",
-    "color": "^3.1.2",
+    "axios": "^0.21.0",
-    "expo": "~36.0.0",
+    "color": "^3.1.3",
-    "expo-constants": "~8.0.0",
+    "expo": "~39.0.4",
-    "expo-font": "~8.0.0",
+    "expo-constants": "~9.2.0",
-    "formik": "^2.1.2",
+    "expo-font": "~8.3.0",
-    "i18n-js": "^3.5.1",
+    "expo-status-bar": "~1.0.2",
-    "lodash": "^4.17.15",
+    "formik": "^2.2.5",
-    "native-base": "2.13.8",
+    "i18n-js": "^3.8.0",
+    "lodash": "^4.17.20",
+    "native-base": "2.13.14",
     "prop-types": "^15.7.2",
-    "react": "~16.9.0",
+    "react": "17.0.1",
-    "react-dom": "~16.9.0",
+    "react-dom": "17.0.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
-    "react-native-gesture-handler": "~1.5.0",
+    "react-native-gesture-handler": "~1.7.0 ",
-    "react-native-reanimated": "~1.4.0",
+    "react-native-reanimated": "~1.13.2",
-    "react-native-safe-area-context": "0.6.0",
+    "react-native-safe-area-context": "3.1.4",
-    "react-native-safe-area-view": "^1.0.0",
+    "react-native-safe-area-view": "^1.1.1",
-    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-screens": "~2.10.1",
-    "react-native-web": "~0.11.7",
+    "react-native-web": "~0.14.8",
-    "react-redux": "^7.1.3",
+    "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",
+    "@babel/core": "~7.12.3",
-    "@types/i18n-js": "^3.0.1",
+    "@types/i18n-js": "^3.0.3",
-    "@types/react": "~16.9.0",
+    "@types/react": "~16.9.56",
-    "@types/react-native": "~0.60.23",
+    "@types/react-native": "~0.63.35",
-    "@types/react-redux": "^7.1.7",
+    "@types/react-redux": "^7.1.11",
-    "@types/yup": "^0.26.29",
+    "@types/yup": "^0.29.9",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "~10.1.0",
-    "babel-preset-expo": "~8.0.0",
+    "babel-preset-expo": "~8.3.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.13.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react": "^7.21.5",
-    "prettier": "^1.19.1"
+    "prettier": "^2.1.2"
   },
   "private": true
 }

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;

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' },
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    data: formData,
+    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 = () =>

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' }}>

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'}

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={{

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'}

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();