allow users to change password through browser (#7683)

Allow IAM users to change the password using
browser UI.

browser/app/js/browser/ChangePasswordModal.js

@@ -18,157 +18,236 @@ import React from "react"
 import { connect } from "react-redux"
 import web from "../web"
 import * as alertActions from "../alert/actions"
+import { getRandomAccessKey, getRandomSecretKey } from "../utils"
+import jwtDecode from "jwt-decode"
+import classNames from "classnames"
 
-import {
-  Tooltip,
-  Modal,
-  ModalBody,
-  ModalHeader,
-  OverlayTrigger
-} from "react-bootstrap"
+import { Modal, ModalBody, ModalHeader } from "react-bootstrap"
 import InputGroup from "./InputGroup"
 
 export class ChangePasswordModal extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      accessKey: "",
-      secretKey: "",
-      keysReadOnly: false
+      currentAccessKey: "",
+      currentSecretKey: "",
+      currentSecretKeyVisible: false,
+      newAccessKey: "",
+      newSecretKey: "",
+      newSecretKeyVisible: false
     }
   }
-  // When its shown, it loads the access key and secret key.
+  // When its shown, it loads the access key from JWT token
   componentWillMount() {
-    const { serverInfo } = this.props
-
-    // Check environment variables first.
-    if (serverInfo.info.isEnvCreds || serverInfo.info.isWorm) {
-      this.setState({
-        accessKey: "xxxxxxxxx",
-        secretKey: "xxxxxxxxx",
-        keysReadOnly: true
-      })
-    } else {
-      web.GetAuth().then(data => {
-        this.setState({
-          accessKey: data.accessKey,
-          secretKey: data.secretKey
-        })
-      })
-    }
-  }
-
-  // Handle field changes from inside the modal.
-  accessKeyChange(e) {
+    const token = jwtDecode(web.GetToken())
     this.setState({
-      accessKey: e.target.value
-    })
-  }
-
-  secretKeyChange(e) {
-    this.setState({
-      secretKey: e.target.value
-    })
-  }
-
-  secretKeyVisible(secretKeyVisible) {
-    this.setState({
-      secretKeyVisible
+      currentAccessKey: token.sub,
+      newAccessKey: token.sub
     })
   }
 
   // Save the auth params and set them.
   setAuth(e) {
     const { showAlert } = this.props
-    const accessKey = this.state.accessKey
-    const secretKey = this.state.secretKey
-    web
-      .SetAuth({
-        accessKey,
-        secretKey
-      })
-      .then(data => {
-        showAlert({
-          type: "success",
-          message: "Changed credentials"
+
+    if (this.canUpdateCredentials()) {
+      const currentAccessKey = this.state.currentAccessKey
+      const currentSecretKey = this.state.currentSecretKey
+      const newAccessKey = this.state.newAccessKey
+      const newSecretKey = this.state.newSecretKey
+      web
+        .SetAuth({
+          currentAccessKey,
+          currentSecretKey,
+          newAccessKey,
+          newSecretKey
         })
-      })
-      .catch(err => {
-        showAlert({
-          type: "danger",
-          message: err.message
+        .then(data => {
+          showAlert({
+            type: "success",
+            message: "Credentials updated successfully."
+          })
         })
-      })
+        .catch(err => {
+          showAlert({
+            type: "danger",
+            message: err.message
+          })
+        })
+    }
   }
 
   generateAuth(e) {
-    web.GenerateAuth().then(data => {
+    const { serverInfo } = this.props
+    // Generate random access key only for root user
+    if (!serverInfo.userInfo.isIAMUser) {
       this.setState({
-        accessKey: data.accessKey,
-        secretKey: data.secretKey,
-        secretKeyVisible: true
+        newAccessKey: getRandomAccessKey()
       })
+    }
+
+    this.setState({
+      newSecretKey: getRandomSecretKey(),
+      newSecretKeyVisible: true
     })
   }
 
+  canChangePassword() {
+    const { serverInfo } = this.props
+    // Password change is not allowed in WORM mode
+    if (serverInfo.info.isWorm) {
+      return false
+    }
+
+    // When credentials are set on ENV, password change not allowed for owner
+    if (serverInfo.info.isEnvCreds && !serverInfo.userInfo.isIAMUser) {
+      return false
+    }
+    return true
+  }
+
+  canUpdateCredentials() {
+    return (
+      this.state.currentAccessKey.length > 0 &&
+      this.state.currentSecretKey.length > 0 &&
+      this.state.newAccessKey.length > 0 &&
+      this.state.newSecretKey.length > 0
+    )
+  }
+
   render() {
-    const { hideChangePassword } = this.props
+    const { hideChangePassword, serverInfo } = this.props
+    const allowChangePassword = this.canChangePassword()
+
+    if (!allowChangePassword) {
+      return (
+        <Modal bsSize="sm" animation={false} show={true}>
+          <ModalHeader>Change Password</ModalHeader>
+          <ModalBody>
+            Credentials of this user cannot be updated through MinIO Browser.
+          </ModalBody>
+          <div className="modal-footer">
+            <button
+              id="cancel-change-password"
+              className="btn btn-link"
+              onClick={hideChangePassword}
+            >
+              Close
+            </button>
+          </div>
+        </Modal>
+      )
+    }
+
     return (
       <Modal bsSize="sm" animation={false} show={true}>
         <ModalHeader>Change Password</ModalHeader>
         <ModalBody className="m-t-20">
-          <InputGroup
-            value={this.state.accessKey}
-            onChange={this.accessKeyChange.bind(this)}
-            id="accessKey"
-            label="Access Key"
-            name="accesskey"
-            type="text"
-            spellCheck="false"
-            required="required"
-            autoComplete="false"
-            align="ig-left"
-            readonly={this.state.keysReadOnly}
-          />
-          <i
-            onClick={this.secretKeyVisible.bind(
-              this,
-              !this.state.secretKeyVisible
+          <div className="has-toggle-password">
+            <InputGroup
+              value={this.state.currentAccessKey}
+              id="currentAccessKey"
+              label="Current Access Key"
+              name="currentAccesskey"
+              type="text"
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+              readonly={true}
+            />
+
+            <i
+              onClick={() => {
+                this.setState({
+                  currentSecretKeyVisible: !this.state.currentSecretKeyVisible
+                })
+              }}
+              className={
+                "toggle-password fa fa-eye " +
+                (this.state.currentSecretKeyVisible ? "toggled" : "")
+              }
+            />
+            <InputGroup
+              value={this.state.currentSecretKey}
+              onChange={e => {
+                this.setState({ currentSecretKey: e.target.value })
+              }}
+              id="currentSecretKey"
+              label="Current Secret Key"
+              name="currentSecretKey"
+              type={this.state.currentSecretKeyVisible ? "text" : "password"}
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+            />
+          </div>
+
+          <div className="has-toggle-password m-t-30">
+            {!serverInfo.userInfo.isIAMUser && (
+              <InputGroup
+                value={this.state.newAccessKey}
+                id="newAccessKey"
+                label={"New Access Key"}
+                name="newAccesskey"
+                type="text"
+                spellCheck="false"
+                required="required"
+                autoComplete="false"
+                align="ig-left"
+                onChange={e => {
+                  this.setState({ newAccessKey: e.target.value })
+                }}
+                readonly={serverInfo.userInfo.isIAMUser}
+              />
             )}
-            className={
-              "toggle-password fa fa-eye " +
-              (this.state.secretKeyVisible ? "toggled" : "")
-            }
-          />
-          <InputGroup
-            value={this.state.secretKey}
-            onChange={this.secretKeyChange.bind(this)}
-            id="secretKey"
-            label="Secret Key"
-            name="accesskey"
-            type={this.state.secretKeyVisible ? "text" : "password"}
-            spellCheck="false"
-            required="required"
-            autoComplete="false"
-            align="ig-left"
-            readonly={this.state.keysReadOnly}
-          />
+
+            <i
+              onClick={() => {
+                this.setState({
+                  newSecretKeyVisible: !this.state.newSecretKeyVisible
+                })
+              }}
+              className={
+                "toggle-password fa fa-eye " +
+                (this.state.newSecretKeyVisible ? "toggled" : "")
+              }
+            />
+            <InputGroup
+              value={this.state.newSecretKey}
+              onChange={e => {
+                this.setState({ newSecretKey: e.target.value })
+              }}
+              id="newSecretKey"
+              label="New Secret Key"
+              name="newSecretKey"
+              type={this.state.newSecretKeyVisible ? "text" : "password"}
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+              onChange={e => {
+                this.setState({ newSecretKey: e.target.value })
+              }}
+            />
+          </div>
         </ModalBody>
         <div className="modal-footer">
           <button
             id="generate-keys"
-            className={
-              "btn btn-primary " + (this.state.keysReadOnly ? "hidden" : "")
-            }
+            className={"btn btn-primary"}
             onClick={this.generateAuth.bind(this)}
           >
             Generate
           </button>
           <button
             id="update-keys"
-            className={
-              "btn btn-success " + (this.state.keysReadOnly ? "hidden" : "")
-            }
+            className={classNames({
+              btn: true,
+              "btn-success": this.canUpdateCredentials()
+            })}
+            disabled={!this.canUpdateCredentials()}
             onClick={this.setAuth.bind(this)}
           >
             Update
@@ -198,4 +277,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ChangePasswordModal)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChangePasswordModal)

browser/app/js/browser/__tests__/ChangePasswordModal.test.js

@@ -17,21 +17,38 @@
 import React from "react"
 import { shallow, mount } from "enzyme"
 import { ChangePasswordModal } from "../ChangePasswordModal"
+import jwtDecode from "jwt-decode"
+
+jest.mock("jwt-decode")
+
+jwtDecode.mockImplementation(() => ({ sub: "minio" }))
 
 jest.mock("../../web", () => ({
-  GetAuth: jest.fn(() => {
-    return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
-  }),
   GenerateAuth: jest.fn(() => {
     return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
   }),
-  SetAuth: jest.fn(({ accessKey, secretKey }) => {
-    if (accessKey == "test3" && secretKey == "test4") {
-      return Promise.resolve({})
-    } else {
-      return Promise.reject({ message: "Error" })
+  SetAuth: jest.fn(
+    ({ currentAccessKey, currentSecretKey, newAccessKey, newSecretKey }) => {
+      if (
+        currentAccessKey == "minio" &&
+        currentSecretKey == "minio123" &&
+        newAccessKey == "test" &&
+        newSecretKey == "test123"
+      ) {
+        return Promise.resolve({})
+      } else {
+        return Promise.reject({
+          message: "Error"
+        })
+      }
     }
-  })
+  ),
+  GetToken: jest.fn(() => "")
+}))
+
+jest.mock("../../utils", () => ({
+  getRandomAccessKey: () => "raccesskey",
+  getRandomSecretKey: () => "rsecretkey"
 }))
 
 describe("ChangePasswordModal", () => {
@@ -40,57 +57,93 @@ describe("ChangePasswordModal", () => {
     memory: "test",
     platform: "test",
     runtime: "test",
-    info: { isEnvCreds: false }
+    info: { isEnvCreds: false },
+    userInfo: { isIAMUser: false }
   }
 
   it("should render without crashing", () => {
     shallow(<ChangePasswordModal serverInfo={serverInfo} />)
   })
 
-  it("should get the keys when its rendered", () => {
-    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
-    setImmediate(() => {
-      expect(wrapper.state("accessKey")).toBe("test1")
-      expect(wrapper.state("secretKey")).toBe("test2")
-    })
+  it("should not allow changing password when isWorm is true", () => {
+    const newServerInfo = { ...serverInfo, info: { isWorm: true } }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(
+      wrapper
+        .find("ModalBody")
+        .childAt(0)
+        .text()
+    ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
   })
 
-  it("should show readonly keys when isEnvCreds is true", () => {
-    const newServerInfo = { ...serverInfo, info: { isEnvCreds: true } }
+  it("should not allow changing password when isEnvCreds is true and not IAM user", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      info: { isEnvCreds: true },
+      userInfo: { isIAMUser: false }
+    }
     const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
-    expect(wrapper.state("accessKey")).toBe("xxxxxxxxx")
-    expect(wrapper.state("secretKey")).toBe("xxxxxxxxx")
-    expect(wrapper.find("#accessKey").prop("readonly")).toBeTruthy()
-    expect(wrapper.find("#secretKey").prop("readonly")).toBeTruthy()
-    expect(wrapper.find("#generate-keys").hasClass("hidden")).toBeTruthy()
-    expect(wrapper.find("#update-keys").hasClass("hidden")).toBeTruthy()
+    expect(
+      wrapper
+        .find("ModalBody")
+        .childAt(0)
+        .text()
+    ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
   })
 
   it("should generate accessKey and secretKey when Generate buttons is clicked", () => {
     const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
     wrapper.find("#generate-keys").simulate("click")
     setImmediate(() => {
-      expect(wrapper.state("accessKey")).toBe("gen1")
-      expect(wrapper.state("secretKey")).toBe("gen2")
+      expect(wrapper.state("newAccessKey")).toBe("raccesskey")
+      expect(wrapper.state("newSecretKey")).toBe("rsecretkey")
     })
   })
 
+  it("should not generate accessKey for IAM User", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      userInfo: { isIAMUser: true }
+    }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    wrapper.find("#generate-keys").simulate("click")
+    setImmediate(() => {
+      expect(wrapper.state("newAccessKey")).toBe("minio")
+      expect(wrapper.state("newSecretKey")).toBe("rsecretkey")
+    })
+  })
+
+  it("should not show new accessKey field for IAM User", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      userInfo: { isIAMUser: true }
+    }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(wrapper.find("#newAccesskey").exists()).toBeFalsy()
+  })
+
   it("should update accessKey and secretKey when Update button is clicked", () => {
     const showAlert = jest.fn()
     const wrapper = shallow(
       <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
     )
     wrapper
-      .find("#accessKey")
-      .simulate("change", { target: { value: "test3" } })
+      .find("#currentAccessKey")
+      .simulate("change", { target: { value: "minio" } })
     wrapper
-      .find("#secretKey")
-      .simulate("change", { target: { value: "test4" } })
+      .find("#currentSecretKey")
+      .simulate("change", { target: { value: "minio123" } })
+    wrapper
+      .find("#newAccessKey")
+      .simulate("change", { target: { value: "test" } })
+    wrapper
+      .find("#newSecretKey")
+      .simulate("change", { target: { value: "test123" } })
     wrapper.find("#update-keys").simulate("click")
     setImmediate(() => {
       expect(showAlert).toHaveBeenCalledWith({
         type: "success",
-        message: "Changed credentials"
+        message: "Credentials updated successfully."
       })
     })
   })

browser/app/js/browser/actions.js

@@ -34,7 +34,7 @@ export const fetchStorageInfo = () => {
     return web.StorageInfo().then(res => {
       const storageInfo = {
         total: res.storageInfo.Total,
-        used:  res.storageInfo.Used
+        used: res.storageInfo.Used
       }
       dispatch(setStorageInfo(storageInfo))
     })
@@ -54,7 +54,8 @@ export const fetchServerInfo = () => {
         memory: res.MinioMemory,
         platform: res.MinioPlatform,
         runtime: res.MinioRuntime,
-        info: res.MinioGlobalInfo
+        info: res.MinioGlobalInfo,
+        userInfo: res.MinioUserInfo
       }
       dispatch(setServerInfo(serverInfo))
     })

browser/app/js/utils.js

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { minioBrowserPrefix } from './constants.js'
+import { minioBrowserPrefix } from "./constants.js"
 
 export const sortObjectsByName = (objects, order) => {
-  let folders = objects.filter(object => object.name.endsWith('/'))
-  let files = objects.filter(object => !object.name.endsWith('/'))
+  let folders = objects.filter(object => object.name.endsWith("/"))
+  let files = objects.filter(object => !object.name.endsWith("/"))
   folders = folders.sort((a, b) => {
     if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
     if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
@@ -37,32 +37,34 @@ export const sortObjectsByName = (objects, order) => {
 }
 
 export const sortObjectsBySize = (objects, order) => {
-  let folders = objects.filter(object => object.name.endsWith('/'))
-  let files = objects.filter(object => !object.name.endsWith('/'))
+  let folders = objects.filter(object => object.name.endsWith("/"))
+  let files = objects.filter(object => !object.name.endsWith("/"))
   files = files.sort((a, b) => a.size - b.size)
-  if (order)
-    files = files.reverse()
+  if (order) files = files.reverse()
   return [...folders, ...files]
 }
 
 export const sortObjectsByDate = (objects, order) => {
-  let folders = objects.filter(object => object.name.endsWith('/'))
-  let files = objects.filter(object => !object.name.endsWith('/'))
-  files = files.sort((a, b) => new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime())
-  if (order)
-    files = files.reverse()
+  let folders = objects.filter(object => object.name.endsWith("/"))
+  let files = objects.filter(object => !object.name.endsWith("/"))
+  files = files.sort(
+    (a, b) =>
+      new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime()
+  )
+  if (order) files = files.reverse()
   return [...folders, ...files]
 }
 
-export const pathSlice = (path) => {
-  path = path.replace(minioBrowserPrefix, '')
-  let prefix = ''
-  let bucket = ''
-  if (!path) return {
+export const pathSlice = path => {
+  path = path.replace(minioBrowserPrefix, "")
+  let prefix = ""
+  let bucket = ""
+  if (!path)
+    return {
       bucket,
       prefix
-  }
-  let objectIndex = path.indexOf('/', 1)
+    }
+  let objectIndex = path.indexOf("/", 1)
   if (objectIndex == -1) {
     bucket = path.slice(1)
     return {
@@ -79,7 +81,29 @@ export const pathSlice = (path) => {
 }
 
 export const pathJoin = (bucket, prefix) => {
-  if (!prefix)
-    prefix = ''
-  return minioBrowserPrefix + '/' + bucket + '/' + prefix
+  if (!prefix) prefix = ""
+  return minioBrowserPrefix + "/" + bucket + "/" + prefix
+}
+
+export const getRandomAccessKey = () => {
+  const alphaNumericTable = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+  let arr = new Uint8Array(20)
+  window.crypto.getRandomValues(arr)
+  const random = Array.prototype.map.call(arr, v => {
+    const i = v % alphaNumericTable.length
+    return alphaNumericTable.charAt(i)
+  })
+  return random.join("")
+}
+
+export const getRandomSecretKey = () => {
+  let arr = new Uint8Array(40)
+  window.crypto.getRandomValues(arr)
+  const binStr = Array.prototype.map
+    .call(arr, v => {
+      return String.fromCharCode(v)
+    })
+    .join("")
+  const base64Str = btoa(binStr)
+  return base64Str.replace(/\//g, "+").substr(0, 40)
 }

browser/app/js/web.js

@@ -72,6 +72,9 @@ class Web {
   Logout() {
     storage.removeItem('token')
   }
+  GetToken() {
+    return storage.getItem('token')
+  }
   ServerInfo() {
     return this.makeCall('ServerInfo')
   }
@@ -99,12 +102,6 @@ class Web {
   RemoveObject(args) {
     return this.makeCall('RemoveObject', args)
   }
-  GetAuth() {
-    return this.makeCall('GetAuth')
-  }
-  GenerateAuth() {
-    return this.makeCall('GenerateAuth')
-  }
   SetAuth(args) {
     return this.makeCall('SetAuth', args)
       .then(res => {

browser/app/less/inc/modal.less

@@ -190,8 +190,8 @@
 ----------------------------*/
 .toggle-password {
     position: absolute;
-    bottom: 30px;
-    right: 35px;
+    bottom: 0   ;
+    right: 0;
     width: 30px;
     height: 30px;
     border: 1px solid #eee;
@@ -206,6 +206,10 @@
         background: #eee;
     }
 }
+
+.has-toggle-password {
+    position: relative;
+}
 //--------------------------
 
 

browser/package.json

@@ -68,6 +68,7 @@
     "humanize": "0.0.9",
     "identity-obj-proxy": "^3.0.0",
     "json-loader": "^0.5.4",
+    "jwt-decode": "^2.2.0",
     "local-storage-fallback": "^4.0.2",
     "material-design-iconic-font": "^2.2.0",
     "mime-db": "^1.25.0",

browser/yarn.lock

@@ -4907,6 +4907,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jwt-decode@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.2.0.tgz#7d86bd56679f58ce6a84704a657dd392bba81a79"
+  integrity sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=
+
 keycode@^2.1.2:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.9.tgz#964a23c54e4889405b4861a5c9f0480d45141dfa"