Add the Client-side Input Validators for Stream Keys and the Admin Password (#2619)

* add the minimum stream key complexity rules on the client side

* add an admin password validator

* merge TextField and TextFieldAdmin components

* update Input Validators for Streak Keys and Admin Password

* fix a small regex typo

* code cleanup

* update Textfield and TextFieldWithSubmit

* Prettified Code!

* update the TextFieldWithSubmit component

* correct the admin password endpoind API

* refactor the Admin Password Input field and add a new boolean field for it

* refactor the Form Input field name from adminPassword to InputFieldPassword

* put password regex rules into config-constants.tsx

* regex constant typo fix

* change the boolean variable isAdminPwdField to hasComplexityRequirements

* fix a merge conflict

* Prettified Code!

---------

Co-authored-by: dorj222 <dorj222@users.noreply.github.com>

web/utils/config-constants.tsx

@@ -122,6 +122,7 @@ export const TEXTFIELD_PROPS_ADMIN_PASSWORD = {
   label: 'Admin Password',
   tip: 'Save this password somewhere safe, you will need it to login to the admin dashboard!',
   required: true,
+  hasComplexityRequirements: true,
 };
 export const TEXTFIELD_PROPS_FFMPEG = {
   apiPath: API_FFMPEG,
@@ -131,6 +132,7 @@ export const TEXTFIELD_PROPS_FFMPEG = {
   label: 'FFmpeg Path',
   tip: 'Absolute file path of the FFMPEG application on your server',
   required: true,
+  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_WEB_PORT = {
   apiPath: API_WEB_PORT,
@@ -140,6 +142,7 @@ export const TEXTFIELD_PROPS_WEB_PORT = {
   label: 'Owncast port',
   tip: 'What port is your Owncast web server listening? Default is 8080',
   required: true,
+  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_RTMP_PORT = {
   apiPath: API_RTMP_PORT,
@@ -149,6 +152,7 @@ export const TEXTFIELD_PROPS_RTMP_PORT = {
   label: 'RTMP port',
   tip: 'What port should accept inbound broadcasts? Default is 1935',
   required: true,
+  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_INSTANCE_URL = {
   apiPath: API_INSTANCE_URL,
@@ -558,3 +562,26 @@ export const BROWSER_PUSH_CONFIG_FIELDS = {
     placeholder: `I've gone live! Come watch!`,
   },
 };
+
+export const PASSWORD_COMPLEXITY_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: !@#$%^&*',
+  },
+];
+
+export const REGEX_PASSWORD = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/;