diff --git a/frontend/src/components/pages/acls/Acl.List.tsx b/frontend/src/components/pages/acls/Acl.List.tsx index 3e7fe23dd..d27966c44 100644 --- a/frontend/src/components/pages/acls/Acl.List.tsx +++ b/frontend/src/components/pages/acls/Acl.List.tsx @@ -170,7 +170,7 @@ class AclList extends PageComponent { onCreate: () => observable({ username: '', - password: generatePassword(30), + password: generatePassword(30, false), mechanism: 'SCRAM-SHA-256', } as CreateUserRequest), diff --git a/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx b/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx index 682a1c674..656c0dec8 100644 --- a/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx +++ b/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx @@ -1,6 +1,6 @@ import { ReloadOutlined } from '@ant-design/icons'; import { Select } from 'antd'; -import { Button, Input, Flex } from '@redpanda-data/ui'; +import { Button, Input, Flex, Checkbox } from '@redpanda-data/ui'; import { observer } from 'mobx-react'; import { useState } from 'react'; import { CreateUserRequest } from '../../../state/restInterfaces'; @@ -10,6 +10,7 @@ import { Tooltip } from '@redpanda-data/ui'; export const CreateServiceAccountEditor = observer((p: { state: CreateUserRequest }) => { const state = p.state; const [showPw, setShowPw] = useState(false); + const [allowSpecialChars, setAllowSpecialChars] = useState(false); const toggleShowPw = () => setShowPw(!showPw); return ( @@ -52,18 +53,21 @@ export const CreateServiceAccountEditor = observer((p: { state: CreateUserReques } > - - (state.password = e.target.value)} spellCheck={false} {...{ autocomplete: 'off' }} style={{ width: 'calc(100% - 45px)' }} /> + + + (state.password = e.target.value)} spellCheck={false} {...{ autocomplete: 'off' }} style={{ width: 'calc(100% - 45px)' }} /> - - - - - + + + + + + {setAllowSpecialChars(e.target.checked); state.password = generatePassword(30, e.target.checked)}}>Generate with special characters @@ -91,7 +95,7 @@ export const CreateServiceAccountEditor = observer((p: { state: CreateUserReques ); }); -export function generatePassword(length: number): string { +export function generatePassword(length: number, allowSpecialChars: boolean): string { if (length <= 0) return ''; const lowercase = 'abcdefghijklmnopqrstuvwxyz' @@ -99,7 +103,10 @@ export function generatePassword(length: number): string { const numbers = '0123456789'; const special = '.,&_+|[]/-()'; - const alphabet = lowercase + uppercase + numbers + special; + let alphabet = lowercase + uppercase + numbers; + if (allowSpecialChars) { + alphabet += special; + } const randomValues = new Uint32Array(length); crypto.getRandomValues(randomValues);