feat: update NAS configuration and enhance UI components for better user experience

This commit is contained in:
bobbert committed 2026-03-04 21:52:52 +00:00
1 parent 8e6fa5270b
commit 6167418074
23 files changed
+2147 -702

No files matched your search

+9 -20
View File
@@ -33,10 +33,8 @@ const OnboardingScreen = ({ navigation, route }) => {
// NAS config
const [nasHost, setNasHost] = useState('');
const [nasPort, setNasPort] = useState('22');
const [nasPort, setNasPort] = useState('9500');
const [nasUsername, setNasUsername] = useState('');
const [nasPassword, setNasPassword] = useState('');
const [nasPhotoFolder, setNasPhotoFolder] = useState('/home/user/photos');
// Auto-backup checklist (multi-select)
const [autoBackupServices, setAutoBackupServices] = useState([]);
@@ -102,8 +100,8 @@ const OnboardingScreen = ({ navigation, route }) => {
};
const handleNasAuth = async () => {
if (!nasHost.trim() || !nasUsername.trim() || !nasPassword.trim()) {
Alert.alert('Error', 'Please fill in all NAS connection fields');
if (!nasHost.trim() || !nasUsername.trim()) {
Alert.alert('Error', 'Please fill in the NAS host and username');
return;
}
try {
@@ -111,14 +109,13 @@ const OnboardingScreen = ({ navigation, route }) => {
setNasHealth('checking');
const nasAuth = new NASAUTH();
await nasAuth.authenticate(
nasHost.trim(), parseInt(nasPort) || 22,
nasUsername.trim(), nasPassword, nasPhotoFolder.trim()
nasHost.trim(), parseInt(nasPort) || 9500,
nasUsername.trim()
);
await DatabaseService.linkAccount(userId, 'NAS', {
host: nasHost.trim(),
port: parseInt(nasPort) || 22,
port: parseInt(nasPort) || 9500,
username: nasUsername.trim(),
photoFolder: nasPhotoFolder.trim(),
});
setNasConnected(true);
setNasHealth('healthy');
@@ -189,7 +186,7 @@ const OnboardingScreen = ({ navigation, route }) => {
description="Access your iCloud photo library (placeholder)"
enabled={iosEnabled} onToggle={() => setIosEnabled(!iosEnabled)} />
<ServiceToggleCard theme={theme} icon="💾" name="NAS Storage"
description="Connect to your Ubuntu server via SFTP"
description="Connect to your NAS photo server (REST API)"
enabled={nasEnabled} onToggle={() => setNasEnabled(!nasEnabled)} />
{/* NAS setup instructions dropdown */}
@@ -254,19 +251,11 @@ const OnboardingScreen = ({ navigation, route }) => {
<Text style={[styles.fieldLabel, { color: theme.textSecondary }]}>Port</Text>
<TextInput style={[styles.fieldInput, { backgroundColor: theme.inputBg, borderColor: theme.border, color: theme.text }]}
placeholder="22" value={nasPort} onChangeText={setNasPort} editable={!loading} keyboardType="numeric" placeholderTextColor={theme.textTertiary} />
placeholder="9500" value={nasPort} onChangeText={setNasPort} editable={!loading} keyboardType="numeric" placeholderTextColor={theme.textTertiary} />
<Text style={[styles.fieldLabel, { color: theme.textSecondary }]}>Username</Text>
<TextInput style={[styles.fieldInput, { backgroundColor: theme.inputBg, borderColor: theme.border, color: theme.text }]}
placeholder="SSH username" value={nasUsername} onChangeText={setNasUsername} editable={!loading} autoCapitalize="none" placeholderTextColor={theme.textTertiary} />
<Text style={[styles.fieldLabel, { color: theme.textSecondary }]}>Password</Text>
<TextInput style={[styles.fieldInput, { backgroundColor: theme.inputBg, borderColor: theme.border, color: theme.text }]}
placeholder="SSH password" value={nasPassword} onChangeText={setNasPassword} editable={!loading} secureTextEntry autoCapitalize="none" placeholderTextColor={theme.textTertiary} />
<Text style={[styles.fieldLabel, { color: theme.textSecondary }]}>Photos Folder</Text>
<TextInput style={[styles.fieldInput, { backgroundColor: theme.inputBg, borderColor: theme.border, color: theme.text }]}
placeholder="/home/user/photos" value={nasPhotoFolder} onChangeText={setNasPhotoFolder} editable={!loading} placeholderTextColor={theme.textTertiary} />
placeholder="Your username" value={nasUsername} onChangeText={setNasUsername} editable={!loading} autoCapitalize="none" placeholderTextColor={theme.textTertiary} />
<TouchableOpacity
style={[styles.authButton, { backgroundColor: theme.accent }, loading && styles.buttonDisabled]}