feat: remove item not from device after logout (#42)

App.js

@@ -13,16 +13,19 @@
 // limitations under the License.
 
 import React from "react";
+import {SafeAreaView, Text} from "react-native";
+
 import {Lato_700Bold, useFonts} from "@expo-google-fonts/lato";
 import {Roboto_500Medium} from "@expo-google-fonts/roboto";
+import * as Crypto from "expo-crypto";
 import {NavigationContainer} from "@react-navigation/native";
 import {PaperProvider} from "react-native-paper";
-import {SafeAreaView, Text} from "react-native";
 import ContentLoader, {Circle, Rect} from "react-content-loader/native";
 import {ZoomInDownZoomOutUp, createNotifications} from "react-native-notificated";
 import {GestureHandlerRootView} from "react-native-gesture-handler";
 import {useMigrations} from "drizzle-orm/expo-sqlite/migrator";
 import {ActionSheetProvider} from "@expo/react-native-action-sheet";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import "./i18n";
 import Header from "./Header";
@@ -37,6 +40,17 @@ const App = () => {
     Roboto_500Medium,
   });
 
+  React.useEffect(() => {
+    const storeOrigin = async() => {
+      let origin = await AsyncStorage.getItem("origin");
+      if (!origin) {
+        origin = Crypto.randomUUID();
+        await AsyncStorage.setItem("origin", origin);
+      }
+    };
+    storeOrigin();
+  }, []);
+
   const {NotificationsProvider} = createNotifications({
     duration: 800,
     notificationPosition: "top",

CasdoorLoginPage.js

@@ -17,6 +17,7 @@ import {WebView} from "react-native-webview";
 import {Platform, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity} from "react-native";
 import {Portal} from "react-native-paper";
 import {useNotifications} from "react-native-notificated";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import SDK from "casdoor-react-native-sdk";
 import PropTypes from "prop-types";
 import EnterCasdoorSdkConfig from "./EnterCasdoorSdkConfig";
@@ -25,6 +26,7 @@ import useStore from "./useStorage";
 import DefaultCasdoorSdkConfig from "./DefaultCasdoorSdkConfig";
 import {useTranslation} from "react-i18next";
 import {useLanguageSync} from "./useLanguageSync";
+import {useEditAccount} from "./useAccountStore";
 
 let sdk = null;
 
@@ -208,10 +210,20 @@ const styles = StyleSheet.create({
   },
 });
 
-export const CasdoorLogout = () => {
-  if (sdk) {
-    sdk.clearState();
-  }
+export const useCasdoorLogout = () => {
+  const {deleteAccountByOrigin} = useEditAccount();
+
+  const logout = async() => {
+    const origin = await AsyncStorage.getItem("origin");
+
+    if (sdk) {
+      sdk.clearState();
+    }
+
+    deleteAccountByOrigin(origin);
+  };
+
+  return logout;
 };
 
 export default CasdoorLoginPage;

EditAccountDetails.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, {useState} from "react";
-import {Text, TextInput, View} from "react-native";
+import {StyleSheet, Text, TextInput, View} from "react-native";
 import {Button, IconButton} from "react-native-paper";
 import PropTypes from "prop-types";
 import {useTranslation} from "react-i18next";
@@ -26,40 +26,102 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
   };
 
   const {t} = useTranslation();
-  const [accountName, setAccountName] = useState("");
+  const [accountName, setAccountName] = useState(placeholder);
 
   const handleConfirm = () => {
     onEdit(accountName);
   };
 
   return (
-    <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
-      <Text style={{fontSize: 24, marginBottom: 5}}>{t("editAccount.Enter new account name")}</Text>
-      <View style={{flexDirection: "row", alignItems: "center"}}>
-        <IconButton icon="account-details" size={35} />
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text style={styles.title}>{t("editAccount.Enter new account name")}</Text>
+          <IconButton
+            icon="close"
+            size={24}
+            onPress={onClose}
+            style={styles.closeButton}
+          />
+        </View>
         <TextInput
+          label={t("editAccount.Account Name")}
           placeholder={placeholder}
           value={accountName}
           onChangeText={(text) => setAccountName(text)}
+          style={styles.input}
+          mode="outlined"
           autoCapitalize="none"
-          style={{borderWidth: 3, borderColor: "white", margin: 10, width: 230, height: 50, borderRadius: 5, fontSize: 18, color: "gray", paddingLeft: 10}}
         />
+        <View style={styles.buttonContainer}>
+          <Button
+            mode="contained"
+            onPress={handleConfirm}
+            style={styles.addButton}
+            labelStyle={styles.buttonLabel}
+          >
+            {t("common.confirm")}
+          </Button>
+        </View>
       </View>
-      <Button
-        style={{
-          backgroundColor: "#E6DFF3",
-          borderRadius: 5,
-          margin: 10,
-          alignItems: "center",
-          position: "absolute",
-          top: 160,
-          width: 300,
-        }}
-        onPress={handleConfirm}
-      >
-        <Text style={{fontSize: 18, width: 280}}>{t("common.confirm")}</Text>
-      </Button>
-      <IconButton icon={"close"} size={30} onPress={onClose} style={{position: "absolute", top: 5, right: 5}} />
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 10,
+  },
+  content: {
+    width: "100%",
+    maxWidth: 500,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative",
+    minHeight: 32,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#333",
+    position: "absolute",
+    left: 40,
+    right: 40,
+    textAlign: "center",
+    numberOfLines: 1,
+  },
+  closeButton: {
+    marginLeft: "auto",
+    zIndex: 1,
+  },
+  input: {
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    fontSize: 16,
+    height: 50,
+    backgroundColor: "#F5F5F5",
+    borderRadius: 10,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+  },
+  addButton: {
+    flex: 1,
+    backgroundColor: "#8A7DF7",
+    height: 50,
+    justifyContent: "center",
+    paddingHorizontal: 5,
+  },
+  buttonLabel: {
+    fontSize: 14,
+    color: "white",
+    textAlign: "center",
+  },
+});

Header.js

@@ -17,7 +17,7 @@ import {Dimensions, StyleSheet, View} from "react-native";
 import {Appbar, Avatar, Menu, Text, TouchableRipple} from "react-native-paper";
 import {useNotifications} from "react-native-notificated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import CasdoorLoginPage, {CasdoorLogout} from "./CasdoorLoginPage";
+import CasdoorLoginPage, {useCasdoorLogout} from "./CasdoorLoginPage";
 import useStore from "./useStorage";
 import {useAccountSync} from "./useAccountStore";
 import LoginMethodSelector from "./LoginMethodSelector";
@@ -35,6 +35,7 @@ const Header = () => {
   const {t} = useTranslation();
   const openMenu = () => setMenuVisible(true);
   const closeMenu = () => setMenuVisible(false);
+  const logout = useCasdoorLogout();
 
   const handleMenuLogoutClicked = () => {
     handleCasdoorLogout();
@@ -57,7 +58,7 @@ const Header = () => {
   };
 
   const handleCasdoorLogout = () => {
-    CasdoorLogout();
+    logout();
     clearAll();
     clearSyncError();
   };