[Formulus] Fix: Settings Screen Login Button State

formulus/src/screens/SettingsScreen.tsx

@@ -14,7 +14,7 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import {useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import * as Keychain from 'react-native-keychain';
-import {login, getUserInfo, UserInfo} from '../api/synkronus/Auth';
+import {login} from '../api/synkronus/Auth';
 import {serverConfigService} from '../services/ServerConfigService';
 import QRScannerModal from '../components/QRScannerModal';
 import {QRSettingsService} from '../services/QRSettingsService';
@@ -39,7 +39,6 @@ const SettingsScreen = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [showQRScanner, setShowQRScanner] = useState(false);
-  const [_loggedInUser, setLoggedInUser] = useState<UserInfo | null>(null);
 
   useEffect(() => {
     loadSettings();
@@ -96,15 +95,15 @@ const SettingsScreen = () => {
             ? [
                 {
                   text: 'Cancel',
-                  style: 'cancel',
+                  style: 'cancel' as const,
                   onPress: () => {
                     setServerUrl(initialServerUrl);
                     resolve(false);
                   },
                 },
                 {
                   text: 'Proceed without syncing',
-                  style: 'destructive',
+                  style: 'destructive' as const,
                   onPress: () => {
                     (async () => {
                       try {
@@ -137,15 +136,15 @@ const SettingsScreen = () => {
             : [
                 {
                   text: 'Cancel',
-                  style: 'cancel',
+                  style: 'cancel' as const,
                   onPress: () => {
                     setServerUrl(initialServerUrl);
                     resolve(false);
                   },
                 },
                 {
                   text: 'Yes, wipe & switch',
-                  style: 'destructive',
+                  style: 'destructive' as const,
                   onPress: () => {
                     (async () => {
                       try {
@@ -187,9 +186,6 @@ const SettingsScreen = () => {
         setUsername(credentials.username);
         setPassword(credentials.password);
       }
-
-      const userInfo = await getUserInfo();
-      setLoggedInUser(userInfo);
     } catch (error) {
       console.error('Failed to load settings:', error);
     } finally {
@@ -210,8 +206,7 @@ const SettingsScreen = () => {
     setIsLoggingIn(true);
     try {
       await Keychain.setGenericPassword(username, password);
-      const userInfo = await login(username, password);
-      setLoggedInUser(userInfo);
+      await login(username, password);
       ToastService.showShort('Successfully logged in!');
       navigation.navigate('MainApp');
     } catch (error: any) {
@@ -254,8 +249,7 @@ const SettingsScreen = () => {
             settings.password,
           );
           try {
-            const userInfo = await login(settings.username, settings.password);
-            setLoggedInUser(userInfo);
+            await login(settings.username, settings.password);
             ToastService.showShort('Successfully logged in!');
             navigation.navigate('MainApp');
           } catch (error: any) {
@@ -355,24 +349,36 @@ const SettingsScreen = () => {
           />
         </View>
 
-        <TouchableOpacity
-          style={[
-            styles.nextButton,
-            (!serverUrl.trim() || !username.trim() || !password.trim()) &&
-              styles.nextButtonDisabled,
-          ]}
-          onPress={handleLogin}
-          disabled={
-            !serverUrl.trim() ||
-            !username.trim() ||
-            !password.trim() ||
-            isLoggingIn
-          }>
-          <Icon name="arrow-right" size={20} color={colors.neutral[500]} />
-          <Text style={styles.nextButtonText}>
-            {isLoggingIn ? 'Logging in...' : 'Login'}
-          </Text>
-        </TouchableOpacity>
+        {(() => {
+          const isFieldsEmpty =
+            !serverUrl.trim() || !username.trim() || !password.trim();
+          const isButtonDisabled = isFieldsEmpty || isLoggingIn;
+
+          return (
+            <TouchableOpacity
+              style={[
+                styles.nextButton,
+                isButtonDisabled && styles.nextButtonDisabled,
+              ]}
+              onPress={handleLogin}
+              disabled={!!isButtonDisabled}>
+              <Icon
+                name="arrow-right"
+                size={20}
+                color={
+                  isButtonDisabled ? colors.neutral[500] : colors.neutral.white
+                }
+              />
+              <Text
+                style={[
+                  styles.nextButtonText,
+                  isButtonDisabled && styles.nextButtonTextDisabled,
+                ]}>
+                {isLoggingIn ? 'Logging in...' : 'Login'}
+              </Text>
+            </TouchableOpacity>
+          );
+        })()}
       </ScrollView>
 
       <QRScannerModal
@@ -462,7 +468,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     height: 56,
     borderRadius: 8,
-    backgroundColor: colors.neutral[200],
+    backgroundColor: colors.brand.primary[500],
     justifyContent: 'center',
     alignItems: 'center',
     gap: 8,
@@ -477,6 +483,9 @@ const styles = StyleSheet.create({
   nextButtonText: {
     fontSize: 16,
     fontWeight: '600',
+    color: colors.neutral.white,
+  },
+  nextButtonTextDisabled: {
     color: colors.neutral[500],
   },
 });