refactor: extract email change modal into a dedicated StatefulWidget to improve state management and lifecycle handling
This commit is contained in:
pradeepkumar
@@ -431,55 +431,90 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
}
|
||||
|
||||
Future<void> _openChangeEmailDialog() async {
|
||||
final newEmailCtl = TextEditingController();
|
||||
final passwordCtl = TextEditingController();
|
||||
String? localError;
|
||||
bool submitting = false;
|
||||
bool obscurePw = true;
|
||||
|
||||
await showModalBottomSheet<void>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: (sheetCtx) {
|
||||
return StatefulBuilder(
|
||||
builder: (sheetCtx, setSheetState) {
|
||||
Future<void> submit() async {
|
||||
final email = newEmailCtl.text.trim();
|
||||
final pw = passwordCtl.text;
|
||||
return _ChangeEmailSheet(
|
||||
onSubmit: (email, password) async {
|
||||
final repo = ref.read(profileRepositoryProvider);
|
||||
return repo.requestEmailChange(email, password);
|
||||
},
|
||||
onSuccess: (message) {
|
||||
if (mounted) _showSnackBar(message);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Bottom-sheet widget for changing email. Owns its own controllers so they
|
||||
/// remain valid throughout the dismiss animation, then disposes cleanly.
|
||||
class _ChangeEmailSheet extends StatefulWidget {
|
||||
final Future<String> Function(String email, String password) onSubmit;
|
||||
final void Function(String message) onSuccess;
|
||||
|
||||
const _ChangeEmailSheet({
|
||||
required this.onSubmit,
|
||||
required this.onSuccess,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_ChangeEmailSheet> createState() => _ChangeEmailSheetState();
|
||||
}
|
||||
|
||||
class _ChangeEmailSheetState extends State<_ChangeEmailSheet> {
|
||||
final _newEmailCtl = TextEditingController();
|
||||
final _passwordCtl = TextEditingController();
|
||||
String? _localError;
|
||||
bool _submitting = false;
|
||||
bool _obscurePw = true;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_newEmailCtl.dispose();
|
||||
_passwordCtl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _submit() async {
|
||||
final email = _newEmailCtl.text.trim();
|
||||
final pw = _passwordCtl.text;
|
||||
if (email.isEmpty || pw.isEmpty) {
|
||||
setSheetState(() => localError =
|
||||
setState(() => _localError =
|
||||
'Please enter a new email and your current password');
|
||||
return;
|
||||
}
|
||||
setSheetState(() {
|
||||
submitting = true;
|
||||
localError = null;
|
||||
setState(() {
|
||||
_submitting = true;
|
||||
_localError = null;
|
||||
});
|
||||
try {
|
||||
final repo = ref.read(profileRepositoryProvider);
|
||||
final message = await repo.requestEmailChange(email, pw);
|
||||
if (sheetCtx.mounted) Navigator.of(sheetCtx).pop();
|
||||
if (mounted) _showSnackBar(message);
|
||||
final message = await widget.onSubmit(email, pw);
|
||||
if (!mounted) return;
|
||||
Navigator.of(context).pop();
|
||||
widget.onSuccess(message);
|
||||
} catch (e) {
|
||||
setSheetState(() {
|
||||
submitting = false;
|
||||
localError = e.toString().replaceFirst('Exception: ', '');
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_submitting = false;
|
||||
_localError = e.toString().replaceFirst('Exception: ', '');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add bottom inset so the sheet rises above the keyboard.
|
||||
final bottomInset = MediaQuery.of(sheetCtx).viewInsets.bottom;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(bottom: bottomInset),
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(24),
|
||||
),
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
),
|
||||
padding: const EdgeInsets.fromLTRB(24, 12, 24, 24),
|
||||
child: SafeArea(
|
||||
@@ -521,51 +556,47 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
_buildSheetLabel('New Email'),
|
||||
_label('New Email'),
|
||||
const SizedBox(height: 6),
|
||||
TextField(
|
||||
controller: newEmailCtl,
|
||||
controller: _newEmailCtl,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autocorrect: false,
|
||||
enableSuggestions: false,
|
||||
textCapitalization: TextCapitalization.none,
|
||||
autofillHints: const [AutofillHints.email],
|
||||
decoration: _sheetInputDecoration(
|
||||
'new@example.com',
|
||||
),
|
||||
decoration: _decoration('new@example.com'),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
_buildSheetLabel('Current Password'),
|
||||
_label('Current Password'),
|
||||
const SizedBox(height: 6),
|
||||
TextField(
|
||||
controller: passwordCtl,
|
||||
obscureText: obscurePw,
|
||||
controller: _passwordCtl,
|
||||
obscureText: _obscurePw,
|
||||
autocorrect: false,
|
||||
enableSuggestions: false,
|
||||
// Empty autofillHints prevents iOS from showing the
|
||||
// "Strong Password" suggestion bar, which was adding
|
||||
// extra bottom inset.
|
||||
// "Strong Password" suggestion bar.
|
||||
autofillHints: const <String>[],
|
||||
decoration: _sheetInputDecoration(
|
||||
decoration: _decoration(
|
||||
'Enter your current password',
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(
|
||||
obscurePw
|
||||
_obscurePw
|
||||
? Icons.visibility_off_outlined
|
||||
: Icons.visibility_outlined,
|
||||
color: const Color(0xFF6B7280),
|
||||
size: 20,
|
||||
),
|
||||
onPressed: () => setSheetState(
|
||||
() => obscurePw = !obscurePw,
|
||||
onPressed: () =>
|
||||
setState(() => _obscurePw = !_obscurePw),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (localError != null) ...[
|
||||
if (_localError != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
localError!,
|
||||
_localError!,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
color: Colors.red,
|
||||
@@ -578,16 +609,13 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
children: [
|
||||
Expanded(
|
||||
child: OutlinedButton(
|
||||
onPressed: submitting
|
||||
onPressed: _submitting
|
||||
? null
|
||||
: () => Navigator.of(sheetCtx).pop(),
|
||||
: () => Navigator.of(context).pop(),
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: const BorderSide(
|
||||
color: Color(0xFFE5E7EB),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 14,
|
||||
),
|
||||
side: const BorderSide(color: Color(0xFFE5E7EB)),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 14),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
@@ -606,20 +634,19 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: submitting ? null : submit,
|
||||
onPressed: _submitting ? null : _submit,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.accentOrange,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 14,
|
||||
),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 14),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: Text(
|
||||
submitting ? 'Sending...' : 'Send Link',
|
||||
_submitting ? 'Sending...' : 'Send Link',
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
@@ -636,17 +663,9 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
newEmailCtl.dispose();
|
||||
passwordCtl.dispose();
|
||||
}
|
||||
|
||||
Widget _buildSheetLabel(String text) {
|
||||
return Text(
|
||||
Widget _label(String text) => Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
@@ -655,9 +674,8 @@ class _ProfileSettingsTabState extends ConsumerState<ProfileSettingsTab> {
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
InputDecoration _sheetInputDecoration(String hint, {Widget? suffixIcon}) {
|
||||
InputDecoration _decoration(String hint, {Widget? suffixIcon}) {
|
||||
return InputDecoration(
|
||||
hintText: hint,
|
||||
hintStyle: const TextStyle(
|
||||
|
||||
Reference in New Issue
Block a user