From 18ea8d9151a4d4a555daf7c92669d902c4ef5c1d Mon Sep 17 00:00:00 2001
From: open-trade <info@opentradesolutions.com>
Date: Sat, 21 Nov 2020 14:40:28 +0800
Subject: [PATCH] password widget

---
 flutter_hbb/lib/common.dart      | 40 ++++++++++++++++++++++++++++++++
 flutter_hbb/lib/home_page.dart   |  1 +
 flutter_hbb/lib/remote_page.dart |  9 +------
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/flutter_hbb/lib/common.dart b/flutter_hbb/lib/common.dart
index 9b424aac4..d10ced032 100644
--- a/flutter_hbb/lib/common.dart
+++ b/flutter_hbb/lib/common.dart
@@ -98,3 +98,43 @@ void msgbox(String type, String title, String text, BuildContext context,
             ),
           ]));
 }
+
+class PasswordWidget extends StatefulWidget {
+  PasswordWidget({Key key, this.controller}) : super(key: key);
+
+  final TextEditingController controller;
+
+  @override
+  _PasswordWidgetState createState() => _PasswordWidgetState();
+}
+
+class _PasswordWidgetState extends State<PasswordWidget> {
+  bool _passwordVisible = false;
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      autofocus: true,
+      keyboardType: TextInputType.text,
+      controller: widget.controller,
+      obscureText: !_passwordVisible, //This will obscure text dynamically
+      decoration: InputDecoration(
+        labelText: 'Password',
+        hintText: 'Enter your password',
+        // Here is key idea
+        suffixIcon: IconButton(
+          icon: Icon(
+            // Based on passwordVisible state choose the icon
+            _passwordVisible ? Icons.visibility : Icons.visibility_off,
+            color: Theme.of(context).primaryColorDark,
+          ),
+          onPressed: () {
+            // Update the state i.e. toogle the state of passwordVisible variable
+            setState(() {
+              _passwordVisible = !_passwordVisible;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}
diff --git a/flutter_hbb/lib/home_page.dart b/flutter_hbb/lib/home_page.dart
index 6fe58838b..527ed41ee 100644
--- a/flutter_hbb/lib/home_page.dart
+++ b/flutter_hbb/lib/home_page.dart
@@ -82,6 +82,7 @@ class _HomePageState extends State<HomePage> {
                       // keyboardType: TextInputType.number,
                       decoration: InputDecoration(
                         labelText: 'Remote ID',
+                        hintText: 'Enter your remote ID',
                         border: InputBorder.none,
                         helperStyle: TextStyle(
                           fontWeight: FontWeight.bold,
diff --git a/flutter_hbb/lib/remote_page.dart b/flutter_hbb/lib/remote_page.dart
index ba465a858..93342e738 100644
--- a/flutter_hbb/lib/remote_page.dart
+++ b/flutter_hbb/lib/remote_page.dart
@@ -250,14 +250,7 @@ void enterPasswordDialog(String id, BuildContext context) {
       (setState) => Tuple3(
             Text('Please enter your password'),
             Column(mainAxisSize: MainAxisSize.min, children: [
-              TextField(
-                autofocus: true,
-                obscureText: true,
-                controller: controller,
-                decoration: const InputDecoration(
-                  labelText: 'Password',
-                ),
-              ),
+              PasswordWidget(controller: controller),
               CheckboxListTile(
                 controlAffinity: ListTileControlAffinity.leading,
                 title: Text(