email verfication after account creation, password component, added password special characters

frontend/src/components/PasswordInput.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+
+interface PasswordInputProps {
+  id: string;
+  name?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  label?: string;
+}
+
+const PasswordInput: React.FC<PasswordInputProps> = ({
+  id,
+  name,
+  value,
+  onChange,
+  required = false,
+  placeholder,
+  className = 'form-control',
+  label
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="mb-3">
+      {label && (
+        <label htmlFor={id} className="form-label">
+          {label}
+        </label>
+      )}
+      <div className="position-relative">
+        <input
+          type={showPassword ? 'text' : 'password'}
+          className={className}
+          id={id}
+          name={name || id}
+          value={value}
+          onChange={onChange}
+          required={required}
+          placeholder={placeholder}
+        />
+        <button
+          type="button"
+          className="btn btn-link position-absolute end-0 top-50 translate-middle-y text-secondary p-0 pe-2"
+          onClick={() => setShowPassword(!showPassword)}
+          style={{ zIndex: 10, textDecoration: 'none' }}
+          tabIndex={-1}
+        >
+          <i className={`bi ${showPassword ? 'bi-eye' : 'bi-eye-slash'}`}></i>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PasswordInput;