Profile and change password pages layout improvements

This commit is contained in:
Igor Kulikov
2021-11-16 10:16:23 +02:00
parent dc18c9c04b
commit 9546ffa750
2 changed files with 132 additions and 128 deletions

View File

@@ -38,93 +38,95 @@ class _ChangePasswordPageState extends TbContextState<ChangePasswordPage> {
SizedBox.expand( SizedBox.expand(
child: Padding( child: Padding(
padding: EdgeInsets.all(16), padding: EdgeInsets.all(16),
child: FormBuilder( child: SingleChildScrollView(
key: _changePasswordFormKey, child: FormBuilder(
autovalidateMode: AutovalidateMode.disabled, key: _changePasswordFormKey,
child: Column( autovalidateMode: AutovalidateMode.disabled,
crossAxisAlignment: CrossAxisAlignment.stretch, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.stretch,
SizedBox(height: 16), children: [
ValueListenableBuilder( SizedBox(height: 16),
valueListenable: _showCurrentPasswordNotifier, ValueListenableBuilder(
builder: (BuildContext context, bool showPassword, child) { valueListenable: _showCurrentPasswordNotifier,
return FormBuilderTextField( builder: (BuildContext context, bool showPassword, child) {
name: 'currentPassword', return FormBuilderTextField(
obscureText: !showPassword, name: 'currentPassword',
autofocus: true, obscureText: !showPassword,
validator: FormBuilderValidators.compose([ autofocus: true,
FormBuilderValidators.required(context, errorText: 'Current password is required.') validator: FormBuilderValidators.compose([
]), FormBuilderValidators.required(context, errorText: 'Current password is required.')
decoration: InputDecoration( ]),
suffixIcon: IconButton( decoration: InputDecoration(
icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off), suffixIcon: IconButton(
onPressed: () { icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off),
_showCurrentPasswordNotifier.value = !_showCurrentPasswordNotifier.value; onPressed: () {
}, _showCurrentPasswordNotifier.value = !_showCurrentPasswordNotifier.value;
},
),
border: OutlineInputBorder(),
labelText: 'Current password *'
),
);
}
),
SizedBox(height: 24),
ValueListenableBuilder(
valueListenable: _showNewPasswordNotifier,
builder: (BuildContext context, bool showPassword, child) {
return FormBuilderTextField(
name: 'newPassword',
obscureText: !showPassword,
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: 'New password is required.')
]),
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off),
onPressed: () {
_showNewPasswordNotifier.value = !_showNewPasswordNotifier.value;
},
),
border: OutlineInputBorder(),
labelText: 'New password *'
), ),
border: OutlineInputBorder(), );
labelText: 'Current password *' }
), ),
); SizedBox(height: 24),
} ValueListenableBuilder(
), valueListenable: _showNewPassword2Notifier,
SizedBox(height: 24), builder: (BuildContext context, bool showPassword, child) {
ValueListenableBuilder( return FormBuilderTextField(
valueListenable: _showNewPasswordNotifier, name: 'newPassword2',
builder: (BuildContext context, bool showPassword, child) { obscureText: !showPassword,
return FormBuilderTextField( validator: FormBuilderValidators.compose([
name: 'newPassword', FormBuilderValidators.required(context, errorText: 'New password again is required.')
obscureText: !showPassword, ]),
validator: FormBuilderValidators.compose([ decoration: InputDecoration(
FormBuilderValidators.required(context, errorText: 'New password is required.') suffixIcon: IconButton(
]), icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off),
decoration: InputDecoration( onPressed: () {
suffixIcon: IconButton( _showNewPassword2Notifier.value = !_showNewPassword2Notifier.value;
icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off), },
onPressed: () { ),
_showNewPasswordNotifier.value = !_showNewPasswordNotifier.value; border: OutlineInputBorder(),
}, labelText: 'New password again *'
), ),
border: OutlineInputBorder(), );
labelText: 'New password *' }
), ),
); SizedBox(height: 24),
} ElevatedButton(
), style: ElevatedButton.styleFrom(padding: EdgeInsets.all(16),
SizedBox(height: 24), alignment: Alignment.centerLeft),
ValueListenableBuilder( onPressed: () {
valueListenable: _showNewPassword2Notifier, _changePassword();
builder: (BuildContext context, bool showPassword, child) { },
return FormBuilderTextField( child: Center(child: Text('Change Password'))
name: 'newPassword2', )
obscureText: !showPassword, ]
validator: FormBuilderValidators.compose([ ),
FormBuilderValidators.required(context, errorText: 'New password again is required.') )
]),
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(showPassword ? Icons.visibility : Icons.visibility_off),
onPressed: () {
_showNewPassword2Notifier.value = !_showNewPassword2Notifier.value;
},
),
border: OutlineInputBorder(),
labelText: 'New password again *'
),
);
}
),
SizedBox(height: 24),
ElevatedButton(
style: ElevatedButton.styleFrom(padding: EdgeInsets.all(16),
alignment: Alignment.centerLeft),
onPressed: () {
_changePassword();
},
child: Center(child: Text('Change Password'))
)
]
),
) )
), ),
), ),

View File

@@ -71,51 +71,53 @@ class _ProfilePageState extends TbPageState<ProfilePage> {
SizedBox.expand( SizedBox.expand(
child: Padding( child: Padding(
padding: EdgeInsets.all(16), padding: EdgeInsets.all(16),
child: FormBuilder( child: SingleChildScrollView(
key: _profileFormKey, child: FormBuilder(
autovalidateMode: AutovalidateMode.onUserInteraction, key: _profileFormKey,
child: Column( autovalidateMode: AutovalidateMode.onUserInteraction,
crossAxisAlignment: CrossAxisAlignment.stretch, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.stretch,
SizedBox(height: 16), children: [
FormBuilderTextField( SizedBox(height: 16),
name: 'email', FormBuilderTextField(
validator: FormBuilderValidators.compose([ name: 'email',
FormBuilderValidators.required(context, errorText: 'Email is required.'), validator: FormBuilderValidators.compose([
FormBuilderValidators.email(context, errorText: 'Invalid email format.') FormBuilderValidators.required(context, errorText: 'Email is required.'),
]), FormBuilderValidators.email(context, errorText: 'Invalid email format.')
decoration: InputDecoration( ]),
border: OutlineInputBorder(), decoration: InputDecoration(
labelText: 'Email *' border: OutlineInputBorder(),
labelText: 'Email *'
),
), ),
), SizedBox(height: 24),
SizedBox(height: 24), FormBuilderTextField(
FormBuilderTextField( name: 'firstName',
name: 'firstName', decoration: InputDecoration(
decoration: InputDecoration( border: OutlineInputBorder(),
border: OutlineInputBorder(), labelText: 'First Name'
labelText: 'First Name' ),
), ),
), SizedBox(height: 24),
SizedBox(height: 24), FormBuilderTextField(
FormBuilderTextField( name: 'lastName',
name: 'lastName', decoration: InputDecoration(
decoration: InputDecoration( border: OutlineInputBorder(),
border: OutlineInputBorder(), labelText: 'Last Name'
labelText: 'Last Name' ),
), ),
), SizedBox(height: 24),
SizedBox(height: 24), OutlinedButton(
OutlinedButton( style: OutlinedButton.styleFrom(padding: EdgeInsets.all(16),
style: OutlinedButton.styleFrom(padding: EdgeInsets.all(16), alignment: Alignment.centerLeft),
alignment: Alignment.centerLeft), onPressed: () {
onPressed: () { _changePassword();
_changePassword(); },
}, child: Center(child: Text('Change Password'))
child: Center(child: Text('Change Password')) )
) ]
] ),
), )
) )
), ),
), ),