Allow UserLoginField to be editable on MyProfile page (#813)

CHANGELOG.md

@@ -36,7 +36,7 @@ All user visible changes to this project will be documented in this file. This p
     - Tuned up page transition animation. ([#775], [#573])
     - Profile page:
         - Redesigned direct chat link. ([#796], [#787])
-        - Redesigned sign in section. ([#794], [#789])
+        - Redesigned sign in section. ([#827], [#794], [#789])
     - Media panel:
         - Grab cursor over participants. ([#816], [#810])
 
@@ -90,6 +90,7 @@ All user visible changes to this project will be documented in this file. This p
 [#810]: /../../issues/810
 [#816]: /../../pull/816
 [#823]: /../../pull/823
+[#827]: /../../pull/827
 
 
 

lib/ui/page/home/page/my_profile/view.dart

@@ -165,19 +165,19 @@ class MyProfileView extends StatelessWidget {
                               return const SizedBox();
                             }
 
-                            return Paddings.basic(
-                              Padding(
-                                padding: const EdgeInsets.only(top: 6),
-                                child: InfoTile(
-                                  title: 'label_login'.l10n,
-                                  content: c.myUser.value!.login.toString(),
-                                  trailing: WidgetButton(
-                                    onPressed: () {
-                                      // TODO: Implement [UserLogin] deleting.
-                                    },
-                                    child: const SvgIcon(SvgIcons.delete),
-                                  ),
-                                ),
+                            return Padding(
+                              padding: const EdgeInsets.only(top: 6),
+                              child: UserLoginField(
+                                c.myUser.value?.login,
+                                onSubmit: (s) async {
+                                  if (s == null) {
+                                    // TODO: Implement [UserLogin] deleting.
+                                    c.myUser.value?.login = null;
+                                    c.myUser.refresh();
+                                  } else {
+                                    await c.updateUserLogin(s);
+                                  }
+                                },
                               ),
                             );
                           }),
@@ -501,7 +501,11 @@ Widget _addInfo(BuildContext context, MyProfileController c) {
           padding: const EdgeInsets.only(top: 8, bottom: 12),
           child: UserLoginField(
             c.myUser.value?.login,
-            onSubmit: c.updateUserLogin,
+            onSubmit: (s) async {
+              if (s != null) {
+                await c.updateUserLogin(s);
+              }
+            },
           ),
         );
       }),

lib/ui/page/home/page/my_profile/widget/login.dart

@@ -17,16 +17,18 @@
 
 import 'dart:async';
 
+import 'package:animated_size_and_fade/animated_size_and_fade.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
 import '/domain/model/user.dart';
 import '/l10n/l10n.dart';
 import '/provider/gql/exceptions.dart' show UpdateUserLoginException;
+import '/ui/page/home/widget/info_tile.dart';
+import '/ui/page/home/widget/paddings.dart';
 import '/ui/widget/svg/svg.dart';
 import '/ui/widget/text_field.dart';
-import '/util/message_popup.dart';
-import '/util/platform_utils.dart';
+import '/ui/widget/widget_button.dart';
 
 /// Custom-styled [ReactiveTextField] displaying editable [UserLogin].
 class UserLoginField extends StatefulWidget {
@@ -36,14 +38,17 @@ class UserLoginField extends StatefulWidget {
   final UserLogin? login;
 
   /// Callback, called when [UserLogin] is submitted.
-  final Future<void> Function(UserLogin login)? onSubmit;
+  final Future<void> Function(UserLogin? login)? onSubmit;
 
   @override
   State<UserLoginField> createState() => _UserLoginFieldState();
 }
 
-/// State of a [UserLoginField] maintaining the [_state].
+/// State of a [UserLoginField] maintaining the [_state] and [_editing].
 class _UserLoginFieldState extends State<UserLoginField> {
+  /// Indicates whether this [UserLoginField] is in editing mode.
+  late bool _editing = widget.login == null;
+
   /// State of the [ReactiveTextField].
   late final TextFieldState _state = TextFieldState(
     text: widget.login?.val,
@@ -52,8 +57,6 @@ class _UserLoginFieldState extends State<UserLoginField> {
       s.error.value = null;
 
       if (s.text.isEmpty) {
-        s.unchecked = widget.login?.val ?? '';
-        s.status.value = RxStatus.empty();
         return;
       }
 
@@ -67,8 +70,18 @@ class _UserLoginFieldState extends State<UserLoginField> {
       if (s.error.value == null) {
         s.editable.value = false;
         s.status.value = RxStatus.loading();
+
         try {
-          await widget.onSubmit?.call(UserLogin(s.text.toLowerCase()));
+          if (s.text.isEmpty) {
+            await widget.onSubmit?.call(null);
+          } else {
+            await widget.onSubmit?.call(UserLogin(s.text.toLowerCase()));
+          }
+
+          if (mounted) {
+            setState(() => _editing = false);
+          }
+
           s.status.value = RxStatus.empty();
         } on UpdateUserLoginException catch (e) {
           s.error.value = e.toMessage();
@@ -88,7 +101,8 @@ class _UserLoginFieldState extends State<UserLoginField> {
   void didUpdateWidget(UserLoginField oldWidget) {
     if (!_state.focus.hasFocus &&
         !_state.changed.value &&
-        _state.editable.value) {
+        _state.editable.value &&
+        _state.error.value == null) {
       _state.unchecked = widget.login?.val;
     }
 
@@ -97,24 +111,46 @@ class _UserLoginFieldState extends State<UserLoginField> {
 
   @override
   Widget build(BuildContext context) {
-    return ReactiveTextField(
-      key: const Key('LoginField'),
-      state: _state,
-      onSuffixPressed: _state.text.isEmpty
-          ? null
-          : () {
-              PlatformUtils.copy(text: _state.text);
-              MessagePopup.success('label_copied'.l10n);
-            },
-      trailing: _state.text.isEmpty
-          ? null
-          : Transform.translate(
-              offset: const Offset(0, -1),
-              child: const SvgIcon(SvgIcons.copy),
-            ),
-      label: 'label_login'.l10n,
-      hint: widget.login == null ? 'label_login_hint'.l10n : widget.login!.val,
-      clearable: false,
+    final Widget child;
+
+    if (_editing) {
+      child = Padding(
+        padding: const EdgeInsets.only(top: 8.0),
+        child: ReactiveTextField(
+          key: const Key('LoginField'),
+          state: _state,
+          onChanged: () => _state.error.value = null,
+          onCanceled: widget.login == null
+              ? null
+              : () {
+                  _state.unchecked = widget.login?.val;
+                  if (mounted) {
+                    setState(() => _editing = false);
+                  }
+                },
+          label: 'label_login'.l10n,
+          hint: widget.login == null
+              ? 'label_login_hint'.l10n
+              : widget.login!.val,
+        ),
+      );
+    } else {
+      child = Paddings.basic(
+        InfoTile(
+          title: 'label_login'.l10n,
+          content: _state.text,
+          trailing: WidgetButton(
+            onPressed: () => setState(() => _editing = true),
+            child: const SvgIcon(SvgIcons.editField),
+          ),
+        ),
+      );
+    }
+
+    return AnimatedSizeAndFade(
+      fadeDuration: const Duration(milliseconds: 200),
+      sizeDuration: const Duration(milliseconds: 200),
+      child: child,
     );
   }
 }

lib/ui/widget/svg/svgs.dart

@@ -811,6 +811,12 @@ class SvgIcons {
     height: 19,
   );
 
+  static const SvgData editField = SvgData(
+    'assets/icons/edit_field.svg',
+    width: 17,
+    height: 17,
+  );
+
   static const SvgData more = SvgData(
     'assets/icons/more.svg',
     width: 4,

lib/ui/widget/text_field.dart

@@ -51,6 +51,7 @@ class ReactiveTextField extends StatelessWidget {
     this.obscure = false,
     this.onChanged,
     this.onSuffixPressed,
+    this.onCanceled,
     this.padding,
     this.prefix,
     this.prefixText,
@@ -139,6 +140,11 @@ class ReactiveTextField extends StatelessWidget {
   /// Only meaningful if [suffix] is non-`null`.
   final void Function()? onSuffixPressed;
 
+  /// Callback, called when user presses the cancel button.
+  ///
+  /// If `null`, then no cancel button will be displayed.
+  final void Function()? onCanceled;
+
   /// Optional text prefix to display before the input.
   final String? prefixText;
 
@@ -206,6 +212,14 @@ class ReactiveTextField extends StatelessWidget {
             !status.isEmpty ||
             hasError;
 
+        final Widget cancelButton = AllowOverflow(
+          key: const ValueKey('Cancel'),
+          child: Text(
+            'btn_cancel'.l10n,
+            style: style.fonts.small.regular.primary,
+          ),
+        );
+
         return ElasticAnimatedSwitcher(
           child: hasSuffix
               ? SizedBox(
@@ -217,9 +231,7 @@ class ReactiveTextField extends StatelessWidget {
                         ? state.isEmpty.value && !clearable
                             ? null
                             : state.submit
-                        : (status.isEmpty && !hasError)
-                            ? onSuffixPressed
-                            : null,
+                        : onCanceled ?? onSuffixPressed,
                     decorator: (child) {
                       return Padding(
                         padding: const EdgeInsets.only(left: 8, right: 16),
@@ -240,15 +252,17 @@ class ReactiveTextField extends StatelessWidget {
                                   ),
                                 )
                               : hasError
-                                  ? SizedBox(
-                                      key: const ValueKey('Error'),
-                                      width: 24,
-                                      child: Icon(
-                                        Icons.error,
-                                        size: 18,
-                                        color: style.colors.danger,
-                                      ),
-                                    )
+                                  ? onCanceled != null
+                                      ? cancelButton
+                                      : SizedBox(
+                                          key: const ValueKey('Error'),
+                                          width: 24,
+                                          child: Icon(
+                                            Icons.error,
+                                            size: 18,
+                                            color: style.colors.danger,
+                                          ),
+                                        )
                                   : (state.approvable &&
                                           (state.changed.value ||
                                               state.resubmitOnError.isTrue))
@@ -262,13 +276,15 @@ class ReactiveTextField extends StatelessWidget {
                                                     .primary,
                                               ),
                                             )
-                                      : SizedBox(
-                                          key: const ValueKey('Icon'),
-                                          width: 24,
-                                          child: suffix != null
-                                              ? Icon(suffix)
-                                              : trailing,
-                                        ),
+                                      : onCanceled != null
+                                          ? cancelButton
+                                          : SizedBox(
+                                              key: const ValueKey('Icon'),
+                                              width: 24,
+                                              child: suffix != null
+                                                  ? Icon(suffix)
+                                                  : trailing,
+                                            ),
                     ),
                   ),
                 )