feat: add casdoor web login.

App.js

@@ -17,14 +17,24 @@ import {PaperProvider} from "react-native-paper";
 import NavigationBar from "./NavigationBar";
 import {NavigationContainer} from "@react-navigation/native";
 import Header from "./Header";
+import {UserProvider} from "./UserContext";
+import {CasdoorServerProvider} from "./CasdoorServerContext";
 
-export default function App() {
+const App = () => {
+  const [userInfo, setUserInfo] = React.useState(null);
+  const [casdoorServer, setCasdoorServer] = React.useState(null);
   return (
-    <NavigationContainer>
-      <PaperProvider>
-        <Header />
-        <NavigationBar />
-      </PaperProvider>
-    </NavigationContainer>
+    <CasdoorServerProvider value={{casdoorServer, setCasdoorServer}} >
+      <UserProvider value={{userInfo, setUserInfo}} >
+        <NavigationContainer>
+          <PaperProvider>
+            <Header />
+            <NavigationBar />
+          </PaperProvider>
+        </NavigationContainer>
+      </UserProvider>
+    </CasdoorServerProvider>
+
   );
-}
+};
+export default App;

CasdoorLoginPage.js

@@ -0,0 +1,80 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {useEffect} 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 {LogBox} from "react-native";
+// LogBox.ignoreAllLogs();
+
+let sdk = null;
+const CasdoorLoginPage = ({onWebviewClose}) => {
+  CasdoorLoginPage.propTypes = {
+    onWebviewClose: PropTypes.func.isRequired,
+  };
+  const [casdoorLoginURL, setCasdoorLoginURL] = React.useState("");
+  const {setUserInfo} = React.useContext(UserContext);
+  const [showConfigPage, setShowConfigPage] = React.useState(true);
+  const {casdoorServer} = React.useContext(CasdoorServerContext);
+  const handleHideConfigPage = () => {
+    setShowConfigPage(false);
+  };
+  const getCasdoorSignInUrl = async() => {
+    const signinUrl = await sdk.getSigninUrl();
+    setCasdoorLoginURL(signinUrl);
+  };
+
+  useEffect(() => {
+    if (casdoorServer) {
+      sdk = new SDK(casdoorServer);
+      getCasdoorSignInUrl();
+    }
+  }, [casdoorServer]);
+
+  const onNavigationStateChange = async(navState) => {
+    if (navState.url.startsWith(casdoorServer.redirectPath)) {
+      onWebviewClose();
+      const token = await sdk.getAccessToken(navState.url);
+      const userInfo = sdk.JwtDecode(token);
+      setUserInfo(userInfo);
+    }
+  };
+
+  return (
+    <Portal>
+      <View style={{flex: 1}}>
+        {showConfigPage && <EnterCasdoorSdkConfig onClose={handleHideConfigPage} onWebviewClose={onWebviewClose} />}
+        {!showConfigPage && casdoorLoginURL !== "" && (
+          <WebView
+            source={{uri: casdoorLoginURL}}
+            onNavigationStateChange={onNavigationStateChange}
+            style={{flex: 1}}
+            mixedContentMode="always"
+            javaScriptEnabled={true}
+          />
+        )}
+      </View>
+    </Portal>
+  );
+};
+export const CasdoorLogout = () => {
+  sdk.clearState();
+};
+export default CasdoorLoginPage;

CasdoorServerContext.js

@@ -0,0 +1,20 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+
+const CasdoorServerContext = React.createContext();
+export const CasdoorServerProvider = CasdoorServerContext.Provider;
+export const CasdoorServerConsumer = CasdoorServerContext.Consumer;
+export default CasdoorServerContext;

DefaultCasdoorSdkConfig.js

@@ -0,0 +1,24 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const DefaultCasdoorSdkConfig = {
+  serverUrl: "https://door.casdoor.com",
+  clientId: "b800a86702dd4d29ec4d",
+  clientSecret: "1219843a8db4695155699be3a67f10796f2ec1d5",
+  appName: "app-example",
+  organizationName: "casbin",
+  redirectPath: "http://localhost:5000/callback",
+  signinPath: "/api/signin",
+};
+export default DefaultCasdoorSdkConfig;

EditAccountDetails.js

@@ -38,6 +38,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
           placeholder={placeholder}
           value={description}
           onChangeText={(text) => setDescription(text)}
+          autoCapitalize="none"
           style={{borderWidth: 3, borderColor: "white", margin: 10, width: 230, height: 50, borderRadius: 5, fontSize: 18, color: "gray", paddingLeft: 10}}
         />
       </View>

EnterAccountDetails.js

@@ -48,8 +48,10 @@ export default function EnterAccountDetails({onClose, onAdd}) {
       <View style={{flexDirection: "row", alignItems: "center"}}>
         <IconButton icon="account-details" size={35} />
         <TextInput
+          label="Description"
           placeholder="Description"
           value={description}
+          autoCapitalize="none"
           onChangeText={(text) => setDescription(text)}
           style={{borderWidth: 3, borderColor: "white", margin: 10, width: 230, height: 50, borderRadius: 5, fontSize: 18, color: "gray", paddingLeft: 10}}
         />
@@ -58,8 +60,10 @@ export default function EnterAccountDetails({onClose, onAdd}) {
       <View style={{flexDirection: "row", alignItems: "center"}}>
         <IconButton icon="account-key" size={35} />
         <TextInput
+          label="Secret code"
           placeholder="Secret code"
           value={secretCode}
+          autoCapitalize="none"
           onChangeText={(text) => setSecretCode(text)}
           secureTextEntry
           style={{borderWidth: 3, borderColor: "white", margin: 10, width: 230, height: 50, borderRadius: 5, fontSize: 18, color: "gray", paddingLeft: 10}}