Nicer Settings UX

lib/components/dialogs/simple_dialogs.dart

@@ -6,6 +6,54 @@ class SimpleDialogs {
 
   const SimpleDialogs(this.context);
 
+  Future<String> enterText({
+    String titleText,
+    String confirmText,
+    String cancelText,
+    String hintText,
+    String labelText,
+    bool multiLine = false,
+  }) async {
+    final TextEditingController controller = TextEditingController();
+    String input;
+    await showDialog(
+      context: context,
+      builder: (c) => AlertDialog(
+        title: Text(I18n.of(context).enterAUsername ?? titleText),
+        content: TextField(
+          controller: controller,
+          autofocus: true,
+          onSubmitted: (s) {
+            input = s;
+            Navigator.of(context).pop();
+          },
+          decoration: InputDecoration(
+            hintText: hintText,
+            labelText: labelText,
+            border: OutlineInputBorder(),
+          ),
+        ),
+        actions: <Widget>[
+          FlatButton(
+            child: Text(cancelText ?? I18n.of(context).close.toUpperCase(),
+                style: TextStyle(color: Colors.blueGrey)),
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+          FlatButton(
+            child: Text(
+              confirmText ?? I18n.of(context).confirm.toUpperCase(),
+            ),
+            onPressed: () {
+              input = controller.text;
+              Navigator.of(context).pop();
+            },
+          ),
+        ],
+      ),
+    );
+    return input;
+  }
+
   Future<bool> askConfirmation({
     String titleText,
     String confirmText,

lib/i18n/i18n.dart

@@ -51,6 +51,10 @@ class I18n {
         args: [username],
       );
 
+  String get account => Intl.message("Account");
+
+  String get accountInformations => Intl.message("Account informations");
+
   String activatedEndToEndEncryption(String username) => Intl.message(
         "$username activated end to end encryption",
         name: "activatedEndToEndEncryption",

lib/views/settings.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/components/adaptive_page_layout.dart';
 import 'package:fluffychat/components/content_banner.dart';
+import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
 import 'package:fluffychat/components/matrix.dart';
 import 'package:fluffychat/i18n/i18n.dart';
 import 'package:fluffychat/utils/app_route.dart';
@@ -35,6 +36,9 @@ class _SettingsState extends State<Settings> {
   Future<dynamic> profileFuture;
   dynamic profile;
   void logoutAction(BuildContext context) async {
+    if (await SimpleDialogs(context).askConfirmation() == false) {
+      return;
+    }
     MatrixState matrix = Matrix.of(context);
     await matrix.tryRequestWithLoadingDialog(matrix.client.logout());
     matrix.clean();
@@ -42,18 +46,19 @@ class _SettingsState extends State<Settings> {
         AppRoute.defaultRoute(context, SignUp()), (r) => false);
   }
 
-  void setDisplaynameAction(BuildContext context, String displayname) async {
+  void setDisplaynameAction(BuildContext context) async {
+    final String displayname = await SimpleDialogs(context).enterText(
+      titleText: I18n.of(context).editDisplayname,
+      hintText:
+          profile?.displayname ?? Matrix.of(context).client.userID.localpart,
+      labelText: I18n.of(context).enterAUsername,
+    );
+    if (displayname == null) return;
     final MatrixState matrix = Matrix.of(context);
-    final Map<String, dynamic> success =
-        await matrix.tryRequestWithLoadingDialog(
+    final success = await matrix.tryRequestWithLoadingDialog(
       matrix.client.setDisplayname(displayname),
     );
-    if (success != null && success.isEmpty) {
-      Toast.show(
-        I18n.of(context).displaynameHasBeenChanged,
-        context,
-        duration: Toast.LENGTH_LONG,
-      );
+    if (success != false) {
       setState(() {
         profileFuture = null;
         profile = null;
@@ -110,20 +115,26 @@ class _SettingsState extends State<Settings> {
             onEdit: kIsWeb ? null : () => setAvatarAction(context),
           ),
           ListTile(
-            leading: Icon(Icons.edit),
-            title: TextField(
-              readOnly: profile == null,
-              textInputAction: TextInputAction.done,
-              onSubmitted: (s) => setDisplaynameAction(context, s),
-              decoration: InputDecoration(
-                border: InputBorder.none,
-                labelText: I18n.of(context).editDisplayname,
-                labelStyle: TextStyle(color: Colors.black),
-                hintText: (profile?.displayname ?? ""),
+            title: Text(
+              I18n.of(context).account,
+              style: TextStyle(
+                color: Theme.of(context).primaryColor,
+                fontWeight: FontWeight.bold,
               ),
             ),
           ),
-          Divider(thickness: 8),
+          ListTile(
+            trailing: Icon(Icons.edit),
+            title: Text(I18n.of(context).editDisplayname),
+            subtitle: Text(profile?.displayname ?? client.userID.localpart),
+            onTap: () => setDisplaynameAction(context),
+          ),
+          ListTile(
+            trailing: Icon(Icons.exit_to_app),
+            title: Text(I18n.of(context).logout),
+            onTap: () => logoutAction(context),
+          ),
+          Divider(thickness: 1),
           ListTile(
             title: Text(
               I18n.of(context).about,
@@ -134,19 +145,17 @@ class _SettingsState extends State<Settings> {
             ),
           ),
           ListTile(
-            leading: Icon(Icons.info),
-            title: Text(I18n.of(context).fluffychat),
-            onTap: () => Navigator.of(context).push(
-              AppRoute.defaultRoute(
-                context,
-                AppInfoView(),
-              ),
+            title: Container(
+              alignment: Alignment.centerLeft,
+              child: Image.asset("assets/kofi.png", width: 200),
             ),
+            onTap: () => launch("https://ko-fi.com/V7V315112"),
           ),
           ListTile(
-            leading: Icon(Icons.sentiment_very_satisfied),
-            title: Text(I18n.of(context).donate),
-            onTap: () => launch("https://ko-fi.com/krille"),
+            leading: Icon(Icons.donut_large),
+            title: Text("Liberapay " + I18n.of(context).donate),
+            onTap: () =>
+                launch("https://liberapay.com/KrilleChritzelius/donate"),
           ),
           ListTile(
             leading: Icon(Icons.help),
@@ -154,6 +163,16 @@ class _SettingsState extends State<Settings> {
             onTap: () => launch(
                 "https://gitlab.com/ChristianPauly/fluffychat-flutter/issues"),
           ),
+          ListTile(
+            leading: Icon(Icons.account_circle),
+            title: Text(I18n.of(context).accountInformations),
+            onTap: () => Navigator.of(context).push(
+              AppRoute.defaultRoute(
+                context,
+                AppInfoView(),
+              ),
+            ),
+          ),
           ListTile(
             leading: Icon(Icons.list),
             title: Text(I18n.of(context).changelog),
@@ -172,21 +191,6 @@ class _SettingsState extends State<Settings> {
             onTap: () =>
                 launch("https://gitlab.com/ChristianPauly/fluffychat-flutter"),
           ),
-          Divider(thickness: 8),
-          ListTile(
-            title: Text(
-              I18n.of(context).logout,
-              style: TextStyle(
-                color: Theme.of(context).primaryColor,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-          ),
-          ListTile(
-            leading: Icon(Icons.exit_to_app),
-            title: Text(I18n.of(context).logout),
-            onTap: () => logoutAction(context),
-          ),
         ],
       ),
     );