助记词校验,登录

lib/views/auth/create/verify_page.dart

@@ -1,4 +1,6 @@
 import 'package:chat/configs/app_colors.dart';
+import 'package:chat/routes/app_routes.dart';
+import 'package:chat/services/auth_service.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
@@ -11,13 +13,21 @@ class AuthCreateVerifyPage extends StatefulWidget {
 
 class _AuthCreateVerifyPageState extends State<AuthCreateVerifyPage> {
   late final List<String> _mnemonicList;
+  late final List<String> _originList;
+  List<String> _sureList = List<String>.generate(12, (index) => '');
+
   @override
   void initState() {
     super.initState();
     Get.arguments['language'];
     var m = Get.arguments['mnemonic'] as List<String>;
+    _originList = List.from(m);
     m.shuffle();
     _mnemonicList = m;
+
+    setState(() {
+      _sureList = _originList;
+    });
   }
 
   @override
@@ -26,25 +36,103 @@ class _AuthCreateVerifyPageState extends State<AuthCreateVerifyPage> {
       appBar: AppBar(
         title: const Text('校验助记词'),
       ),
-      body: _moArea(_mnemonicList),
+      body: ListView(
+        padding: const EdgeInsets.all(16),
+        children: [
+          _sureArea(),
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 8),
+            child: Text('请按正确顺序点击您所备份的助记词'),
+          ),
+          _moArea(_mnemonicList),
+          const SizedBox(height: 16),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: [
+              ElevatedButton(
+                onPressed: () {
+                  setState(() {
+                    _sureList = List<String>.generate(12, (index) => '');
+                  });
+                },
+                child: const Text('重新输入'),
+              ),
+              ElevatedButton(
+                onPressed: _originList.join('') == _sureList.join('')
+                    ? () async {
+                        var result =
+                            await AuthService.to.login(_originList.join(' '));
+                        if (result) {
+                          Get.offAllNamed(AppRoutes.app);
+                        }
+                      }
+                    : null,
+                child: const Text('确认备份'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _sureArea() {
+    return GridView.builder(
+      shrinkWrap: true,
+      physics: const ClampingScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: 4.5 / 1,
+        crossAxisSpacing: 8,
+        mainAxisSpacing: 8,
+      ),
+      itemCount: 12,
+      itemBuilder: (_, i) {
+        return Container(
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            border: Border.all(
+              color: AppColors.border,
+              width: 1,
+            ),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Text(
+            '${i + 1}. ${_sureList[i]}',
+            style: const TextStyle(
+              fontSize: 16,
+            ),
+          ),
+        );
+      },
     );
   }
 
   Widget _moArea(List<String> mnemonic) {
-    return Padding(
-      padding: const EdgeInsets.all(16.0),
-      child: GridView.builder(
-        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 2,
-          childAspectRatio: 4.5 / 1,
-          crossAxisSpacing: 8,
-          mainAxisSpacing: 8,
-        ),
-        itemCount: mnemonic.length,
-        itemBuilder: (_, i) {
-          return Container(
+    return GridView.builder(
+      shrinkWrap: true,
+      physics: const ClampingScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: 4.5 / 1,
+        crossAxisSpacing: 8,
+        mainAxisSpacing: 8,
+      ),
+      itemCount: mnemonic.length,
+      itemBuilder: (_, i) {
+        return InkWell(
+          onTap: !_sureList.contains(mnemonic[i])
+              ? () {
+                  int len = _sureList.where((element) => element != '').length;
+                  setState(() {
+                    _sureList[len] = mnemonic[i];
+                  });
+                }
+              : null,
+          child: Container(
             padding: const EdgeInsets.all(8),
             decoration: BoxDecoration(
+              color: _sureList.contains(mnemonic[i]) ? AppColors.primary : null,
               border: Border.all(
                 color: AppColors.border,
                 width: 1,
@@ -52,14 +140,14 @@ class _AuthCreateVerifyPageState extends State<AuthCreateVerifyPage> {
               borderRadius: BorderRadius.circular(8),
             ),
             child: Text(
-              '${i + 1}. ${mnemonic[i]}',
+              mnemonic[i],
               style: const TextStyle(
                 fontSize: 16,
               ),
             ),
-          );
-        },
-      ),
+          ),
+        );
+      },
     );
   }
 }