New user screen UI

pull/111/head
Inex Code 2022-09-05 16:12:00 +04:00
parent 5f58022d42
commit 979e8ee37a
6 changed files with 189 additions and 178 deletions

View File

@ -272,6 +272,7 @@
"_comment": "'Users' tab", "_comment": "'Users' tab",
"add_new_user": "Add a first user", "add_new_user": "Add a first user",
"new_user": "New user", "new_user": "New user",
"delete_user": "Delete user",
"not_ready": "Please connect server, domain and DNS in the Providers tab, to be able to add a first user", "not_ready": "Please connect server, domain and DNS in the Providers tab, to be able to add a first user",
"nobody_here": "Nobody here", "nobody_here": "Nobody here",
"login": "Login", "login": "Login",
@ -287,7 +288,9 @@
"refresh_users": "Refresh users list", "refresh_users": "Refresh users list",
"could_not_create_user": "Couldn't create user", "could_not_create_user": "Couldn't create user",
"could_not_delete_user": "Couldn't delete user", "could_not_delete_user": "Couldn't delete user",
"could_not_add_ssh_key": "Couldn't add SSH key" "could_not_add_ssh_key": "Couldn't add SSH key",
"email_login": "Email login",
"no_sso_notice": "Only email and SSH accounts are created for this user. Single Sign On for all services is coming soon."
}, },
"initializing": { "initializing": {
"_comment": "initializing page", "_comment": "initializing page",

View File

@ -1,7 +1,7 @@
part of 'ssh_keys.dart'; part of 'ssh_keys.dart';
class _NewSshKey extends StatelessWidget { class NewSshKey extends StatelessWidget {
const _NewSshKey(this.user); const NewSshKey(this.user, {final super.key});
final User user; final User user;
@override @override

View File

@ -65,7 +65,7 @@ class _SshKeysPageState extends State<SshKeysPage> {
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
builder: (final BuildContext context) => Padding( builder: (final BuildContext context) => Padding(
padding: MediaQuery.of(context).viewInsets, padding: MediaQuery.of(context).viewInsets,
child: _NewSshKey(widget.user), child: NewSshKey(widget.user),
), ),
); );
}, },

View File

@ -11,10 +11,8 @@ class _User extends StatelessWidget {
@override @override
Widget build(final BuildContext context) => InkWell( Widget build(final BuildContext context) => InkWell(
onTap: () { onTap: () {
showBrandBottomSheet<void>( Navigator.of(context).push(
context: context, materialRoute(_UserDetails(user: user, isRootUser: isRootUser)),
builder: (final BuildContext context) =>
_UserDetails(user: user, isRootUser: isRootUser),
); );
}, },
child: Container( child: Container(

View File

@ -15,179 +15,192 @@ class _UserDetails extends StatelessWidget {
final String domainName = UiHelpers.getDomainName(config); final String domainName = UiHelpers.getDomainName(config);
return BrandBottomSheet( return BrandHeroScreen(
isExpended: true, hasBackButton: true,
child: Column( heroTitle: user.login,
crossAxisAlignment: CrossAxisAlignment.start, children: [
mainAxisSize: MainAxisSize.min, BrandCards.filled(
children: [ child: Column(
Container( children: [
height: 200, ListTile(
decoration: BoxDecoration( title: Text('${user.login}@$domainName'),
color: user.color, subtitle: Text('users.email_login'.tr()),
borderRadius: const BorderRadius.vertical( textColor: Theme.of(context).colorScheme.onSurfaceVariant,
top: Radius.circular(20), leading: const Icon(Icons.alternate_email_outlined),
iconColor: Theme.of(context).colorScheme.onSurfaceVariant,
), ),
), ],
child: Column( ),
crossAxisAlignment: CrossAxisAlignment.stretch, ),
children: [ const SizedBox(height: 8),
if (!isRootUser) BrandCards.filled(
Align( child: Column(
alignment: Alignment.centerRight, children: [
child: Padding( ListTile(
padding: const EdgeInsets.symmetric( title: Text('ssh.title'.tr()),
vertical: 4, textColor: Theme.of(context).colorScheme.onSurfaceVariant,
horizontal: 2, ),
), const Divider(height: 0),
child: PopupMenuButton<PopupMenuItemType>( ListTile(
shape: RoundedRectangleBorder( iconColor: Theme.of(context).colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(10.0), textColor: Theme.of(context).colorScheme.onSurfaceVariant,
), title: Text(
onSelected: (final PopupMenuItemType result) { 'ssh.create'.tr(),
switch (result) { ),
case PopupMenuItemType.delete: leading: const Icon(Icons.add_circle_outlined),
showDialog( onTap: () {
context: context, showModalBottomSheet<void>(
builder: (final BuildContext context) => context: context,
AlertDialog( isScrollControlled: true,
title: Text('basis.confirmation'.tr()), backgroundColor: Colors.transparent,
content: SingleChildScrollView( builder: (final BuildContext context) => Padding(
child: ListBody( padding: MediaQuery.of(context).viewInsets,
children: <Widget>[ child: NewSshKey(user),
Text( ),
'users.delete_confirm_question'.tr(), );
), },
], ),
), Column(
), children: user.sshKeys.map((final String key) {
actions: <Widget>[ final publicKey =
TextButton( key.split(' ').length > 1 ? key.split(' ')[1] : key;
child: Text('basis.cancel'.tr()), final keyType = key.split(' ')[0];
onPressed: () { final keyName = key.split(' ').length > 2
Navigator.of(context).pop(); ? key.split(' ')[2]
}, : 'ssh.no_key_name'.tr();
), return ListTile(
TextButton( textColor: Theme.of(context).colorScheme.onSurfaceVariant,
child: Text( title: Text('$keyName ($keyType)'),
'basis.delete'.tr(), // do not overflow text
style: const TextStyle( subtitle: Text(
color: BrandColors.red1, publicKey,
), maxLines: 1,
), overflow: TextOverflow.ellipsis,
onPressed: () { ),
context onTap: () {
.read<JobsCubit>() showDialog(
.addJob(DeleteUserJob(user: user)); context: context,
Navigator.of(context) builder: (final BuildContext context) => AlertDialog(
..pop() title: Text('ssh.delete'.tr()),
..pop(); content: SingleChildScrollView(
}, child: ListBody(
), children: <Widget>[
], Text('ssh.delete_confirm_question'.tr()),
), Text('$keyName ($keyType)'),
); Text(publicKey),
break; ],
}
},
icon: const Icon(Icons.more_vert),
itemBuilder: (final BuildContext context) => [
PopupMenuItem<PopupMenuItemType>(
value: PopupMenuItemType.delete,
child: Container(
padding: const EdgeInsets.only(left: 5),
child: Text(
'basis.delete'.tr(),
style: const TextStyle(color: BrandColors.red1),
),
), ),
), ),
], actions: <Widget>[
), TextButton(
child: Text('basis.cancel'.tr()),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
child: Text(
'basis.delete'.tr(),
style: const TextStyle(
color: BrandColors.red1,
),
),
onPressed: () {
context.read<JobsCubit>().addJob(
DeleteSSHKeyJob(
user: user,
publicKey: key,
),
);
Navigator.of(context)
..pop()
..pop();
},
),
],
),
);
},
);
}).toList(),
),
],
),
),
const SizedBox(height: 8),
ListTile(
iconColor: Theme.of(context).colorScheme.onBackground,
onTap: () => {},
leading: const Icon(Icons.lock_reset_outlined),
title: Text(
'users.reset_password'.tr(),
),
),
if (!isRootUser)
ListTile(
iconColor: Theme.of(context).colorScheme.error,
textColor: Theme.of(context).colorScheme.error,
onTap: () => {
showDialog(
context: context,
builder: (final BuildContext context) => AlertDialog(
title: Text('basis.confirmation'.tr()),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(
'users.delete_confirm_question'.tr(),
),
],
), ),
), ),
const Spacer(), actions: <Widget>[
Padding( TextButton(
padding: const EdgeInsets.symmetric( child: Text('basis.cancel'.tr()),
vertical: 20, onPressed: () {
horizontal: 15, Navigator.of(context).pop();
), },
child: AutoSizeText( ),
user.login, TextButton(
style: headline1Style, child: Text(
softWrap: true, 'basis.delete'.tr(),
minFontSize: 9, style: const TextStyle(
maxLines: 3, color: BrandColors.red1,
overflow: TextOverflow.ellipsis, ),
), ),
onPressed: () {
context
.read<JobsCubit>()
.addJob(DeleteUserJob(user: user));
Navigator.of(context)
..pop()
..pop();
},
),
],
), ),
], )
},
leading: const Icon(Icons.person_remove_outlined),
title: Text(
'users.delete_user'.tr(),
), ),
), ),
const SizedBox(height: 20), const Divider(height: 8),
Padding( Padding(
padding: paddingH15V0.copyWith(bottom: 20), padding: const EdgeInsets.all(16.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
BrandText.small('users.account'.tr()), const Icon(Icons.warning_amber_outlined, size: 24),
Container( const SizedBox(height: 16),
height: 40, Text(
alignment: Alignment.centerLeft, 'users.no_sso_notice'.tr(),
child: BrandText.h4('${user.login}@$domainName'), ),
), ],
if (user.password != null) ),
Column( ),
crossAxisAlignment: CrossAxisAlignment.start, ],
children: [
const SizedBox(height: 14),
BrandText.small('basis.password'.tr()),
Container(
height: 40,
alignment: Alignment.centerLeft,
child: BrandText.h4(user.password),
),
],
),
const SizedBox(height: 24),
const BrandDivider(),
const SizedBox(height: 20),
ListTile(
onTap: () {
Navigator.of(context)
.push(materialRoute(SshKeysPage(user: user)));
},
title: Text('ssh.title'.tr()),
subtitle: user.sshKeys.isNotEmpty
? Text(
'ssh.subtitle_with_keys'
.tr(args: [user.sshKeys.length.toString()]),
)
: Text('ssh.subtitle_without_keys'.tr()),
trailing: const Icon(BrandIcons.key),
),
const SizedBox(height: 20),
ListTile(
onTap: () {
Share.share(
'login: ${user.login}, password: ${user.password}',
);
},
title: Text(
'users.send_registration_data'.tr(),
),
trailing: const Icon(BrandIcons.share),
),
],
),
)
],
),
); );
} }
} }
enum PopupMenuItemType {
// reset,
delete,
}

View File

@ -1,10 +1,8 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:cubit_form/cubit_form.dart'; import 'package:cubit_form/cubit_form.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:selfprivacy/config/brand_colors.dart'; import 'package:selfprivacy/config/brand_colors.dart';
import 'package:selfprivacy/config/brand_theme.dart'; import 'package:selfprivacy/config/brand_theme.dart';
import 'package:selfprivacy/config/text_themes.dart';
import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart'; import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
import 'package:selfprivacy/logic/cubit/forms/factories/field_cubit_factory.dart'; import 'package:selfprivacy/logic/cubit/forms/factories/field_cubit_factory.dart';
import 'package:selfprivacy/logic/cubit/forms/user/user_form_cubit.dart'; import 'package:selfprivacy/logic/cubit/forms/user/user_form_cubit.dart';
@ -15,15 +13,14 @@ import 'package:selfprivacy/logic/models/hive/user.dart';
import 'package:selfprivacy/ui/components/brand_bottom_sheet/brand_bottom_sheet.dart'; import 'package:selfprivacy/ui/components/brand_bottom_sheet/brand_bottom_sheet.dart';
import 'package:selfprivacy/ui/components/brand_button/brand_button.dart'; import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
import 'package:selfprivacy/ui/components/brand_button/outlined_button.dart'; import 'package:selfprivacy/ui/components/brand_button/outlined_button.dart';
import 'package:selfprivacy/ui/components/brand_divider/brand_divider.dart'; import 'package:selfprivacy/ui/components/brand_cards/brand_cards.dart';
import 'package:selfprivacy/ui/components/brand_header/brand_header.dart'; import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart'; import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
import 'package:selfprivacy/ui/components/brand_text/brand_text.dart'; import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
import 'package:selfprivacy/ui/components/not_ready_card/not_ready_card.dart'; import 'package:selfprivacy/ui/components/not_ready_card/not_ready_card.dart';
import 'package:selfprivacy/ui/helpers/modals.dart';
import 'package:selfprivacy/ui/pages/ssh_keys/ssh_keys.dart'; import 'package:selfprivacy/ui/pages/ssh_keys/ssh_keys.dart';
import 'package:selfprivacy/utils/ui_helpers.dart'; import 'package:selfprivacy/utils/ui_helpers.dart';
import 'package:share_plus/share_plus.dart';
import 'package:selfprivacy/utils/route_transitions/basic.dart'; import 'package:selfprivacy/utils/route_transitions/basic.dart';