@oxyhq/services 5.12.11 → 5.13.1

package/lib/module/ui/screens/steps/SignInUsernameStep.js

@@ -1,16 +1,24 @@
 "use strict";
 
-import { useRef, useEffect } from 'react';
-import { View, Text } from 'react-native';
+import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import { View, Text, Platform, StyleSheet, ActivityIndicator } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import HighFive from '../../../assets/illustrations/HighFive';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
+import { stepStyles } from '../../styles/spacing';
+import Avatar from '../../components/Avatar';
+import { TouchableOpacity } from 'react-native';
+import { useOxy } from '../../context/OxyContext';
+import { toast } from '../../../lib/sonner';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MAX_QUICK_ACCOUNTS = 3;
+const getThemeMode = theme => theme === 'dark' ? 'dark' : 'light';
 const SignInUsernameStep = ({
   colors,
   styles,
+  theme,
   navigate,
   nextStep,
   username,
@@ -28,86 +36,221 @@ const SignInUsernameStep = ({
   const {
     t
   } = useI18n();
+  const {
+    sessions,
+    activeSessionId,
+    switchSession,
+    oxyServices
+  } = useOxy();
+  const baseStyles = stepStyles;
+  const webShadowReset = Platform.OS === 'web' ? {
+    boxShadow: 'none'
+  } : null;
+  const themeMode = getThemeMode(theme);
+  const [quickAccounts, setQuickAccounts] = useState([]);
+  const [loadingAccounts, setLoadingAccounts] = useState(false);
+  const [switchingSessionId, setSwitchingSessionId] = useState(null);
+  const [showAccounts, setShowAccounts] = useState(false);
+  const otherSessions = useMemo(() => (sessions ?? []).filter(session => session.sessionId !== activeSessionId), [sessions, activeSessionId]);
+
+  // Show accounts if we have any sessions (either in add account mode or just have saved sessions)
+  const hasSessions = (sessions ?? []).length > 0;
+
+  // Use other sessions if in add account mode, otherwise show all sessions
+  const sessionsToShow = isAddAccountMode ? otherSessions : sessions ?? [];
 
-  // Monitor username prop changes
+  // Debug logging
+  if (__DEV__) {
+    console.log('SignInUsernameStep - Debug:', {
+      isAddAccountMode,
+      hasSessions,
+      sessionsCount: sessions?.length ?? 0,
+      otherSessionsCount: otherSessions.length,
+      sessionsToShowCount: sessionsToShow.length,
+      activeSessionId,
+      quickAccountsCount: quickAccounts.length,
+      loadingAccounts
+    });
+  }
   useEffect(() => {
-    console.log('👀 SignInUsernameStep username prop changed:', username);
-  }, [username]);
+    let cancelled = false;
+    const loadQuickAccounts = async () => {
+      // Show accounts if we have sessions and services available
+      // In add account mode, show other sessions; otherwise show all sessions
+      if (!hasSessions || !oxyServices) {
+        if (!cancelled) {
+          setQuickAccounts([]);
+          setLoadingAccounts(false);
+        }
+        return;
+      }
+
+      // If in add account mode and no other sessions, don't show anything
+      if (isAddAccountMode && sessionsToShow.length === 0) {
+        if (!cancelled) {
+          setQuickAccounts([]);
+          setLoadingAccounts(false);
+        }
+        return;
+      }
+
+      // If not in add account mode and no sessions, don't show anything
+      if (!isAddAccountMode && sessionsToShow.length === 0) {
+        if (!cancelled) {
+          setQuickAccounts([]);
+          setLoadingAccounts(false);
+        }
+        return;
+      }
+      setLoadingAccounts(true);
+      const targetSessions = sessionsToShow.slice(0, MAX_QUICK_ACCOUNTS);
+      try {
+        const results = await Promise.all(targetSessions.map(async session => {
+          try {
+            const profile = await oxyServices.getUserBySession(session.sessionId);
+            const displayName = profile?.name?.full || profile?.name?.first || profile?.username || 'Account';
+            return {
+              sessionId: session.sessionId,
+              username: profile?.username ?? 'account',
+              displayName,
+              avatar: profile?.avatar
+            };
+          } catch (error) {
+            if (__DEV__) {
+              console.error(`Failed to load profile for session ${session.sessionId}`, error);
+            }
+            return null;
+          }
+        }));
+        if (!cancelled) {
+          setQuickAccounts(results.filter(item => Boolean(item)));
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingAccounts(false);
+        }
+      }
+    };
+    void loadQuickAccounts();
+    return () => {
+      cancelled = true;
+    };
+  }, [hasSessions, sessionsToShow, oxyServices, isAddAccountMode]);
+  const handleSwitchAccount = useCallback(async sessionId => {
+    setSwitchingSessionId(sessionId);
+    try {
+      await switchSession(sessionId);
+      const switchedAccount = quickAccounts.find(account => account.sessionId === sessionId) ?? null;
+      const successMessage = t('signin.status.accountSwitched', {
+        name: switchedAccount?.displayName ?? t('signin.actions.openAccountSwitcher')
+      }) || 'Account switched';
+      toast.success(successMessage);
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Failed to switch account:', error);
+      }
+      toast.error(t('signin.actions.switchAccountFailed') || 'Unable to switch accounts. Please try again.');
+    } finally {
+      setSwitchingSessionId(null);
+    }
+  }, [quickAccounts, switchSession, t]);
+  const otherAccountsCount = sessionsToShow.length;
+
+  // Get all accounts for avatar display (current user + quick accounts)
+  const allAccountsForAvatars = useMemo(() => {
+    const accounts = [];
+
+    // Add current user if in add account mode
+    if (isAddAccountMode && user) {
+      accounts.push({
+        sessionId: activeSessionId || '',
+        displayName: user.name?.full || user.username || 'Account',
+        username: user.username,
+        avatar: user.avatar,
+        isCurrent: true
+      });
+    }
+
+    // Add quick accounts
+    quickAccounts.forEach(account => {
+      accounts.push({
+        sessionId: account.sessionId,
+        displayName: account.displayName,
+        username: account.username,
+        avatar: account.avatar,
+        isCurrent: account.sessionId === activeSessionId
+      });
+    });
+    return accounts;
+  }, [isAddAccountMode, user, quickAccounts, activeSessionId]);
   const handleUsernameChange = text => {
-    console.log('📝 Username input changed:', text);
-    setUsername(text);
+    // Text is already filtered by formatValue prop, but ensure it's clean
+    const filteredText = text.replace(/[^a-zA-Z0-9]/g, '');
+    setUsername(filteredText);
     if (errorMessage) setErrorMessage('');
   };
   const handleContinue = async () => {
-    console.log('🚀 Continue button pressed, username:', username);
     const trimmedUsername = username?.trim() || '';
     if (!trimmedUsername) {
-      console.log('❌ Username is empty');
-      setErrorMessage('Please enter your username.');
+      setErrorMessage(t('signin.username.required') || 'Please enter your username.');
       setTimeout(() => inputRef.current?.focus(), 0);
       return;
     }
-    if (trimmedUsername.length < 2) {
-      console.log('❌ Username too short');
-      setErrorMessage('Username must be at least 3 characters.');
+    if (trimmedUsername.length < 3) {
+      setErrorMessage(t('signin.username.minLength') || 'Username must be at least 3 characters.');
       return;
     }
-    console.log('🔍 Starting username validation...');
     try {
       // Validate the username before proceeding
       const isValid = await validateUsername(trimmedUsername);
-      console.log('📊 Validation result:', isValid);
       if (isValid) {
-        console.log('✅ Validation passed, proceeding to next step');
         nextStep();
-      } else {
-        console.log('❌ Validation failed, staying on current step');
       }
     } catch (error) {
-      console.error('🚨 Error during validation:', error);
+      if (__DEV__) console.error('Error during username validation:', error);
       setErrorMessage('Unable to validate username. Please try again.');
     }
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(HighFive, {
-      width: 100,
-      height: 100
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [baseStyles.container, baseStyles.sectionSpacing, {
+        alignItems: 'flex-start',
+        position: 'relative'
+      }],
+      children: [/*#__PURE__*/_jsx(HighFive, {
+        width: 100,
+        height: 100
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [stylesheet.languageButton, {
+          backgroundColor: colors.inputBackground
+        }],
+        onPress: () => navigate('LanguageSelector'),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "globe-outline",
+          size: 20,
+          color: colors.primary
+        })
+      })]
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
+      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.modernTitle, {
-          color: colors.text
+        style: [styles.modernTitle, baseStyles.title, {
+          color: colors.text,
+          marginBottom: 0,
+          marginTop: 0
         }],
-        children: isAddAccountMode ? t('signin.addAccountTitle') : t('signin.title')
+        children: t('signin.title')
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.modernSubtitle, {
-          color: colors.secondaryText
+        style: [styles.modernSubtitle, baseStyles.subtitle, {
+          color: colors.secondaryText,
+          marginBottom: 0,
+          marginTop: 0
         }],
-        children: isAddAccountMode ? t('signin.addAccountSubtitle') : t('signin.subtitle')
-      })]
-    }), isAddAccountMode && user && /*#__PURE__*/_jsxs(View, {
-      style: [styles.modernInfoCard, {
-        backgroundColor: colors.inputBackground
-      }],
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: "information-circle",
-        size: 20,
-        color: colors.primary
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: [styles.modernInfoText, {
-          color: colors.text
-        }],
-        children: [t('signin.currentlySignedInAs', {
-          username: user.username
-        }) || 'Currently signed in as ', /*#__PURE__*/_jsx(Text, {
-          style: {
-            fontWeight: 'bold'
-          },
-          children: user.username
-        })]
+        children: t('signin.subtitle')
       })]
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.modernInputContainer,
+      style: [baseStyles.container, baseStyles.sectionSpacing],
       children: /*#__PURE__*/_jsx(TextField, {
         ref: inputRef,
         label: t('common.labels.username'),
@@ -118,6 +261,8 @@ const SignInUsernameStep = ({
         }),
         value: username,
         onChangeText: handleUsernameChange,
+        formatValue: text => text.replace(/[^a-zA-Z0-9]/g, ''),
+        maxLength: 30,
         autoCapitalize: "none",
         autoCorrect: false,
         testID: "username-input",
@@ -125,27 +270,344 @@ const SignInUsernameStep = ({
         error: validationStatus === 'invalid' ? errorMessage : undefined,
         loading: validationStatus === 'validating',
         success: validationStatus === 'valid',
+        helperText: t('signin.username.helper') || '3-30 characters, letters and numbers only',
         onSubmitEditing: () => handleContinue(),
-        autoFocus: true
+        autoFocus: true,
+        accessibilityLabel: t('common.labels.username'),
+        accessibilityHint: t('signin.username.helper') || 'Enter your username, 3-30 characters, letters and numbers only',
+        style: {
+          marginBottom: 0
+        }
+      })
+    }), (isAddAccountMode && user || hasSessions && sessionsToShow.length > 0) && /*#__PURE__*/_jsxs(View, {
+      style: [baseStyles.container, baseStyles.sectionSpacing, stylesheet.dividerContainer],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [stylesheet.dividerLine, {
+          backgroundColor: colors.border
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [stylesheet.dividerText, {
+          color: colors.secondaryText
+        }],
+        children: t('signin.or') || 'or'
+      }), /*#__PURE__*/_jsx(View, {
+        style: [stylesheet.dividerLine, {
+          backgroundColor: colors.border
+        }]
+      })]
+    }), isAddAccountMode && user || hasSessions && sessionsToShow.length > 0 ? /*#__PURE__*/_jsxs(View, {
+      style: [baseStyles.container, baseStyles.sectionSpacing],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [stylesheet.toggleButton, {
+          backgroundColor: colors.inputBackground
+        }],
+        onPress: () => setShowAccounts(!showAccounts),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: stylesheet.toggleButtonContent,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: showAccounts ? 'chevron-down' : 'chevron-forward',
+            size: 18,
+            color: colors.primary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [stylesheet.toggleButtonText, {
+              color: colors.text
+            }],
+            children: t('signin.alreadySignedInWith') || 'Already signed in with'
+          }), allAccountsForAvatars.length > 0 && /*#__PURE__*/_jsx(View, {
+            style: stylesheet.avatarsContainer,
+            children: allAccountsForAvatars.slice(0, 5).map((account, index) => /*#__PURE__*/_jsx(View, {
+              style: [stylesheet.avatarWrapper, account.isCurrent && stylesheet.currentAvatarWrapper, index > 0 && {
+                marginLeft: -12
+              }, {
+                zIndex: Math.min(allAccountsForAvatars.length, 5) - index
+              }, {
+                borderColor: colors.inputBackground || colors.background || '#FFFFFF'
+              }],
+              children: /*#__PURE__*/_jsx(Avatar, {
+                name: account.displayName,
+                text: account.displayName.charAt(0).toUpperCase(),
+                size: 28,
+                theme: themeMode,
+                backgroundColor: colors.primary,
+                uri: account.avatar && oxyServices ? oxyServices.getFileDownloadUrl(account.avatar, 'thumb') : undefined
+              })
+            }, account.sessionId))
+          }), !showAccounts && (quickAccounts.length > 0 || otherAccountsCount > 0) && allAccountsForAvatars.length === 0 && /*#__PURE__*/_jsx(View, {
+            style: [stylesheet.accountCountBadge, {
+              backgroundColor: `${colors.primary}15`
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [stylesheet.accountCountText, {
+                color: colors.primary
+              }],
+              children: otherAccountsCount + (isAddAccountMode && user ? 1 : 0)
+            })
+          })]
+        })
+      }), showAccounts && /*#__PURE__*/_jsx(View, {
+        style: stylesheet.accountsList,
+        children: loadingAccounts && quickAccounts.length === 0 && !isAddAccountMode ? /*#__PURE__*/_jsx(View, {
+          style: stylesheet.accountItem,
+          children: /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: colors.primary,
+            size: "small"
+          })
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [isAddAccountMode && user && /*#__PURE__*/_jsxs(View, {
+            style: [stylesheet.accountItem, {
+              backgroundColor: colors.inputBackground
+            }],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [stylesheet.accountItemAvatarWrapper, {
+                borderColor: colors.inputBackground || colors.background || '#FFFFFF'
+              }],
+              children: /*#__PURE__*/_jsx(Avatar, {
+                name: user.name?.full || user.username,
+                text: (user.name?.full || user.username || 'U').slice(0, 1).toUpperCase(),
+                size: 36,
+                theme: themeMode,
+                backgroundColor: colors.primary,
+                uri: user.avatar && oxyServices ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: stylesheet.accountItemText,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [stylesheet.accountItemName, {
+                  color: colors.text
+                }],
+                numberOfLines: 1,
+                children: user.name?.full || user.username
+              }), user.username && /*#__PURE__*/_jsxs(Text, {
+                style: [stylesheet.accountItemUsername, {
+                  color: colors.secondaryText
+                }],
+                numberOfLines: 1,
+                children: ["@", user.username]
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: [stylesheet.currentAccountBadgeContainer, {
+                backgroundColor: `${colors.primary}15`
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [stylesheet.currentAccountBadge, {
+                  color: colors.primary
+                }],
+                children: t('signin.currentAccount') || 'Current'
+              })
+            })]
+          }), quickAccounts.map(account => /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [stylesheet.accountItem, {
+              backgroundColor: colors.inputBackground
+            }, switchingSessionId === account.sessionId && stylesheet.accountItemLoading],
+            onPress: () => handleSwitchAccount(account.sessionId),
+            disabled: switchingSessionId === account.sessionId,
+            activeOpacity: 0.7,
+            children: switchingSessionId === account.sessionId ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              color: colors.primary,
+              size: "small"
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [stylesheet.accountItemAvatarWrapper, {
+                  borderColor: colors.inputBackground || colors.background || '#FFFFFF'
+                }],
+                children: /*#__PURE__*/_jsx(Avatar, {
+                  name: account.displayName,
+                  text: account.displayName.charAt(0).toUpperCase(),
+                  size: 36,
+                  theme: themeMode,
+                  backgroundColor: colors.primary,
+                  uri: account.avatar && oxyServices ? oxyServices.getFileDownloadUrl(account.avatar, 'thumb') : undefined
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: stylesheet.accountItemText,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [stylesheet.accountItemName, {
+                    color: colors.text
+                  }],
+                  numberOfLines: 1,
+                  children: account.displayName
+                }), account.username && /*#__PURE__*/_jsxs(Text, {
+                  style: [stylesheet.accountItemUsername, {
+                    color: colors.secondaryText
+                  }],
+                  numberOfLines: 1,
+                  children: ["@", account.username]
+                })]
+              })]
+            })
+          }, account.sessionId)), otherAccountsCount > MAX_QUICK_ACCOUNTS && /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [stylesheet.accountItem, stylesheet.viewAllItem, {
+              backgroundColor: colors.inputBackground
+            }],
+            onPress: () => navigate('AccountSwitcher'),
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: "chevron-forward",
+              size: 18,
+              color: colors.primary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [stylesheet.viewAllText, {
+                color: colors.primary
+              }],
+              children: t('signin.viewAllAccounts', {
+                count: otherAccountsCount - MAX_QUICK_ACCOUNTS
+              }) || `View ${otherAccountsCount - MAX_QUICK_ACCOUNTS} more`
+            })]
+          })]
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
+      children: /*#__PURE__*/_jsx(GroupedPillButtons, {
+        buttons: [{
+          text: t('common.links.signUp'),
+          onPress: () => navigate('SignUp'),
+          icon: 'person-add',
+          variant: 'transparent'
+        }, {
+          text: t('common.actions.continue'),
+          onPress: handleContinue,
+          icon: 'arrow-forward',
+          variant: 'primary',
+          loading: isValidating,
+          disabled: !username || username.trim().length < 3 || isValidating,
+          testID: 'username-next-button'
+        }],
+        colors: colors
       })
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: t('common.links.signUp'),
-        onPress: () => navigate('SignUp'),
-        icon: 'person-add',
-        variant: 'transparent'
-      }, {
-        text: t('common.actions.continue'),
-        onPress: handleContinue,
-        icon: 'arrow-forward',
-        variant: 'primary',
-        loading: isValidating,
-        disabled: !username || username.trim().length < 2 || isValidating,
-        testID: 'username-next-button'
-      }],
-      colors: colors
     })]
   });
 };
 export default SignInUsernameStep;
+const stylesheet = StyleSheet.create({
+  toggleButton: {
+    borderRadius: 24,
+    borderWidth: 0
+  },
+  toggleButtonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 48,
+    gap: 10
+  },
+  toggleButtonText: {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  accountCountBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 16,
+    minWidth: 22,
+    alignItems: 'center'
+  },
+  accountCountText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  accountsList: {
+    gap: 6,
+    marginTop: 6
+  },
+  accountItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 24,
+    borderWidth: 0,
+    gap: 12,
+    minHeight: 56
+  },
+  accountItemLoading: {
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  accountItemText: {
+    flex: 1
+  },
+  accountItemName: {
+    fontSize: 15,
+    fontWeight: '500',
+    marginBottom: 2
+  },
+  accountItemUsername: {
+    fontSize: 12
+  },
+  viewAllItem: {
+    justifyContent: 'center',
+    paddingVertical: 10
+  },
+  viewAllText: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginLeft: 4
+  },
+  currentAccountBadgeContainer: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 16
+  },
+  currentAccountBadge: {
+    fontSize: 10,
+    fontWeight: '600',
+    letterSpacing: 0.3
+  },
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 8
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1
+  },
+  dividerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    paddingHorizontal: 16,
+    textTransform: 'lowercase'
+  },
+  avatarsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 'auto'
+  },
+  avatarWrapper: {
+    position: 'relative',
+    borderRadius: 20,
+    borderWidth: 3
+  },
+  currentAvatarWrapper: {
+    borderWidth: 3
+  },
+  currentBadge: {
+    position: 'absolute',
+    bottom: -2,
+    right: -2,
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0
+  },
+  accountItemAvatarWrapper: {
+    borderRadius: 20,
+    borderWidth: 3
+  },
+  languageButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 //# sourceMappingURL=SignInUsernameStep.js.map