chore: added Password Input field

deriv-com · Jan 30, 2024 · ae6ef49 · ae6ef49
1 parent 0b8496b
commit ae6ef49
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/lib/components/PasswordInput/PasswordInput.scss 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
@@ -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>
+  );
+};