Aizad/FEQ-1560/Password Input Field

lib/components/Input/HelperMessage.tsx

@@ -9,10 +9,11 @@ export interface HelperMessageProps {
   variant?: InputVariants;
   disabled?: boolean;
 }
-
-const MessageVariant: Record<InputVariants, string> = {
+type TMessageVariant = Exclude<InputVariants, "disabled">;
+const MessageVariant: Record<TMessageVariant, string> = {
   general: "deriv-helper-message__general",
   success: "deriv-helper-message__success",
+  warning: "deriv-helper-message__warning",
   error: "deriv-helper-message__error",
 };
 
@@ -25,7 +26,8 @@ const HelperMessage = ({
   <p
     className={clsx("deriv-helper-message", {
       [MessageVariant["general"]]: disabled,
-      [MessageVariant[error ? "error" : variant]]: !disabled,
+      [MessageVariant[error ? "error" : (variant as TMessageVariant)]]:
+        !disabled,
     })}
   >
     {message}

lib/components/Input/Input.scss

@@ -2,27 +2,45 @@ $disabled_color: #d6d6d6;
 $inactive_color: #999999;
 $active_color: #85acb0;
 $success_color: #4bb4b3;
+$warning_color: #ffad3a;
 $error_field: #ec3f3f;
 $inactive_color: #999999;
 $border: 1px solid;
 
 .deriv-input {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
+  border-radius: 4px;
+  width: 328px;
+  box-sizing: border-box;
+  text-align: left;
+  padding: 10px 16px;
+  border: $border;
+
+  &__general {
+    border-color: $inactive_color;
+    &:focus-within {
+      border-color: $active_color;
+    }
+  }
+  &__error {
+    border-color: $error_field;
+  }
+  &__success {
+    border-color: $success_color;
+  }
+
+  &__active {
+    border-color: $active_color;
+  }
+
+  &__disabled {
+    border-color: $disabled_color;
+  }
 
   &--field {
     width: 100%;
-    padding: 10px 16px;
     outline: none;
-    border-radius: 4px;
-    width: 328px;
-    box-sizing: border-box;
-    outline: none;
-    text-align: left;
-    &:disabled {
-      border: $border $disabled_color;
-      color: $inactive_color;
-    }
     &::placeholder {
       visibility: hidden;
     }
@@ -36,24 +54,6 @@ $border: 1px solid;
         height: fit-content;
       }
     }
-    &__general {
-      border: $border $inactive_color;
-      &:focus {
-        border: $border $active_color;
-      }
-    }
-    &__error {
-      border: $border $error_field;
-      &:focus {
-        border: $border $error_field;
-      }
-    }
-    &__success {
-      border: $border $success_color;
-      &:focus {
-        border: $border $success_color;
-      }
-    }
   }
 
   &--label {
@@ -77,37 +77,36 @@ $border: 1px solid;
     &__success {
       color: $success_color;
     }
+    &__active {
+      color: $active_color;
+    }
+
+    &__disabled {
+      color: $disabled_color;
+    }
   }
 
   &--helper-message {
+    top: 100%;
     position: absolute;
     left: 16px;
-    margin-top: 2px;
+    line-height: 1;
   }
 
   &--right-content {
-    position: absolute;
-    right: 16px;
-    bottom: 25%;
+    margin-left: 16px;
   }
 }
 
-.deriv-input--field__general:disabled + .deriv-input--label,
-.deriv-input--field__error:disabled + .deriv-input--label,
-.deriv-input--field__success:disabled + .deriv-input--label {
-  color: $inactive_color;
-  cursor: not-allowed;
-}
-
-.deriv-input--field:focus + .deriv-input--label {
+.deriv-input__general .deriv-input--field:focus + .deriv-input--label {
   color: $active_color;
 }
 
-.deriv-input--field__error:focus + .deriv-input--label {
+.deriv-input__error .deriv-input--field:focus + .deriv-input--label {
   color: $error_field;
 }
 
-.deriv-input--field__success:focus + .deriv-input--label {
+.deriv-input__success .deriv-input--field:focus + .deriv-input--label {
   color: $success_color;
 }
 
@@ -122,6 +121,9 @@ $border: 1px solid;
   &__success {
     color: $success_color;
   }
+  &__warning {
+    color: $warning_color;
+  }
   &__error {
     color: $error_field;
   }

lib/components/Input/index.tsx

@@ -3,8 +3,13 @@ import clsx from "clsx";
 import HelperMessage from "./HelperMessage";
 import "./Input.scss";
 
-export type InputVariants = "general" | "success" | "error";
-  interface InputProps
+export type InputVariants =
+  | "general"
+  | "success"
+  | "error"
+  | "warning"
+  | "disabled";
+interface InputProps
   extends Omit<ComponentProps<"input">, "style" | "placeholder"> {
   label?: string;
   leftPlaceholder?: ReactNode;
@@ -15,15 +20,19 @@ export type InputVariants = "general" | "success" | "error";
 }
 
 const InputVariant: Record<InputVariants, string> = {
-  general: "deriv-input--field__general",
-  success: "deriv-input--field__success",
-  error: "deriv-input--field__error",
+  general: "deriv-input__general",
+  success: "deriv-input__success",
+  warning: "deriv-input__general",
+  error: "deriv-input__error",
+  disabled: "deriv-input__disabled",
 };
 
 const LabelVariant: Record<InputVariants, string> = {
   general: "deriv-input--label__general",
   success: "deriv-input--label__success",
+  warning: "deriv-input--label__general",
   error: "deriv-input--label__error",
+  disabled: "deriv-input--label__disabled",
 };
 
 export const Input = ({
@@ -39,24 +48,33 @@ export const Input = ({
   ...rest
 }: InputProps) => {
   return (
-    <div className="deriv-input">
+    <div
+      className={clsx(
+        "deriv-input",
+        className,
+        InputVariant[error ? "error" : variant],
+        {
+          "deriv-input__disabled": disabled,
+        }
+      )}
+    >
       {leftPlaceholder && (
         <div className="deriv-input--left-content">{leftPlaceholder}</div>
       )}
       <input
         placeholder={label}
-        className={clsx(
-          "deriv-input--field",
-          className,
-          InputVariant[error ? "error" : variant]
-        )}
+        className="deriv-input--field"
         id={id}
+        disabled={disabled}
         {...rest}
       />
       <label
         className={clsx(
           "deriv-input--label",
-          LabelVariant[error ? "error" : variant]
+          LabelVariant[error ? "error" : variant],
+          {
+            "deriv-input--label__disabled": disabled,
+          }
         )}
         htmlFor={id}
       >

lib/components/PasswordInput/PasswordConstants.ts

@@ -0,0 +1,61 @@
+export type TScore = 0 | 1 | 2 | 3 | 4;
+
+export type passwordKeys =
+  | "common"
+  | "commonNames"
+  | "dates"
+  | "extendedRepeat"
+  | "keyPattern"
+  | "namesByThemselves"
+  | "pwned"
+  | "recentYears"
+  | "sequences"
+  | "similarToCommon"
+  | "simpleRepeat"
+  | "straightRow"
+  | "topHundred"
+  | "topTen"
+  | "userInputs"
+  | "wordByItself";
+
+export const passwordRegex = {
+  hasLowerCase: /[a-z]/,
+  hasNumber: /\d/,
+  hasSymbol: /\W/,
+  hasUpperCase: /[A-Z]/,
+  isLengthValid: /^.{8,25}$/,
+  isPasswordValid: /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/,
+};
+
+export const passwordValues = {
+  longPassword: 12,
+  maxLength: 25,
+  minLength: 8,
+};
+
+export const passwordErrorMessage = {
+  invalidLength: "You should enter 8-25 characters.",
+  missingCharacter:
+    "Password should have lower and uppercase English letters with numbers.",
+  PasswordError: "That password is incorrect. Please try again.",
+};
+
+export const warningMessages: Record<passwordKeys, string> = {
+  common: "This is a very common password.",
+  commonNames: "Common names and surnames are easy to guess.",
+  dates: "Dates are easy to guess.",
+  extendedRepeat:
+    'Repeated character patterns like "abcabcabc" are easy to guess.',
+  keyPattern: "Short keyboard patterns are easy to guess.",
+  namesByThemselves: "Single names or surnames are easy to guess.",
+  pwned: "Your password was exposed by a data breach on the Internet.",
+  recentYears: "Recent years are easy to guess.",
+  sequences: 'Common character sequences like "abc" are easy to guess.',
+  similarToCommon: "This is similar to a commonly used password.",
+  simpleRepeat: 'Repeated characters like "aaa" are easy to guess.',
+  straightRow: "Straight rows of keys on your keyboard are easy to guess.",
+  topHundred: "This is a frequently used password.",
+  topTen: "This is a heavily used password.",
+  userInputs: "There should not be any personal or page related data.",
+  wordByItself: "Single words are easy to guess.",
+};

lib/components/PasswordInput/PasswordIcon.tsx

@@ -0,0 +1,21 @@
+export const EyeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="18"
+    viewBox="0 0 16 22"
+  >
+    <path d="M3.324 7.469A11.4 11.4 0 0 0 1.848 9.19q-.575.876-.848 1.559.273.683.848 1.559.6.875 1.476 1.722a8 8 0 0 0 2.051 1.395Q6.551 15.973 8 16q1.449-.028 2.625-.574a8 8 0 0 0 2.05-1.395 11.4 11.4 0 0 0 1.477-1.722q.575-.876.848-1.559-.273-.683-.848-1.559a11.4 11.4 0 0 0-1.476-1.722 8 8 0 0 0-2.051-1.395Q9.449 5.528 8 5.5q-1.449.027-2.625.574-1.15.548-2.05 1.395M8 4.625q1.668.027 2.98.656 1.313.63 2.297 1.559a10.5 10.5 0 0 1 1.586 1.86q.63.956.957 1.722a.82.82 0 0 1 0 .656q-.327.766-.957 1.723t-1.586 1.86a9 9 0 0 1-2.296 1.558q-1.313.629-2.981.656-1.668-.027-2.98-.656a9 9 0 0 1-2.297-1.559 10.5 10.5 0 0 1-1.586-1.86q-.63-.956-.93-1.722a.82.82 0 0 1 0-.656q.3-.766.93-1.723.629-.957 1.586-1.86A9 9 0 0 1 5.02 5.282q1.312-.63 2.98-.657M5.375 10.75q0 .711.355 1.313.356.6.957.957.63.355 1.313.355a2.63 2.63 0 0 0 2.27-1.312q.355-.602.355-1.313 0-.71-.355-1.312A2.63 2.63 0 0 0 8 8.126a2.63 2.63 0 0 0-2.27 1.311 2.53 2.53 0 0 0-.355 1.313m6.125 0q0 .957-.465 1.75T9.75 13.785q-.82.465-1.75.465t-1.75-.465A3.6 3.6 0 0 1 4.965 12.5a3.4 3.4 0 0 1-.465-1.75q0-.957.465-1.75T6.25 7.715A3.5 3.5 0 0 1 8 7.25q.93 0 1.75.465.82.492 1.285 1.285t.465 1.75" />
+  </svg>
+);
+
+export const EyeIconSlash = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="18"
+    viewBox="0 0 18 22"
+  >
+    <path d="m.96 3.832 16.626 13.152q.3.274.082.602-.3.3-.629.082L.414 4.543q-.3-.3-.082-.629.3-.274.629-.082m15.86 7.246q-.437 1.066-1.476 2.434l-.684-.52q.957-1.285 1.34-2.242-.273-.683-.848-1.559a11.4 11.4 0 0 0-1.476-1.722 8 8 0 0 0-2.051-1.395Q10.449 5.528 9 5.5q-1.64.027-2.926.71l-.738-.573Q6.894 4.68 9 4.625q1.668.027 2.98.656 1.313.63 2.297 1.559a10.5 10.5 0 0 1 1.586 1.86q.63.956.957 1.722.11.328 0 .656M2.656 7.988l.711.547Q2.383 9.793 2 10.75q.273.683.848 1.559.6.875 1.476 1.722a8 8 0 0 0 2.051 1.395Q7.551 15.973 9 16q1.64-.027 2.926-.71l.738.573Q11.106 16.82 9 16.875q-1.668-.027-2.98-.656a8.5 8.5 0 0 1-2.27-1.559 10 10 0 0 1-1.613-1.86q-.63-.956-.93-1.722a.82.82 0 0 1 0-.656q.41-1.066 1.45-2.434M9 14.25q-1.476-.027-2.488-1.04-.985-.983-1.012-2.46 0-.273.027-.52l.848.684q.082 1.04.82 1.75.738.684 1.805.711.218 0 .465-.027l.82.656A3.4 3.4 0 0 1 9 14.25m3.5-3.5q0 .273-.027.52l-.848-.684a2.64 2.64 0 0 0-.82-1.75Q10.067 8.152 9 8.125q-.22 0-.437.055l-.848-.684Q8.316 7.25 9 7.25q1.476.027 2.488 1.012.985 1.011 1.012 2.488" />
+  </svg>
+);

lib/components/PasswordInput/PasswordInput.scss

@@ -0,0 +1,66 @@
+$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;
+  }
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
+.deriv-password-meter--bar {
+  height: 100%;
+  border-radius: 0px 0px 4px 4px;
+  transition: "width 0.25s ease-in-out";
+
+  &__initial {
+    background-color: $NEUTRAL;
+    width: 0%;
+    border-radius: 0px 0px 0px 4px;
+  }
+
+  &__error {
+    background-color: $ERROR;
+    width: 0%;
+    border-radius: 0px 0px 0px 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: 75%;
+    border-radius: 0px 0px 0px 4px;
+  }
+
+  &__complete {
+    background-color: $SUCCESS;
+    width: 100%;
+    border-radius: 0px 0px 4px 4px;
+  }
+}