mirror of
https://gitlab.com/famedly/fluffychat.git
synced 2024-12-24 14:32:37 +01:00
design: Improve encryption UX
This commit is contained in:
Christian Pauly
parent
53fc634bef
commit
a52b7e8f16
@ -2,7 +2,6 @@ import 'dart:async';
|
||||
|
||||
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
||||
import 'package:adaptive_page_layout/adaptive_page_layout.dart';
|
||||
import 'package:flushbar/flushbar_helper.dart';
|
||||
import 'package:famedlysdk/famedlysdk.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
@ -26,18 +25,21 @@ class _EncryptionButtonState extends State<EncryptionButton> {
|
||||
.pushNamed('/rooms/${widget.room.id}/encryption');
|
||||
return;
|
||||
}
|
||||
if (!widget.room.client.encryptionEnabled) {
|
||||
await FlushbarHelper.createInformation(
|
||||
message: L10n.of(context).needPantalaimonWarning)
|
||||
.show(context);
|
||||
if (widget.room.joinRules == JoinRules.public) {
|
||||
await showOkAlertDialog(
|
||||
context: context,
|
||||
useRootNavigator: false,
|
||||
okLabel: L10n.of(context).ok,
|
||||
message: L10n.of(context).noEncryptionForPublicRooms,
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (await showOkCancelAlertDialog(
|
||||
context: context,
|
||||
useRootNavigator: false,
|
||||
title: L10n.of(context).enableEncryptionWarning,
|
||||
title: L10n.of(context).enableEncryption,
|
||||
message: widget.room.client.encryptionEnabled
|
||||
? L10n.of(context).warningEncryptionInBeta
|
||||
? L10n.of(context).enableEncryptionWarning
|
||||
: L10n.of(context).needPantalaimonWarning,
|
||||
okLabel: L10n.of(context).yes,
|
||||
cancelLabel: L10n.of(context).cancel,
|
||||
|
||||
@ -498,6 +498,21 @@
|
||||
"type": "text",
|
||||
"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": {
|
||||
"type": "text",
|
||||
|
||||
@ -659,11 +659,12 @@ class _ChatState extends State<Chat> {
|
||||
),
|
||||
]
|
||||
: <Widget>[
|
||||
IconButton(
|
||||
tooltip: L10n.of(context).videoCall,
|
||||
icon: Icon(Icons.video_call_outlined),
|
||||
onPressed: () => startCallAction(context),
|
||||
),
|
||||
if (room.canSendDefaultMessages)
|
||||
IconButton(
|
||||
tooltip: L10n.of(context).videoCall,
|
||||
icon: Icon(Icons.video_call_outlined),
|
||||
onPressed: () => startCallAction(context),
|
||||
),
|
||||
ChatSettingsPopupMenu(room, !room.isDirectChat),
|
||||
],
|
||||
),
|
||||
|
||||
@ -2,7 +2,6 @@ import 'package:famedlysdk/encryption.dart';
|
||||
import 'package:famedlysdk/famedlysdk.dart';
|
||||
import 'package:fluffychat/components/avatar.dart';
|
||||
import 'package:fluffychat/components/matrix.dart';
|
||||
import 'package:flushbar/flushbar_helper.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.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
|
||||
Widget build(BuildContext context) {
|
||||
final room = Matrix.of(context).client.getRoomById(widget.id);
|
||||
@ -79,7 +68,18 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
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(
|
||||
stream: room.onUpdate.stream,
|
||||
@ -98,50 +98,62 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
|
||||
return Center(child: CircularProgressIndicator());
|
||||
}
|
||||
final deviceKeys = snapshot.data;
|
||||
return ListView.separated(
|
||||
separatorBuilder: (BuildContext context, int i) =>
|
||||
Divider(height: 1),
|
||||
return ListView.builder(
|
||||
itemCount: deviceKeys.length,
|
||||
itemBuilder: (BuildContext context, int i) => Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
if (i == 0 ||
|
||||
deviceKeys[i].userId != deviceKeys[i - 1].userId)
|
||||
Material(
|
||||
child: PopupMenuButton(
|
||||
onSelected: (action) =>
|
||||
onSelected(context, action, deviceKeys[i]),
|
||||
itemBuilder: (c) {
|
||||
var items = <PopupMenuEntry<String>>[];
|
||||
if (room
|
||||
.client
|
||||
.userDeviceKeys[deviceKeys[i].userId]
|
||||
.verified ==
|
||||
UserVerifiedStatus.unknown) {
|
||||
items.add(PopupMenuItem(
|
||||
child: Text(L10n.of(context).verifyUser),
|
||||
value: 'verify_user',
|
||||
));
|
||||
}
|
||||
return items;
|
||||
},
|
||||
child: ListTile(
|
||||
leading: Avatar(
|
||||
room
|
||||
.getUserByMXIDSync(deviceKeys[i].userId)
|
||||
.avatarUrl,
|
||||
room
|
||||
.getUserByMXIDSync(deviceKeys[i].userId)
|
||||
.calcDisplayname(),
|
||||
),
|
||||
title: Text(room
|
||||
deviceKeys[i].userId != deviceKeys[i - 1].userId) ...{
|
||||
Divider(height: 1, thickness: 1),
|
||||
PopupMenuButton(
|
||||
onSelected: (action) =>
|
||||
onSelected(context, action, deviceKeys[i]),
|
||||
itemBuilder: (c) {
|
||||
var items = <PopupMenuEntry<String>>[];
|
||||
if (room.client.userDeviceKeys[deviceKeys[i].userId]
|
||||
.verified ==
|
||||
UserVerifiedStatus.unknown) {
|
||||
items.add(PopupMenuItem(
|
||||
child: Text(L10n.of(context).verifyUser),
|
||||
value: 'verify_user',
|
||||
));
|
||||
}
|
||||
return items;
|
||||
},
|
||||
child: ListTile(
|
||||
leading: Avatar(
|
||||
room
|
||||
.getUserByMXIDSync(deviceKeys[i].userId)
|
||||
.calcDisplayname()),
|
||||
subtitle: Text(deviceKeys[i].userId),
|
||||
.avatarUrl,
|
||||
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(
|
||||
onSelected: (action) =>
|
||||
onSelected(context, action, deviceKeys[i]),
|
||||
@ -180,15 +192,39 @@ class _ChatEncryptionSettingsState extends State<ChatEncryptionSettings> {
|
||||
),
|
||||
title: Text(
|
||||
deviceKeys[i].displayname,
|
||||
style: TextStyle(
|
||||
color: deviceKeys[i].blocked
|
||||
? Colors.red
|
||||
: deviceKeys[i].verified
|
||||
? Colors.green
|
||||
: Colors.orange),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Text(
|
||||
'${L10n.of(context).deviceId}: ${deviceKeys[i].deviceId}',
|
||||
subtitle: Row(
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user