Auth flow revamp

keep-starknet-strange · Jun 2, 2024 · 611d355 · 611d355
1 parent 2ca7c8d
commit 611d355
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 551 deletions.
diff --git a/JoyboyCommunity/package.json b/JoyboyCommunity/package.json
@@ -33,6 +33,7 @@
     "dayjs": "^1.11.11",
     "events": "^3.3.0",
     "expo": "~51.0.8",
+    "expo-clipboard": "~6.0.3",
     "expo-crypto": "~13.0.2",
     "expo-secure-store": "~13.0.1",
     "expo-splash-screen": "~0.27.4",

diff --git a/JoyboyCommunity/src/app/Router.tsx b/JoyboyCommunity/src/app/Router.tsx
@@ -5,13 +5,14 @@ import {View} from 'react-native';
 import {useTheme} from 'styled-components/native';
 
 import {HomeIcon, IndicatorIcon, MessageIcon, SearchIcon, UserIcon} from '../assets/icons';
-import Login from '../modules/login';
+import {CreateAccount} from '../screens/Auth/CreateAccount';
+import {Login} from '../screens/Auth/Login';
+import {SaveKeys} from '../screens/Auth/SaveKeys';
 import {CreatePost} from '../screens/CreatePost';
 import {Feed} from '../screens/Feed';
 import {PostDetail} from '../screens/PostDetail';
 import {Profile} from '../screens/Profile';
 import {useAuth} from '../store/auth';
-import {useNavigationStore} from '../store/navigation';
 import {AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams} from '../types';
 
 const RootStack = createNativeStackNavigator<RootStackParams>();
@@ -115,6 +116,8 @@ const AuthNavigator: React.FC = () => {
   return (
     <AuthStack.Navigator screenOptions={{headerShown: false}}>
       <AuthStack.Screen name="Login" component={Login} />
+      <AuthStack.Screen name="CreateAccount" component={CreateAccount} />
+      <AuthStack.Screen name="SaveKeys" component={SaveKeys} />
     </AuthStack.Navigator>
   );
 };
@@ -131,7 +134,7 @@ const MainNavigator: React.FC = () => {
 };
 
 const RootNavigator: React.FC = () => {
-  const stack = useNavigationStore((state) => state.stack);
+  const {publicKey} = useAuth();
   const theme = useTheme();
 
   return (
@@ -143,9 +146,11 @@ const RootNavigator: React.FC = () => {
         },
       }}
     >
-      {stack === 'login' && <RootStack.Screen name="AuthStack" component={AuthNavigator} />}
-
-      {stack === 'app' && <RootStack.Screen name="MainStack" component={MainNavigator} />}
+      {publicKey ? (
+        <RootStack.Screen name="MainStack" component={MainNavigator} />
+      ) : (
+        <RootStack.Screen name="AuthStack" component={AuthNavigator} />
+      )}
     </RootStack.Navigator>
   );
 };

diff --git a/JoyboyCommunity/src/components/Button/styles.ts b/JoyboyCommunity/src/components/Button/styles.ts
@@ -26,17 +26,17 @@ export default ThemedStyleSheet(
         paddingHorizontal: Spacing.large,
       }),
 
-      ...(disabled && {
-        backgroundColor: theme.colors.buttonDisabledBackground,
-      }),
-
       ...(variant === 'primary' && {
         backgroundColor: theme.colors.primary,
       }),
 
       ...(variant === 'secondary' && {
         backgroundColor: theme.colors.secondary,
       }),
+
+      ...(disabled && {
+        backgroundColor: theme.colors.buttonDisabledBackground,
+      }),
     },
 
     text: {
@@ -48,17 +48,17 @@ export default ThemedStyleSheet(
         fontSize: 14,
       }),
 
-      ...(disabled && {
-        color: theme.colors.buttonDisabledText,
-      }),
-
       ...(variant === 'primary' && {
         color: theme.colors.onPrimary,
       }),
 
       ...(variant === 'secondary' && {
         color: theme.colors.onSecondary,
       }),
+
+      ...(disabled && {
+        color: theme.colors.buttonDisabledText,
+      }),
     },
   }),
 );
diff --git a/JoyboyCommunity/src/components/Input/index.tsx b/JoyboyCommunity/src/components/Input/index.tsx
@@ -33,7 +33,7 @@ export const Input: React.FC<InputProps> = (props) => {
   } = props;
 
   const theme = useTheme();
-  const styles = useStyles(stylesheet, !!error);
+  const styles = useStyles(stylesheet, !!error, !!left, !!right);
 
   return (
     <View style={[styles.container, containerStyleProp]}>
@@ -43,12 +43,7 @@ export const Input: React.FC<InputProps> = (props) => {
         <TextInput
           value={value}
           placeholder={placeholder}
-          style={[
-            styles.input,
-            left && styles.inputWithLeft,
-            right && styles.inputWithRight,
-            inputStyleProp,
-          ]}
+          style={[styles.input, inputStyleProp]}
           placeholderTextColor={theme.colors.inputPlaceholder}
           underlineColorAndroid="transparent"
           {...inputProps}

diff --git a/JoyboyCommunity/src/components/Input/styles.ts b/JoyboyCommunity/src/components/Input/styles.ts
@@ -1,6 +1,6 @@
 import {Spacing, ThemedStyleSheet, Typography} from '../../styles';
 
-export default ThemedStyleSheet((theme, error: boolean) => ({
+export default ThemedStyleSheet((theme, error: boolean, left: boolean, right: boolean) => ({
   container: {
     width: '100%',
   },
@@ -18,6 +18,14 @@ export default ThemedStyleSheet((theme, error: boolean) => ({
       backgroundColor: theme.colors.errorLight,
       borderColor: theme.colors.errorDark,
     }),
+
+    ...(left && {
+      paddingLeft: Spacing.small,
+    }),
+
+    ...(right && {
+      paddingRight: Spacing.small,
+    }),
   },
 
   input: {
@@ -27,12 +35,14 @@ export default ThemedStyleSheet((theme, error: boolean) => ({
     color: theme.colors.inputText,
     fontSize: 15,
     ...Typography.semiBold,
-  },
-  inputWithLeft: {
-    paddingLeft: Spacing.small,
-  },
-  inputWithRight: {
-    paddingRight: Spacing.small,
+
+    ...(left && {
+      paddingLeft: Spacing.none,
+    }),
+
+    ...(right && {
+      paddingRight: Spacing.none,
+    }),
   },
 
   errorText: {

diff --git a/JoyboyCommunity/src/modules/auth/index.tsx → JoyboyCommunity/src/modules/Auth/index.tsx b/JoyboyCommunity/src/modules/auth/index.tsx → JoyboyCommunity/src/modules/Auth/index.tsx
@@ -1,14 +1,17 @@
 import {Image, View} from 'react-native';
 
 import {Text} from '../../components';
-import styles from './styles';
+import {useStyles} from '../../hooks';
+import stylesheet from './styles';
 
 export type AuthProps = {
   title: string;
   children?: React.ReactNode;
 };
 
 export const Auth: React.FC<AuthProps> = ({title, children}) => {
+  const styles = useStyles(stylesheet);
+
   return (
     <View style={styles.container}>
       <View style={styles.background}>

diff --git a/JoyboyCommunity/src/modules/auth/styles.ts → JoyboyCommunity/src/modules/Auth/styles.ts b/JoyboyCommunity/src/modules/auth/styles.ts → JoyboyCommunity/src/modules/Auth/styles.ts
@@ -1,8 +1,8 @@
-import {StyleSheet} from 'react-native';
+import {Spacing, ThemedStyleSheet} from '../../styles';
 
 const LOGO_SIZE = 170;
 
-export default StyleSheet.create({
+export default ThemedStyleSheet((theme) => ({
   container: {
     flex: 1,
   },
@@ -27,7 +27,7 @@ export default StyleSheet.create({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.surface,
     borderTopLeftRadius: 50,
     borderTopRightRadius: 50,
   },
@@ -42,18 +42,18 @@ export default StyleSheet.create({
     width: LOGO_SIZE,
     height: LOGO_SIZE,
     borderWidth: 5,
-    borderColor: 'white',
+    borderColor: theme.colors.surface,
     borderRadius: 999,
   },
   title: {
-    marginVertical: 24,
+    marginVertical: Spacing.large,
   },
 
   content: {
     flex: 1,
     alignItems: 'center',
-    gap: 16,
-    paddingHorizontal: 16,
-    backgroundColor: 'white',
+    gap: Spacing.medium,
+    paddingHorizontal: Spacing.medium,
+    backgroundColor: theme.colors.surface,
   },
-});
+}));