Skip to content

Commit

Permalink
add password visibility option (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
Ida631 authored Nov 7, 2024
1 parent 69fd068 commit b566e6a
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 28 deletions.
69 changes: 46 additions & 23 deletions lib/presentation/settings/views/forget_password_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,20 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
String? newPassword;
String? confirmCode;
bool confirmEnable = false;
bool _obscureTextNewPassword = true;
bool _obscureTextConfirmPassword = true;

void _toggleNewPasswordVisibility() {
setState(() {
_obscureTextNewPassword = !_obscureTextNewPassword;
});
}

void _toggleConfirmPasswordVisibility() {
setState(() {
_obscureTextConfirmPassword = !_obscureTextConfirmPassword;
});
}
@override
void initState() {
super.initState();
Expand Down Expand Up @@ -90,7 +103,7 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
// New Password Field
if (viewModel.isPasswordResetting)
TextFormField(
obscureText: true,
obscureText: _obscureTextNewPassword,
decoration: InputDecoration(
labelText: "New Password",
hintText: "Input new password",
Expand All @@ -102,6 +115,12 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
borderSide: BorderSide(color: Color(0xFFB71C1C)),
),
errorStyle: TextStyle(color: Color(0xFFB71C1C)),
suffixIcon: IconButton(
icon: Icon(
_obscureTextNewPassword ? Icons.visibility_off : Icons.visibility,
),
onPressed: _toggleNewPasswordVisibility,
),
),
onChanged: (text) {
newPassword = text;
Expand All @@ -123,7 +142,7 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
if (viewModel.isPasswordResetting)
TextFormField(
controller: _confirmPasswordController,
obscureText: true,
obscureText: _obscureTextConfirmPassword,
decoration: InputDecoration(
labelText: "Re-enter Password",
hintText: "Re-enter password",
Expand All @@ -135,6 +154,12 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
borderSide: BorderSide(color: Color(0xFFB71C1C)),
),
errorStyle: TextStyle(color: Color(0xFFB71C1C)),
suffixIcon: IconButton(
icon: Icon(
_obscureTextConfirmPassword ? Icons.visibility_off : Icons.visibility,
),
onPressed: _toggleConfirmPasswordVisibility,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
Expand Down Expand Up @@ -197,8 +222,8 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
if (viewModel.errorMessage.isNotEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Failed to reset password: ${viewModel.errorMessage}.'),
content:
Text('Failed to reset password: ${viewModel.errorMessage}.'),
),
);
} else {
Expand All @@ -218,35 +243,33 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
onPressed: viewModel.isLoading
? null
: () async {
if (_formKey.currentState!.validate()) {
await viewModel.forgetPassword(_emailController.text);
if (_formKey.currentState!.validate()) {
await viewModel.forgetPassword(_emailController.text);

if (viewModel.errorMessage.isNotEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content:
Text('Failed to send confirmation code.'),
),
);
}
}
},
if (viewModel.errorMessage.isNotEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Failed to send confirmation code.'),
),
);
}
}
},
height: 45,
minWidth: double.infinity,
color:
isEmailValid ? Color(0xFF33424E) : Color(0xFF8C9699),
color: isEmailValid ? Color(0xFF33424E) : Color(0xFF8C9699),
disabledColor: Color(0xFF8C9699),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
),
child: viewModel.isLoading
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
)
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
)
: Text(
"Reset Password",
style: TextStyle(color: Colors.white, fontSize: 16),
),
"Reset Password",
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
],
Expand Down
24 changes: 19 additions & 5 deletions lib/presentation/settings/views/login_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ class _LoginPageState extends State<NewLoginPage> {
bool isButtonEnabled = false;
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
bool _obscureText = true;

void _togglePasswordVisibility() {
setState(() {
_obscureText = !_obscureText;
});
}

@override
void initState() {
Expand Down Expand Up @@ -140,21 +147,28 @@ class _LoginPageState extends State<NewLoginPage> {
// Password Field
TextFormField(
controller: _passwordController,
obscureText: _obscureText, // Controls whether the text is hidden
decoration: InputDecoration(
labelText: 'Password',
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFB71C1C)), // Underline color when there’s an error
color: Color(0xFFB71C1C), // Underline color when there’s an error
),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color:
Color(0xFFB71C1C)), // Underline color when focused and there’s an error
color: Color(0xFFB71C1C), // Underline color when focused and there’s an error
),
),
errorStyle: TextStyle(color: Color(0xFFB71C1C)), // Error text color
suffixIcon: IconButton(
icon: Icon(
_obscureText ? Icons.visibility_off : Icons.visibility,
),
onPressed: _togglePasswordVisibility,
),
),
style: TextStyle(color: Colors.black), // Text color when typing
obscureText: true,
style: TextStyle(color: Colors.black),
onChanged: (value) => password = value.trim(),
validator: (value) {
if (value == null || value.isEmpty) {
Expand Down

0 comments on commit b566e6a

Please sign in to comment.