feat: fix new user null bug and text input bug (#31)

casdoor · Oct 27, 2024 · ea4f542 · ea4f542
1 parent 4fef2a2
commit ea4f542
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 92 deletions.
diff --git a/App.js b/App.js
@@ -12,7 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as React from "react";
+import React from "react";
+import {Lato_700Bold, useFonts} from "@expo-google-fonts/lato";
+import {Roboto_500Medium} from "@expo-google-fonts/roboto";
 import {NavigationContainer} from "@react-navigation/native";
 import {PaperProvider} from "react-native-paper";
 import {SafeAreaView, Text} from "react-native";
@@ -29,6 +31,11 @@ import migrations from "./drizzle/migrations";
 
 const App = () => {
   const {success, error} = useMigrations(db, migrations);
+  const [fontsLoaded] = useFonts({
+    Lato_700Bold,
+    Roboto_500Medium,
+  });
+
   const {NotificationsProvider} = createNotifications({
     duration: 800,
     notificationPosition: "top",
@@ -53,25 +60,27 @@ const App = () => {
     );
   }
 
-  if (!success) {
+  if (!success || !fontsLoaded) {
     return (
-      <ContentLoader
-        speed={2}
-        width={400}
-        height={150}
-        viewBox="0 0 400 150"
-        backgroundColor="#f3f3f3"
-        foregroundColor="#ecebeb"
-      >
-        <Circle cx="10" cy="20" r="8" />
-        <Rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
-        <Circle cx="10" cy="50" r="8" />
-        <Rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
-        <Circle cx="10" cy="80" r="8" />
-        <Rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
-        <Circle cx="10" cy="110" r="8" />
-        <Rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
-      </ContentLoader>
+      <SafeAreaView style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
+        <ContentLoader
+          speed={2}
+          width={300}
+          height={150}
+          viewBox="0 0 300 150"
+          backgroundColor="#f3f3f3"
+          foregroundColor="#ecebeb"
+        >
+          <Circle cx="10" cy="20" r="8" />
+          <Rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
+          <Circle cx="10" cy="50" r="8" />
+          <Rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
+          <Circle cx="10" cy="80" r="8" />
+          <Rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
+          <Circle cx="10" cy="110" r="8" />
+          <Rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
+        </ContentLoader>
+      </SafeAreaView>
     );
   }
 

diff --git a/CasdoorLoginPage.js b/CasdoorLoginPage.js
@@ -127,6 +127,7 @@ function CasdoorLoginPage({onWebviewClose, initialMethod}) {
         <EnterCasdoorSdkConfig
           onClose={() => handleLogin(initialMethod)}
           onWebviewClose={onWebviewClose}
+          usePortal={false}
         />
       ),
       scanner: (

diff --git a/EnterCasdoorSdkConfig.js b/EnterCasdoorSdkConfig.js
@@ -19,7 +19,7 @@ import {useNotifications} from "react-native-notificated";
 import PropTypes from "prop-types";
 import useStore from "./useStorage";
 
-function EnterCasdoorSdkConfig({onClose, onWebviewClose}) {
+function EnterCasdoorSdkConfig({onClose, onWebviewClose, usePortal = true}) {
   const {
     serverUrl,
     clientId,
@@ -52,72 +52,73 @@ function EnterCasdoorSdkConfig({onClose, onWebviewClose}) {
     onClose();
   };
 
-  return (
-    <Portal>
-      <View style={styles.container}>
-        <View style={styles.content}>
-          <Text style={styles.title}>Casdoor Configuration</Text>
-          <View style={styles.formContainer}>
-            <TextInput
-              label="Endpoint"
-              value={serverUrl}
-              onChangeText={setServerUrl}
-              autoCapitalize="none"
-              style={styles.input}
-              mode="outlined"
-            />
-            <TextInput
-              label="Client ID"
-              value={clientId}
-              onChangeText={setClientId}
-              autoCapitalize="none"
-              style={styles.input}
-              mode="outlined"
-            />
-            <TextInput
-              label="App Name"
-              value={appName}
-              onChangeText={setAppName}
-              autoCapitalize="none"
-              style={styles.input}
-              mode="outlined"
-            />
-            <TextInput
-              label="Organization Name"
-              value={organizationName}
-              onChangeText={setOrganizationName}
-              autoCapitalize="none"
-              style={styles.input}
-              mode="outlined"
-            />
-          </View>
-          <View style={styles.buttonContainer}>
-            <Button
-              mode="outlined"
-              onPress={closeConfigPage}
-              style={styles.button}
-              labelStyle={styles.buttonLabel}
-            >
-              Cancel
-            </Button>
-            <Button
-              mode="contained"
-              onPress={handleSave}
-              style={styles.button}
-              labelStyle={styles.buttonLabel}
-            >
-              Confirm
-            </Button>
-          </View>
+  const content = (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Casdoor Configuration</Text>
+        <View style={styles.formContainer}>
+          <TextInput
+            label="Endpoint"
+            value={serverUrl}
+            onChangeText={setServerUrl}
+            autoCapitalize="none"
+            style={styles.input}
+            mode="outlined"
+          />
+          <TextInput
+            label="Client ID"
+            value={clientId}
+            onChangeText={setClientId}
+            autoCapitalize="none"
+            style={styles.input}
+            mode="outlined"
+          />
+          <TextInput
+            label="App Name"
+            value={appName}
+            onChangeText={setAppName}
+            autoCapitalize="none"
+            style={styles.input}
+            mode="outlined"
+          />
+          <TextInput
+            label="Organization Name"
+            value={organizationName}
+            onChangeText={setOrganizationName}
+            autoCapitalize="none"
+            style={styles.input}
+            mode="outlined"
+          />
+        </View>
+        <View style={styles.buttonContainer}>
+          <Button
+            mode="outlined"
+            onPress={closeConfigPage}
+            style={styles.button}
+            labelStyle={styles.buttonLabel}
+          >
+            Cancel
+          </Button>
+          <Button
+            mode="contained"
+            onPress={handleSave}
+            style={styles.button}
+            labelStyle={styles.buttonLabel}
+          >
+            Confirm
+          </Button>
         </View>
       </View>
-    </Portal>
+    </View>
   );
+
+  return usePortal ? <Portal>{content}</Portal> : content;
 }
 
 EnterCasdoorSdkConfig.propTypes = {
   onClose: PropTypes.func.isRequired,
   onWebviewClose: PropTypes.func.isRequired,
+  usePortal: PropTypes.bool,
 };
 
 const styles = StyleSheet.create({
@@ -142,7 +143,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
     fontWeight: "bold",
-    fontFamily: "Lato-Bold",
+    fontFamily: "Lato_700Bold",
     color: "#212121",
     textAlign: "center",
     marginBottom: 16,

diff --git a/Header.js b/Header.js
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
     fontSize: Math.max(24, width * 0.05),
     fontWeight: "bold",
     color: "#212121",
-    fontFamily: "Lato-Bold",
+    fontFamily: "Lato_700Bold",
   },
   buttonContainer: {
     borderRadius: 24,
@@ -179,7 +179,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginLeft: 8,
     color: "#424242",
-    fontFamily: "Roboto-Medium",
+    fontFamily: "Roboto_500Medium",
   },
   menuContent: {
     backgroundColor: "#FAFAFA",

diff --git a/api.js b/api.js
@@ -38,7 +38,10 @@ export const getMfaAccounts = async(serverUrl, owner, name, token, timeoutMs = T
       throw new Error(res.msg);
     }
 
-    return {updatedTime: res.data.updatedTime, mfaAccounts: res.data.mfaAccounts};
+    return {
+      updatedTime: res.data.updatedTime,
+      mfaAccounts: res.data.mfaAccounts || [],
+    };
   } catch (error) {
     if (error.name === "AbortError") {
       throw new Error("Request timed out");

diff --git a/app.json b/app.json
@@ -50,7 +50,8 @@
           "photosPermission": "The app accesses your photos to add Totp account."
         }
       ],
-      "expo-asset"
+      "expo-asset",
+      "expo-font"
     ],
     "owner": "casdoor"
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "release": "npx -p semantic-release-expo -p semantic-release -p @semantic-release/git -p @semantic-release/changelog -p @semantic-release/exec semantic-release"
   },
   "dependencies": {
+    "@expo-google-fonts/lato": "^0.2.3",
+    "@expo-google-fonts/roboto": "^0.2.3",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/masked-view": "^0.1.11",
@@ -21,13 +23,14 @@
     "casdoor-react-native-sdk": "1.1.0",
     "drizzle-orm": "^0.33.0",
     "eslint-plugin-import": "^2.28.1",
-    "expo": "~51.0.37",
+    "expo": "~51.0.38",
     "expo-asset": "~10.0.10",
     "expo-camera": "~15.0.16",
     "expo-crypto": "~13.0.2",
     "expo-dev-client": "~4.0.28",
     "expo-document-picker": "~12.0.2",
     "expo-drizzle-studio-plugin": "^0.0.2",
+    "expo-font": "~12.0.10",
     "expo-image": "~1.13.0",
     "expo-image-picker": "~15.0.7",
     "expo-sqlite": "^14.0.6",