billisdead
8b7a2eb644
Release APK / build (push) Has been cancelled
- PostizContext: new PostizWorkspace type, multi-workspace storage (postiz_workspaces_v2), auto-migration from legacy single config, addWorkspace / updateWorkspace / removeWorkspace, clients map - Settings: full rewrite with workspace card list (add / edit / delete) - Compose: channels displayed in two levels — workspace section then network type (X/Twitter, Instagram, LinkedIn...) within each workspace; submit routes posts and image uploads per workspace - MediaLibraryModal: workspace tabs when multiple workspaces configured, returned items carry their workspaceId Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
412 lines
16 KiB
TypeScript
412 lines
16 KiB
TypeScript
import { Feather } from "@expo/vector-icons";
|
|
import axios from "axios";
|
|
import * as Haptics from "expo-haptics";
|
|
import React, { useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { PostizWorkspace, DEFAULT_BASE_URL, usePostiz } from "@/context/PostizContext";
|
|
import { useColors } from "@/hooks/useColors";
|
|
import { extractError } from "@/lib/extractError";
|
|
|
|
type FormState = {
|
|
id?: string;
|
|
name: string;
|
|
url: string;
|
|
key: string;
|
|
};
|
|
|
|
const EMPTY_FORM: FormState = { name: "", url: DEFAULT_BASE_URL, key: "" };
|
|
|
|
export default function SettingsScreen() {
|
|
const colors = useColors();
|
|
const insets = useSafeAreaInsets();
|
|
const { workspaces, isConfigured, addWorkspace, updateWorkspace, removeWorkspace } = usePostiz();
|
|
|
|
const [form, setForm] = useState<FormState | null>(null);
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [validating, setValidating] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [validationStatus, setValidationStatus] = useState<"idle" | "ok" | "error">("idle");
|
|
const [errorDetail, setErrorDetail] = useState("");
|
|
|
|
const openAdd = () => {
|
|
setForm(EMPTY_FORM);
|
|
setShowKey(false);
|
|
resetValidation();
|
|
};
|
|
|
|
const openEdit = (ws: PostizWorkspace) => {
|
|
setForm({ id: ws.id, name: ws.name, url: ws.baseUrl, key: ws.apiKey });
|
|
setShowKey(false);
|
|
resetValidation();
|
|
};
|
|
|
|
const closeForm = () => {
|
|
setForm(null);
|
|
resetValidation();
|
|
};
|
|
|
|
const resetValidation = () => {
|
|
setValidationStatus("idle");
|
|
setErrorDetail("");
|
|
};
|
|
|
|
const patchForm = (patch: Partial<FormState>) => {
|
|
setForm((prev) => (prev ? { ...prev, ...patch } : prev));
|
|
resetValidation();
|
|
};
|
|
|
|
const handleValidate = async () => {
|
|
if (!form?.key.trim() || !form?.url.trim()) {
|
|
Alert.alert("Missing fields", "Please enter both API key and base URL.");
|
|
return;
|
|
}
|
|
setValidating(true);
|
|
resetValidation();
|
|
const cleanUrl = form.url.trim().replace(/\/$/, "");
|
|
const variants = [form.key.trim(), `Bearer ${form.key.trim()}`];
|
|
let lastError = "";
|
|
|
|
for (const auth of variants) {
|
|
try {
|
|
await axios.get(`${cleanUrl}/integrations`, {
|
|
headers: { Authorization: auth },
|
|
timeout: 10000,
|
|
maxRedirects: 0,
|
|
});
|
|
setValidationStatus("ok");
|
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
|
setValidating(false);
|
|
return;
|
|
} catch (err: unknown) {
|
|
if (axios.isAxiosError(err)) {
|
|
const s = err.response?.status;
|
|
if (s === 307 || s === 301 || s === 302 || s === 308) {
|
|
const loc = err.response?.headers?.location ?? "unknown";
|
|
lastError = `HTTP ${s} redirect → ${loc}. Check the Authorization format or base URL.`;
|
|
continue;
|
|
}
|
|
if (s === 401 || s === 403) { lastError = `HTTP ${s}: Invalid or expired API key.`; continue; }
|
|
}
|
|
lastError = extractError(err);
|
|
}
|
|
}
|
|
setErrorDetail(lastError);
|
|
setValidationStatus("error");
|
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
|
setValidating(false);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!form) return;
|
|
if (!form.name.trim()) { Alert.alert("Missing name", "Please enter a name for this workspace."); return; }
|
|
if (!form.key.trim() || !form.url.trim()) { Alert.alert("Missing fields", "Please enter both API key and base URL."); return; }
|
|
setSaving(true);
|
|
try {
|
|
const ws = { name: form.name.trim(), apiKey: form.key.trim(), baseUrl: form.url.trim().replace(/\/$/, "") };
|
|
if (form.id) {
|
|
await updateWorkspace({ ...ws, id: form.id });
|
|
} else {
|
|
await addWorkspace(ws);
|
|
}
|
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
|
closeForm();
|
|
} catch (err: unknown) {
|
|
Alert.alert("Error", `Failed to save.\n${extractError(err)}`);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = (ws: PostizWorkspace) => {
|
|
Alert.alert(
|
|
"Remove workspace",
|
|
`Remove "${ws.name}"? Channels from this workspace will no longer be available.`,
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Remove",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
if (form?.id === ws.id) closeForm();
|
|
await removeWorkspace(ws.id);
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<KeyboardAwareScrollView
|
|
style={{ flex: 1, backgroundColor: colors.background }}
|
|
contentContainerStyle={[
|
|
styles.container,
|
|
{
|
|
paddingTop: Platform.OS === "web" ? 67 : 24,
|
|
paddingBottom: Platform.OS === "web" ? 100 : insets.bottom + 40,
|
|
},
|
|
]}
|
|
bottomOffset={60}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Status banner */}
|
|
{!isConfigured ? (
|
|
<View style={[styles.banner, { backgroundColor: colors.primary + "18", borderColor: colors.primary + "40" }]}>
|
|
<Feather name="info" size={16} color={colors.primary} />
|
|
<Text style={[styles.bannerText, { color: colors.primary }]}>
|
|
Add a workspace to get started
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View style={[styles.connectedBadge, { backgroundColor: colors.success + "18", borderColor: colors.success + "40" }]}>
|
|
<Feather name="check-circle" size={14} color={colors.success} />
|
|
<Text style={[styles.connectedText, { color: colors.success }]}>
|
|
{workspaces.length} workspace{workspaces.length > 1 ? "s" : ""} configured
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Workspace cards */}
|
|
{workspaces.map((ws) => (
|
|
<View key={ws.id} style={[styles.wsCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
|
<View style={styles.wsCardHeader}>
|
|
<View style={styles.wsCardLeft}>
|
|
<View style={[styles.wsIcon, { backgroundColor: colors.primary + "18" }]}>
|
|
<Feather name="briefcase" size={14} color={colors.primary} />
|
|
</View>
|
|
<View>
|
|
<Text style={[styles.wsName, { color: colors.foreground }]}>{ws.name}</Text>
|
|
<Text style={[styles.wsUrl, { color: colors.mutedForeground }]} numberOfLines={1}>
|
|
{ws.baseUrl.replace(/^https?:\/\//, "").replace(/\/api.*$/, "")}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.wsCardActions}>
|
|
<TouchableOpacity onPress={() => openEdit(ws)} activeOpacity={0.7} style={styles.iconBtn}>
|
|
<Feather name="edit-2" size={15} color={colors.mutedForeground} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleDelete(ws)} activeOpacity={0.7} style={styles.iconBtn}>
|
|
<Feather name="trash-2" size={15} color={colors.destructive} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
|
|
{/* Add workspace button */}
|
|
{!form && (
|
|
<TouchableOpacity
|
|
onPress={openAdd}
|
|
activeOpacity={0.8}
|
|
style={[styles.addBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
|
|
>
|
|
<Feather name="plus" size={16} color={colors.primary} />
|
|
<Text style={[styles.addBtnText, { color: colors.primary }]}>Add workspace</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{/* Add / Edit form */}
|
|
{form && (
|
|
<View style={[styles.formCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
|
<Text style={[styles.formTitle, { color: colors.foreground }]}>
|
|
{form.id ? "Edit workspace" : "Add workspace"}
|
|
</Text>
|
|
|
|
{/* Name */}
|
|
<View style={styles.fieldGroup}>
|
|
<Text style={[styles.label, { color: colors.mutedForeground }]}>NAME</Text>
|
|
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
|
<Feather name="briefcase" size={15} color={colors.mutedForeground} />
|
|
<TextInput
|
|
style={[styles.input, { color: colors.foreground }]}
|
|
placeholder="My Client"
|
|
placeholderTextColor={colors.mutedForeground}
|
|
value={form.name}
|
|
onChangeText={(t) => patchForm({ name: t })}
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Base URL */}
|
|
<View style={styles.fieldGroup}>
|
|
<Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
|
|
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
|
<Feather name="globe" size={15} color={colors.mutedForeground} />
|
|
<TextInput
|
|
style={[styles.input, { color: colors.foreground }]}
|
|
placeholder="https://postiz.example.com/api/public/v1"
|
|
placeholderTextColor={colors.mutedForeground}
|
|
value={form.url}
|
|
onChangeText={(t) => patchForm({ url: t })}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
keyboardType="url"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* API Key */}
|
|
<View style={styles.fieldGroup}>
|
|
<Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
|
|
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
|
<Feather name="key" size={15} color={colors.mutedForeground} />
|
|
<TextInput
|
|
style={[styles.input, { color: colors.foreground }]}
|
|
placeholder="Enter your API key"
|
|
placeholderTextColor={colors.mutedForeground}
|
|
value={form.key}
|
|
onChangeText={(t) => patchForm({ key: t })}
|
|
secureTextEntry={!showKey}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
<TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
|
|
<Feather name={showKey ? "eye-off" : "eye"} size={15} color={colors.mutedForeground} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{validationStatus === "ok" && (
|
|
<View style={styles.validRow}>
|
|
<Feather name="check-circle" size={13} color={colors.success} />
|
|
<Text style={[styles.validText, { color: colors.success }]}>Connection successful</Text>
|
|
</View>
|
|
)}
|
|
|
|
{validationStatus === "error" && (
|
|
<View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
|
|
<View style={styles.errorHeader}>
|
|
<Feather name="x-circle" size={13} color={colors.error} />
|
|
<Text style={[styles.errorTitle, { color: colors.error }]}>Could not connect</Text>
|
|
</View>
|
|
{!!errorDetail && (
|
|
<ScrollView style={styles.errorScroll} nestedScrollEnabled>
|
|
<Text style={[styles.errorDetail, { color: colors.error }]} selectable>{errorDetail}</Text>
|
|
</ScrollView>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Form actions */}
|
|
<TouchableOpacity
|
|
onPress={handleValidate}
|
|
activeOpacity={0.8}
|
|
disabled={validating}
|
|
style={[styles.validateBtn, { backgroundColor: colors.background, borderColor: colors.border }]}
|
|
>
|
|
{validating ? (
|
|
<ActivityIndicator color={colors.primary} size="small" />
|
|
) : (
|
|
<>
|
|
<Feather name="wifi" size={15} color={colors.primary} />
|
|
<Text style={[styles.validateText, { color: colors.primary }]}>Test Connection</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.formBtnsRow}>
|
|
<TouchableOpacity
|
|
onPress={closeForm}
|
|
activeOpacity={0.8}
|
|
style={[styles.cancelBtn, { borderColor: colors.border }]}
|
|
>
|
|
<Text style={[styles.cancelText, { color: colors.mutedForeground }]}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={handleSave}
|
|
activeOpacity={0.85}
|
|
disabled={saving}
|
|
style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
|
|
>
|
|
{saving ? (
|
|
<ActivityIndicator color={colors.primaryForeground} size="small" />
|
|
) : (
|
|
<>
|
|
<Feather name="save" size={15} color={colors.primaryForeground} />
|
|
<Text style={[styles.saveText, { color: colors.primaryForeground }]}>
|
|
{form.id ? "Update" : "Save"}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
<Text style={[styles.footerText, { color: colors.mutedForeground }]}>
|
|
API keys are stored securely on this device and never transmitted to third parties.
|
|
</Text>
|
|
</KeyboardAwareScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { paddingHorizontal: 20, gap: 14 },
|
|
banner: {
|
|
flexDirection: "row", alignItems: "center", gap: 10,
|
|
paddingHorizontal: 14, paddingVertical: 12, borderRadius: 12, borderWidth: 1,
|
|
},
|
|
bannerText: { fontSize: 13, fontFamily: "Inter_500Medium", flex: 1 },
|
|
connectedBadge: {
|
|
flexDirection: "row", alignItems: "center", gap: 6,
|
|
paddingHorizontal: 12, paddingVertical: 8, borderRadius: 10, borderWidth: 1, alignSelf: "flex-start",
|
|
},
|
|
connectedText: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
|
|
wsCard: { borderRadius: 14, borderWidth: 1, overflow: "hidden" },
|
|
wsCardHeader: { flexDirection: "row", alignItems: "center", paddingHorizontal: 14, paddingVertical: 12 },
|
|
wsCardLeft: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
|
|
wsIcon: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" },
|
|
wsName: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
|
wsUrl: { fontSize: 11, fontFamily: "Inter_400Regular", marginTop: 1 },
|
|
wsCardActions: { flexDirection: "row", gap: 4 },
|
|
iconBtn: { padding: 8 },
|
|
addBtn: {
|
|
flexDirection: "row", alignItems: "center", justifyContent: "center",
|
|
gap: 8, paddingVertical: 13, borderRadius: 14, borderWidth: 1, borderStyle: "dashed",
|
|
},
|
|
addBtnText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
|
formCard: { borderRadius: 14, borderWidth: 1, padding: 16, gap: 14 },
|
|
formTitle: { fontSize: 15, fontFamily: "Inter_600SemiBold" },
|
|
fieldGroup: { gap: 6 },
|
|
label: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.8, marginLeft: 2 },
|
|
inputWrap: {
|
|
flexDirection: "row", alignItems: "center",
|
|
borderRadius: 10, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 11, gap: 10,
|
|
},
|
|
input: { flex: 1, fontSize: 14, fontFamily: "Inter_400Regular" },
|
|
validRow: { flexDirection: "row", alignItems: "center", gap: 6, marginLeft: 2 },
|
|
validText: { fontSize: 12, fontFamily: "Inter_400Regular" },
|
|
errorBox: { borderRadius: 10, borderWidth: 1, padding: 12, gap: 6 },
|
|
errorHeader: { flexDirection: "row", alignItems: "center", gap: 6 },
|
|
errorTitle: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
|
|
errorScroll: { maxHeight: 80 },
|
|
errorDetail: { fontSize: 11, fontFamily: "Inter_400Regular", lineHeight: 16 },
|
|
validateBtn: {
|
|
flexDirection: "row", alignItems: "center", justifyContent: "center",
|
|
gap: 8, paddingVertical: 11, borderRadius: 10, borderWidth: 1,
|
|
},
|
|
validateText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
|
formBtnsRow: { flexDirection: "row", gap: 10 },
|
|
cancelBtn: { flex: 1, paddingVertical: 12, borderRadius: 10, borderWidth: 1, alignItems: "center" },
|
|
cancelText: { fontSize: 14, fontFamily: "Inter_500Medium" },
|
|
saveBtn: {
|
|
flex: 2, flexDirection: "row", alignItems: "center", justifyContent: "center",
|
|
gap: 8, paddingVertical: 12, borderRadius: 10,
|
|
},
|
|
saveText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
|
footerText: { fontSize: 12, fontFamily: "Inter_400Regular", textAlign: "center", lineHeight: 18, marginTop: 4 },
|
|
});
|