feat: Phase 0.5 — remote feed sync via Bearer token auth
Server (bincio/serve/server.py): - Add _require_auth: accepts session cookie OR Authorization: Bearer token - POST /api/auth/token: same as /api/auth/login but returns token in body (password used once, not stored; mobile stores only the session token) - GET /api/feed: auth-gated; reads _merged/index.json for the user and returns the activities array as JSON Mobile: - db/sync.ts: syncFeed(db) fetches /api/feed, upserts each summary into local SQLite as origin='remote'; skips locally-imported activities - db/queries.ts: add upsertRemoteActivity (INSERT ... ON CONFLICT DO UPDATE WHERE origin='remote' — never overwrites local imports); fix feed sort order to started_at DESC instead of insertion order - settings.tsx: Connect section — password field (not persisted) + Connect button calls POST /api/auth/token and stores token; Disconnect clears it - index.tsx: ↓ Sync button + pull-to-refresh both trigger syncFeed; cloud badge on remote activities; empty state updated
This commit is contained in:
Davide Scaini
+120
-24
@@ -1,7 +1,7 @@
|
||||
import { useSQLiteContext } from 'expo-sqlite';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Platform, Pressable, ScrollView, StyleSheet,
|
||||
ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet,
|
||||
Text, TextInput, View,
|
||||
} from 'react-native';
|
||||
import { getSetting, setSetting, useSetting } from '@/db/queries';
|
||||
@@ -9,14 +9,19 @@ import { getSetting, setSetting, useSetting } from '@/db/queries';
|
||||
export default function SettingsScreen() {
|
||||
const db = useSQLiteContext();
|
||||
|
||||
const storedUrl = useSetting('instance_url') ?? '';
|
||||
const storedUrl = useSetting('instance_url') ?? '';
|
||||
const storedHandle = useSetting('handle') ?? '';
|
||||
const storedPath = useSetting('auto_import_path') ?? '';
|
||||
const storedPath = useSetting('auto_import_path') ?? '';
|
||||
const storedToken = useSetting('api_token');
|
||||
|
||||
const [instanceUrl, setInstanceUrl] = useState(storedUrl);
|
||||
const [handle, setHandle] = useState(storedHandle);
|
||||
const [autoPath, setAutoPath] = useState(storedPath);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [handle, setHandle] = useState(storedHandle);
|
||||
const [autoPath, setAutoPath] = useState(storedPath);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const [password, setPassword] = useState('');
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [connectMsg, setConnectMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
|
||||
async function save() {
|
||||
await setSetting(db, 'instance_url', instanceUrl.trim());
|
||||
@@ -28,11 +33,51 @@ export default function SettingsScreen() {
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
}
|
||||
|
||||
async function connect() {
|
||||
const url = instanceUrl.trim().replace(/\/$/, '');
|
||||
const h = handle.trim();
|
||||
if (!url || !h || !password) {
|
||||
setConnectMsg({ ok: false, text: 'Fill in URL, handle, and password first.' });
|
||||
return;
|
||||
}
|
||||
setConnecting(true);
|
||||
setConnectMsg(null);
|
||||
try {
|
||||
const resp = await fetch(`${url}/api/auth/token`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ handle: h, password }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
setConnectMsg({ ok: false, text: err.detail ?? `Error ${resp.status}` });
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
await setSetting(db, 'instance_url', url);
|
||||
await setSetting(db, 'handle', h);
|
||||
await setSetting(db, 'api_token', data.token);
|
||||
setPassword('');
|
||||
setConnectMsg({ ok: true, text: `Connected as ${data.display_name || h}` });
|
||||
} catch {
|
||||
setConnectMsg({ ok: false, text: 'Could not reach instance — check the URL.' });
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
await setSetting(db, 'api_token', '');
|
||||
setConnectMsg(null);
|
||||
}
|
||||
|
||||
const isConnected = !!storedToken;
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<Text style={styles.header}>Settings</Text>
|
||||
|
||||
<Section title="Instance (optional)">
|
||||
<Section title="Instance">
|
||||
<Field
|
||||
label="Instance URL"
|
||||
placeholder="https://bincio.org"
|
||||
@@ -49,8 +94,53 @@ export default function SettingsScreen() {
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Leave blank to use the app without a remote instance. When set, you can
|
||||
push activities to the instance and pull the web feed.
|
||||
Connect to a Bincio instance to sync your activities. Leave blank to use
|
||||
the app offline only.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Pressable style={styles.saveButton} onPress={save}>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{saved ? '✓ Saved' : 'Save'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Section title="Connection">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Row label="Status" value={`Connected as ${storedHandle || '—'}`} />
|
||||
<Pressable style={styles.disconnectButton} onPress={disconnect}>
|
||||
<Text style={styles.disconnectText}>Disconnect</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Field
|
||||
label="Password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
autoCapitalize="none"
|
||||
secureTextEntry
|
||||
/>
|
||||
<Pressable
|
||||
style={[styles.connectButton, connecting && styles.buttonDisabled]}
|
||||
onPress={connecting ? undefined : connect}
|
||||
>
|
||||
{connecting
|
||||
? <ActivityIndicator color="#fff" size="small" />
|
||||
: <Text style={styles.connectText}>Connect</Text>}
|
||||
</Pressable>
|
||||
</>
|
||||
)}
|
||||
{connectMsg && (
|
||||
<Text style={connectMsg.ok ? styles.msgOk : styles.msgErr}>
|
||||
{connectMsg.text}
|
||||
</Text>
|
||||
)}
|
||||
<Text style={styles.hint}>
|
||||
Your password is used once to obtain a session token, then forgotten.
|
||||
The token is stored locally and sent with each sync request.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
@@ -70,16 +160,9 @@ export default function SettingsScreen() {
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Pressable style={styles.saveButton} onPress={save}>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{saved ? '✓ Saved' : 'Save'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Section title="About">
|
||||
<Row label="Version" value="0.1.0 (Phase 0)" />
|
||||
<Row label="Schema" value="BAS 1.0" />
|
||||
<Row label="Extraction" value="Pyodide (Phase 1)" />
|
||||
<Row label="Version" value="0.1.0 (Phase 0.5)" />
|
||||
<Row label="Schema" value="BAS 1.0" />
|
||||
</Section>
|
||||
</ScrollView>
|
||||
);
|
||||
@@ -129,9 +212,9 @@ function Row({ label, value }: { label: string; value: string }) {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
content: { padding: 16, paddingTop: 60, paddingBottom: 40 },
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 24 },
|
||||
section: { marginBottom: 28 },
|
||||
content: { padding: 16, paddingTop: 60, paddingBottom: 40 },
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 24 },
|
||||
section: { marginBottom: 28 },
|
||||
sectionTitle: {
|
||||
color: '#a1a1aa', fontSize: 11, fontWeight: '600',
|
||||
letterSpacing: 0.8, marginBottom: 8,
|
||||
@@ -140,10 +223,10 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: '#18181b', borderRadius: 10,
|
||||
borderWidth: 1, borderColor: '#27272a', overflow: 'hidden',
|
||||
},
|
||||
field: { padding: 14, borderBottomWidth: 1, borderBottomColor: '#27272a' },
|
||||
field: { padding: 14, borderBottomWidth: 1, borderBottomColor: '#27272a' },
|
||||
fieldLabel: { color: '#71717a', fontSize: 11, marginBottom: 4 },
|
||||
input: { color: '#f4f4f5', fontSize: 15 },
|
||||
hint: { color: '#52525b', fontSize: 12, lineHeight: 16, padding: 12 },
|
||||
input: { color: '#f4f4f5', fontSize: 15 },
|
||||
hint: { color: '#52525b', fontSize: 12, lineHeight: 16, padding: 12 },
|
||||
row: {
|
||||
flexDirection: 'row', justifyContent: 'space-between',
|
||||
paddingHorizontal: 14, paddingVertical: 12,
|
||||
@@ -156,4 +239,17 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 14, alignItems: 'center', marginBottom: 28,
|
||||
},
|
||||
saveButtonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
|
||||
connectButton: {
|
||||
backgroundColor: '#059669', borderRadius: 8, margin: 12,
|
||||
paddingVertical: 12, alignItems: 'center',
|
||||
},
|
||||
connectText: { color: '#fff', fontWeight: '600', fontSize: 15 },
|
||||
buttonDisabled: { opacity: 0.5 },
|
||||
disconnectButton: {
|
||||
margin: 12, paddingVertical: 10, alignItems: 'center',
|
||||
borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46',
|
||||
},
|
||||
disconnectText: { color: '#71717a', fontSize: 14 },
|
||||
msgOk: { color: '#86efac', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
|
||||
msgErr: { color: '#fca5a5', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user