Repository: syncthing/syncthing (language: go)

Issue:
Device ID should be read-only and "nearby devices" should be hidden when adding a new pending device
1. On Device A, add Device B as a new remote device.
2. On Device B, click the "Add" button on the pop-up asking to add a new device.
3. The ID of Device A is automatically filled in, but at the same time it is also listed below under "you can also select one of these nearby devices".

I think that either the language should be changed (as currently it suggests that the ID below and the ID above belong to different devices despite being actually identical), or the ID listed below should automatically be hidden if the exact same ID is already filled in in the input field above.

![image](https://user-images.githubusercontent.com/5626656/147229223-9a8fadee-440e-4d7f-9583-f50da0c73a91.png)


Discussion / hints:
I think the entire section should be hidden if the dialog was opened by clicking "Add" on an "device invitation banner".
> I think the entire section should be hidden if the dialog was opened by clicking "Add" on an "device invitation banner".

I have changed the title to be about doing just that (plus making the ID read-only).

Fix patch:
diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js
index 1e6e20ef05d..7a013353c02 100755
--- a/gui/default/syncthing/core/syncthingController.js
+++ b/gui/default/syncthing/core/syncthingController.js
@@ -1610,6 +1610,11 @@ angular.module('syncthing.core')
             return $scope.currentDevice._editing == 'existing';
         }
 
+        $scope.editingDeviceNew = function() {
+            // The "new-pending" value is intentionally disregarded here.
+            return $scope.currentDevice._editing == 'new';
+        }
+
         $scope.editDeviceExisting = function (deviceCfg) {
             $scope.currentDevice = $.extend({}, deviceCfg);
             $scope.currentDevice._editing = "existing";
@@ -1679,7 +1684,11 @@ angular.module('syncthing.core')
                         $scope.currentDevice = p.data;
                         $scope.currentDevice.name = name;
                         $scope.currentDevice.deviceID = deviceID;
-                        $scope.currentDevice._editing = "add";
+                        if (deviceID) {
+                            $scope.currentDevice._editing = "new-pending";
+                        } else {
+                            $scope.currentDevice._editing = "new";
+                        }
                         initShareEditing('device');
                         $scope.currentSharing.unrelated = $scope.folderList();
                         editDeviceModal();
diff --git a/gui/default/syncthing/core/validDeviceidDirective.js b/gui/default/syncthing/core/validDeviceidDirective.js
index 8c04564888c..0a84ffe06af 100644
--- a/gui/default/syncthing/core/validDeviceidDirective.js
+++ b/gui/default/syncthing/core/validDeviceidDirective.js
@@ -4,23 +4,18 @@ angular.module('syncthing.core')
             require: 'ngModel',
             link: function (scope, elm, attrs, ctrl) {
                 ctrl.$parsers.unshift(function (viewValue) {
-                    if (scope.currentDevice._editing != "add") {
-                        // we shouldn't validate
-                        ctrl.$setValidity('validDeviceid', true);
-                    } else {
-                        $http.get(urlbase + '/svc/deviceid?id=' + viewValue).success(function (resp) {
-                            if (resp.error) {
-                                ctrl.$setValidity('validDeviceid', false);
-                            } else {
-                                ctrl.$setValidity('validDeviceid', true);
-                            }
-                        });
-                        //Prevents user from adding a duplicate ID
-                        if (scope.devices.hasOwnProperty(viewValue)) {
-                            ctrl.$setValidity('unique', false);
+                    $http.get(urlbase + '/svc/deviceid?id=' + viewValue).success(function (resp) {
+                        if (resp.error) {
+                            ctrl.$setValidity('validDeviceid', false);
                         } else {
-                            ctrl.$setValidity('unique', true);
+                            ctrl.$setValidity('validDeviceid', true);
                         }
+                    });
+                    //Prevents user from adding a duplicate ID
+                    if (scope.devices.hasOwnProperty(viewValue)) {
+                        ctrl.$setValidity('unique', false);
+                    } else {
+                        ctrl.$setValidity('unique', true);
                     }
                     return viewValue;
                 });
diff --git a/gui/default/syncthing/device/editDeviceModalView.html b/gui/default/syncthing/device/editDeviceModalView.html
index 6ae45382195..4a0cb9da6bc 100644
--- a/gui/default/syncthing/device/editDeviceModalView.html
+++ b/gui/default/syncthing/device/editDeviceModalView.html
@@ -10,19 +10,20 @@
         <div id="device-general" class="tab-pane in active">
           <div ng-if="!editingDeviceDefaults()" class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
             <label translate for="deviceID">Device ID</label>
-            <div ng-if="!editingDeviceExisting()">
-              <div class="input-group">
-                <input name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required="" valid-deviceid list="discovery-list" aria-required="true" />
-                <div class="input-group-btn">
-                  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="!deviceEditor.deviceID.$valid">
-                    <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
-                  </button>
-                </div>
+            <div class="input-group">
+              <input ng-if="editingDeviceNew()" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required="" valid-deviceid list="discovery-list" aria-required="true" />
+              <div ng-if="!editingDeviceNew()" class="well well-sm form-control text-monospace" style="height: auto;" select-on-click>{{currentDevice.deviceID}}</div>
+              <div class="input-group-btn">
+                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid">
+                  <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
+                </button>
               </div>
+            </div>
+            <div ng-if="editingDeviceNew()">
               <datalist id="discovery-list">
                 <option ng-repeat="id in discovery" value="{{id}}" />
               </datalist>
-              <p class="help-block" ng-if="discovery && discovery.length !== 0">
+              <div class="help-block" ng-if="discovery && discovery.length !== 0">
                 <span translate>You can also select one of these nearby devices:</span>
                 <ul>
                   <li ng-repeat="id in discovery" style="list-style-type: none;">
@@ -31,7 +32,7 @@
                     </a>
                   </li>
                 </ul>
-              </p>
+              </div>
               <p class="help-block">
                 <span translate ng-if="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">The device ID to enter here can be found in the "Actions &gt; Show ID" dialog on the other device. Spaces and dashes are optional (ignored).</span>
                 <span translate ng-show="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">When adding a new device, keep in mind that this device must be added on the other side too.</span>
@@ -40,14 +41,6 @@
                 <span translate ng-if="deviceEditor.deviceID.$error.unique && deviceEditor.deviceID.$dirty">A device with that ID is already added.</span>
               </p>
             </div>
-            <div ng-if="editingDeviceExisting()" class="input-group">
-              <div class="well well-sm text-monospace form-control" style="height: auto;" select-on-click>{{currentDevice.deviceID}}</div>
-              <div class="input-group-btn">
-                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr">
-                  <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
-                </button>
-              </div>
-            </div>
           </div>
           <div class="form-group">
             <label translate for="name">Device Name</label>
@@ -172,7 +165,7 @@
     <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
       <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
     </button>
-    <div ng-if="has(['existing', 'defaults'], currentDevice._editing)" class="pull-left">
+    <div ng-if="editingDeviceExisting()" class="pull-left">
       <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#remove-device-confirmation">
         <span class="fas fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
       </button>


Test patch: