From 758ebde1f79c868a149828af7f24260d639d483f Mon Sep 17 00:00:00 2001 From: Gabby Gurdin Date: Mon, 26 Feb 2024 13:01:17 -0500 Subject: [PATCH] turn dob picker into radio button choices --- assets/l10n/intl_en.arb | 11 +- assets/l10n/intl_es.arb | 15 +- lib/pangea/pages/p_user_age/p_user_age.dart | 55 +++--- .../pages/p_user_age/p_user_age_view.dart | 180 +++++++----------- 4 files changed, 109 insertions(+), 152 deletions(-) diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index c830d3583..a79fbff5a 100644 --- a/assets/l10n/intl_en.arb +++ b/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": {} + } + } } \ No newline at end of file diff --git a/assets/l10n/intl_es.arb b/assets/l10n/intl_es.arb index 78e109aca..a109f94ab 100644 --- a/assets/l10n/intl_es.arb +++ b/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": {} + } + } } diff --git a/lib/pangea/pages/p_user_age/p_user_age.dart b/lib/pangea/pages/p_user_age/p_user_age.dart index 415379309..955ad1e15 100644 --- a/lib/pangea/pages/p_user_age/p_user_age.dart +++ b/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 { bool loading = false; - final GlobalKey formKey = GlobalKey(); + 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 { ); } - String? dobFieldValidator(String? value) { + String? dobValidator() { try { - if (value?.isEmpty ?? true) { + if (selectedDate == null) { return L10n.of(context)!.yourBirthdayPleaseShort; } - final DateTime dob = _textToDate!; - if (!dob.isAtLeastYearsOld(AgeLimits.toUseTheApp)) { + if (!selectedDate!.isAtLeastYearsOld(AgeLimits.toUseTheApp)) { return L10n.of(context)!.mustBe13; } return null; @@ -68,30 +64,26 @@ class PUserAgeController extends State { } } - DateTime? get _textToDate { - try { - final DateTime initial = DateFormat.yMd().parse(dobController.text); - return initial; - } catch (err) { - return null; - } + DateTime? get selectedDate { + if (selectedAge == null) return null; + final now = DateTime.now(); + return DateTime(now.year - selectedAge!, now.month, now.day); } - 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 { 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 { } } + void setSelectedAge(int? value) { + setState(() { + selectedAge = value; + }); + } + @override Widget build(BuildContext context) { return !unknownErrorState diff --git a/lib/pangea/pages/p_user_age/p_user_age_view.dart b/lib/pangea/pages/p_user_age/p_user_age_view.dart index e81188d00..f2a844041 100644 --- a/lib/pangea/pages/p_user_age/p_user_age_view.dart +++ b/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( - key: controller.formKey, - child: ListView( - children: [ - // #Pangea - Container( - margin: const EdgeInsets.only(top: 10), - padding: const EdgeInsets.all(12), - child: Text( - L10n.of(context)!.yourBirthdayPlease, - textAlign: TextAlign.justify, - style: const TextStyle(color: Colors.white), - ), + body: ListView( + children: [ + Container( + margin: const EdgeInsets.only(top: 10), + padding: const EdgeInsets.all(12), + child: Text( + 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( - padding: const EdgeInsets.symmetric(horizontal: 12), - child: TextFormField( - readOnly: controller.loading, - autocorrect: false, - controller: controller.dobController, - keyboardType: TextInputType.datetime, - autofillHints: - controller.loading ? null : [AutofillHints.birthday], - validator: controller.dobFieldValidator, - onTap: () async { - 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: [ - 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, + child: Column( + children: [ + ListTile( + title: Text( + L10n.of(context)!.certifyAge(13), + style: const TextStyle(color: Colors.white), + ), + leading: Radio( + value: 13, + groupValue: controller.selectedAge, + onChanged: controller.setSelectedAge, ), ), - ), + ListTile( + title: Text( + L10n.of(context)!.certifyAge(18), + style: const TextStyle(color: Colors.white), + ), + leading: Radio( + 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( - tag: 'loginButton', - child: Padding( - padding: const EdgeInsets.all(12), - child: ElevatedButton( - onPressed: controller.createUserInPangea, - child: controller.loading - ? const LinearProgressIndicator() - : Text(L10n.of(context)!.getStarted), - ), + Hero( + tag: 'loginButton', + child: Padding( + padding: const EdgeInsets.all(12), + child: ElevatedButton( + onPressed: controller.createUserInPangea, + child: controller.loading + ? const LinearProgressIndicator() + : Text(L10n.of(context)!.getStarted), ), ), - ], - ), + ), + ], ), + // ), ); } }