From dc4f00c12ee509de622857289e22bd5a71f9e59f Mon Sep 17 00:00:00 2001
From: TigranBoomTech <tigrano@boomte.ch>
Date: Tue, 22 Oct 2024 10:57:29 +0400
Subject: [PATCH] one more input field if password confirm is on

---
 src/Body/Fields/Password/Password.js | 46 +++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/Body/Fields/Password/Password.js b/src/Body/Fields/Password/Password.js
index eb9aa4a2..f6ce7337 100644
--- a/src/Body/Fields/Password/Password.js
+++ b/src/Body/Fields/Password/Password.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames/bind'
 import { Input } from 'boomform'
 import { stockedValidation } from '../../../Helpers/password'
@@ -6,23 +6,59 @@ import { stockedValidation } from '../../../Helpers/password'
 const Password = ({
   label,
   classnameprefix,
+  matchPassword,
   payment,
   validation,
   ...props
 }) => {
-  const [showPassword, setShowPassword] = useState(false)
+  const [passwordVisible, setPasswordVisible] = useState({
+    showPassword: false,
+    showConfirmPassword: false
+  })
   const newValidation = stockedValidation(validation)
+
   return (
     <>
       <Input
         {...props}
         validation={newValidation}
-        type={showPassword ? 'text' : 'password'}
+        type={passwordVisible.showPassword ? 'text' : 'password'}
+        placeholder={label}
       />
       <span
-        onClick={() => setShowPassword(value => !value)}
-        className={classNames('password-icon', { active: showPassword })}
+        onClick={() =>
+          setPasswordVisible(prev => ({
+            ...prev,
+            showPassword: !prev.showPassword
+          }))
+        }
+        className={classNames('password-icon', {
+          active: passwordVisible.showPassword
+        })}
       ></span>
+
+      {matchPassword && (
+        <>
+          <Input
+            {...props}
+            id={`${props.id}_confirm`}
+            validation={newValidation}
+            type={passwordVisible.showConfirmPassword ? 'text' : 'password'}
+            placeholder='Confirm Password'
+          />
+          <span
+            onClick={() =>
+              setPasswordVisible(prev => ({
+                ...prev,
+                showConfirmPassword: !prev.showConfirmPassword
+              }))
+            }
+            className={classNames('confirm-password-icon', {
+              active: passwordVisible.showConfirmPassword
+            })}
+          ></span>
+        </>
+      )}
     </>
   )
 }