config security input suffix icon

app_flowy/lib/user/infrastructure/i_auth_impl.dart

@@ -1,5 +1,7 @@
 import 'package:app_flowy/workspace/presentation/home/home_screen.dart';
 import 'package:dartz/dartz.dart';
+import 'package:flowy_infra/time/duration.dart';
+import 'package:flowy_infra_ui/widget/route/animation.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart';
 import 'package:app_flowy/user/domain/i_auth.dart';
 import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart';
@@ -37,14 +39,7 @@ class AuthRouterImpl extends IAuthRouter {
 
   @override
   void showHomeScreen(BuildContext context, UserDetail user) {
-    Navigator.pushReplacement(
-      context,
-      MaterialPageRoute(
-        builder: (context) {
-          return HomeScreen(user);
-        },
-      ),
-    );
+    Navigator.of(context).push(PageRoutes.fade(() => HomeScreen(user)));
   }
 
   @override

app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart

@@ -121,7 +121,7 @@ class LoginButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RoundedButton(
+    return RoundedTextButton(
       title: 'Login',
       height: 65,
       borderRadius: BorderRadius.circular(10),

app_flowy/packages/flowy_infra/lib/time/duration.dart

@@ -13,4 +13,5 @@ class Durations {
 
 class RouteDurations {
   static Duration get slow => .7.seconds;
+  static Duration get medium => .35.seconds;
 }

app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-class RoundedButton extends StatelessWidget {
+class RoundedTextButton extends StatelessWidget {
   final VoidCallback? press;
   final String? title;
   final double? width;
@@ -10,7 +10,7 @@ class RoundedButton extends StatelessWidget {
   final Color color;
   final Color textColor;
 
-  const RoundedButton({
+  const RoundedTextButton({
     Key? key,
     this.press,
     this.title,
@@ -48,3 +48,39 @@ class RoundedButton extends StatelessWidget {
     );
   }
 }
+
+class RoundedImageButton extends StatelessWidget {
+  final VoidCallback? press;
+  final double size;
+  final BorderRadius borderRadius;
+  final Color borderColor;
+  final Color color;
+  final Widget child;
+
+  const RoundedImageButton({
+    Key? key,
+    this.press,
+    required this.size,
+    this.borderRadius = BorderRadius.zero,
+    this.borderColor = Colors.transparent,
+    this.color = Colors.transparent,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: size,
+      height: size,
+      child: TextButton(
+        onPressed: press,
+        style: ButtonStyle(
+            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                RoundedRectangleBorder(
+          borderRadius: borderRadius,
+        ))),
+        child: child,
+      ),
+    );
+  }
+}

app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -1,8 +1,10 @@
+import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/text_field_container.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/time/duration.dart';
 
-class RoundedInputField extends StatelessWidget {
+// ignore: must_be_immutable
+class RoundedInputField extends StatefulWidget {
   final String? hintText;
   final IconData? icon;
   final bool obscureText;
@@ -10,8 +12,9 @@ class RoundedInputField extends StatelessWidget {
   final Color highlightBorderColor;
   final String errorText;
   final ValueChanged<String>? onChanged;
+  late bool enableObscure;
 
-  const RoundedInputField({
+  RoundedInputField({
     Key? key,
     this.hintText,
     this.icon,
@@ -20,20 +23,27 @@ class RoundedInputField extends StatelessWidget {
     this.normalBorderColor = Colors.transparent,
     this.highlightBorderColor = Colors.transparent,
     this.errorText = "",
-  }) : super(key: key);
+  }) : super(key: key) {
+    enableObscure = obscureText;
+  }
+
+  @override
+  State<RoundedInputField> createState() => _RoundedInputFieldState();
+}
 
+class _RoundedInputFieldState extends State<RoundedInputField> {
   @override
   Widget build(BuildContext context) {
-    final Icon? newIcon = icon == null
+    final Icon? newIcon = widget.icon == null
         ? null
         : Icon(
-            icon!,
+            widget.icon!,
             color: const Color(0xFF6F35A5),
           );
 
-    var borderColor = normalBorderColor;
-    if (errorText.isNotEmpty) {
-      borderColor = highlightBorderColor;
+    var borderColor = widget.normalBorderColor;
+    if (widget.errorText.isNotEmpty) {
+      borderColor = widget.highlightBorderColor;
     }
 
     List<Widget> children = [
@@ -41,28 +51,46 @@ class RoundedInputField extends StatelessWidget {
         borderRadius: BorderRadius.circular(10),
         borderColor: borderColor,
         child: TextFormField(
-          onChanged: onChanged,
+          onChanged: widget.onChanged,
           cursorColor: const Color(0xFF6F35A5),
-          obscureText: obscureText,
+          obscureText: widget.enableObscure,
           decoration: InputDecoration(
             icon: newIcon,
-            hintText: hintText,
+            hintText: widget.hintText,
             border: InputBorder.none,
+            suffixIcon: suffixIcon(),
           ),
         ),
       ),
     ];
 
-    if (errorText.isNotEmpty) {
-      children
-          .add(Text(errorText, style: TextStyle(color: highlightBorderColor)));
+    if (widget.errorText.isNotEmpty) {
+      children.add(Text(
+        widget.errorText,
+        style: TextStyle(color: widget.highlightBorderColor),
+      ));
     }
 
-    return AnimatedContainer(
-      duration: .3.seconds,
+    return AnimatedSize(
+      duration: .4.seconds,
+      curve: Curves.easeInOut,
       child: Column(
         children: children,
       ),
     );
   }
+
+  Widget? suffixIcon() {
+    if (widget.obscureText == false) {
+      return null;
+    }
+    return RoundedImageButton(
+      size: 20,
+      press: () {
+        widget.enableObscure = !widget.enableObscure;
+        setState(() {});
+      },
+      child: const Icon(Icons.password, size: 15),
+    );
+  }
 }

app_flowy/packages/flowy_infra_ui/lib/widget/text_field_container.dart

@@ -5,22 +5,24 @@ class TextFieldContainer extends StatelessWidget {
   final Widget child;
   final BorderRadius borderRadius;
   final Color borderColor;
-  final Size? size;
+  final double? height;
+  final double? width;
   const TextFieldContainer({
     Key? key,
     required this.child,
     this.borderRadius = BorderRadius.zero,
     this.borderColor = Colors.white,
-    this.size,
+    this.height,
+    this.width,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    double height = size == null ? 50 : size!.height;
     return Container(
       margin: const EdgeInsets.symmetric(vertical: 10),
       padding: const EdgeInsets.symmetric(horizontal: 15),
       height: height,
+      width: width,
       decoration: BoxDecoration(
         border: Border.all(color: borderColor),
         color: Colors.white,