From 90515f37b58c0162f4fb0fddec2f492d5119a395 Mon Sep 17 00:00:00 2001
From: dorj222 <dorj222@gmail.com>
Date: Thu, 19 Jan 2023 11:58:36 +0100
Subject: [PATCH] add an admin password validator

---
 web/components/admin/TextFieldAdmin.tsx      | 168 +++++++++++++++++++
 web/components/admin/TextFieldWithSubmit.tsx |  22 ++-
 2 files changed, 184 insertions(+), 6 deletions(-)
 create mode 100644 web/components/admin/TextFieldAdmin.tsx

diff --git a/web/components/admin/TextFieldAdmin.tsx b/web/components/admin/TextFieldAdmin.tsx
new file mode 100644
index 000000000..8ef84813e
--- /dev/null
+++ b/web/components/admin/TextFieldAdmin.tsx
@@ -0,0 +1,168 @@
+import React, { FC, useEffect } from 'react';
+import classNames from 'classnames';
+import { Input, Form } from 'antd';
+import { FieldUpdaterFunc } from '../../types/config-section';
+// import InfoTip from '../info-tip';
+import { StatusState } from '../../utils/input-statuses';
+// import { FormStatusIndicator } from './FormStatusIndicator';
+
+export const TEXTFIELD_TYPE_TEXT = 'default';
+export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
+export const TEXTFIELD_TYPE_NUMBER = 'numeric'; // InputNumber
+export const TEXTFIELD_TYPE_TEXTAREA = 'textarea'; // Input.TextArea
+export const TEXTFIELD_TYPE_URL = 'url';
+
+export type TextFieldAdminProps = {
+  fieldName: string;
+
+  onSubmit?: () => void;
+  onPressEnter?: () => void;
+
+  className?: string;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  status?: StatusState;
+  tip?: string;
+  type?: string;
+  useTrim?: boolean;
+  useTrimLead?: boolean;
+  value?: string | number;
+  onBlur?: FieldUpdaterFunc;
+  onChange?: FieldUpdaterFunc;
+};
+
+export const TextFieldAdmin: FC<TextFieldAdminProps> = ({
+  className,
+  disabled,
+  fieldName,
+  label,
+  onBlur,
+  onChange,
+  onPressEnter,
+  placeholder,
+  required,
+  status,
+  type,
+  useTrim,
+  value,
+}) => {
+  const handleChange = (e: any) => {
+    // if an extra onChange handler was sent in as a prop, let's run that too.
+    if (onChange) {
+      const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
+      onChange({ fieldName, value: useTrim ? val.trim() : val });
+    }
+  };
+
+  const [form] = Form.useForm();
+  // const formRef = useRef(null);
+
+  useEffect(() => {
+    // console.log('value: ', value);
+    form.setFieldsValue({ adminPassword: value });
+  }, [value]);
+
+  // if you blur a required field with an empty value, restore its original value in state (parent's state), if an onChange from parent is available.
+  const handleBlur = (e: any) => {
+    const val = e.target.value;
+    if (onBlur) {
+      onBlur({ value: val });
+    }
+  };
+
+  const handlePressEnter = () => {
+    if (onPressEnter) {
+      onPressEnter();
+    }
+  };
+
+  const onFinish = (values: Store) => {
+    console.log('Received values of form: ', values);
+  };
+
+  // display the appropriate Ant text field
+  // let Field = Input as typeof Input.Password;
+  // let fieldProps = {};
+  // Field = Input.Password;
+  // fieldProps = {
+  //   visibilityToggle: true,
+  // };
+
+  const fieldId = `field-${fieldName}`;
+
+  const { type: statusType } = status || {};
+
+  const containerClass = classNames({
+    'formfield-container': true,
+    'textfield-container': true,
+    [`type-${type}`]: true,
+    required,
+    [`status-${statusType}`]: status,
+  });
+
+  return (
+    <div className={containerClass}>
+      <Form name="basic" form={form} initialValues={{ adminPassword: value }} onFinish={onFinish}>
+        <Form.Item
+          label={label}
+          name="adminPassword"
+          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.Password
+            id={fieldId}
+            className={`field ${className} ${fieldId}`}
+            {...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            onPressEnter={handlePressEnter}
+            disabled={disabled}
+            value={value as number | (readonly string[] & number)}
+          />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+export default TextFieldAdmin;
+
+TextFieldAdmin.defaultProps = {
+  className: '',
+  disabled: false,
+
+  placeholder: '',
+  required: false,
+  status: null,
+  tip: '',
+  type: TEXTFIELD_TYPE_TEXT,
+  value: '',
+
+  useTrim: false,
+  useTrimLead: false,
+
+  onSubmit: () => {},
+  onBlur: () => {},
+  onChange: () => {},
+  onPressEnter: () => {},
+};
diff --git a/web/components/admin/TextFieldWithSubmit.tsx b/web/components/admin/TextFieldWithSubmit.tsx
index ce89c7030..760682512 100644
--- a/web/components/admin/TextFieldWithSubmit.tsx
+++ b/web/components/admin/TextFieldWithSubmit.tsx
@@ -13,6 +13,7 @@ import {
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { FormStatusIndicator } from './FormStatusIndicator';
 import { TextField, TextFieldProps } from './TextField';
+import { TextFieldAdmin } from './TextFieldAdmin';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -121,12 +122,21 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
   return (
     <div className={textfieldContainerClass}>
       <div className="textfield-component">
-        <TextField
-          {...textFieldProps}
-          onSubmit={null}
-          onBlur={handleBlur}
-          onChange={handleChange}
-        />
+        {textFieldProps.fieldName !== 'adminPassword' ? (
+          <TextField
+            {...textFieldProps}
+            onSubmit={null}
+            onBlur={handleBlur}
+            onChange={handleChange}
+          />
+        ) : (
+          <TextFieldAdmin
+            {...textFieldProps}
+            onSubmit={null}
+            onBlur={handleBlur}
+            onChange={handleChange}
+          />
+        )}
       </div>
       <div className="formfield-container lower-container">
         <p className="label-spacer" />