0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed overlapping of password strength indicator in reset password screen

Browse source
This commit is contained in:
ashilkn 2022-06-15 14:14:17 +05:30
parent 69546f8cca
commit bc9751208b
2 changed files with 70 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/ui/email_entry_page.dart
View file

@ -248,7 +248,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
}, },
), ),
), ),
Padding(padding: EdgeInsets.all(4)), const SizedBox(height: 8),
Padding( Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0), padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: TextFormField( child: TextFormField(

206
lib/ui/password_entry_page.dart
View file

@ -266,149 +266,81 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
focusNode: _password1FocusNode, focusNode: _password1FocusNode,
), ),
), ),
Padding(padding: EdgeInsets.all(4)), const SizedBox(height: 8),
Stack( Padding(
children: <Widget>[ padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
Padding( child: TextFormField(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0), keyboardType: TextInputType.visiblePassword,
child: TextFormField( controller: _passwordController2,
keyboardType: TextInputType.visiblePassword, obscureText: !_password2Visible,
controller: _passwordController2, autofillHints: const [AutofillHints.newPassword],
obscureText: !_password2Visible, onEditingComplete: () => TextInput.finishAutofillContext(),
autofillHints: const [AutofillHints.newPassword], decoration: InputDecoration(
onEditingComplete: () => fillColor: _passwordsMatch ? _validFieldValueColor : null,
TextInput.finishAutofillContext(), filled: true,
decoration: InputDecoration( hintText: "Confirm password",
fillColor: contentPadding: EdgeInsets.symmetric(
_passwordsMatch ? _validFieldValueColor : null, horizontal: 20,
filled: true, vertical: 20,
hintText: "Confirm password",
contentPadding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
suffixIcon: _password2InFocus
? IconButton(
icon: Icon(
_password2Visible
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).iconTheme.color,
size: 20,
),
onPressed: () {
setState(() {
_password2Visible = !_password2Visible;
});
},
)
: _passwordsMatch
? Icon(
Icons.check,
color: Theme.of(context)
.inputDecorationTheme
.focusedBorder
.borderSide
.color,
)
: null,
border: UnderlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(6),
),
),
focusNode: _password2FocusNode,
onChanged: (cnfPassword) {
setState(() {
_passwordInInputConfirmationBox = cnfPassword;
if (_passwordInInputBox != null ||
_passwordInInputBox != '') {
_passwordsMatch = _passwordInInputBox ==
_passwordInInputConfirmationBox;
}
});
},
), ),
), suffixIcon: _password2InFocus
Visibility( ? IconButton(
visible: icon: Icon(
((_passwordInInputBox != '') && _password1InFocus), _password2Visible
child: Positioned( ? Icons.visibility
bottom: 24, : Icons.visibility_off,
child: Row( color: Theme.of(context).iconTheme.color,
children: [ size: 20,
SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
spreadRadius: 0.5,
color: Theme.of(context).hintColor,
offset: Offset(0, -0.325),
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.zero,
bottomLeft: Radius.circular(5),
bottomRight: Radius.circular(5),
),
color: Theme.of(context)
.dialogTheme
.backgroundColor,
),
width: double.infinity,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
4.0,
4,
4.0,
4.0,
),
child: Row(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
child: Text(
'Password Strength: $passwordStrengthText',
style: TextStyle(
color: passwordStrengthColor,
),
),
),
],
),
),
],
),
),
), ),
), onPressed: () {
SizedBox( setState(() {
width: 20, _password2Visible = !_password2Visible;
), });
], },
), )
: _passwordsMatch
? Icon(
Icons.check,
color: Theme.of(context)
.inputDecorationTheme
.focusedBorder
.borderSide
.color,
)
: null,
border: UnderlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(6),
), ),
), ),
], focusNode: _password2FocusNode,
clipBehavior: Clip.none, onChanged: (cnfPassword) {
setState(() {
_passwordInInputConfirmationBox = cnfPassword;
if (_passwordInInputBox != null ||
_passwordInInputBox != '') {
_passwordsMatch = _passwordInInputBox ==
_passwordInInputConfirmationBox;
}
});
},
),
), ),
SizedBox( Opacity(
height: 50, opacity:
(_passwordInInputBox != '') && _password1InFocus ? 1 : 0,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Text(
'Password Strength: $passwordStrengthText',
style: TextStyle(
color: passwordStrengthColor,
),
),
),
), ),
const SizedBox(height: 8),
GestureDetector( GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onTap: () { onTap: () {