feat: implement NPM Proxy Hosts section with reusable entity patterns
Add full Proxy Hosts feature for Control Room: - Data layer: datasource, model with custom JSON converters for NPM API quirks - Domain layer: ProxyHost entity with SSL, caching, websocket support - Presentation: list page, detail/edit page, form widget Add reusable entity page patterns for Control Room sections: - EntityPageScaffold, EntitySection, EntitySettingRow components - EntityForm with create/view/edit mode support - EntityPageModeMixin for consistent mode management - CreateOnlyField for immutable-after-creation fields 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
67d2f777c8
commit
2adb50b352
@@ -0,0 +1,291 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/control_room/npm/domain/entities/proxy_host.dart';
|
||||
import 'package:tatlock_ui/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/entity_form_dialog.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/entity_page.dart';
|
||||
|
||||
/// Form for creating or editing a proxy host.
|
||||
class ProxyHostForm extends ConsumerStatefulWidget {
|
||||
const ProxyHostForm({
|
||||
super.key,
|
||||
this.proxyHost,
|
||||
this.mode = EntityPageMode.create,
|
||||
required this.onCancel,
|
||||
required this.onSaved,
|
||||
});
|
||||
|
||||
/// Existing proxy host for editing (null for create).
|
||||
final ProxyHost? proxyHost;
|
||||
|
||||
/// Form mode - create or edit.
|
||||
final EntityPageMode mode;
|
||||
|
||||
final VoidCallback onCancel;
|
||||
final VoidCallback onSaved;
|
||||
|
||||
bool get isEditing => mode == EntityPageMode.edit;
|
||||
|
||||
@override
|
||||
ConsumerState<ProxyHostForm> createState() => _ProxyHostFormState();
|
||||
}
|
||||
|
||||
class _ProxyHostFormState extends ConsumerState<ProxyHostForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
|
||||
late final TextEditingController _domainController;
|
||||
late final TextEditingController _forwardHostController;
|
||||
late final TextEditingController _forwardPortController;
|
||||
|
||||
late String _forwardScheme;
|
||||
late bool _forceSSL;
|
||||
late bool _http2Support;
|
||||
late bool _websocketSupport;
|
||||
late bool _blockExploits;
|
||||
late bool _cacheAssets;
|
||||
|
||||
bool _isSaving = false;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final host = widget.proxyHost;
|
||||
|
||||
_domainController = TextEditingController(
|
||||
text: host?.domainNames.join(', ') ?? '',
|
||||
);
|
||||
_forwardHostController = TextEditingController(
|
||||
text: host?.forwardHost ?? '',
|
||||
);
|
||||
_forwardPortController = TextEditingController(
|
||||
text: host?.forwardPort.toString() ?? '80',
|
||||
);
|
||||
|
||||
_forwardScheme = host?.forwardScheme ?? 'http';
|
||||
_forceSSL = host?.forceSSL ?? false;
|
||||
_http2Support = host?.http2Support ?? false;
|
||||
_websocketSupport = host?.websocketSupport ?? false;
|
||||
_blockExploits = host?.blockExploits ?? true;
|
||||
_cacheAssets = host?.cacheAssets ?? false;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_domainController.dispose();
|
||||
_forwardHostController.dispose();
|
||||
_forwardPortController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _handleSave() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
|
||||
setState(() {
|
||||
_isSaving = true;
|
||||
_error = null;
|
||||
});
|
||||
|
||||
try {
|
||||
final domains = _domainController.text
|
||||
.split(',')
|
||||
.map((d) => d.trim())
|
||||
.where((d) => d.isNotEmpty)
|
||||
.toList();
|
||||
|
||||
if (widget.isEditing) {
|
||||
await ref.read(updateProxyHostProvider(
|
||||
id: widget.proxyHost!.id,
|
||||
config: {
|
||||
'domain_names': domains,
|
||||
'forward_scheme': _forwardScheme,
|
||||
'forward_host': _forwardHostController.text,
|
||||
'forward_port': int.parse(_forwardPortController.text),
|
||||
'ssl_forced': _forceSSL,
|
||||
'http2_support': _http2Support ? 1 : 0,
|
||||
'allow_websocket_upgrade': _websocketSupport ? 1 : 0,
|
||||
'block_exploits': _blockExploits ? 1 : 0,
|
||||
'caching_enabled': _cacheAssets ? 1 : 0,
|
||||
},
|
||||
).future);
|
||||
} else {
|
||||
await ref.read(createProxyHostProvider(
|
||||
domainNames: domains,
|
||||
forwardScheme: _forwardScheme,
|
||||
forwardHost: _forwardHostController.text,
|
||||
forwardPort: int.parse(_forwardPortController.text),
|
||||
).future);
|
||||
}
|
||||
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(widget.isEditing
|
||||
? 'Proxy host updated successfully'
|
||||
: 'Proxy host created successfully'),
|
||||
backgroundColor: Colors.green,
|
||||
),
|
||||
);
|
||||
widget.onSaved();
|
||||
}
|
||||
} catch (e) {
|
||||
setState(() => _error = e.toString());
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => _isSaving = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return EntityForm(
|
||||
formKey: _formKey,
|
||||
mode: widget.mode,
|
||||
onCancel: widget.onCancel,
|
||||
onSave: _handleSave,
|
||||
isSaving: _isSaving,
|
||||
error: _error,
|
||||
children: [
|
||||
// Domain Names
|
||||
Text('Domain Names', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
TextFormField(
|
||||
controller: _domainController,
|
||||
decoration: const InputDecoration(
|
||||
hintText: 'example.com, www.example.com',
|
||||
helperText: 'Separate multiple domains with commas',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return 'At least one domain is required';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Forward Destination
|
||||
Text('Forward Destination', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Scheme dropdown
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: DropdownButtonFormField<String>(
|
||||
initialValue: _forwardScheme,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Scheme',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
items: const [
|
||||
DropdownMenuItem(value: 'http', child: Text('HTTP')),
|
||||
DropdownMenuItem(value: 'https', child: Text('HTTPS')),
|
||||
],
|
||||
onChanged: (value) {
|
||||
if (value != null) setState(() => _forwardScheme = value);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Host
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: TextFormField(
|
||||
controller: _forwardHostController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Host',
|
||||
hintText: '192.168.1.100 or hostname',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return 'Host is required';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Port
|
||||
SizedBox(
|
||||
width: 100,
|
||||
child: TextFormField(
|
||||
controller: _forwardPortController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Port',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return 'Required';
|
||||
}
|
||||
final port = int.tryParse(value);
|
||||
if (port == null || port < 1 || port > 65535) {
|
||||
return 'Invalid';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// SSL & Security Options
|
||||
Text('SSL & Security', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Column(
|
||||
children: [
|
||||
SwitchListTile(
|
||||
title: const Text('Force SSL'),
|
||||
subtitle: const Text('Redirect HTTP to HTTPS'),
|
||||
value: _forceSSL,
|
||||
onChanged: (v) => setState(() => _forceSSL = v),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
SwitchListTile(
|
||||
title: const Text('HTTP/2 Support'),
|
||||
value: _http2Support,
|
||||
onChanged: (v) => setState(() => _http2Support = v),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
SwitchListTile(
|
||||
title: const Text('Block Common Exploits'),
|
||||
value: _blockExploits,
|
||||
onChanged: (v) => setState(() => _blockExploits = v),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Advanced Options
|
||||
Text('Advanced', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Column(
|
||||
children: [
|
||||
SwitchListTile(
|
||||
title: const Text('WebSocket Support'),
|
||||
value: _websocketSupport,
|
||||
onChanged: (v) => setState(() => _websocketSupport = v),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
SwitchListTile(
|
||||
title: const Text('Cache Assets'),
|
||||
value: _cacheAssets,
|
||||
onChanged: (v) => setState(() => _cacheAssets = v),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user