Merge pull request #84 from pangeachat/dob-buttons

Dob buttons

assets/l10n/intl_en.arb

@@ -2743,7 +2743,7 @@
         "type": "text",
         "placeholders": {}
     },
-    "yourBirthdayPleaseShort": "Please provide your date of birth",
+    "yourBirthdayPleaseShort": "Please selected your age group",
     "@yourBirthdayPleaseShort": {
         "type": "text",
         "placeholders": {}
@@ -3940,5 +3940,12 @@
     "subscribedToUnlockTools": "Subscribe to unlock language tools, including",
     "more": "More",
     "translationTooltip": "Translate",
-    "audioTooltip": "Play Audio"
+    "audioTooltip": "Play Audio",
+    "certifyAge": "I certify that I am over {age} years of age",
+    "@certifyAge": {
+        "type": "text",
+        "placeholders": {
+            "age": {}
+        }
+    }
 }

assets/l10n/intl_es.arb

@@ -3027,11 +3027,6 @@
     "type": "text",
     "placeholders": {}
   },
-  "yourBirthdayPleaseShort": "Por favor, introduzca su fecha de nacimiento",
-  "@yourBirthdayPleaseShort": {
-    "type": "text",
-    "placeholders": {}
-  },
   "inviteStudentByUserName": "Invitar a estudiantes por usuario",
   "@inviteStudentByUserName": {
     "type": "text",
@@ -4578,5 +4573,13 @@
   "clickMessageBody": "Haga clic en los mensajes para acceder a las definiciones, traducciones y audio.",
   "more": "Más",
   "translationTooltip": "Traducir",
-  "audioTooltip": "Reproducir audio"
+  "audioTooltip": "Reproducir audio",
+  "yourBirthdayPleaseShort": "Seleccione su grupo de edad",
+  "certifyAge": "Certifico que soy mayor de {age} años",
+    "@certifyAge": {
+        "type": "text",
+        "placeholders": {
+            "age": {}
+        }
+    }
 }

lib/pangea/pages/p_user_age/p_user_age.dart

@@ -1,17 +1,16 @@
 import 'dart:developer';
 
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:intl/intl.dart';
-
 import 'package:fluffychat/pangea/constants/age_limits.dart';
 import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
 import 'package:fluffychat/pangea/pages/p_user_age/p_user_age_view.dart';
 import 'package:fluffychat/pangea/utils/p_extension.dart';
 import 'package:fluffychat/widgets/fluffy_chat_app.dart';
 import 'package:fluffychat/widgets/matrix.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:intl/intl.dart';
+
 import '../../utils/bot_name.dart';
 import '../../utils/error_handler.dart';
 
@@ -24,13 +23,11 @@ class PUserAge extends StatefulWidget {
 
 class PUserAgeController extends State<PUserAge> {
   bool loading = false;
-  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
+  int? selectedAge;
   TextEditingController dobController = TextEditingController();
-  // #Pangea
 
   String? error;
   bool unknownErrorState = false;
-  // DateTime? dateOfBirth;
 
   final PangeaController pangeaController = MatrixState.pangeaController;
 
@@ -52,13 +49,12 @@ class PUserAgeController extends State<PUserAge> {
     );
   }
 
-  String? dobFieldValidator(String? value) {
+  String? dobValidator() {
     try {
-      if (value?.isEmpty ?? true) {
+      if (selectedDate == null) {
         return L10n.of(context)!.yourBirthdayPleaseShort;
       }
-      final DateTime dob = _textToDate!;
+      if (!selectedDate!.isAtLeastYearsOld(AgeLimits.toUseTheApp)) {
-      if (!dob.isAtLeastYearsOld(AgeLimits.toUseTheApp)) {
         return L10n.of(context)!.mustBe13;
       }
       return null;
@@ -68,30 +64,26 @@ class PUserAgeController extends State<PUserAge> {
     }
   }
 
-  DateTime? get _textToDate {
+  DateTime? get selectedDate {
-    try {
+    if (selectedAge == null) return null;
-      final DateTime initial = DateFormat.yMd().parse(dobController.text);
+    final now = DateTime.now();
-      return initial;
+    return DateTime(now.year - selectedAge!, now.month, now.day);
-    } catch (err) {
-      return null;
-    }
   }
 
-  DateTime get initialDate =>
-      _textToDate ?? DateTime.now().subtract(const Duration(days: 13 * 365));
-
   //Note: used linear progress bar (also used in fluffychat signup button) for consistency
   createUserInPangea() async {
     try {
       setState(() {
-        error = null;
+        error = dobValidator();
       });
-      if (!formKey.currentState!.validate()) return;
+
+      if (error?.isNotEmpty == true) return;
+
       setState(() {
         loading = true;
       });
 
-      final String date = DateFormat('MM-dd-yyyy').format(_textToDate!);
+      final String date = DateFormat('MM-dd-yyyy').format(selectedDate!);
 
       if (pangeaController.userController.userModel?.access == null) {
         await pangeaController.userController.createPangeaUser(dob: date);
@@ -100,11 +92,6 @@ class PUserAgeController extends State<PUserAge> {
           dateOfBirth: date,
         );
       }
-      // Matrix.of(context).widget.router!.currentState!.to(
-      //       '/rooms',
-      //       queryParameters:
-      //           Matrix.of(context).widget.router!.currentState!.queryParameters,
-      //     );
       FluffyChatApp.router.go('/rooms');
     } catch (err, s) {
       setState(() {
@@ -117,6 +104,12 @@ class PUserAgeController extends State<PUserAge> {
     }
   }
 
+  void setSelectedAge(int? value) {
+    setState(() {
+      selectedAge = value;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return !unknownErrorState

lib/pangea/pages/p_user_age/p_user_age_view.dart

@@ -1,10 +1,7 @@
+import 'package:fluffychat/pangea/pages/p_user_age/p_user_age.dart';
 import 'package:flutter/material.dart';
-
 import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:intl/intl.dart';
-import 'package:syncfusion_flutter_datepicker/datepicker.dart';
 
-import 'package:fluffychat/pangea/pages/p_user_age/p_user_age.dart';
 import '../../../widgets/layouts/login_scaffold.dart';
 
 class PUserAgeView extends StatelessWidget {
@@ -17,124 +14,81 @@ class PUserAgeView extends StatelessWidget {
       appBar: AppBar(
         automaticallyImplyLeading: !controller.loading,
       ),
-      body: Form(
+      body: ListView(
-        key: controller.formKey,
+        children: [
-        child: ListView(
+          Container(
-          children: [
+            margin: const EdgeInsets.only(top: 10),
-            // #Pangea
+            padding: const EdgeInsets.all(12),
-            Container(
+            child: Text(
-              margin: const EdgeInsets.only(top: 10),
+              L10n.of(context)!.yourBirthdayPlease,
-              padding: const EdgeInsets.all(12),
+              textAlign: TextAlign.justify,
-              child: Text(
+              style: const TextStyle(color: Colors.white),
-                L10n.of(context)!.yourBirthdayPlease,
-                textAlign: TextAlign.justify,
-                style: const TextStyle(color: Colors.white),
-              ),
             ),
-            const SizedBox(
+          ),
-              height: 10,
+          const SizedBox(
+            height: 10,
+          ),
+          Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: Theme.of(context)
+                  .colorScheme
+                  .onSecondaryContainer
+                  .withAlpha(50),
             ),
-            Padding(
+            child: Column(
-              padding: const EdgeInsets.symmetric(horizontal: 12),
+              children: [
-              child: TextFormField(
+                ListTile(
-                readOnly: controller.loading,
+                  title: Text(
-                autocorrect: false,
+                    L10n.of(context)!.certifyAge(13),
-                controller: controller.dobController,
+                    style: const TextStyle(color: Colors.white, fontSize: 14),
-                keyboardType: TextInputType.datetime,
+                  ),
-                autofillHints:
+                  leading: Radio<int>(
-                    controller.loading ? null : [AutofillHints.birthday],
+                    value: 13,
-                validator: controller.dobFieldValidator,
+                    groupValue: controller.selectedAge,
-                onTap: () async {
+                    onChanged: controller.setSelectedAge,
-                  showDialog(
-                    context: context,
-                    builder: (BuildContext context) {
-                      return Center(
-                        child: Container(
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(25),
-                            color: Theme.of(context).colorScheme.background,
-                          ),
-                          padding: const EdgeInsets.all(12),
-                          // height: 350,
-                          width: 500,
-                          child: Column(
-                            mainAxisSize: MainAxisSize.min,
-                            children: <Widget>[
-                              Card(
-                                child: SfDateRangePicker(
-                                  view: DateRangePickerView.month,
-                                  showNavigationArrow: true,
-                                  showActionButtons: true,
-                                  selectionMode:
-                                      DateRangePickerSelectionMode.single,
-                                  initialDisplayDate: controller.initialDate,
-                                  initialSelectedDate: controller.initialDate,
-                                  onSubmit: (val) {
-                                    final DateTime? pickedDate =
-                                        val as DateTime?;
-                                    if (pickedDate != null) {
-                                      controller.dobController.text =
-                                          DateFormat.yMd().format(pickedDate);
-                                      controller.error = null;
-                                    } else {
-                                      controller.error =
-                                          L10n.of(context)!.invalidDob;
-                                    }
-                                    Navigator.pop(context);
-                                  },
-                                  onCancel: () => Navigator.pop(context),
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
-                      );
-                    },
-                  );
-                },
-                // onChanged: (String newValue) {
-                //   try {
-                //     controller.dateOfBirth =
-                //         DateTime.parse(controller.dobController.text);
-                //     controller.error = null;
-                //   } catch (err) {
-                //     controller.error = L10n.of(context)!.invalidDob;
-                //   }
-                // },
-                decoration: InputDecoration(
-                  prefixIcon: const Icon(Icons.calendar_today),
-                  hintText: L10n.of(context)!.enterYourDob,
-                  fillColor: Theme.of(context)
-                      .colorScheme
-                      .background
-                      .withOpacity(0.75),
-                  errorText: controller.error,
-                  errorStyle: TextStyle(
-                    color: controller.dobController.text.isEmpty
-                        ? Colors.orangeAccent
-                        : Colors.orange,
                   ),
                 ),
-              ),
+                ListTile(
+                  title: Text(
+                    L10n.of(context)!.certifyAge(18),
+                    style: const TextStyle(color: Colors.white, fontSize: 14),
+                  ),
+                  leading: Radio<int>(
+                    value: 18,
+                    groupValue: controller.selectedAge,
+                    onChanged: controller.setSelectedAge,
+                  ),
+                ),
+              ],
             ),
-            const SizedBox(
+          ),
-              height: 10,
+          const SizedBox(
+            height: 10,
+          ),
+          if (controller.error != null)
+            Padding(
+              padding: const EdgeInsets.all(12),
+              child: Text(
+                controller.error!,
+                style: const TextStyle(color: Colors.white),
+              ),
             ),
-            Hero(
+          Hero(
-              tag: 'loginButton',
+            tag: 'loginButton',
-              child: Padding(
+            child: Padding(
-                padding: const EdgeInsets.all(12),
+              padding: const EdgeInsets.all(12),
-                child: ElevatedButton(
+              child: ElevatedButton(
-                  onPressed: controller.createUserInPangea,
+                onPressed: controller.createUserInPangea,
-                  child: controller.loading
+                child: controller.loading
-                      ? const LinearProgressIndicator()
+                    ? const LinearProgressIndicator()
-                      : Text(L10n.of(context)!.getStarted),
+                    : Text(L10n.of(context)!.getStarted),
-                ),
               ),
             ),
-          ],
+          ),
-        ),
+        ],
       ),
+      // ),
     );
   }
 }

lib/pangea/utils/instructions.dart

@@ -50,7 +50,7 @@ class InstructionsController {
 
     final bool userLangsSet =
         await _pangeaController.userController.areUserLanguagesSet;
-    if (!userLangsSet && key == InstructionsEnum.blurMeansTranslate) {
+    if (!userLangsSet) {
       return;
     }
 

lib/pangea/widgets/chat/message_toolbar.dart

@@ -276,7 +276,9 @@ class MessageToolbarState extends State<MessageToolbar> {
       updateMode(mode);
     });
 
-    updateMode(MessageMode.play);
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      updateMode(MessageMode.play);
+    });
 
     Timer? timer;
     selectionStream =