From ae6ef49eb83b838576a9d44b211080d6c3131afd Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Tue, 30 Jan 2024 15:27:19 +0800
Subject: [PATCH] chore: added Password Input field

---
 .../PasswordInput/PasswordInput.scss          | 47 +++++++++++++++++++
 lib/components/PasswordInput/index.tsx        | 16 +++++++
 2 files changed, 63 insertions(+)
 create mode 100644 lib/components/PasswordInput/PasswordInput.scss
 create mode 100644 lib/components/PasswordInput/index.tsx

diff --git a/lib/components/PasswordInput/PasswordInput.scss b/lib/components/PasswordInput/PasswordInput.scss
new file mode 100644
index 00000000..227ff2f8
--- /dev/null
+++ b/lib/components/PasswordInput/PasswordInput.scss
@@ -0,0 +1,47 @@
+$NEUTRAL: #e6e9e9;
+$SUCCESS: #4bb4b3;
+$ERROR: #ec3f3f;
+
+.deriv-password {
+  width: fit-content;
+  position: relative;
+
+  &-meter {
+    z-index: -1;
+    bottom: 1px;
+    border-radius: 0px 0px 4px 4px;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: $NEUTRAL;
+  }
+}
+
+.deriv-password-meter--bar {
+  height: 100%;
+  border-radius: 0px 0px 4px 4px;
+
+  &__weak {
+    background-color: $ERROR;
+    width: 25%;
+    border-radius: 0px 0px 0px 4px;
+  }
+
+  &__moderate {
+    background-color: $ERROR;
+    width: 50%;
+    border-radius: 0px 0px 0px 4px;
+  }
+
+  &__strong {
+    background-color: $SUCCESS;
+    width: 50%;
+    border-radius: 0px 0px 0px 4px;
+  }
+
+  &__complete {
+    background-color: $SUCCESS;
+    width: 100%;
+    border-radius: 0px 0px 4px 4px;
+  }
+}
diff --git a/lib/components/PasswordInput/index.tsx b/lib/components/PasswordInput/index.tsx
new file mode 100644
index 00000000..994d2733
--- /dev/null
+++ b/lib/components/PasswordInput/index.tsx
@@ -0,0 +1,16 @@
+import React, { ComponentProps } from "react";
+import { Input } from "../Input";
+import "./PasswordInput.scss";
+
+interface PasswordInputProps extends ComponentProps<typeof Input> {}
+
+export const PasswordInput = ({ ...props }: PasswordInputProps) => {
+  return (
+    <div className="deriv-password">
+      <Input type="password" {...props} />
+      <div className="deriv-password-meter">
+        <div className="deriv-password-meter--bar"></div>
+      </div>
+    </div>
+  );
+};