Add confirm "Change network settings" popup
A modal appears when the user clicks "Save settings".
This modal warns the user of the dangers of changing
network settings.
Change-Id: I20e45e8a814d9c5e3d048a0ed2523025f55d0c4d
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 343ec4e..788a613 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -81,7 +81,7 @@
</div>
</fieldset>
<div class="network-config__submit-wrapper">
- <button type="button" class="btn-primary inline" ng-click="setNetworkSettings()">Save settings</button>
+ <button type="button" class="btn-primary inline" ng-click="confirm_settings=true;">Save settings</button>
<button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
</div>
<p class="success-msg set_network_success" ng-show="set_network_success" role="alert">Success! Network settings changed!</p>
@@ -89,3 +89,20 @@
</section>
</form>
</div>
+<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirm_settings}">
+ <div class="modal__tftp-unreachable" role="document">
+ <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
+ <div class="page-header ">
+ <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
+ <h1 class="modal-title h4 inline">Change network settings</h1>
+ </div>
+ <div class="modal__content">
+ <p>Changing network settings may cause the system to become unavailable (e.g. changing the BMC IP address).
+ Proceed with caution and make note of any new settings that may affect connectivity.</p>
+ </div>
+ <div class="modal__button-wrapper">
+ <button class="inline btn-secondary" ng-click="confirm_settings=false;">Cancel</button>
+ <button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
+ </div>
+ </div>
+</section>
diff --git a/app/configuration/controllers/network-controller.js b/app/configuration/controllers/network-controller.js
index 9f7cd3b..433bf8c 100644
--- a/app/configuration/controllers/network-controller.js
+++ b/app/configuration/controllers/network-controller.js
@@ -20,6 +20,7 @@
$scope.set_network_error = '';
$scope.set_network_success = false;
$scope.selectedInterface = '';
+ $scope.confirm_settings = false;
$scope.selectInterface = function(interfaceId) {
$scope.interface = $scope.network.interfaces[interfaceId];
@@ -27,6 +28,8 @@
$scope.networkDevice = false;
};
$scope.setNetworkSettings = function() {
+ // Hides the confirm network settings modal
+ $scope.confirm_settings = false;
$scope.set_network_error = '';
$scope.set_network_success = false;
// TODO openbmc/openbmc#3165: check if the network settings