profile: locks login fields if disable_login_form

If the auth config variable, disable_login_form, is set to true then
the username and email fields are set to read-only on the profile page.

The reason for this is so that the user does not lock themselves out by
changing their email address or username. Or create a new user by
changing both.

ref #7810

public/app/features/org/partials/profile.html

@@ -9,18 +9,20 @@
 	<form name="ctrl.userForm" class="gf-form-group">
 		<h3 class="page-heading">Information</h3>
 
-		<div class="gf-form">
-			<span class="gf-form-label width-9">Name</span>
-			<input class="gf-form-input max-width-21" type="text" required ng-model="ctrl.user.name" >
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-9">Email</span>
-			<input class="gf-form-input max-width-21" type="email" required ng-model="ctrl.user.email">
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-9">Username</span>
-			<input class="gf-form-input max-width-21" type="text" required ng-model="ctrl.user.login">
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-8">Name</span>
+			<input class="gf-form-input max-width-22" type="text" required ng-model="ctrl.user.name" >
 		</div>
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-8">Email</span>
+			<input class="gf-form-input max-width-22" type="email" ng-readonly="ctrl.readonlyLoginFields" required ng-model="ctrl.user.email">
+      <i ng-if="ctrl.readonlyLoginFields" class="fa fa-lock gf-form-icon--right-absolute" bs-tooltip="'Login Details Locked - managed in another system.'"></i>
+    </div>
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-8">Username</span>
+      <input class="gf-form-input max-width-22" type="text" ng-readonly="ctrl.readonlyLoginFields" required ng-model="ctrl.user.login">
+      <i ng-if="ctrl.readonlyLoginFields" class="fa fa-lock gf-form-icon--right-absolute" bs-tooltip="'Login Details Locked - managed in another system.'"></i>
+    </div>
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
 		</div>

public/app/features/org/profile_ctrl.ts

@@ -10,6 +10,7 @@ export class ProfileCtrl {
   orgs: any = [];
   userForm: any;
   showOrgsList = false;
+  readonlyLoginFields = config.disableLoginForm;
 
   /** @ngInject **/
   constructor(private backendSrv, private contextSrv, private $location) {

public/sass/_grafana.scss

@@ -85,6 +85,5 @@
 @import "pages/signup";
 @import "pages/styleguide";
 
-
 @import "old_responsive";
 @import "components/view_states.scss";

public/sass/components/_gf-form.scss

@@ -286,3 +286,10 @@ $gf-form-margin: 0.25rem;
 select.gf-form-input ~ .gf-form-help-icon {
   right: 10px;
 }
+
+.gf-form-icon--right-absolute {
+  position: absolute;
+  right: $spacer;
+  top: 10px;
+  color: $text-muted;
+}