gui: Show encryption status for devices sharing folder (ref #8808) (#9355)

This re-implements the stalled enhancement from #8808. Thanks @Craeckie
for the idea and first implementation draft!

If a folder is shared to a device with encryption, add a lock icon in
front of the device name under "Shared With" in the folder details
panel. Be careful not to add whitespace caused by line wraps in HTML
source code, which would defeat the purpose of keeping the icon glued to
the name by a non-breaking space.

Apply the same lock icon for the list of folders shared with a device.
This commit is contained in:
André Colomb 2024-03-03 21:09:57 +01:00 committed by GitHub
parent 13a6d43f0b
commit 5fdab1bf11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 2 deletions

View File

@ -587,7 +587,10 @@
<th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th>
<td class="text-right no-overflow-ellipse overflow-break-word">
<span ng-repeat="device in otherDevices(folder.devices)">
<span ng-switch="completion[device.deviceID][folder.id].remoteState"><!-- Avoid stray space...
<span ng-if="folder.type !== 'receiveencrypted' && device.encryptionPassword" class="text-nowrap">
<span class="fa fa-lock"></span>&nbsp;<!-- Avoid stray space...
--></span><!-- Avoid stray space...
--><span ng-switch="completion[device.deviceID][folder.id].remoteState"><!-- Avoid stray space...
--><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup></span><!-- Avoid stray space...
--><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup></span><!-- Avoid stray space...
--><span ng-switch-default>{{deviceName(devices[device.deviceID])}}</span><!-- Avoid stray space...
@ -943,7 +946,10 @@
<th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th>
<td class="text-right no-overflow-ellipse overflow-break-word">
<span ng-repeat="folderID in deviceFolders(deviceCfg)">
<span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"><!-- Avoid stray space...
<span ng-if="folderIsSharedEncrypted(folderID, deviceCfg.deviceID)" class="text-nowrap">
<span class="fa fa-lock"></span>&nbsp;<!-- Avoid stray space...
--></span><!-- Avoid stray space...
--><span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"><!-- Avoid stray space...
--><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup></span><!-- Avoid stray space...
--><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup></span><!-- Avoid stray space...
--><span ng-switch-default>{{folderLabel(folderID)}}</span><!-- Avoid stray space...

View File

@ -2662,6 +2662,15 @@ angular.module('syncthing.core')
+ '&device=' + encodeURIComponent(deviceID));
};
$scope.folderIsSharedEncrypted = function (folderID, deviceID) {
var folderCfg = $scope.folders[folderID];
if (!folderCfg || folderCfg.type === 'receiveencrypted') return false;
return folderCfg.devices.some(function (device) {
return device.deviceID === deviceID && device.encryptionPassword !== '';
});
};
$scope.folderHasUnacceptedDevices = function (folderCfg) {
for (var deviceID in $scope.completion) {
if (deviceID in $scope.devices