Disable Change Password for OAuth users (#27886)

public/app/core/utils/UserProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { getBackendSrv } from '@grafana/runtime';
-import { User, Team, UserOrg, UserSession } from 'app/types';
+import { UserDTO, Team, UserOrg, UserSession } from 'app/types';
 import { config } from 'app/core/config';
 import { dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data';
 
@@ -45,12 +45,12 @@ export interface Props {
     teams: Team[],
     orgs: UserOrg[],
     sessions: UserSession[],
-    user?: User
+    user?: UserDTO
   ) => JSX.Element;
 }
 
 export interface State {
-  user?: User;
+  user?: UserDTO;
   teams: Team[];
   orgs: UserOrg[];
   sessions: UserSession[];

public/app/features/profile/ChangePasswordForm.tsx

@@ -1,20 +1,27 @@
 import React, { FC } from 'react';
 import config from 'app/core/config';
+import { UserDTO } from 'app/types';
 import { Button, LinkButton, Form, Field, Input, HorizontalGroup } from '@grafana/ui';
 import { ChangePasswordFields } from 'app/core/utils/UserProvider';
 import { css } from 'emotion';
 
 export interface Props {
+  user: UserDTO;
   isSaving: boolean;
   onChangePassword: (payload: ChangePasswordFields) => void;
 }
 
-export const ChangePasswordForm: FC<Props> = ({ onChangePassword, isSaving }) => {
+export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving }) => {
-  const { ldapEnabled, authProxyEnabled } = config;
+  const { ldapEnabled, authProxyEnabled, disableLoginForm } = config;
+  const authSource = user.authLabels?.length && user.authLabels[0];
 
   if (ldapEnabled || authProxyEnabled) {
     return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
   }
+  if (authSource && disableLoginForm) {
+    return <p>Password cannot be changed here!</p>;
+  }
+
   return (
     <div
       className={css`

public/app/features/profile/ChangePasswordPage.tsx

@@ -1,10 +1,12 @@
-import React, { PureComponent } from 'react';
+import React, { FC } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { StoreState } from 'app/types';
+import { config } from '@grafana/runtime';
+import { LoadingPlaceholder } from '@grafana/ui';
+import { UserDTO, Team, UserOrg, UserSession, StoreState } from 'app/types';
 import { NavModel } from '@grafana/data';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { UserProvider } from 'app/core/utils/UserProvider';
+import { UserProvider, UserAPI, LoadingStates } from 'app/core/utils/UserProvider';
 import Page from 'app/core/components/Page/Page';
 import { ChangePasswordForm } from './ChangePasswordForm';
 
@@ -12,23 +14,31 @@ export interface Props {
   navModel: NavModel;
 }
 
-export class ChangePasswordPage extends PureComponent<Props> {
+export const ChangePasswordPage: FC<Props> = ({ navModel }) => (
-  render() {
+  <Page navModel={navModel}>
-    const { navModel } = this.props;
+    <UserProvider userId={config.bootData.user.id}>
-    return (
+      {(
-      <Page navModel={navModel}>
+        api: UserAPI,
-        <UserProvider>
+        states: LoadingStates,
-          {({ changePassword }, states) => (
+        teams: Team[],
-            <Page.Contents>
+        orgs: UserOrg[],
-              <h3 className="page-sub-heading">Change Your Password</h3>
+        sessions: UserSession[],
-              <ChangePasswordForm onChangePassword={changePassword} isSaving={states.changePassword} />
+        user: UserDTO
-            </Page.Contents>
+      ) => {
-          )}
+        return (
-        </UserProvider>
+          <Page.Contents>
-      </Page>
+            <h3 className="page-sub-heading">Change Your Password</h3>
-    );
+            {states.loadUser ? (
-  }
+              <LoadingPlaceholder text="Loading user profile..." />
-}
+            ) : (
+              <ChangePasswordForm user={user} onChangePassword={api.changePassword} isSaving={states.changePassword} />
+            )}
+          </Page.Contents>
+        );
+      }}
+    </UserProvider>
+  </Page>
+);
 
 function mapStateToProps(state: StoreState) {
   return {

public/app/features/profile/UserOrganizations.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
-import { User, UserOrg } from 'app/types';
+import { UserDTO, UserOrg } from 'app/types';
 import { LoadingPlaceholder, Button } from '@grafana/ui';
 
 export interface Props {
-  user: User;
+  user: UserDTO;
   orgs: UserOrg[];
   isLoading: boolean;
   loadOrgs: () => void;

public/app/features/profile/UserProfileEdit.tsx

@@ -6,7 +6,7 @@ import { config } from '@grafana/runtime';
 import { NavModel } from '@grafana/data';
 import { UserProvider, UserAPI, LoadingStates } from 'app/core/utils/UserProvider';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { User, Team, UserOrg, UserSession, StoreState } from 'app/types';
+import { UserDTO, Team, UserOrg, UserSession, StoreState } from 'app/types';
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import Page from 'app/core/components/Page/Page';
 import { UserTeams } from './UserTeams';
@@ -21,7 +21,14 @@ export interface Props {
 export const UserProfileEdit: FC<Props> = ({ navModel }) => (
   <Page navModel={navModel}>
     <UserProvider userId={config.bootData.user.id}>
-      {(api: UserAPI, states: LoadingStates, teams: Team[], orgs: UserOrg[], sessions: UserSession[], user: User) => {
+      {(
+        api: UserAPI,
+        states: LoadingStates,
+        teams: Team[],
+        orgs: UserOrg[],
+        sessions: UserSession[],
+        user: UserDTO
+      ) => {
         return (
           <Page.Contents>
             {states.loadUser ? (

public/app/features/profile/UserProfileEditForm.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { Button, Tooltip, Icon, Form, Input, Field, FieldSet } from '@grafana/ui';
-import { User } from 'app/types';
+import { UserDTO } from 'app/types';
 import config from 'app/core/config';
 import { ProfileUpdateFields } from 'app/core/utils/UserProvider';
 
 export interface Props {
-  user: User;
+  user: UserDTO;
   isSavingUser: boolean;
   updateProfile: (payload: ProfileUpdateFields) => void;
 }
@@ -22,8 +22,14 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
       {({ register, errors }) => {
         return (
           <FieldSet label="Edit Profile">
-            <Field label="Name" invalid={!!errors.name} error="Name is required">
+            <Field label="Name" invalid={!!errors.name} error="Name is required" disabled={disableLoginForm}>
-              <Input name="name" ref={register({ required: true })} placeholder="Name" defaultValue={user.name} />
+              <Input
+                name="name"
+                ref={register({ required: true })}
+                placeholder="Name"
+                defaultValue={user.name}
+                suffix={<InputSuffix />}
+              />
             </Field>
             <Field label="Email" invalid={!!errors.email} error="Email is required" disabled={disableLoginForm}>
               <Input

public/app/features/profile/UserSessions.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
-import { User, UserSession } from 'app/types';
+import { UserDTO, UserSession } from 'app/types';
 import { LoadingPlaceholder, Button, Icon } from '@grafana/ui';
 
 export interface Props {
-  user: User;
+  user: UserDTO;
   sessions: UserSession[];
   isLoading: boolean;
   loadSessions: () => void;