Remove admin password generation+copy button. Add auto-generating stream keys. Closes #2683 and #2631

web/components/admin/EditInstanceDetails2.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Collapse, Typography, Tooltip } from 'antd';
+import { Collapse, Typography } from 'antd';
-import dynamic from 'next/dynamic';
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_URL } from './TextField';
 import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -15,16 +14,6 @@ import {
 import { UpdateArgs } from '../../types/config-section';
 import { ResetYP } from './ResetYP';
 
-// Lazy loaded components
-
-const CopyOutlined = dynamic(() => import('@ant-design/icons/CopyOutlined'), {
-  ssr: false,
-});
-
-const RedoOutlined = dynamic(() => import('@ant-design/icons/RedoOutlined'), {
-  ssr: false,
-});
-
 const { Panel } = Collapse;
 
 // eslint-disable-next-line react/function-component-definition
@@ -38,10 +27,6 @@ export default function EditInstanceDetails() {
   const { adminPassword, ffmpegPath, rtmpServerPort, webServerPort, yp, socketHostOverride } =
     serverConfig;
 
-  const [copyIsVisible, setCopyVisible] = useState(false);
-
-  const COPY_TOOLTIP_TIMEOUT = 3000;
-
   useEffect(() => {
     setFormDataValues({
       adminPassword,
@@ -79,22 +64,6 @@ export default function EditInstanceDetails() {
     }
   };
 
-  function generateStreamKey() {
-    let key = '';
-    for (let i = 0; i < 3; i += 1) {
-      key += Math.random().toString(36).substring(2);
-    }
-
-    handleFieldChange({ fieldName: 'streamKey', value: key });
-  }
-
-  function copyStreamKey() {
-    navigator.clipboard.writeText(formDataValues.streamKey).then(() => {
-      setCopyVisible(true);
-      setTimeout(() => setCopyVisible(false), COPY_TOOLTIP_TIMEOUT);
-    });
-  }
-
   return (
     <div className="edit-server-details-container">
       <div className="field-container field-streamkey-container">
@@ -108,18 +77,6 @@ export default function EditInstanceDetails() {
             onChange={handleFieldChange}
             onSubmit={showStreamKeyChangeMessage}
           />
-          <div className="streamkey-actions">
-            <Tooltip title="Generate a stream key">
-              <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
-            </Tooltip>
-
-            <Tooltip
-              className="copy-tooltip"
-              title={copyIsVisible ? 'Copied!' : 'Copy to clipboard'}
-            >
-              <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
-            </Tooltip>
-          </div>
         </div>
       </div>
       <TextFieldWithSubmit

web/components/admin/config/server/StreamKeys.tsx

@@ -49,10 +49,16 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
     setShowAddKeyForm(false);
   };
 
+  // Default auto-generated key
+  let defaultKey = '';
+  for (let i = 0; i < 3; i += 1) {
+    defaultKey += Math.random().toString(36).substring(2);
+  }
+
   return (
     <Form layout="inline" autoComplete="off" onFinish={handleAddKey}>
       <Item label="Key" name="key" tooltip="The key you provide your broadcasting software">
-        <Input placeholder="def456" />
+        <Input placeholder="def456" defaultValue={defaultKey} />
       </Item>
       <Item label="Comment" name="comment" tooltip="For remembering why you added this key">
         <Input placeholder="My OBS Key" />