[App] Add registration

lib/views/login.dart

@@ -9,12 +9,12 @@ import 'chat_list.dart';
 
 const String defaultHomeserver = "https://matrix.org";
 
-class LoginPage extends StatefulWidget {
+class Login extends StatefulWidget {
   @override
-  _LoginPageState createState() => _LoginPageState();
+  _LoginState createState() => _LoginState();
 }
 
-class _LoginPageState extends State<LoginPage> {
+class _LoginState extends State<Login> {
   final TextEditingController usernameController = TextEditingController();
   final TextEditingController passwordController = TextEditingController();
   final TextEditingController serverController =
@@ -23,12 +23,12 @@ class _LoginPageState extends State<LoginPage> {
   String passwordError;
   String serverError;
   bool loading = false;
+  bool showPassword = false;
 
   void login(BuildContext context) async {
     MatrixState matrix = Matrix.of(context);
     if (usernameController.text.isEmpty) {
       setState(() => usernameError = "Please enter your username.");
-      print("Please enter your username.");
     } else {
       setState(() => usernameError = null);
     }
@@ -63,8 +63,9 @@ class _LoginPageState extends State<LoginPage> {
     }
     try {
       print("[Login] Try to login...");
-      await matrix.client
-          .login(usernameController.text, passwordController.text);
+      await matrix.client.login(
+          usernameController.text, passwordController.text,
+          initialDeviceDisplayName: matrix.widget.clientName);
     } on MatrixException catch (exception) {
       setState(() => passwordError = exception.errorMessage);
       return setState(() => loading = false);
@@ -109,55 +110,67 @@ class _LoginPageState extends State<LoginPage> {
             vertical: 16,
             horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 16)),
         children: <Widget>[
-          Image.asset("assets/fluffychat-banner.png"),
-          TextField(
-            controller: usernameController,
-            decoration: InputDecoration(
-                hintText: "@username:domain",
-                icon: Icon(Icons.account_box),
-                errorText: usernameError,
-                labelText: "Username"),
+          Container(
+            height: 150,
+            color: Theme.of(context).secondaryHeaderColor,
+            child: Center(
+              child: Icon(
+                Icons.vpn_key,
+                color: Theme.of(context).primaryColor,
+                size: 40,
+              ),
+            ),
           ),
-          TextField(
-            controller: passwordController,
-            obscureText: true,
-            onSubmitted: (t) => login(context),
-            decoration: InputDecoration(
-                icon: Icon(Icons.vpn_key),
-                hintText: "****",
-                errorText: passwordError,
-                labelText: "Password"),
+          ListTile(
+            leading: CircleAvatar(
+              backgroundColor: Colors.blue,
+              child: Icon(Icons.account_box),
+            ),
+            title: TextField(
+              controller: usernameController,
+              decoration: InputDecoration(
+                  hintText: "@username:domain",
+                  errorText: usernameError,
+                  labelText: "Username"),
+            ),
+          ),
+          ListTile(
+            leading: CircleAvatar(
+              backgroundColor: Colors.yellow,
+              child: Icon(Icons.lock),
+            ),
+            title: TextField(
+              controller: passwordController,
+              obscureText: !showPassword,
+              onSubmitted: (t) => login(context),
+              decoration: InputDecoration(
+                  hintText: "****",
+                  errorText: passwordError,
+                  suffixIcon: IconButton(
+                    icon: Icon(
+                        showPassword ? Icons.visibility_off : Icons.visibility),
+                    onPressed: () =>
+                        setState(() => showPassword = !showPassword),
+                  ),
+                  labelText: "Password"),
+            ),
           ),
           SizedBox(height: 20),
-          Card(
-            elevation: 7,
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(50),
-            ),
-            child: Container(
-              width: 120.0,
-              height: 50.0,
-              decoration: BoxDecoration(
+          Container(
+            height: 50,
+            child: RaisedButton(
+              elevation: 7,
+              color: Theme.of(context).primaryColor,
+              shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(50),
-                gradient: LinearGradient(
-                  begin: Alignment.bottomLeft,
-                  end: Alignment.topRight,
-                  colors: <Color>[
-                    Colors.blue,
-                    Theme.of(context).primaryColor,
-                  ],
-                ),
-              ),
-              child: RawMaterialButton(
-                onPressed: () => loading ? null : login(context),
-                splashColor: Colors.grey,
-                child: loading
-                    ? CircularProgressIndicator()
-                    : Text(
-                        "Login",
-                        style: TextStyle(color: Colors.white, fontSize: 20.0),
-                      ),
               ),
+              child: loading
+                  ? CircularProgressIndicator()
+                  : Text(
+                      "Login",
+                      style: TextStyle(color: Colors.white, fontSize: 16),
+                    ),
+              onPressed: () => loading ? null : login(context),
             ),
           ),
         ],