add min length validation to access key and secret key (#7721)

While changing the credentials through MinIO browser,
Update button will be disabled if keys are lesser than
minimum length.

Fixes #7713

browser/app/js/browser/ChangePasswordModal.js

@@ -24,6 +24,7 @@ import classNames from "classnames"
 
 import { Modal, ModalBody, ModalHeader } from "react-bootstrap"
 import InputGroup from "./InputGroup"
+import { ACCESS_KEY_MIN_LENGTH, SECRET_KEY_MIN_LENGTH } from "../constants"
 
 export class ChangePasswordModal extends React.Component {
   constructor(props) {
@@ -110,8 +111,8 @@ export class ChangePasswordModal extends React.Component {
     return (
       this.state.currentAccessKey.length > 0 &&
       this.state.currentSecretKey.length > 0 &&
-      this.state.newAccessKey.length > 0 &&
-      this.state.newSecretKey.length > 0
+      this.state.newAccessKey.length >= ACCESS_KEY_MIN_LENGTH &&
+      this.state.newSecretKey.length >= SECRET_KEY_MIN_LENGTH
     )
   }
 

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

@@ -33,7 +33,7 @@ jest.mock("../../web", () => ({
         currentAccessKey == "minio" &&
         currentSecretKey == "minio123" &&
         newAccessKey == "test" &&
-        newSecretKey == "test123"
+        newSecretKey == "test1234"
       ) {
         return Promise.resolve({})
       } else {
@@ -122,6 +122,24 @@ describe("ChangePasswordModal", () => {
     expect(wrapper.find("#newAccesskey").exists()).toBeFalsy()
   })
 
+  it("should disble Update button for invalid accessKey or secretKey", () => {
+    const showAlert = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+    )
+    wrapper
+      .find("#currentAccessKey")
+      .simulate("change", { target: { value: "minio" } })
+    wrapper
+      .find("#currentSecretKey")
+      .simulate("change", { target: { value: "minio123" } })
+    wrapper.find("#newAccessKey").simulate("change", { target: { value: "t" } })
+    wrapper
+      .find("#newSecretKey")
+      .simulate("change", { target: { value: "t1" } })
+    expect(wrapper.find("#update-keys").prop("disabled")).toBeTruthy()
+  })
+
   it("should update accessKey and secretKey when Update button is clicked", () => {
     const showAlert = jest.fn()
     const wrapper = shallow(
@@ -138,7 +156,8 @@ describe("ChangePasswordModal", () => {
       .simulate("change", { target: { value: "test" } })
     wrapper
       .find("#newSecretKey")
-      .simulate("change", { target: { value: "test123" } })
+      .simulate("change", { target: { value: "test1234" } })
+    expect(wrapper.find("#update-keys").prop("disabled")).toBeFalsy()
     wrapper.find("#update-keys").simulate("click")
     setImmediate(() => {
       expect(showAlert).toHaveBeenCalledWith({

browser/app/js/constants.js

@@ -28,3 +28,6 @@ export const NONE = "none"
 export const SHARE_OBJECT_EXPIRY_DAYS = 5
 export const SHARE_OBJECT_EXPIRY_HOURS = 0
 export const SHARE_OBJECT_EXPIRY_MINUTES = 0
+
+export const ACCESS_KEY_MIN_LENGTH = 3
+export const SECRET_KEY_MIN_LENGTH = 8