Frontend first draft

frontend/pweb/lib/pages/settings/profile/account/name.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+
+
+class AccountName extends StatefulWidget {
+  final String name;
+  final String title;
+  final String hintText;
+  final String errorText;
+
+  const AccountName({
+    super.key,
+    required this.name,
+    required this.title,
+    required this.hintText,
+    required this.errorText,
+  });
+
+  @override
+  State<AccountName> createState() => _AccountNameState();
+}
+
+class _AccountNameState extends State<AccountName> {
+  static const double _inputWidth = 200;
+  static const double _spacing = 8;
+  static const double _errorSpacing = 4;
+  static const double _borderWidth = 2;
+
+  late final TextEditingController _controller;
+  bool _isEditing = false;
+  late String _originalName;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.name);
+    _originalName = widget.name;
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _startEditing() => setState(() => _isEditing = true);
+
+  void _cancelEditing() {
+    setState(() {
+      _controller.text = _originalName;
+      _isEditing = false;
+    });
+  }
+
+  void _saveEditing() {
+    setState(() {
+      _originalName = _controller.text;
+      _isEditing = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (_isEditing)
+              SizedBox(
+                width: _inputWidth,
+                child: TextFormField(
+                  controller: _controller,
+                  style: theme.textTheme.headlineMedium?.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+                  autofocus: true,
+                  decoration: InputDecoration(
+                    hintText: widget.hintText,
+                    isDense: true,
+                    border: UnderlineInputBorder(
+                      borderSide: BorderSide(
+                        color: theme.colorScheme.primary,
+                        width: _borderWidth,
+                      ),
+                    ),
+                  ),
+                ),
+              )
+            else
+              Text(
+                _originalName,
+                style: theme.textTheme.headlineMedium?.copyWith(
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            const SizedBox(width: _spacing),
+            if (_isEditing) ...[
+              IconButton(
+                icon: Icon(Icons.check, color: theme.colorScheme.primary), 
+                onPressed: _saveEditing,
+              ),
+              IconButton(
+                icon: Icon(Icons.close, color: theme.colorScheme.error),
+                onPressed: _cancelEditing,
+              ),
+            ] else
+              IconButton(
+                icon: Icon(Icons.edit, color: theme.colorScheme.primary),
+                onPressed: _startEditing,
+              ),
+          ],
+        ),
+        const SizedBox(height: _errorSpacing),
+        if (widget.errorText.isEmpty)
+          Text(
+            widget.errorText,
+            style: theme.textTheme.bodySmall?.copyWith(
+              color: theme.colorScheme.error,
+            ),
+          ),
+      ],
+    );
+  }
+}