1414// You should have received a copy of the GNU Affero General Public License
1515// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
17- import React , { useEffect , useState , useCallback , Fragment } from "react" ;
17+ import React , { Fragment , useCallback , useEffect , useState } from "react" ;
1818import { connect } from "react-redux" ;
1919import { createStyles , Theme , withStyles } from "@material-ui/core/styles" ;
20- import { Grid , Typography , Button , IconButton , Icon } from "@material-ui/core" ;
20+ import { Grid , IconButton , Tooltip , Typography } from "@material-ui/core" ;
2121import CasinoIcon from "@material-ui/icons/Casino" ;
2222import DeleteIcon from "@material-ui/icons/Delete" ;
2323import {
2424 modalBasic ,
2525 wizardCommon ,
2626} from "../../../Common/FormComponents/common/styleLibrary" ;
27- import { updateAddField , isPageValid } from "../../actions" ;
27+ import { isPageValid , updateAddField } from "../../actions" ;
2828import {
2929 commonFormValidation ,
3030 IValidation ,
@@ -34,9 +34,7 @@ import { clearValidationError } from "../../utils";
3434import RadioGroupSelector from "../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector" ;
3535import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper" ;
3636import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper" ;
37- import AddIcon from "../../../../../icons/AddIcon" ;
38- import { CreateIcon } from "../../../../../icons" ;
39- import { Casino } from "@material-ui/icons" ;
37+ import AddIcon from "@material-ui/icons/Add" ;
4038
4139interface IIdentityProviderProps {
4240 classes : any ;
@@ -63,10 +61,17 @@ const styles = (theme: Theme) =>
6361 textAlign : "right" ,
6462 } ,
6563 shortened : {
66- gridTemplateColumns : "auto auto 30px 30px " ,
64+ gridTemplateColumns : "auto auto 50px 50px " ,
6765 display : "grid" ,
6866 gridGap : 20 ,
6967 } ,
68+ buttonTray : {
69+ gridTemplateColumns : "auto auto 10px 10px" ,
70+ display : "grid" ,
71+ gridGap : 0 ,
72+ height : 16 ,
73+ marginTop : 12 ,
74+ } ,
7075 ...modalBasic ,
7176 ...wizardCommon ,
7277 } ) ;
@@ -92,11 +97,11 @@ const IdentityProvider = ({
9297 const [ validationErrors , setValidationErrors ] = useState < any > ( { } ) ;
9398
9499 // Common
95- let randomKey = function ( ) : string {
100+ let randomKey = function ( length = 16 ) : string {
96101 let retval = "" ;
97102 let legalcharacters =
98103 "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" ;
99- for ( let i = 0 ; i < 16 ; i ++ ) {
104+ for ( let i = 0 ; i < length ; i ++ ) {
100105 retval +=
101106 legalcharacters [ Math . floor ( Math . random ( ) * legalcharacters . length ) ] ;
102107 }
@@ -227,7 +232,8 @@ const IdentityProvider = ({
227232 < div className = { classes . shortened } >
228233 < InputBoxWrapper
229234 id = { `accesskey-${ index . toString ( ) } }
230- label = { "Access Key" }
235+ label = { "" }
236+ placeholder = { "Access Key" }
231237 name = { `accesskey-${ index . toString ( ) } }
232238 value = { accessKeys [ index ] }
233239 onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) => {
@@ -240,7 +246,8 @@ const IdentityProvider = ({
240246 />
241247 < InputBoxWrapper
242248 id = { `secretkey-${ index . toString ( ) } }
243- label = { "Secret Key" }
249+ label = { "" }
250+ placeholder = { "Secret Key" }
244251 name = { `secretkey-${ index . toString ( ) } }
245252 value = { secretKeys [ index ] }
246253 onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) => {
@@ -251,30 +258,51 @@ const IdentityProvider = ({
251258 key = { `csv-secretkey-${ index . toString ( ) } }
252259 error = { validationErrors [ `secretkey-${ index . toString ( ) } ] || "" }
253260 />
254- < IconButton
255- onClick = { ( ) => {
256- updateUserField ( index , randomKey ( ) ) ;
257- updatePwordField ( index , randomKey ( ) ) ;
258- } }
259- >
260- < CasinoIcon />
261- </ IconButton >
262- < IconButton
263- onClick = { ( ) => {
264- if ( accessKeys . length > 1 ) {
265- accessKeys . splice ( index , 1 ) ;
266- secretKeys . splice ( index , 1 ) ;
267- updateUserField (
268- accessKeys . length - 1 ,
269- accessKeys [ accessKeys . length - 1 ]
270- ) ;
271- }
272- } }
273- >
274- < DeleteIcon />
275- </ IconButton >
261+ < div className = { classes . buttonTray } >
262+ < Tooltip title = "Add User" aria-label = "add" >
263+ < IconButton
264+ size = { "small" }
265+ onClick = { ( ) => {
266+ accessKeys . push ( "" ) ;
267+ secretKeys . push ( "" ) ;
268+ updateUserField ( accessKeys . length - 1 , "" ) ;
269+ updatePwordField ( secretKeys . length - 1 , "" ) ;
270+ } }
271+ >
272+ < AddIcon />
273+ </ IconButton >
274+ </ Tooltip >
275+ < Tooltip title = "Randomize Credentials" aria-label = "add" >
276+ < IconButton
277+ onClick = { ( ) => {
278+ updateUserField ( index , randomKey ( 16 ) ) ;
279+ updatePwordField ( index , randomKey ( 32 ) ) ;
280+ } }
281+ size = { "small" }
282+ >
283+ < CasinoIcon />
284+ </ IconButton >
285+ </ Tooltip >
286+ < Tooltip title = "Remove" aria-label = "add" >
287+ < IconButton
288+ size = { "small" }
289+ style = { { marginLeft : 16 } }
290+ onClick = { ( ) => {
291+ if ( accessKeys . length > 1 ) {
292+ accessKeys . splice ( index , 1 ) ;
293+ secretKeys . splice ( index , 1 ) ;
294+ updateUserField (
295+ accessKeys . length - 1 ,
296+ accessKeys [ accessKeys . length - 1 ]
297+ ) ;
298+ }
299+ } }
300+ >
301+ < DeleteIcon />
302+ </ IconButton >
303+ </ Tooltip >
304+ </ div >
276305 </ div >
277- < br />
278306 </ Fragment >
279307 ) ;
280308 } ) ;
@@ -303,21 +331,7 @@ const IdentityProvider = ({
303331 { label : "Active Directory" , value : "AD" } ,
304332 ] }
305333 />
306- MinIO supports both OpenID and Active Directory
307- < Button
308- onClick = { ( ) => {
309- accessKeys . push ( "" ) ;
310- secretKeys . push ( "" ) ;
311- updateUserField ( accessKeys . length - 1 , "" ) ;
312- updatePwordField ( secretKeys . length - 1 , "" ) ;
313- } }
314- startIcon = { < CreateIcon /> }
315- className = { classes . buttonList }
316- color = "primary"
317- variant = "contained"
318- >
319- Add accesskey/secretkey pair
320- </ Button >
334+ Add additional users
321335 </ Grid > { " " }
322336 { idpSelection === "Built-in" && < Fragment > { inputs } </ Fragment > }
323337 { idpSelection === "OpenID" && (
0 commit comments