ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: layout updates to signup / login pages (#2465)

Browse source
This commit is contained in:
ggurdin 2025-04-16 14:09:47 -04:00 • committed by GitHub
parent 11b8d64346
commit b27c631bba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 116 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/l10n/intl_en.arb
View file

@ -4863,5 +4863,6 @@
"areYouLikeMe": "Are you like me?",
"tryAgainLater": "Too many attempts made. Please try again in 5 minutes.",
"enterSpaceCode": "Enter the Space Code",
"shareSpaceLink": "Share link to space"
"shareSpaceLink": "Share link to space",
"byUsingPangeaChat": "By using Pangea Chat, I agree to the "
}

14
lib/pangea/login/pages/pangea_login_scaffold.dart
View file

@ -3,6 +3,7 @@ import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
class PangeaLoginScaffold extends StatelessWidget {
final String mainAssetPath;
@ -22,9 +23,13 @@ class PangeaLoginScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isColumnMode = FluffyThemes.isColumnMode(context);
return SafeArea(
child: Scaffold(
appBar: customAppBar ?? AppBar(),
appBar: customAppBar ??
AppBar(
toolbarHeight: isColumnMode ? null : 40.0,
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
@ -41,8 +46,8 @@ class PangeaLoginScaffold extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 175,
height: 175,
width: isColumnMode ? 175 : 125,
height: isColumnMode ? 175 : 125,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
@ -59,13 +64,12 @@ class PangeaLoginScaffold extends StatelessWidget {
),
),
),
const SizedBox(height: 24),
if (showAppName)
Text(
AppConfig.applicationName,
style: Theme.of(context).textTheme.displaySmall,
),
if (showAppName) const SizedBox(height: 12),
const SizedBox(height: 12),
...children,
],
),

45
lib/pangea/login/pages/pangea_login_view.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/login/login.dart';
import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
import 'package:fluffychat/pangea/login/pages/pangea_login_scaffold.dart';
@ -18,6 +19,7 @@ class PangeaLoginView extends StatelessWidget {
return Form(
key: controller.formKey,
child: PangeaLoginScaffold(
showAppName: FluffyThemes.isColumnMode(context),
children: [
AutofillGroup(
child: Column(
@ -66,24 +68,24 @@ class PangeaLoginView extends StatelessWidget {
enabled: controller.enabledSignIn,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 6.0),
padding: const EdgeInsets.all(4.0),
child: TextButton(
onPressed: controller.loadingSignIn
? () {}
: controller.passwordForgotten,
style: TextButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.error,
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 4.0,
),
minimumSize: const Size(0, 0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(L10n.of(context).passwordForgotten),
],
),
child: Text(L10n.of(context).passwordForgotten),
),
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
const Expanded(child: Divider()),
@ -107,6 +109,33 @@ class PangeaLoginView extends StatelessWidget {
loading: controller.loadingAppleSSO,
setLoading: controller.setLoadingSSO,
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 8.0,
),
child: RichText(
textAlign: TextAlign.justify,
text: TextSpan(
text: L10n.of(context).byUsingPangeaChat,
children: [
TextSpan(
text: L10n.of(context).termsAndConditions,
style: const TextStyle(
decoration: TextDecoration.underline,
),
),
TextSpan(
text: L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
),
],
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.onSurface,
),
),
),
),
],
),
);

6
lib/pangea/login/pages/signup.dart
View file

@ -146,13 +146,7 @@ class SignupPageController extends State<SignupPage> {
return null;
}
bool isTnCChecked = false;
String? signupError;
void onTncChange(bool? value) {
isTnCChecked = value ?? false;
signupError = null;
setState(() {});
}
void signup([_]) async {
setState(() => signupError = null);

41
lib/pangea/login/pages/signup_view.dart
View file

@ -9,7 +9,6 @@ import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
import 'package:fluffychat/pangea/login/pages/pangea_login_scaffold.dart';
import 'package:fluffychat/pangea/login/widgets/full_width_button.dart';
import 'package:fluffychat/pangea/login/widgets/p_sso_button.dart';
import 'package:fluffychat/pangea/login/widgets/tos_checkbox.dart';
import 'signup.dart';
class SignupPageView extends StatelessWidget {
@ -19,24 +18,13 @@ class SignupPageView extends StatelessWidget {
@override
Widget build(BuildContext context) {
bool validator() {
final valid = controller.formKey.currentState?.validate() ?? false;
if (!valid) return false;
if (!controller.isTnCChecked) {
controller.setSignupError(L10n.of(context).pleaseAgreeToTOS);
return false;
}
return true;
return controller.formKey.currentState?.validate() ?? false;
}
return Form(
key: controller.formKey,
child: PangeaLoginScaffold(
children: [
TosCheckbox(
controller.isTnCChecked,
controller.onTncChange,
error: controller.signupError,
),
FullWidthButton(
title: L10n.of(context).signUpWithEmail,
onPressed: () {
@ -64,6 +52,33 @@ class SignupPageView extends StatelessWidget {
loading: controller.loadingAppleSSO,
validator: validator,
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 8.0,
),
child: RichText(
textAlign: TextAlign.justify,
text: TextSpan(
text: L10n.of(context).byUsingPangeaChat,
children: [
TextSpan(
text: L10n.of(context).termsAndConditions,
style: const TextStyle(
decoration: TextDecoration.underline,
),
),
TextSpan(
text: L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
),
],
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.onSurface,
),
),
),
),
],
),
);

77
lib/pangea/login/widgets/full_width_button.dart
View file

@ -35,7 +35,7 @@ class FullWidthButtonState extends State<FullWidthButton> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(6, 6, 6, widget.error == null ? 6 : 0),
padding: EdgeInsets.fromLTRB(4, 4, 4, widget.error == null ? 4 : 0),
child: AnimatedOpacity(
duration: FluffyThemes.animationDuration,
opacity: widget.enabled ? 1 : 0.5,
@ -47,7 +47,7 @@ class FullWidthButtonState extends State<FullWidthButton> {
child: Container(
// internal padding
padding: const EdgeInsets.symmetric(horizontal: 16),
height: 50,
height: 40,
decoration: BoxDecoration(
color: widget.enabled
? Theme.of(context).colorScheme.primary
@ -146,43 +146,46 @@ class FullWidthTextField extends StatelessWidget {
final bool shouldShowError = showErrorText ?? errorText != null;
return Padding(
padding: const EdgeInsets.all(6.0),
child: TextFormField(
obscureText: obscureText,
autocorrect: autocorrect,
textInputAction: textInputAction,
keyboardType: keyboardType,
autofillHints: autofillHints,
autofocus: autoFocus,
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
padding: const EdgeInsets.all(4.0),
child: SizedBox(
height: 40.0,
child: TextFormField(
obscureText: obscureText,
autocorrect: autocorrect,
textInputAction: textInputAction,
keyboardType: keyboardType,
autofillHints: autofillHints,
autofocus: autoFocus,
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
),
enabledBorder: errorText != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
borderSide:
BorderSide(color: Theme.of(context).colorScheme.error),
)
: null,
focusedBorder: errorText != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.error,
width: 2,
),
)
: null,
contentPadding: const EdgeInsets.symmetric(horizontal: 30),
errorText: shouldShowError ? errorText : null,
),
enabledBorder: errorText != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
borderSide:
BorderSide(color: Theme.of(context).colorScheme.error),
)
: null,
focusedBorder: errorText != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(36.0),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.error,
width: 2,
),
)
: null,
contentPadding: const EdgeInsets.symmetric(horizontal: 30),
errorText: shouldShowError ? errorText : null,
validator: validator,
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
controller: controller,
onFieldSubmitted: onSubmitted,
),
validator: validator,
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
controller: controller,
onFieldSubmitted: onSubmitted,
),
);
}

94
lib/pangea/login/widgets/tos_checkbox.dart
View file

@ -1,94 +0,0 @@
// Flutter imports:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/utils/url_launcher.dart';
class TosCheckbox extends StatefulWidget {
final bool value;
final Function(bool?) onChange;
final String? error;
const TosCheckbox(
this.value,
this.onChange, {
this.error,
super.key,
});
@override
TosCheckboxState createState() => TosCheckboxState();
}
class TosCheckboxState extends State<TosCheckbox>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () => UrlLauncher(context, AppConfig.termsOfServiceUrl)
.launchUrl(),
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 8, 0, 8),
child: RichText(
text: TextSpan(
text: L10n.of(context).iAgreeToThe,
children: [
TextSpan(
text: L10n.of(context).termsAndConditions,
style: const TextStyle(
decoration: TextDecoration.underline,
),
),
TextSpan(
text:
L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
),
],
style: TextStyle(
fontSize: 14,
color: Theme.of(context).colorScheme.onSurface,
),
),
),
),
),
AnimatedSize(
duration: FluffyThemes.animationDuration,
child: widget.error == null
? const SizedBox.shrink()
: Padding(
padding:
const EdgeInsets.only(top: 4, left: 15, bottom: 8),
child: Text(
widget.error!,
style: TextStyle(
color: Theme.of(context).colorScheme.error,
fontSize: 12,
),
),
),
),
],
),
),
Checkbox(
value: widget.value,
activeColor: Theme.of(context).colorScheme.primary,
onChanged: widget.onChange,
),
],
);
}
}