💄 Change password mangement UX

archethic-foundation · Jun 28, 2024 · 7e7f095 · 7e7f095
1 parent 7d491a5
commit 7e7f095
Show file tree

Hide file tree

Showing 4 changed files with 398 additions and 218 deletions.
diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
@@ -243,6 +243,7 @@
     "enterPasswordHint": "Enter your password",
     "passwordsDontMatch": "Passwords do not match",
     "passwordBlank": "Password cannot be empty",
+    "passwordConfirmationBlank": "Password confirmation cannot be empty",
     "welcomeDisclaimerChoice": "I have read and agree to the privacy policy",
     "welcomeDisclaimerLink": "Terms of use",
     "showBalances": "Show balances",

diff --git a/lib/l10n/intl_fr.arb b/lib/l10n/intl_fr.arb
@@ -233,6 +233,7 @@
     "enterPasswordHint": "Saisissez votre mot de passe",
     "passwordsDontMatch": "Les mots de passe ne correspondent pas",
     "passwordBlank": "Le mot de passe est obligatoire",
+    "passwordConfirmationBlank": "La confirmation du mot de passe est obligatoire",
     "passwordStrengthWeak": "Votre mot de passe est faible.",
     "passwordStrengthAlright": "Votre mot de passe est bon.",
     "passwordStrengthStrong": "Votre mot de passe est fort.",

diff --git a/lib/ui/views/authenticate/password_screen.dart b/lib/ui/views/authenticate/password_screen.dart
@@ -16,6 +16,8 @@ import 'package:aewallet/ui/widgets/components/sheet_skeleton.dart';
 import 'package:aewallet/ui/widgets/components/sheet_skeleton_interface.dart';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_gen/gen_l10n/localizations.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
@@ -171,59 +173,108 @@ class _PasswordScreenState extends ConsumerState<PasswordScreen>
 
   @override
   Widget getSheetContent(BuildContext context, WidgetRef ref) {
-    final localizations = AppLocalizations.of(context)!;
-
     final passwordAuthentication = ref.watch(
       AuthenticationProviders.passwordAuthentication,
     );
 
     return Column(
-      children: <Widget>[
-        AppTextField(
-          topMargin: 30,
-          padding: const EdgeInsetsDirectional.only(
-            start: 16,
-            end: 16,
-          ),
-          focusNode: enterPasswordFocusNode,
-          controller: enterPasswordController,
-          textInputAction: TextInputAction.done,
-          autocorrect: false,
-          autofocus: true,
-          onChanged: (String newText) {
-            setState(() {
-              if (passwordError != null) {
-                passwordError = null;
-              }
-            });
-          },
-          onSubmitted: (value) async {
-            _unfocus();
-            await _verifyPassword();
-          },
-          labelText: localizations.enterPasswordHint,
-          keyboardType: TextInputType.text,
-          obscureText: !enterPasswordVisible!,
-          style: ArchethicThemeStyles.textStyleSize16W700Primary,
-          suffixButton: TextFieldButton(
-            icon: enterPasswordVisible!
-                ? Symbols.visibility
-                : Symbols.visibility_off,
-            onPressed: () {
-              setState(() {
-                enterPasswordVisible = !enterPasswordVisible!;
-              });
-            },
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(bottom: 5),
+          child: Text(
+            AppLocalizations.of(context)!.enterPasswordHint,
           ),
         ),
+        Row(
+          children: [
+            SizedBox(
+              width: MediaQuery.of(context).size.width - 80,
+              child: Row(
+                children: [
+                  Expanded(
+                    child: DecoratedBox(
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(20),
+                      ),
+                      child: Row(
+                        children: [
+                          Expanded(
+                            child: DecoratedBox(
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(
+                                  10,
+                                ),
+                                border: Border.all(
+                                  color: Theme.of(context)
+                                      .colorScheme
+                                      .primaryContainer,
+                                  width: 0.5,
+                                ),
+                                gradient:
+                                    ArchethicTheme.gradientInputFormBackground,
+                              ),
+                              child: TextField(
+                                style: const TextStyle(
+                                  fontSize: 14,
+                                ),
+                                autocorrect: false,
+                                controller: enterPasswordController,
+                                obscureText: !enterPasswordVisible!,
+                                onChanged: (String newText) {
+                                  setState(() {
+                                    if (passwordError != null) {
+                                      passwordError = null;
+                                    }
+                                  });
+                                },
+                                onSubmitted: (value) async {
+                                  _unfocus();
+                                  await _verifyPassword();
+                                },
+                                focusNode: enterPasswordFocusNode,
+                                textInputAction: TextInputAction.next,
+                                keyboardType: TextInputType.text,
+                                inputFormatters: <TextInputFormatter>[
+                                  LengthLimitingTextInputFormatter(
+                                    20,
+                                  ),
+                                ],
+                                decoration: const InputDecoration(
+                                  border: InputBorder.none,
+                                  contentPadding: EdgeInsets.only(left: 10),
+                                ),
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            TextFieldButton(
+              icon: enterPasswordVisible!
+                  ? Symbols.visibility
+                  : Symbols.visibility_off,
+              onPressed: () {
+                setState(() {
+                  enterPasswordVisible = !enterPasswordVisible!;
+                });
+              },
+            ),
+          ],
+        ),
         if (passwordAuthentication.failedAttemptsCount > 0)
           Container(
+            alignment: Alignment.center,
             margin: const EdgeInsets.symmetric(
               horizontal: 40,
               vertical: 10,
             ),
             child: AutoSizeText(
-              '${localizations.attempt}${passwordAuthentication.failedAttemptsCount}/${passwordAuthentication.maxAttemptsCount}',
+              '${AppLocalizations.of(context)!.attempt}${passwordAuthentication.failedAttemptsCount}/${passwordAuthentication.maxAttemptsCount}',
               style: ArchethicThemeStyles.textStyleSize14W200Primary,
               textAlign: TextAlign.center,
               maxLines: 1,
@@ -239,6 +290,9 @@ class _PasswordScreenState extends ConsumerState<PasswordScreen>
           ),
         ),
       ],
-    );
+    )
+        .animate()
+        .fade(duration: const Duration(milliseconds: 200))
+        .scale(duration: const Duration(milliseconds: 200));
   }
 }