mirror of
https://github.com/rzuasti/oott.git
synced 2026-07-08 19:21:54 +02:00
Move backend config to a dialog; group settings into cards
Settings screen now splits responsibilities: - Backend URL + API key move into a Test/Save popup dialog (backend_config_dialog.dart), reachable via a "Re-configure" action. Per M3 the Test button is left-aligned (neutral) with Cancel/Save grouped trailing. On first run the dialog auto-opens non-dismissible. - The screen shows the connection read-only (URL plain, key masked with reveal) in a "Backend connection" card, and groups Theme + Push into an "App settings" card. Theme and push apply immediately, no Save button. - Align all card titles to titleLarge across home/status/settings. Adds a test seam (dioBuilderForTesting) so reconfigure keeps the mock Dio in widget tests instead of issuing real requests. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
1d85ec6f83
commit
67b94b89a1
+158
-167
@@ -3,12 +3,12 @@ import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../main.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/dimens.dart';
|
||||
import '../utils/oott_api.dart';
|
||||
import '../utils/pref_utils.dart';
|
||||
import '../utils/push_service.dart';
|
||||
import '../utils/ui_snackbars.dart';
|
||||
import 'backend_config_dialog.dart';
|
||||
|
||||
class Settings extends StatefulWidget {
|
||||
const Settings({super.key, this.pushService});
|
||||
@@ -22,11 +22,9 @@ class Settings extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _SettingsState extends State<Settings> {
|
||||
final _baseUrlController = TextEditingController();
|
||||
final _apiKeyController = TextEditingController();
|
||||
String _baseUrl = '';
|
||||
String _apiKey = '';
|
||||
bool _apiKeyVisible = false;
|
||||
bool _testOk = false;
|
||||
bool _connectionModified = false;
|
||||
bool _isFirstRun = false;
|
||||
late String _selectedTheme;
|
||||
late final PushService _pushService;
|
||||
@@ -36,20 +34,27 @@ class _SettingsState extends State<Settings> {
|
||||
// toggle only makes sense then, so it stays hidden until this is confirmed.
|
||||
bool _pushMethodActive = false;
|
||||
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_isFirstRun = (PrefUtil.getValue('base_url', '') as String).isEmpty;
|
||||
_baseUrlController.text = PrefUtil.getValue('base_url', '') as String;
|
||||
_apiKeyController.text = XOR().xorDecode(
|
||||
PrefUtil.getValue('api_key', '') as String,
|
||||
);
|
||||
_readConnectionFromPrefs();
|
||||
_isFirstRun = _baseUrl.isEmpty;
|
||||
_selectedTheme = context.read<AppState>().themeKey;
|
||||
_pushService = widget.pushService ?? FirebasePushService();
|
||||
_pushEnabled = PrefUtil.getValue('push_enabled', false) as bool;
|
||||
_loadConfig();
|
||||
// First run / unconfigured: open the connection dialog immediately and keep
|
||||
// it open (non-dismissible) until the user saves a working configuration.
|
||||
if (_isFirstRun) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) _openConfigDialog(dismissible: false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void _readConnectionFromPrefs() {
|
||||
_baseUrl = PrefUtil.getValue('base_url', '') as String;
|
||||
_apiKey = XOR().xorDecode(PrefUtil.getValue('api_key', '') as String);
|
||||
}
|
||||
|
||||
// Learn the backend's notification method so the push toggle is only shown
|
||||
@@ -65,36 +70,19 @@ class _SettingsState extends State<Settings> {
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_baseUrlController.dispose();
|
||||
_apiKeyController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onConnectionChanged(String _) {
|
||||
setState(() {
|
||||
_testOk = false;
|
||||
_connectionModified = true;
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _testConnection() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
final result = await BackendAPI.test(
|
||||
_baseUrlController.text,
|
||||
_apiKeyController.text,
|
||||
// Opens the backend connection dialog and, on save, refreshes the screen with
|
||||
// the new connection details and re-reads the backend config.
|
||||
Future<void> _openConfigDialog({bool dismissible = true}) async {
|
||||
final saved = await showBackendConfigDialog(
|
||||
context,
|
||||
dismissible: dismissible,
|
||||
);
|
||||
if (!mounted) return;
|
||||
if (!mounted || !saved) return;
|
||||
setState(() {
|
||||
_testOk = result == null;
|
||||
if (result == null) _connectionModified = false;
|
||||
_isFirstRun = false;
|
||||
_readConnectionFromPrefs();
|
||||
});
|
||||
if (result == null) {
|
||||
UISnackbars.showSuccess(context, 'It works!');
|
||||
} else {
|
||||
UISnackbars.showError(context, result);
|
||||
}
|
||||
_loadConfig();
|
||||
}
|
||||
|
||||
// Enable or disable push on this specific device. The toggle reflects user
|
||||
@@ -141,107 +129,123 @@ class _SettingsState extends State<Settings> {
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _save() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
try {
|
||||
final urlOk = await PrefUtil.setValue(
|
||||
'base_url',
|
||||
_baseUrlController.text,
|
||||
);
|
||||
if (!mounted) return;
|
||||
final keyOk = await PrefUtil.setValue(
|
||||
'api_key',
|
||||
XOR().xorEncode(_apiKeyController.text),
|
||||
);
|
||||
if (!mounted) return;
|
||||
final themeOk = await context.read<AppState>().setTheme(_selectedTheme);
|
||||
if (!mounted) return;
|
||||
if (urlOk && keyOk && themeOk) {
|
||||
BackendAPI.instance.reconfigureFromPrefs();
|
||||
UISnackbars.showSuccess(context, 'Settings saved successfully');
|
||||
} else {
|
||||
UISnackbars.showError(context, 'Failed to save settings');
|
||||
}
|
||||
} catch (e) {
|
||||
debugPrint('Failed to save settings: $e');
|
||||
if (!mounted) return;
|
||||
UISnackbars.showError(context, 'Failed to save settings');
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final appColors = Theme.of(context).extension<AppColorExtension>()!;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
final saveDisabled = _connectionModified && !_testOk;
|
||||
|
||||
return SingleChildScrollView(
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (_isFirstRun) ...[
|
||||
Card(
|
||||
color: colorScheme.secondaryContainer,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(Insets.lg),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.waving_hand_outlined,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
const SizedBox(width: Insets.md),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Welcome to OOTT! Point the app at your server’s API '
|
||||
'to get started.',
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Insets.lg),
|
||||
],
|
||||
_buildConnectionSummary(context),
|
||||
const SizedBox(height: Insets.lg),
|
||||
_buildAppSettings(context),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Read-only summary of the backend connection with a link to reconfigure it.
|
||||
Widget _buildConnectionSummary(BuildContext context) {
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
final configured = _baseUrl.isNotEmpty;
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(Insets.lg),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (_isFirstRun) ...[
|
||||
Card(
|
||||
color: colorScheme.secondaryContainer,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(Insets.lg),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.waving_hand_outlined,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
const SizedBox(width: Insets.md),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Welcome to OOTT! Point the app at your server’s API '
|
||||
'below, then Test and Save to get started.',
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Backend connection',
|
||||
style: textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Insets.lg),
|
||||
],
|
||||
TextFormField(
|
||||
controller: _baseUrlController,
|
||||
onChanged: _onConnectionChanged,
|
||||
validator: (value) => value == null || value.isEmpty
|
||||
? 'The URL cannot be empty'
|
||||
: null,
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: "Base URL of your OOTT server's API",
|
||||
hintText: 'For example http://192.168.0.1:3000/api',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Insets.lg),
|
||||
TextFormField(
|
||||
controller: _apiKeyController,
|
||||
onChanged: _onConnectionChanged,
|
||||
validator: (value) => value == null || value.isEmpty
|
||||
? 'The API key cannot be empty'
|
||||
: null,
|
||||
obscureText: !_apiKeyVisible,
|
||||
decoration: InputDecoration(
|
||||
border: const UnderlineInputBorder(),
|
||||
labelText: 'API key',
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(
|
||||
_apiKeyVisible ? Icons.visibility : Icons.visibility_off,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _apiKeyVisible = !_apiKeyVisible),
|
||||
TextButton.icon(
|
||||
onPressed: () => _openConfigDialog(),
|
||||
icon: const Icon(Icons.edit_outlined),
|
||||
label: const Text('Re-configure'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: Insets.lg),
|
||||
const SizedBox(height: Insets.sm),
|
||||
_buildReadOnlyField(
|
||||
context,
|
||||
label: 'Base URL',
|
||||
value: configured ? _baseUrl : 'Not configured yet',
|
||||
),
|
||||
const SizedBox(height: Insets.md),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildReadOnlyField(
|
||||
context,
|
||||
label: 'API key',
|
||||
value: !configured
|
||||
? 'Not configured yet'
|
||||
: (_apiKeyVisible ? _apiKey : '••••••••'),
|
||||
),
|
||||
),
|
||||
if (configured)
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
_apiKeyVisible ? Icons.visibility : Icons.visibility_off,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _apiKeyVisible = !_apiKeyVisible),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// App-level preferences (theme, per-device push) that apply immediately.
|
||||
Widget _buildAppSettings(BuildContext context) {
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(Insets.lg),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('App settings', style: textTheme.titleLarge),
|
||||
const SizedBox(height: Insets.md),
|
||||
DropdownButtonFormField<String>(
|
||||
initialValue: _selectedTheme,
|
||||
decoration: const InputDecoration(
|
||||
@@ -258,8 +262,11 @@ class _SettingsState extends State<Settings> {
|
||||
child: Text('Gruvbox Dark'),
|
||||
),
|
||||
],
|
||||
// Applies immediately; the theme persists itself, no Save needed.
|
||||
onChanged: (value) {
|
||||
if (value != null) setState(() => _selectedTheme = value);
|
||||
if (value == null) return;
|
||||
setState(() => _selectedTheme = value);
|
||||
context.read<AppState>().setTheme(value);
|
||||
},
|
||||
),
|
||||
if (_pushService.isSupported && _pushMethodActive) ...[
|
||||
@@ -274,48 +281,32 @@ class _SettingsState extends State<Settings> {
|
||||
onChanged: _pushBusy ? null : _togglePush,
|
||||
),
|
||||
],
|
||||
const SizedBox(height: Insets.lg),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
FilledButton.icon(
|
||||
onPressed: () {
|
||||
_testConnection();
|
||||
},
|
||||
label: const Text('Test'),
|
||||
icon: Icon(_testOk ? Icons.check : Icons.play_arrow),
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: _testOk
|
||||
? appColors.success
|
||||
: colorScheme.secondary,
|
||||
foregroundColor: _testOk
|
||||
? appColors.onSuccess
|
||||
: colorScheme.onSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: Insets.sm),
|
||||
FilledButton.icon(
|
||||
onPressed: saveDisabled ? null : _save,
|
||||
label: const Text('Save'),
|
||||
icon: const Icon(Icons.save),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (saveDisabled) ...[
|
||||
const SizedBox(height: Insets.sm),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Test the connection before saving your changes.',
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildReadOnlyField(
|
||||
BuildContext context, {
|
||||
required String label,
|
||||
required String value,
|
||||
}) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Insets.xs),
|
||||
Text(value, style: textTheme.bodyLarge),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user