Mobile Dev

mobile/app/login.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
-import { Redirect, router } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { Redirect, router, useFocusEffect } from 'expo-router';
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
+  Modal,
   Platform,
   Pressable,
   StyleSheet,
@@ -11,22 +12,100 @@ import {
   View,
 } from 'react-native';
 
-import { API_BASE_URL } from '@/src/config/env';
+import {
+  getApiBaseUrlSync,
+  hydrateApiBaseUrl,
+  isServerSetupDone,
+  markServerSetupDone,
+  setApiBaseUrl as persistApiBaseUrl,
+} from '@/src/lib/server-config';
 import { useAuth, useTokenStorageInfo } from '@/src/providers/auth-provider';
 
+const PRIMARY = '#69c350';
+
+function isValidServerUrl(value: string): boolean {
+  return /^https?:\/\/.+/i.test(value.trim());
+}
+
 export default function LoginScreen() {
   const { token, requiresTenantSelection, login } = useAuth();
   const storageInfo = useTokenStorageInfo();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [apiBaseUrl, setApiBaseUrl] = useState(getApiBaseUrlSync());
+  const [serverInput, setServerInput] = useState(getApiBaseUrlSync());
+  const [showServerModal, setShowServerModal] = useState(false);
+  const [isServerSetupRequired, setIsServerSetupRequired] = useState(false);
+  const [isServerSaving, setIsServerSaving] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useFocusEffect(
+    useCallback(() => {
+      let active = true;
+
+      async function refreshApiBase() {
+        const current = await hydrateApiBaseUrl();
+        const setupDone = await isServerSetupDone();
+        if (!active) return;
+        setApiBaseUrl(current);
+        setServerInput(current);
+        setIsServerSetupRequired(!setupDone);
+        setShowServerModal(!setupDone);
+      }
+
+      void refreshApiBase();
+      return () => {
+        active = false;
+      };
+    }, [])
+  );
+
   if (token) {
     return <Redirect href={requiresTenantSelection ? '/tenant-select' : '/(tabs)'} />;
   }
 
+  async function applyDefaultServer() {
+    setIsServerSaving(true);
+    setServerError(null);
+
+    try {
+      await markServerSetupDone();
+      setIsServerSetupRequired(false);
+      setShowServerModal(false);
+      setApiBaseUrl(getApiBaseUrlSync());
+    } catch (err) {
+      setServerError(err instanceof Error ? err.message : 'Server-Einstellung konnte nicht gespeichert werden.');
+    } finally {
+      setIsServerSaving(false);
+    }
+  }
+
+  async function saveCustomServer() {
+    setServerError(null);
+    const value = serverInput.trim();
+
+    if (!isValidServerUrl(value)) {
+      setServerError('Bitte eine gültige URL mit http:// oder https:// eingeben.');
+      return;
+    }
+
+    setIsServerSaving(true);
+    try {
+      const normalized = await persistApiBaseUrl(value);
+      setApiBaseUrl(normalized);
+      setServerInput(normalized);
+      setIsServerSetupRequired(false);
+      setShowServerModal(false);
+    } catch (err) {
+      setServerError(err instanceof Error ? err.message : 'Server-Einstellung konnte nicht gespeichert werden.');
+    } finally {
+      setIsServerSaving(false);
+    }
+  }
+
   async function onSubmit() {
     setIsSubmitting(true);
     setError(null);
@@ -76,15 +155,57 @@ export default function LoginScreen() {
         <Pressable
           style={[styles.button, isSubmitting ? styles.buttonDisabled : null]}
           onPress={onSubmit}
-          disabled={isSubmitting || !email || !password}>
+          disabled={isSubmitting || isServerSetupRequired || !email || !password}>
           {isSubmitting ? <ActivityIndicator color="#ffffff" /> : <Text style={styles.buttonText}>Anmelden</Text>}
         </Pressable>
 
+        <Pressable style={styles.serverLink} onPress={() => setShowServerModal(true)}>
+          <Text style={styles.serverLinkText}>Eigenen Server festlegen</Text>
+        </Pressable>
+
         <View style={styles.metaBox}>
-          <Text style={styles.metaText}>API: {API_BASE_URL}</Text>
+          <Text style={styles.metaText}>API: {apiBaseUrl}</Text>
           <Text style={styles.metaText}>Token Storage: {storageInfo.mode}</Text>
         </View>
       </View>
+
+      <Modal visible={showServerModal} transparent animationType="fade" onRequestClose={() => {}}>
+        <View style={styles.modalBackdrop}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalTitle}>Server-Instanz festlegen</Text>
+            <Text style={styles.modalText}>
+              Vor dem ersten Login bitte Server wählen. Standard verwenden oder eigene Instanz hinterlegen.
+            </Text>
+
+            <TextInput
+              value={serverInput}
+              onChangeText={setServerInput}
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="url"
+              placeholder="https://dein-server.tld"
+              placeholderTextColor="#9ca3af"
+              style={styles.input}
+            />
+
+            {serverError ? <Text style={styles.error}>{serverError}</Text> : null}
+
+            <Pressable
+              style={[styles.modalPrimaryButton, isServerSaving ? styles.buttonDisabled : null]}
+              onPress={saveCustomServer}
+              disabled={isServerSaving}>
+              <Text style={styles.modalPrimaryText}>{isServerSaving ? 'Speichern...' : 'Eigene Instanz speichern'}</Text>
+            </Pressable>
+
+            <Pressable
+              style={[styles.modalSecondaryButton, isServerSaving ? styles.buttonDisabled : null]}
+              onPress={applyDefaultServer}
+              disabled={isServerSaving}>
+              <Text style={styles.modalSecondaryText}>Standardserver verwenden</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
     </KeyboardAvoidingView>
   );
 }
@@ -132,7 +253,7 @@ const styles = StyleSheet.create({
   },
   button: {
     marginTop: 6,
-    backgroundColor: '#16a34a',
+    backgroundColor: PRIMARY,
     borderRadius: 10,
     minHeight: 44,
     alignItems: 'center',
@@ -157,8 +278,66 @@ const styles = StyleSheet.create({
     borderTopColor: '#e5e7eb',
     gap: 4,
   },
+  serverLink: {
+    marginTop: 2,
+    alignSelf: 'flex-start',
+    paddingVertical: 4,
+  },
+  serverLinkText: {
+    color: PRIMARY,
+    fontSize: 13,
+    fontWeight: '600',
+  },
   metaText: {
     fontSize: 12,
     color: '#6b7280',
   },
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(17, 24, 39, 0.45)',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  modalCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 14,
+    padding: 16,
+    gap: 10,
+  },
+  modalTitle: {
+    color: '#111827',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  modalText: {
+    color: '#6b7280',
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  modalPrimaryButton: {
+    minHeight: 42,
+    borderRadius: 10,
+    backgroundColor: PRIMARY,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalPrimaryText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+  modalSecondaryButton: {
+    minHeight: 42,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
+  modalSecondaryText: {
+    color: '#374151',
+    fontWeight: '600',
+    fontSize: 14,
+  },
 });