Merge branch 'krille/sign-up-ux' into 'main'

feat: Better sign up UX and allow signup without password

See merge request famedly/fluffychat!892

assets/l10n/intl_en.arb

@@ -2825,5 +2825,6 @@
       "placeholders": {
         "user": {}
       }
-  }
+  },
+  "noEmailWarning": "Please enter a valid email address. Otherwise you won't be able to reset your password. If you don't want to, tap again on the button to continue."
 }

lib/config/themes.dart

@@ -34,6 +34,7 @@ abstract class FluffyThemes {
         prefixIconColor: Colors.black,
         iconColor: Colors.black,
         errorText: errorText,
+        errorMaxLines: 4,
         errorStyle: TextStyle(
           color: Colors.red.shade200,
           shadows: const [

lib/pages/sign_up/signup.dart

@@ -17,10 +17,15 @@ class SignupPage extends StatefulWidget {
 
 class SignupPageController extends State<SignupPage> {
   final TextEditingController passwordController = TextEditingController();
+  final TextEditingController password2Controller = TextEditingController();
   final TextEditingController emailController = TextEditingController();
   String? error;
   bool loading = false;
-  bool showPassword = true;
+  bool showPassword = false;
+  bool noEmailWarningConfirmed = false;
+  bool displaySecondPasswordField = false;
+
+  static const int minPassLength = 8;
 
   void toggleShowPassword() => setState(() => showPassword = !showPassword);
 
@@ -28,20 +33,39 @@ class SignupPageController extends State<SignupPage> {
 
   final GlobalKey<FormState> formKey = GlobalKey<FormState>();
 
+  void onPasswordType(String text) {
+    if (text.length >= minPassLength && !displaySecondPasswordField) {
+      setState(() {
+        displaySecondPasswordField = true;
+      });
+    }
+  }
+
   String? password1TextFieldValidator(String? value) {
-    const minLength = 8;
     if (value!.isEmpty) {
       return L10n.of(context)!.chooseAStrongPassword;
     }
-    if (value.length < minLength) {
+    if (value.length < minPassLength) {
-      return L10n.of(context)!.pleaseChooseAtLeastChars(minLength.toString());
+      return L10n.of(context)!
+          .pleaseChooseAtLeastChars(minPassLength.toString());
+    }
+    return null;
+  }
+
+  String? password2TextFieldValidator(String? value) {
+    if (value!.isEmpty) {
+      return L10n.of(context)!.repeatPassword;
+    }
+    if (value != passwordController.text) {
+      return L10n.of(context)!.passwordsDoNotMatch;
     }
     return null;
   }
 
   String? emailTextFieldValidator(String? value) {
-    if (value!.isEmpty) {
+    if (value!.isEmpty && !noEmailWarningConfirmed) {
-      return L10n.of(context)!.addEmail;
+      noEmailWarningConfirmed = true;
+      return L10n.of(context)!.noEmailWarning;
     }
     if (value.isNotEmpty && !value.contains('@')) {
       return L10n.of(context)!.pleaseEnterValidEmail;
@@ -62,14 +86,16 @@ class SignupPageController extends State<SignupPage> {
     try {
       final client = Matrix.of(context).getLoginClient();
       final email = emailController.text;
-      Matrix.of(context).currentClientSecret =
+      if (email.isNotEmpty) {
-          DateTime.now().millisecondsSinceEpoch.toString();
+        Matrix.of(context).currentClientSecret =
-      Matrix.of(context).currentThreepidCreds =
+            DateTime.now().millisecondsSinceEpoch.toString();
-          await client.requestTokenToRegisterEmail(
+        Matrix.of(context).currentThreepidCreds =
-        Matrix.of(context).currentClientSecret,
+            await client.requestTokenToRegisterEmail(
-        email,
+          Matrix.of(context).currentClientSecret,
-        0,
+          email,
-      );
+          0,
+        );
+      }
 
       await client.uiaRequestBackground(
         (auth) => client.register(

lib/pages/sign_up/signup_view.dart

@@ -32,8 +32,9 @@ class SignupPageView extends StatelessWidget {
               child: TextFormField(
                 readOnly: controller.loading,
                 autocorrect: false,
+                onChanged: controller.onPasswordType,
                 autofillHints:
-                    controller.loading ? null : [AutofillHints.password],
+                    controller.loading ? null : [AutofillHints.newPassword],
                 controller: controller.passwordController,
                 obscureText: !controller.showPassword,
                 validator: controller.password1TextFieldValidator,
@@ -56,6 +57,26 @@ class SignupPageView extends StatelessWidget {
                 ),
               ),
             ),
+            if (controller.displaySecondPasswordField)
+              Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: TextFormField(
+                  readOnly: controller.loading,
+                  autocorrect: false,
+                  autofillHints:
+                      controller.loading ? null : [AutofillHints.newPassword],
+                  controller: controller.password2Controller,
+                  obscureText: !controller.showPassword,
+                  validator: controller.password2TextFieldValidator,
+                  decoration: FluffyThemes.loginTextFieldDecoration(
+                    prefixIcon: const Icon(
+                      Icons.repeat_outlined,
+                      color: Colors.black,
+                    ),
+                    hintText: L10n.of(context)!.repeatPassword,
+                  ),
+                ),
+              ),
             Padding(
               padding: const EdgeInsets.all(16.0),
               child: TextFormField(

pubspec.lock

@@ -932,7 +932,7 @@ packages:
     description:
       path: "."
       ref: null-safety
-      resolved-ref: "5aa8786475bca1b90ff35409eff3e0f5a4768601"
+      resolved-ref: "2906e65ffaa96afbe6c72e8477d4dfcdfd06c2c3"
       url: "https://github.com/TheOneWithTheBraid/keyboard_shortcuts.git"
     source: git
     version: "0.1.4"