mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
config security input suffix icon
This commit is contained in:
parent
771162e80b
commit
7a32d4a087
app_flowy
lib/user
packages
flowy_infra/lib/time
flowy_infra_ui/lib/widget
@ -1,5 +1,7 @@
|
|||||||
import 'package:app_flowy/workspace/presentation/home/home_screen.dart';
|
import 'package:app_flowy/workspace/presentation/home/home_screen.dart';
|
||||||
import 'package:dartz/dartz.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:flowy_sdk/protobuf/flowy-user/protobuf.dart';
|
||||||
import 'package:app_flowy/user/domain/i_auth.dart';
|
import 'package:app_flowy/user/domain/i_auth.dart';
|
||||||
import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart';
|
import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart';
|
||||||
@ -37,14 +39,7 @@ class AuthRouterImpl extends IAuthRouter {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
void showHomeScreen(BuildContext context, UserDetail user) {
|
void showHomeScreen(BuildContext context, UserDetail user) {
|
||||||
Navigator.pushReplacement(
|
Navigator.of(context).push(PageRoutes.fade(() => HomeScreen(user)));
|
||||||
context,
|
|
||||||
MaterialPageRoute(
|
|
||||||
builder: (context) {
|
|
||||||
return HomeScreen(user);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
@ -121,7 +121,7 @@ class LoginButton extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return RoundedButton(
|
return RoundedTextButton(
|
||||||
title: 'Login',
|
title: 'Login',
|
||||||
height: 65,
|
height: 65,
|
||||||
borderRadius: BorderRadius.circular(10),
|
borderRadius: BorderRadius.circular(10),
|
||||||
|
@ -13,4 +13,5 @@ class Durations {
|
|||||||
|
|
||||||
class RouteDurations {
|
class RouteDurations {
|
||||||
static Duration get slow => .7.seconds;
|
static Duration get slow => .7.seconds;
|
||||||
|
static Duration get medium => .35.seconds;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class RoundedButton extends StatelessWidget {
|
class RoundedTextButton extends StatelessWidget {
|
||||||
final VoidCallback? press;
|
final VoidCallback? press;
|
||||||
final String? title;
|
final String? title;
|
||||||
final double? width;
|
final double? width;
|
||||||
@ -10,7 +10,7 @@ class RoundedButton extends StatelessWidget {
|
|||||||
final Color color;
|
final Color color;
|
||||||
final Color textColor;
|
final Color textColor;
|
||||||
|
|
||||||
const RoundedButton({
|
const RoundedTextButton({
|
||||||
Key? key,
|
Key? key,
|
||||||
this.press,
|
this.press,
|
||||||
this.title,
|
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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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:flowy_infra_ui/widget/text_field_container.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flowy_infra/time/duration.dart';
|
import 'package:flowy_infra/time/duration.dart';
|
||||||
|
|
||||||
class RoundedInputField extends StatelessWidget {
|
// ignore: must_be_immutable
|
||||||
|
class RoundedInputField extends StatefulWidget {
|
||||||
final String? hintText;
|
final String? hintText;
|
||||||
final IconData? icon;
|
final IconData? icon;
|
||||||
final bool obscureText;
|
final bool obscureText;
|
||||||
@ -10,8 +12,9 @@ class RoundedInputField extends StatelessWidget {
|
|||||||
final Color highlightBorderColor;
|
final Color highlightBorderColor;
|
||||||
final String errorText;
|
final String errorText;
|
||||||
final ValueChanged<String>? onChanged;
|
final ValueChanged<String>? onChanged;
|
||||||
|
late bool enableObscure;
|
||||||
|
|
||||||
const RoundedInputField({
|
RoundedInputField({
|
||||||
Key? key,
|
Key? key,
|
||||||
this.hintText,
|
this.hintText,
|
||||||
this.icon,
|
this.icon,
|
||||||
@ -20,20 +23,27 @@ class RoundedInputField extends StatelessWidget {
|
|||||||
this.normalBorderColor = Colors.transparent,
|
this.normalBorderColor = Colors.transparent,
|
||||||
this.highlightBorderColor = Colors.transparent,
|
this.highlightBorderColor = Colors.transparent,
|
||||||
this.errorText = "",
|
this.errorText = "",
|
||||||
}) : super(key: key);
|
}) : super(key: key) {
|
||||||
|
enableObscure = obscureText;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<RoundedInputField> createState() => _RoundedInputFieldState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _RoundedInputFieldState extends State<RoundedInputField> {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final Icon? newIcon = icon == null
|
final Icon? newIcon = widget.icon == null
|
||||||
? null
|
? null
|
||||||
: Icon(
|
: Icon(
|
||||||
icon!,
|
widget.icon!,
|
||||||
color: const Color(0xFF6F35A5),
|
color: const Color(0xFF6F35A5),
|
||||||
);
|
);
|
||||||
|
|
||||||
var borderColor = normalBorderColor;
|
var borderColor = widget.normalBorderColor;
|
||||||
if (errorText.isNotEmpty) {
|
if (widget.errorText.isNotEmpty) {
|
||||||
borderColor = highlightBorderColor;
|
borderColor = widget.highlightBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
List<Widget> children = [
|
List<Widget> children = [
|
||||||
@ -41,28 +51,46 @@ class RoundedInputField extends StatelessWidget {
|
|||||||
borderRadius: BorderRadius.circular(10),
|
borderRadius: BorderRadius.circular(10),
|
||||||
borderColor: borderColor,
|
borderColor: borderColor,
|
||||||
child: TextFormField(
|
child: TextFormField(
|
||||||
onChanged: onChanged,
|
onChanged: widget.onChanged,
|
||||||
cursorColor: const Color(0xFF6F35A5),
|
cursorColor: const Color(0xFF6F35A5),
|
||||||
obscureText: obscureText,
|
obscureText: widget.enableObscure,
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
icon: newIcon,
|
icon: newIcon,
|
||||||
hintText: hintText,
|
hintText: widget.hintText,
|
||||||
border: InputBorder.none,
|
border: InputBorder.none,
|
||||||
|
suffixIcon: suffixIcon(),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
|
|
||||||
if (errorText.isNotEmpty) {
|
if (widget.errorText.isNotEmpty) {
|
||||||
children
|
children.add(Text(
|
||||||
.add(Text(errorText, style: TextStyle(color: highlightBorderColor)));
|
widget.errorText,
|
||||||
|
style: TextStyle(color: widget.highlightBorderColor),
|
||||||
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
return AnimatedContainer(
|
return AnimatedSize(
|
||||||
duration: .3.seconds,
|
duration: .4.seconds,
|
||||||
|
curve: Curves.easeInOut,
|
||||||
child: Column(
|
child: Column(
|
||||||
children: children,
|
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),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,22 +5,24 @@ class TextFieldContainer extends StatelessWidget {
|
|||||||
final Widget child;
|
final Widget child;
|
||||||
final BorderRadius borderRadius;
|
final BorderRadius borderRadius;
|
||||||
final Color borderColor;
|
final Color borderColor;
|
||||||
final Size? size;
|
final double? height;
|
||||||
|
final double? width;
|
||||||
const TextFieldContainer({
|
const TextFieldContainer({
|
||||||
Key? key,
|
Key? key,
|
||||||
required this.child,
|
required this.child,
|
||||||
this.borderRadius = BorderRadius.zero,
|
this.borderRadius = BorderRadius.zero,
|
||||||
this.borderColor = Colors.white,
|
this.borderColor = Colors.white,
|
||||||
this.size,
|
this.height,
|
||||||
|
this.width,
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
double height = size == null ? 50 : size!.height;
|
|
||||||
return Container(
|
return Container(
|
||||||
margin: const EdgeInsets.symmetric(vertical: 10),
|
margin: const EdgeInsets.symmetric(vertical: 10),
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 15),
|
padding: const EdgeInsets.symmetric(horizontal: 15),
|
||||||
height: height,
|
height: height,
|
||||||
|
width: width,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
border: Border.all(color: borderColor),
|
border: Border.all(color: borderColor),
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
|
Loading…
Reference in New Issue
Block a user