feat: authentication flow

@@ -10,7 +10,11 @@ import {
   HeaderStyleInterpolators,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 } from '@react-navigation/stack';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { MainTabParamList, MainStackParamList } from '../type/Navigation';
+import {
+  MainTabParamList,
+  MainStackParamList,
+  AuthStackParamList,
+} from '../type/Navigation';
 import SystemInfo from './SystemInfo';
 import SystemInfo from './SystemInfo';
 import DesignList from './DesignList';
 import DesignList from './DesignList';
 import { useDarkMode } from 'react-native-dark-mode';
 import { useDarkMode } from 'react-native-dark-mode';
@@ -27,6 +31,9 @@ import { useDeepLinking } from '../utility/handleDeepLinking';
 import { navigationRef, useMountedRef } from '../utility/rootNavigation';
 import { navigationRef, useMountedRef } from '../utility/rootNavigation';
 import ShortcutPage from './ShortcutItem';
 import ShortcutPage from './ShortcutItem';
 import useQuickAction from '../utility/useQuickAction';
 import useQuickAction from '../utility/useQuickAction';
+import { useReduxState } from '../store/hooks';
+import LoginScreen from './Login';
+import MeScreen from './Me';
 
 
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 
 
@@ -36,7 +43,7 @@ function getTabHeader(
   }
   }
 ) {
 ) {
   const { state } = route;
   const { state } = route;
-  if (!state) return 'SystemInfo';
+  if (!state) return 'Library';
   const { routeNames, index } = state;
   const { routeNames, index } = state;
   const routeName = routeNames[index] as keyof MainTabParamList;
   const routeName = routeNames[index] as keyof MainTabParamList;
   return routeName;
   return routeName;
@@ -78,6 +85,10 @@ const Home = () => {
                     name={focused ? 'ios-list-box' : 'ios-list'}
                     name={focused ? 'ios-list-box' : 'ios-list'}
                   />
                   />
                 );
                 );
+              case 'Me':
+                return (
+                  <Ionicons size={size} color={color} name={'ios-person'} />
+                );
               default:
               default:
                 break;
                 break;
             }
             }
@@ -88,15 +99,19 @@ const Home = () => {
       <MainTab.Screen name="Library" component={Library} />
       <MainTab.Screen name="Library" component={Library} />
       <MainTab.Screen name="SystemInfo" component={SystemInfo} />
       <MainTab.Screen name="SystemInfo" component={SystemInfo} />
       <MainTab.Screen name="DesignList" component={DesignList} />
       <MainTab.Screen name="DesignList" component={DesignList} />
+      <MainTab.Screen name="Me" component={MeScreen} />
     </MainTab.Navigator>
     </MainTab.Navigator>
   );
   );
 };
 };
 
 
 const MainStack = createStackNavigator<MainStackParamList>();
 const MainStack = createStackNavigator<MainStackParamList>();
 
 
+const AuthStack = createStackNavigator<AuthStackParamList>();
+
 const Container = () => {
 const Container = () => {
   const inDarkMode = useDarkMode();
   const inDarkMode = useDarkMode();
   const strings = useI18nStrings();
   const strings = useI18nStrings();
+  const user = useReduxState('user');
 
 
   useMountedRef();
   useMountedRef();
   useDeepLinking();
   useDeepLinking();
@@ -107,36 +122,42 @@ const Container = () => {
       ref={navigationRef}
       ref={navigationRef}
       theme={inDarkMode ? themeForNav.dark : themeForNav.light}
       theme={inDarkMode ? themeForNav.dark : themeForNav.light}
     >
     >
-      <MainStack.Navigator
-        screenOptions={{
-          headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-          headerTruncatedBackTitle: strings.navigation.back,
-        }}
-      >
-        <MainStack.Screen
-          name="MainTab"
-          component={Home}
-          options={({ route }) => {
-            return { headerTitle: getTabHeader(route) };
+      {user.token ? (
+        <MainStack.Navigator
+          screenOptions={{
+            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+            headerTruncatedBackTitle: strings.navigation.back,
           }}
           }}
-        />
-        <MainStack.Screen
-          name="RNDeviceInfoList"
-          component={RNDeviceInfoList}
-        />
-        <MainStack.Screen
-          name="WebviewScreen"
-          component={WebviewScreen}
-          options={({ navigation, route }) => ({
-            // FIXME: https://github.com/react-native-community/react-native-webview/issues/575#issuecomment-587267906
-            animationEnabled: Platform.OS === 'ios',
-          })}
-        />
-        <MainStack.Screen name="RNLocalize" component={RNLocalize} />
-        <MainStack.Screen name="RNCamera" component={CameraScreen} />
-        <MainStack.Screen name="RNCode" component={ReadableCode} />
-        <MainStack.Screen name="ShortcutItem" component={ShortcutPage} />
-      </MainStack.Navigator>
+        >
+          <MainStack.Screen
+            name="MainTab"
+            component={Home}
+            options={({ route }) => {
+              return { headerTitle: getTabHeader(route) };
+            }}
+          />
+          <MainStack.Screen
+            name="RNDeviceInfoList"
+            component={RNDeviceInfoList}
+          />
+          <MainStack.Screen
+            name="WebviewScreen"
+            component={WebviewScreen}
+            options={({ navigation, route }) => ({
+              // FIXME: https://github.com/react-native-community/react-native-webview/issues/575#issuecomment-587267906
+              animationEnabled: Platform.OS === 'ios',
+            })}
+          />
+          <MainStack.Screen name="RNLocalize" component={RNLocalize} />
+          <MainStack.Screen name="RNCamera" component={CameraScreen} />
+          <MainStack.Screen name="RNCode" component={ReadableCode} />
+          <MainStack.Screen name="ShortcutItem" component={ShortcutPage} />
+        </MainStack.Navigator>
+      ) : (
+        <AuthStack.Navigator>
+          <AuthStack.Screen name="Login" component={LoginScreen} />
+        </AuthStack.Navigator>
+      )}
     </NavigationContainer>
     </NavigationContainer>
   );
   );
 };
 };

+import React, { useCallback, useState } from 'react';
+import { BGScroll, Card, ListItem, Divider } from '../component/View';
+import { useReduxDispatch, useReduxState } from '../store/hooks';
+import { rootActions } from '../store';
+import { Alert } from 'react-native';
+
+const LoginScreen = () => {
+  const { list, current } = useReduxState('user');
+  const dispatch = useReduxDispatch();
+
+  const [userName, setUserName] = useState(current?.name);
+
+  const onLogin = useCallback(() => {
+    const newToken = userName ? 'yes!' + userName : 'no:(';
+    if (userName) {
+      const filtered = list.filter(u => u.name === userName)[0];
+      if (filtered) {
+        dispatch(rootActions.userActions.setCurrentUser(filtered));
+      } else {
+        const newUser = { name: userName };
+        dispatch(rootActions.userActions.addUser(newUser));
+        dispatch(rootActions.userActions.setCurrentUser(newUser));
+      }
+    }
+    dispatch(rootActions.userActions.setToken(newToken));
+  }, [userName, dispatch, list]);
+
+  return (
+    <BGScroll>
+      <Card round>
+        <ListItem
+          title="User Name"
+          rightTitle={userName}
+          onPress={() => {
+            Alert.prompt('Your name?', undefined, setUserName);
+          }}
+        />
+        <Divider />
+        <ListItem title="login" onPress={onLogin} />
+      </Card>
+    </BGScroll>
+  );
+};
+
+export default LoginScreen;

+import React, { useCallback } from 'react';
+import { BGScroll, Card, ListItem } from '../../component/View';
+import { useReduxState, useReduxDispatch } from '../../store/hooks';
+import { rootActions } from '../../store';
+
+const MeScreen = () => {
+  const { current } = useReduxState('user');
+  const dispatch = useReduxDispatch();
+
+  const onLogout = useCallback(() => {
+    dispatch(rootActions.userActions.setToken(null));
+  }, [dispatch]);
+
+  return (
+    <BGScroll white>
+      <Card shadow>
+        <ListItem title={current?.name ?? '请登录'} />
+      </Card>
+      <Card shadow>
+        <ListItem title={'Log out'} onPress={onLogout} />
+      </Card>
+    </BGScroll>
+  );
+};
+
+export default MeScreen;

 import { createAction } from 'typesafe-actions';
 import { createAction } from 'typesafe-actions';
 import { UserActionTypes, User } from './types';
 import { UserActionTypes, User } from './types';
 
 
-export const setToken = createAction(UserActionTypes.SET_TOKEN)<string>();
+export const setToken = createAction(UserActionTypes.SET_TOKEN)<
+  string | null
+>();
 
 
 export const setCurrentUser = createAction(UserActionTypes.SET_CURRENT)<User>();
 export const setCurrentUser = createAction(UserActionTypes.SET_CURRENT)<User>();
 
 

@@ -6,6 +6,7 @@ export type MainTabParamList = {
   Library: undefined;
   Library: undefined;
   SystemInfo: undefined;
   SystemInfo: undefined;
   DesignList: undefined;
   DesignList: undefined;
+  Me: undefined;
 };
 };
 
 
 export type MainStackParamList = {
 export type MainStackParamList = {
@@ -18,6 +19,10 @@ export type MainStackParamList = {
   ShortcutItem: { id?: string };
   ShortcutItem: { id?: string };
 };
 };
 
 
+export type AuthStackParamList = {
+  Login: undefined;
+};
+
 export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
 export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
   navigation: CompositeNavigationProp<
   navigation: CompositeNavigationProp<
     BottomTabNavigationProp<MainTabParamList, RouteName>,
     BottomTabNavigationProp<MainTabParamList, RouteName>,
@@ -30,3 +35,8 @@ export type MainStackScreenProps<RouteName extends keyof MainStackParamList> = {
   navigation: StackNavigationProp<MainStackParamList, RouteName>;
   navigation: StackNavigationProp<MainStackParamList, RouteName>;
   route: RouteProp<MainStackParamList, RouteName>;
   route: RouteProp<MainStackParamList, RouteName>;
 };
 };
+
+export type AuthStackScreenProps<RouteName extends keyof AuthStackParamList> = {
+  navigation: StackNavigationProp<AuthStackParamList, RouteName>;
+  route: RouteProp<AuthStackParamList, RouteName>;
+};