gui: Show ID under each device section (local / remote), clickable for QR code (#7728)

gui/default/assets/lang/lang-en.json

@@ -45,6 +45,7 @@
    "Cleaning Versions": "Cleaning Versions",
    "Cleanup Interval": "Cleanup Interval",
    "Click to see discovery failures": "Click to see discovery failures",
+   "Click to see full identification string and QR code.": "Click to see full identification string and QR code.",
    "Close": "Close",
    "Command": "Command",
    "Comment, when used at the start of a line": "Comment, when used at the start of a line",
@@ -153,6 +154,7 @@
    "Help": "Help",
    "Home page": "Home page",
    "However, your current settings indicate you might not want it enabled. We have disabled automatic crash reporting for you.": "However, your current settings indicate you might not want it enabled. We have disabled automatic crash reporting for you.",
+   "Identification": "Identification",
    "If untrusted, enter encryption password": "If untrusted, enter encryption password",
    "If you want to prevent other users on this computer from accessing Syncthing and through it your files, consider setting up authentication.": "If you want to prevent other users on this computer from accessing Syncthing and through it your files, consider setting up authentication.",
    "Ignore": "Ignore",

gui/default/index.html

@@ -102,7 +102,7 @@
             </a>
             <ul class="dropdown-menu">
               <li><a href="" ng-click="showSettings()"><span class="fas fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
-              <li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
+              <li><a href="" ng-click="showDeviceIdentification(thisDevice())"><span class="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
               <li class="divider" aria-hidden="true"></li>
               <li><a href="" ng-click="shutdown()"><span class="fas fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li>
               <li><a href="" ng-click="restart()"><span class="fas fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li>
@@ -682,6 +682,14 @@
                       <th><span class="far fa-fw fa-clock"></span>&nbsp;<span translate>Uptime</span></th>
                       <td class="text-right">{{system.uptime | duration:"m"}}</td>
                     </tr>
+                    <tr>
+                      <th><span class="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Identification</span></th>
+                      <td class="text-right">
+                        <span tooltip data-original-title="{{'Click to see full identification string and QR code.' | translate}}">
+                          <a href="" ng-click="showDeviceIdentification(thisDevice())">{{deviceShortID(deviceCfg.deviceID)}}</a>
+                        </span>
+                      </td>
+                    </tr>
                     <tr>
                       <th><span class="fas fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
                       <td class="text-right">
@@ -806,6 +814,14 @@
                         <th><span class="far fa-fw fa-handshake-o"></span>&nbsp;<span translate>Introduced By</span></th>
                         <td class="text-right">{{ deviceName(devices[deviceCfg.introducedBy]) || deviceCfg.introducedBy.substring(0, 5) }}</td>
                       </tr>
+                      <tr>
+                        <th><span class="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Identification</span></th>
+                        <td class="text-right">
+                          <span tooltip data-original-title="{{'Click to see full identification string and QR code.' | translate}}">
+                            <a href="" ng-click="showDeviceIdentification(deviceCfg)">{{deviceShortID(deviceCfg.deviceID)}}</a>
+                          </span>
+                        </td>
+                      </tr>
                       <tr ng-if="connections[deviceCfg.deviceID].clientVersion">
                         <th><span class="fas fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
                         <td class="text-right">{{connections[deviceCfg.deviceID].clientVersion}}</td>

gui/default/syncthing/core/syncthingController.js

@@ -1202,13 +1202,20 @@ angular.module('syncthing.core')
         };
 
         $scope.deviceName = function (deviceCfg) {
-            if (typeof deviceCfg === 'undefined' || typeof deviceCfg.deviceID === 'undefined') {
+            if (typeof deviceCfg === 'undefined') {
                 return "";
             }
             if (deviceCfg.name) {
                 return deviceCfg.name;
             }
-            return deviceCfg.deviceID.substr(0, 6);
+            return $scope.deviceShortID(deviceCfg.deviceID);
+        };
+
+        $scope.deviceShortID = function (deviceID) {
+            if (typeof deviceID === 'undefined') {
+                return "";
+            }
+            return deviceID.substr(0, 6);
         };
 
         $scope.thisDeviceName = function () {
@@ -1222,6 +1229,11 @@ angular.module('syncthing.core')
             return device.deviceID.substr(0, 6);
         };
 
+        $scope.showDeviceIdentification = function (deviceCfg) {
+            $scope.currentDevice = deviceCfg;
+            $('#idqr').modal();
+        };
+
         $scope.setDevicePause = function (device, pause) {
             $scope.devices[device].paused = pause;
             $scope.config.devices = $scope.deviceList();