From 3cb88f3d49086282b57bc725b8463dcfd52f8124 Mon Sep 17 00:00:00 2001 From: Krille Date: Wed, 28 Aug 2024 08:43:21 +0200 Subject: [PATCH] chore: Follow up login page --- .../homeserver_picker_view.dart | 240 +++++++++--------- lib/widgets/layouts/login_scaffold.dart | 8 +- 2 files changed, 121 insertions(+), 127 deletions(-) diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart index f381cfd5..ff89bf4e 100644 --- a/lib/pages/homeserver_picker/homeserver_picker_view.dart +++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart @@ -27,7 +27,8 @@ class HomeserverPickerView extends StatelessWidget { title: Text(L10n.of(context)!.addAccount), ) : null, - body: ListView( + body: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // display a prominent banner to import session for TOR browser // users. This feature is just some UX sugar as TOR users are @@ -52,135 +53,126 @@ class HomeserverPickerView extends StatelessWidget { ), ), ), - Image.asset( - 'assets/banner_transparent.png', - ), + if (MediaQuery.of(context).size.height > 512) + ConstrainedBox( + constraints: BoxConstraints( + maxHeight: MediaQuery.of(context).size.height / 4, + ), + child: Image.asset( + 'assets/banner_transparent.png', + alignment: Alignment.center, + repeat: ImageRepeat.repeat, + ), + ), Padding( - padding: const EdgeInsets.only( - top: 16.0, - right: 8.0, - left: 8.0, - bottom: 16.0, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: const EdgeInsets.all(16.0), - child: TextField( - onChanged: controller.tryCheckHomeserverActionWithCooldown, - onEditingComplete: - controller.tryCheckHomeserverActionWithoutCooldown, - onSubmitted: - controller.tryCheckHomeserverActionWithoutCooldown, - onTap: controller.tryCheckHomeserverActionWithCooldown, - controller: controller.homeserverController, - autocorrect: false, - keyboardType: TextInputType.url, - decoration: InputDecoration( - prefixIcon: controller.isLoading - ? Container( - width: 16, - height: 16, - alignment: Alignment.center, - child: const SizedBox( - width: 16, - height: 16, - child: CircularProgressIndicator.adaptive( - strokeWidth: 2, - ), - ), - ) - : const Icon(Icons.search_outlined), - filled: false, - border: OutlineInputBorder( - borderRadius: - BorderRadius.circular(AppConfig.borderRadius), - ), - hintText: AppConfig.defaultHomeserver, - labelText: L10n.of(context)!.homeserver, - errorText: controller.error, - suffixIcon: IconButton( - onPressed: () { - showDialog( - context: context, - builder: (context) => AlertDialog.adaptive( - title: Text(L10n.of(context)!.whatIsAHomeserver), - content: Linkify( - text: L10n.of(context)!.homeserverDescription, - ), - actions: [ - TextButton( - onPressed: () => launchUrl( - Uri.https('servers.joinmatrix.org'), - ), - child: Text( - L10n.of(context)!.discoverHomeservers, - ), - ), - TextButton( - onPressed: Navigator.of(context).pop, - child: Text(L10n.of(context)!.close), - ), - ], + padding: const EdgeInsets.all(32.0), + child: TextField( + onChanged: controller.tryCheckHomeserverActionWithCooldown, + onEditingComplete: + controller.tryCheckHomeserverActionWithoutCooldown, + onSubmitted: controller.tryCheckHomeserverActionWithoutCooldown, + onTap: controller.tryCheckHomeserverActionWithCooldown, + controller: controller.homeserverController, + autocorrect: false, + keyboardType: TextInputType.url, + decoration: InputDecoration( + prefixIcon: controller.isLoading + ? Container( + width: 16, + height: 16, + alignment: Alignment.center, + child: const SizedBox( + width: 16, + height: 16, + child: CircularProgressIndicator.adaptive( + strokeWidth: 2, + ), + ), + ) + : const Icon(Icons.search_outlined), + filled: false, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius), + ), + hintText: AppConfig.defaultHomeserver, + labelText: L10n.of(context)!.homeserver, + errorText: controller.error, + suffixIcon: IconButton( + onPressed: () { + showDialog( + context: context, + builder: (context) => AlertDialog.adaptive( + title: Text(L10n.of(context)!.whatIsAHomeserver), + content: Linkify( + text: L10n.of(context)!.homeserverDescription, + ), + actions: [ + TextButton( + onPressed: () => launchUrl( + Uri.https('servers.joinmatrix.org'), ), - ); - }, - icon: const Icon(Icons.info_outlined), + child: Text( + L10n.of(context)!.discoverHomeservers, + ), + ), + TextButton( + onPressed: Navigator.of(context).pop, + child: Text(L10n.of(context)!.close), + ), + ], ), - ), - ), + ); + }, + icon: const Icon(Icons.info_outlined), ), - if (controller.supportsPasswordLogin || controller.supportsSso) - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 16.0, - vertical: 8.0, - ), - child: ElevatedButton( - style: ElevatedButton.styleFrom( - backgroundColor: theme.colorScheme.primary, - foregroundColor: theme.colorScheme.onPrimary, - ), - onPressed: controller.isLoggingIn || controller.isLoading - ? null - : controller.supportsSso - ? controller.ssoLoginAction - : controller.login, - child: Text(L10n.of(context)!.connect), - ), - ), - if (controller.supportsPasswordLogin && controller.supportsSso) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: TextButton( - style: TextButton.styleFrom( - foregroundColor: theme.colorScheme.secondary, - textStyle: theme.textTheme.labelMedium, - ), - onPressed: controller.isLoggingIn || controller.isLoading - ? null - : controller.login, - child: Text(L10n.of(context)!.loginWithMatrixId), - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: TextButton( - style: TextButton.styleFrom( - textStyle: theme.textTheme.labelMedium, - foregroundColor: theme.colorScheme.secondary, - ), - onPressed: controller.isLoggingIn || controller.isLoading - ? null - : controller.restoreBackup, - child: Text(L10n.of(context)!.hydrate), - ), - ), - ], + ), ), ), + if (MediaQuery.of(context).size.height > 512) const Spacer(), + ListView( + shrinkWrap: true, + padding: const EdgeInsets.symmetric( + horizontal: 32.0, + vertical: 32.0, + ), + children: [ + TextButton( + style: TextButton.styleFrom( + textStyle: theme.textTheme.labelMedium, + foregroundColor: theme.colorScheme.secondary, + ), + onPressed: controller.isLoggingIn || controller.isLoading + ? null + : controller.restoreBackup, + child: Text(L10n.of(context)!.hydrate), + ), + if (controller.supportsPasswordLogin && controller.supportsSso) + TextButton( + style: TextButton.styleFrom( + foregroundColor: theme.colorScheme.secondary, + textStyle: theme.textTheme.labelMedium, + ), + onPressed: controller.isLoggingIn || controller.isLoading + ? null + : controller.login, + child: Text(L10n.of(context)!.loginWithMatrixId), + ), + const SizedBox(height: 8.0), + if (controller.supportsPasswordLogin || controller.supportsSso) + ElevatedButton( + style: ElevatedButton.styleFrom( + backgroundColor: theme.colorScheme.primary, + foregroundColor: theme.colorScheme.onPrimary, + ), + onPressed: controller.isLoggingIn || controller.isLoading + ? null + : controller.supportsSso + ? controller.ssoLoginAction + : controller.login, + child: Text(L10n.of(context)!.next), + ), + ], + ), ], ), ); diff --git a/lib/widgets/layouts/login_scaffold.dart b/lib/widgets/layouts/login_scaffold.dart index 08ed8d75..8b9a1373 100644 --- a/lib/widgets/layouts/login_scaffold.dart +++ b/lib/widgets/layouts/login_scaffold.dart @@ -41,15 +41,17 @@ class LoginScaffold extends StatelessWidget { actions: appBar?.actions, backgroundColor: isMobileMode ? null : Colors.transparent, ), - body: body, + body: SafeArea(child: body), backgroundColor: isMobileMode ? null : theme.colorScheme.surface.withOpacity(0.8), bottomNavigationBar: isMobileMode ? Material( elevation: 4, shadowColor: theme.colorScheme.onSurface, - child: const _PrivacyButtons( - mainAxisAlignment: MainAxisAlignment.center, + child: const SafeArea( + child: _PrivacyButtons( + mainAxisAlignment: MainAxisAlignment.center, + ), ), ) : null,