feat: add support for persist storage (#19)

casdoor · Aug 10, 2024 · 3b46a8a · 3b46a8a
1 parent 4ece6ca
commit 3b46a8a
Show file tree

Hide file tree

Showing 17 changed files with 1,297 additions and 1,263 deletions.
diff --git a/Account.js b/Account.js
diff --git a/App.js b/App.js
@@ -15,28 +15,24 @@
 import * as React from "react";
 import {PaperProvider} from "react-native-paper";
 import {NavigationContainer} from "@react-navigation/native";
+import {BulletList} from "react-content-loader/native";
+import {SQLiteProvider} from "expo-sqlite";
 import Header from "./Header";
 import NavigationBar from "./NavigationBar";
-import {UserProvider} from "./UserContext";
-import {CasdoorServerProvider} from "./CasdoorServerContext";
+import {migrateDb} from "./TotpDatabase";
 
 const App = () => {
-
-  const [userInfo, setUserInfo] = React.useState(null);
-  const [token, setToken] = React.useState(null);
-  const [casdoorServer, setCasdoorServer] = React.useState(null);
-
   return (
-    <CasdoorServerProvider value={{casdoorServer, setCasdoorServer}} >
-      <UserProvider value={{userInfo, setUserInfo, token, setToken}} >
+    <React.Suspense fallback={<BulletList />}>
+      <SQLiteProvider databaseName="totp.db" onInit={migrateDb} options={{enableChangeListener: true}}>
         <NavigationContainer>
           <PaperProvider>
             <Header />
             <NavigationBar />
           </PaperProvider>
         </NavigationContainer>
-      </UserProvider>
-    </CasdoorServerProvider>
+      </SQLiteProvider>
+    </React.Suspense>
   );
 };
 export default App;
diff --git a/CasdoorLoginPage.js b/CasdoorLoginPage.js
@@ -12,15 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {WebView} from "react-native-webview";
 import {View} from "react-native";
 import {Portal} from "react-native-paper";
 import SDK from "casdoor-react-native-sdk";
-import UserContext from "./UserContext";
 import PropTypes from "prop-types";
 import EnterCasdoorSdkConfig from "./EnterCasdoorSdkConfig";
-import CasdoorServerContext from "./CasdoorServerContext";
+import useStore from "./useStorage";
 // import {LogBox} from "react-native";
 // LogBox.ignoreAllLogs();
 
@@ -29,10 +28,20 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
   CasdoorLoginPage.propTypes = {
     onWebviewClose: PropTypes.func.isRequired,
   };
-  const [casdoorLoginURL, setCasdoorLoginURL] = React.useState("");
-  const {setUserInfo, setToken} = React.useContext(UserContext);
-  const [showConfigPage, setShowConfigPage] = React.useState(true);
-  const {casdoorServer} = React.useContext(CasdoorServerContext);
+  const [casdoorLoginURL, setCasdoorLoginURL] = useState("");
+  const [showConfigPage, setShowConfigPage] = useState(true);
+
+  const {
+    serverUrl,
+    clientId,
+    redirectPath,
+    appName,
+    organizationName,
+    getCasdoorConfig,
+    setUserInfo,
+    setToken,
+  } = useStore();
+
   const handleHideConfigPage = () => {
     setShowConfigPage(false);
   };
@@ -42,14 +51,15 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
   };
 
   useEffect(() => {
-    if (casdoorServer) {
-      sdk = new SDK(casdoorServer);
+    if (serverUrl && clientId && redirectPath && appName && organizationName) {
+      sdk = new SDK(getCasdoorConfig());
       getCasdoorSignInUrl();
     }
-  }, [casdoorServer]);
+  }, [serverUrl, clientId, redirectPath, appName, organizationName]);
 
   const onNavigationStateChange = async(navState) => {
-    if (navState.url.startsWith(casdoorServer.redirectPath)) {
+    const {redirectPath} = getCasdoorConfig();
+    if (navState.url.startsWith(redirectPath)) {
       onWebviewClose();
       const token = await sdk.getAccessToken(navState.url);
       const userInfo = sdk.JwtDecode(token);
@@ -75,7 +85,9 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
     </Portal>
   );
 };
+
 export const CasdoorLogout = () => {
-  sdk.clearState();
+  if (sdk) {sdk.clearState();}
 };
+
 export default CasdoorLoginPage;
diff --git a/CasdoorServerContext.js b/CasdoorServerContext.js
diff --git a/EditAccountDetails.js b/EditAccountDetails.js
@@ -29,6 +29,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
   const handleConfirm = () => {
     onEdit(accountName);
   };
+
   return (
     <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
       <Text style={{fontSize: 24, marginBottom: 5}}>Enter new account name</Text>

diff --git a/EnterCasdoorSdkConfig.js b/EnterCasdoorSdkConfig.js
@@ -12,52 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useState} from "react";
+import React from "react";
 import {Alert, Text, View} from "react-native";
 import {Button, IconButton, Portal, TextInput} from "react-native-paper";
 import DefaultCasdoorSdkConfig from "./DefaultCasdoorSdkConfig";
-import CasdoorServerContext from "./CasdoorServerContext";
 import PropTypes from "prop-types";
+import useStore from "./useStorage";
 
 const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
   EnterCasdoorSdkConfig.propTypes = {
     onClose: PropTypes.func.isRequired,
   };
-  const {setCasdoorServer} = React.useContext(CasdoorServerContext);
 
-  const [CasdoorSdkConfig, setCasdoorSdkConfig] = useState({
-    serverUrl: "",
-    clientId: "",
-    appName: "",
-    organizationName: "",
-    redirectPath: "http://casdoor-app",
-    signinPath: "/api/signin",
-  });
-
-  const handleInputChange = (key, value) => {
-    setCasdoorSdkConfig({...CasdoorSdkConfig, [key]: value});
-  };
+  const {
+    serverUrl,
+    clientId,
+    redirectPath,
+    appName,
+    organizationName,
+    setServerUrl,
+    setClientId,
+    setAppName,
+    setOrganizationName,
+    setCasdoorConfig,
+  } = useStore();
 
   const closeConfigPage = () => {
     onClose();
     onWebviewClose();
   };
+
   const handleSave = () => {
-    if (
-      !CasdoorSdkConfig.serverUrl ||
-      !CasdoorSdkConfig.clientId ||
-      !CasdoorSdkConfig.appName ||
-      !CasdoorSdkConfig.organizationName ||
-      !CasdoorSdkConfig.redirectPath
-    ) {
+    if (!serverUrl || !clientId || !appName || !organizationName || !redirectPath) {
       Alert.alert("Please fill in all the fields!");
       return;
     }
-    setCasdoorServer(CasdoorSdkConfig);
     onClose();
   };
+
   const handleUseDefault = () => {
-    setCasdoorServer(DefaultCasdoorSdkConfig);
+    setCasdoorConfig(DefaultCasdoorSdkConfig);
     onClose();
   };
 
@@ -68,8 +62,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
           <Text style={{fontSize: 24, marginBottom: 5}}>Casdoor server</Text>
           <TextInput
             label="Endpoint"
-            value={CasdoorSdkConfig.serverUrl}
-            onChangeText={(text) => handleInputChange("serverUrl", text)}
+            value={serverUrl}
+            onChangeText={setServerUrl}
             autoCapitalize="none"
             style={{
               borderWidth: 3,
@@ -85,8 +79,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
           />
           <TextInput
             label="ClientID"
-            value={CasdoorSdkConfig.clientId}
-            onChangeText={(text) => handleInputChange("clientId", text)}
+            value={clientId}
+            onChangeText={setClientId}
             autoCapitalize="none"
             style={{
               borderWidth: 3,
@@ -102,8 +96,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
           />
           <TextInput
             label="appName"
-            value={CasdoorSdkConfig.appName}
-            onChangeText={(text) => handleInputChange("appName", text)}
+            value={appName}
+            onChangeText={setAppName}
             autoCapitalize="none"
             style={{
               borderWidth: 3,
@@ -119,8 +113,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
           />
           <TextInput
             label="organizationName"
-            value={CasdoorSdkConfig.organizationName}
-            onChangeText={(text) => handleInputChange("organizationName", text)}
+            value={organizationName}
+            onChangeText={setOrganizationName}
             autoCapitalize="none"
             style={{
               borderWidth: 3,
@@ -173,4 +167,5 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
     </Portal>
   );
 };
+
 export default EnterCasdoorSdkConfig;