fix(ui): do not autocomplete create user/role dialogs

ui/src/admin/components/influxdb/CreateRoleDialog.tsx

@@ -30,40 +30,43 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => {
       <OverlayContainer maxWidth={650}>
         <OverlayHeading title="Create Role" onDismiss={cancel} />
         <OverlayBody>
-          <Form>
-            <Form.Element label="Role Name">
-              <Input
-                value={name}
-                autoFocus={true}
-                onChange={e => setName(e.target.value)}
-                status={
-                  validateRoleName(name)
-                    ? ComponentStatus.Valid
-                    : ComponentStatus.Default
-                }
-                testId="role-name--input"
-              />
-            </Form.Element>
-            <Form.Footer>
-              <div className="form-group text-center form-group-submit col-xs-12">
-                <button
-                  className="btn btn-sm btn-default"
-                  onClick={cancel}
-                  data-test="form--cancel-role--button"
-                >
-                  Cancel
-                </button>
-                <button
-                  className="btn btn-sm btn-success"
-                  disabled={!name}
-                  onClick={() => create({name})}
-                  data-test="form--create-role--button"
-                >
-                  Create
-                </button>
-              </div>
-            </Form.Footer>
-          </Form>
+          <form>
+            <Form>
+              <Form.Element label="Role Name">
+                <Input
+                  value={name}
+                  autoFocus={true}
+                  autoComplete="off"
+                  onChange={e => setName(e.target.value)}
+                  status={
+                    validateRoleName(name)
+                      ? ComponentStatus.Valid
+                      : ComponentStatus.Default
+                  }
+                  testId="role-name--input"
+                />
+              </Form.Element>
+              <Form.Footer>
+                <div className="form-group text-center form-group-submit col-xs-12">
+                  <button
+                    className="btn btn-sm btn-default"
+                    onClick={cancel}
+                    data-test="form--cancel-role--button"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="btn btn-sm btn-success"
+                    disabled={!name}
+                    onClick={() => create({name})}
+                    data-test="form--create-role--button"
+                  >
+                    Create
+                  </button>
+                </div>
+              </Form.Footer>
+            </Form>
+          </form>
         </OverlayBody>
       </OverlayContainer>
     </OverlayTechnology>

ui/src/admin/components/influxdb/CreateUserDialog.tsx

@@ -40,6 +40,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => {
                 value={name}
                 onChange={e => setName(e.target.value)}
                 autoFocus={true}
+                autoComplete="off"
                 status={
                   validateUserName(name)
                     ? ComponentStatus.Valid
@@ -58,6 +59,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => {
                     : ComponentStatus.Default
                 }
                 onChange={e => setPassword(e.target.value)}
+                autoComplete="off"
                 testId="password--input"
               />
             </Form.Element>

ui/src/reusable_ui/components/inputs/Input.tsx

@@ -38,6 +38,7 @@ interface Props {
   disabledTitleText?: string
   customClass?: string
   testId?: string
+  autoComplete?: string
 }
 
 class Input extends Component<Props> {
@@ -82,6 +83,7 @@ class Input extends Component<Props> {
       placeholder,
       autoFocus,
       spellCheck,
+      autoComplete,
       onChange,
       onBlur,
       onFocus,
@@ -98,6 +100,7 @@ class Input extends Component<Props> {
           value={value}
           placeholder={placeholder}
           autoFocus={autoFocus}
+          autoComplete={autoComplete}
           spellCheck={spellCheck}
           onChange={onChange}
           onBlur={onBlur}