From 52a720f2f8af8d9b35dcdec489c7bfcfc64ff93b Mon Sep 17 00:00:00 2001
From: dorj222 <dorj222@gmail.com>
Date: Tue, 17 Jan 2023 12:29:16 +0100
Subject: [PATCH] add the minimum stream key complexity rules on the client
 side

---
 .../admin/config/server/StreamKeys.tsx        | 48 +++++++++++++++++--
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/web/components/admin/config/server/StreamKeys.tsx b/web/components/admin/config/server/StreamKeys.tsx
index 0f8f78979..5c70d884d 100644
--- a/web/components/admin/config/server/StreamKeys.tsx
+++ b/web/components/admin/config/server/StreamKeys.tsx
@@ -50,14 +50,54 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
   };
 
   return (
-    <Form layout="inline" autoComplete="off" onFinish={handleAddKey}>
-      <Item label="Key" name="key" tooltip="The key you provide your broadcasting software">
+    <Form
+      layout="horizontal"
+      autoComplete="off"
+      onFinish={handleAddKey}
+      style={{ display: 'flex', flexDirection: 'row' }}
+    >
+      <Item
+        style={{ width: '60%', marginRight: '5px' }}
+        label="Key"
+        name="key"
+        tooltip={
+          <p>
+            The key you provide your broadcasting software. Please note that the key must be a
+            minimum of eight characters and must include at least one uppercase letter, at least one
+            lowercase letter, at least one special character, and at least one number.
+          </p>
+        }
+        rules={[
+          { min: 8, message: '- minimum 8 characters' },
+          { max: 192, message: '- maximum 192 characters' },
+          {
+            pattern: /^(?=.*[a-z])/,
+            message: '- at least one lowercase letter',
+          },
+          {
+            pattern: /^(?=.*[A-Z])/,
+            message: '- at least one uppercase letter',
+          },
+          {
+            pattern: /\d/,
+            message: '- at least one digit',
+          },
+          {
+            pattern: /^(?=.*?[#?!@$%^&*-])/,
+            message: '- at least one special character: !@#$%^&*',
+          },
+        ]}
+      >
         <Input placeholder="def456" />
       </Item>
-      <Item label="Comment" name="comment" tooltip="For remembering why you added this key">
+      <Item
+        style={{ width: '60%', marginRight: '5px' }}
+        label="Comment"
+        name="comment"
+        tooltip="For remembering why you added this key"
+      >
         <Input placeholder="My OBS Key" />
       </Item>
-
       <Button type="primary" htmlType="submit">
         Add
       </Button>