GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2025-03-29 10:57:06 +01:00
Code Issues Projects Releases Wiki Activity

design: Improve encryption UX

Browse Source
This commit is contained in:
Christian Pauly 2021-02-27 10:41:58 +01:00
parent 53fc634bef
commit a52b7e8f16
4 changed files with 121 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/components/encryption_button.dart
View File

@ -2,7 +2,6 @@ import 'dart:async';
import 'package:adaptive_dialog/adaptive_dialog.dart'; import 'package:adaptive_dialog/adaptive_dialog.dart';
import 'package:adaptive_page_layout/adaptive_page_layout.dart'; import 'package:adaptive_page_layout/adaptive_page_layout.dart';
import 'package:flushbar/flushbar_helper.dart';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
@ -26,18 +25,21 @@ class _EncryptionButtonState extends State<EncryptionButton> {
.pushNamed('/rooms/${widget.room.id}/encryption'); .pushNamed('/rooms/${widget.room.id}/encryption');
return; return;
} }
if (!widget.room.client.encryptionEnabled) { if (widget.room.joinRules == JoinRules.public) {
await FlushbarHelper.createInformation( await showOkAlertDialog(
message: L10n.of(context).needPantalaimonWarning) context: context,
.show(context); useRootNavigator: false,
okLabel: L10n.of(context).ok,
message: L10n.of(context).noEncryptionForPublicRooms,
);
return; return;
} }
if (await showOkCancelAlertDialog( if (await showOkCancelAlertDialog(
context: context, context: context,
useRootNavigator: false, useRootNavigator: false,
title: L10n.of(context).enableEncryptionWarning, title: L10n.of(context).enableEncryption,
message: widget.room.client.encryptionEnabled message: widget.room.client.encryptionEnabled
? L10n.of(context).warningEncryptionInBeta ? L10n.of(context).enableEncryptionWarning
: L10n.of(context).needPantalaimonWarning, : L10n.of(context).needPantalaimonWarning,
okLabel: L10n.of(context).yes, okLabel: L10n.of(context).yes,
cancelLabel: L10n.of(context).cancel, cancelLabel: L10n.of(context).cancel,

15
lib/l10n/intl_en.arb
View File

@ -498,6 +498,21 @@
"type": "text", "type": "text",
"placeholders": {} "placeholders": {}
}, },
"tapOnDeviceToVerify": "Tap on a device to verifiy",
"@tapOnDeviceToVerify": {
"type": "text",
"placeholders": {}
},
"deviceVerifyDescription": "The encryption is only secure when all devices have been verified.",
"@deviceVerifyDescription": {
"type": "text",
"placeholders": {}
},
"noEncryptionForPublicRooms": "You can only activate encryption as soon as the room is no longer publicly accessible.",
"@noEncryptionForPublicRooms": {
"type": "text",
"placeholders": {}
},
"pleaseEnterSecurityKey": "Please enter your security key:", "pleaseEnterSecurityKey": "Please enter your security key:",
"@pleaseEnterSecurityKey": { "@pleaseEnterSecurityKey": {
"type": "text", "type": "text",

11
lib/views/chat.dart
View File

@ -659,11 +659,12 @@ class _ChatState extends State<Chat> {
), ),
] ]
: <Widget>[ : <Widget>[
IconButton( if (room.canSendDefaultMessages)
tooltip: L10n.of(context).videoCall, IconButton(
icon: Icon(Icons.video_call_outlined), tooltip: L10n.of(context).videoCall,
onPressed: () => startCallAction(context), icon: Icon(Icons.video_call_outlined),
), onPressed: () => startCallAction(context),
),
ChatSettingsPopupMenu(room, !room.isDirectChat), ChatSettingsPopupMenu(room, !room.isDirectChat),
], ],
), ),

146
lib/views/chat_encryption_settings.dart
View File

@ -2,7 +2,6 @@ import 'package:famedlysdk/encryption.dart';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/avatar.dart'; import 'package:fluffychat/components/avatar.dart';
import 'package:fluffychat/components/matrix.dart'; import 'package:fluffychat/components/matrix.dart';
import 'package:flushbar/flushbar_helper.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import '../components/dialogs/key_verification_dialog.dart'; import '../components/dialogs/key_verification_dialog.dart';
@ -62,16 +61,6 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
} }
} }
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback(
(_) => FlushbarHelper.createInformation(
message: L10n.of(context).warningEncryptionInBeta)
.show(context),
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final room = Matrix.of(context).client.getRoomById(widget.id); final room = Matrix.of(context).client.getRoomById(widget.id);
@ -79,7 +68,18 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
leading: BackButton(), leading: BackButton(),
title: Text(L10n.of(context).participatingUserDevices), title: Text(L10n.of(context).tapOnDeviceToVerify),
bottom: PreferredSize(
preferredSize: Size.fromHeight(56),
child: ListTile(
title: Text(L10n.of(context).deviceVerifyDescription),
leading: CircleAvatar(
backgroundColor: Theme.of(context).secondaryHeaderColor,
foregroundColor: Theme.of(context).accentColor,
child: Icon(Icons.lock),
),
),
),
), ),
body: StreamBuilder( body: StreamBuilder(
stream: room.onUpdate.stream, stream: room.onUpdate.stream,
@ -98,50 +98,62 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
return Center(child: CircularProgressIndicator()); return Center(child: CircularProgressIndicator());
} }
final deviceKeys = snapshot.data; final deviceKeys = snapshot.data;
return ListView.separated( return ListView.builder(
separatorBuilder: (BuildContext context, int i) =>
Divider(height: 1),
itemCount: deviceKeys.length, itemCount: deviceKeys.length,
itemBuilder: (BuildContext context, int i) => Column( itemBuilder: (BuildContext context, int i) => Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
if (i == 0 || if (i == 0 ||
deviceKeys[i].userId != deviceKeys[i - 1].userId) deviceKeys[i].userId != deviceKeys[i - 1].userId) ...{
Material( Divider(height: 1, thickness: 1),
child: PopupMenuButton( PopupMenuButton(
onSelected: (action) => onSelected: (action) =>
onSelected(context, action, deviceKeys[i]), onSelected(context, action, deviceKeys[i]),
itemBuilder: (c) { itemBuilder: (c) {
var items = <PopupMenuEntry<String>>[]; var items = <PopupMenuEntry<String>>[];
if (room if (room.client.userDeviceKeys[deviceKeys[i].userId]
.client .verified ==
.userDeviceKeys[deviceKeys[i].userId] UserVerifiedStatus.unknown) {
.verified == items.add(PopupMenuItem(
UserVerifiedStatus.unknown) { child: Text(L10n.of(context).verifyUser),
items.add(PopupMenuItem( value: 'verify_user',
child: Text(L10n.of(context).verifyUser), ));
value: 'verify_user', }
)); return items;
} },
return items; child: ListTile(
}, leading: Avatar(
child: ListTile( room
leading: Avatar(
room
.getUserByMXIDSync(deviceKeys[i].userId)
.avatarUrl,
room
.getUserByMXIDSync(deviceKeys[i].userId)
.calcDisplayname(),
),
title: Text(room
.getUserByMXIDSync(deviceKeys[i].userId) .getUserByMXIDSync(deviceKeys[i].userId)
.calcDisplayname()), .avatarUrl,
subtitle: Text(deviceKeys[i].userId), room
.getUserByMXIDSync(deviceKeys[i].userId)
.calcDisplayname(),
),
title: Row(
children: [
Text(
room
.getUserByMXIDSync(deviceKeys[i].userId)
.calcDisplayname(),
),
Spacer(),
Text(
deviceKeys[i].userId,
style: TextStyle(
fontSize: 14,
color: Theme.of(context)
.textTheme
.bodyText1
.color
.withAlpha(150),
),
),
],
), ),
), ),
elevation: 2,
), ),
},
PopupMenuButton( PopupMenuButton(
onSelected: (action) => onSelected: (action) =>
onSelected(context, action, deviceKeys[i]), onSelected(context, action, deviceKeys[i]),
@ -180,15 +192,39 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
), ),
title: Text( title: Text(
deviceKeys[i].displayname, deviceKeys[i].displayname,
style: TextStyle( maxLines: 1,
color: deviceKeys[i].blocked overflow: TextOverflow.ellipsis,
? Colors.red
: deviceKeys[i].verified
? Colors.green
: Colors.orange),
), ),
subtitle: Text( subtitle: Row(
'${L10n.of(context).deviceId}: ${deviceKeys[i].deviceId}', children: [
Text(
deviceKeys[i].deviceId,
style: TextStyle(
fontSize: 14,
color: Theme.of(context)
.textTheme
.bodyText1
.color
.withAlpha(150),
),
),
Spacer(),
Text(
deviceKeys[i].blocked
? L10n.of(context).blocked
: deviceKeys[i].verified
? L10n.of(context).verified
: L10n.of(context).unknownDevice,
style: TextStyle(
fontSize: 14,
color: deviceKeys[i].blocked
? Colors.red
: deviceKeys[i].verified
? Colors.green
: Colors.orange,
),
),
],
), ),
), ),
), ),