忘記密碼介面設計

lib/forgot_password.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+
+class ForgotPasswordPage extends StatefulWidget {
+  const ForgotPasswordPage({super.key});
+
+  @override
+  State<ForgotPasswordPage> createState() => _ForgotPasswordPageState();
+}
+
+class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
+  final TextEditingController _emailController = TextEditingController();
+  String _statusMessage = '';
+  Color _statusColor = Colors.green;
+
+  void _submitEmail() {
+    final email = _emailController.text.trim();
+
+    setState(() {
+      if (!email.contains('@')) {
+        _statusMessage = '❌ 請輸入有效的電子郵件地址';
+        _statusColor = Colors.red;
+      } else {
+        // 模擬發送成功
+        _statusMessage = '📨 重設密碼的連結已寄出，請至信箱查收！';
+        _statusColor = Colors.green;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF7F8FA),
+      appBar: AppBar(
+        backgroundColor: const Color(0xFF9EAFAF),
+        title: const Text(
+          '忘記密碼',
+          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
+        ),
+        centerTitle: true,
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back, color: Colors.white),
+          onPressed: () => Navigator.of(context).pop(),
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(20.0),
+        child: Container(
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.05),
+                blurRadius: 4,
+                offset: const Offset(0, 2),
+              ),
+            ],
+          ),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Text(
+                '請輸入您的電子郵件',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 10),
+              const Text(
+                '我們將會寄送重設密碼的連結至您的信箱',
+                style: TextStyle(color: Colors.grey),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 24),
+              TextField(
+                controller: _emailController,
+                keyboardType: TextInputType.emailAddress,
+                decoration: const InputDecoration(
+                  border: OutlineInputBorder(),
+                  labelText: '電子郵件',
+                  hintText: 'example@email.com',
+                ),
+              ),
+              const SizedBox(height: 24),
+              SizedBox(
+                width: double.infinity,
+                child: ElevatedButton(
+                  onPressed: _submitEmail,
+                  style: ElevatedButton.styleFrom(
+                    padding: const EdgeInsets.symmetric(vertical: 16),
+                    textStyle: const TextStyle(fontSize: 16),
+                  ),
+                  child: const Text('發送重設連結'),
+                ),
+              ),
+              const SizedBox(height: 20),
+              if (_statusMessage.isNotEmpty)
+                Text(
+                  _statusMessage,
+                  style: TextStyle(
+                    color: _statusColor,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/login_page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'home_page.dart'; // 要跳轉的頁面
 import 'new_resident_step.dart';
+import 'forgot_password.dart';
 
 class LoginPage extends StatefulWidget {
   const LoginPage({super.key});
@@ -147,7 +148,12 @@ class _LoginPageState extends State<LoginPage> {
                     ),
                     OutlinedButton(
                       onPressed: () {
-                        // TODO: 忘記密碼事件
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                            builder: (context) => const ForgotPasswordPage(),
+                          ),
+                        );
                       },
                       style: OutlinedButton.styleFrom(
                         foregroundColor: Colors.indigo,