ISSUE-205: adds correct password validation

ui/_locales/en/messages.json

@@ -95,7 +95,9 @@
       "submitBtn": "Anchors Away!",
       "error": {
         "characterCount": "Must be at least 8 characters",
-        "noMatch": "Passwords don’t match"
+        "characterMaxCount": "Must be at most 20 characters",
+        "noMatch": "Passwords don’t match",
+        "invalidCharacters": "Password can only contain letters, numbers, and special characters"
       }
     },
     "unlock": {
@@ -978,4 +980,4 @@
     "earn": "Earn",
     "settings": "Settings"
   }
-}
+}

ui/components/Keyring/KeyringSetPassword.tsx

@@ -7,6 +7,7 @@ import SharedButton from "../Shared/SharedButton"
 import SharedBackButton from "../Shared/SharedBackButton"
 import PasswordStrengthBar from "../Password/PasswordStrengthBar"
 import PasswordInput from "../Shared/PasswordInput"
+import { validatePassword } from "../../utils/passwordValidation"
 
 export default function KeyringSetPassword(): ReactElement {
   const { t } = useTranslation("translation", {
@@ -27,18 +28,6 @@ export default function KeyringSetPassword(): ReactElement {
     }
   }, [history, areKeyringsUnlocked])
 
-  const validatePassword = (): boolean => {
-    if (password.length < 8) {
-      setPasswordErrorMessage(t("error.characterCount"))
-      return false
-    }
-    if (password !== passwordConfirmation) {
-      setPasswordErrorMessage(t("error.noMatch"))
-      return false
-    }
-    return true
-  }
-
   const handleInputChange = (
     f: (value: string) => void
   ): ((value: string) => void) => {
@@ -50,7 +39,9 @@ export default function KeyringSetPassword(): ReactElement {
   }
 
   const dispatchCreatePassword = (): void => {
-    if (validatePassword()) {
+    if (
+      validatePassword(password, passwordConfirmation, setPasswordErrorMessage)
+    ) {
       dispatch(createPassword(password))
     }
   }

ui/pages/Onboarding/Tabbed/SetPassword.tsx

@@ -17,6 +17,7 @@ import PasswordStrengthBar from "../../../components/Password/PasswordStrengthBa
 import PasswordInput from "../../../components/Shared/PasswordInput"
 import { WalletDefaultToggle } from "../../../components/Wallet/WalletToggleDefaultBanner"
 import OnboardingRoutes from "./Routes"
+import { validatePassword } from "../../../utils/passwordValidation"
 
 export default function SetPassword(): JSX.Element {
   const [password, setPassword] = useState("")
@@ -43,21 +44,11 @@ export default function SetPassword(): JSX.Element {
     }
   }, [history, areKeyringsUnlocked])
 
-  const validatePassword = (): boolean => {
-    if (password.length < 8) {
-      setPasswordErrorMessage(t("keyring.setPassword.error.characterCount"))
-      return false
-    }
-    if (password !== passwordConfirmation) {
-      setPasswordErrorMessage(t("keyring.setPassword.error.noMatch"))
-      return false
-    }
-    return true
-  }
   const dispatchCreatePassword = async () => {
-    const isValidPassword = validatePassword()
-
-    if (!isValidPassword) return
+    if (
+      !validatePassword(password, passwordConfirmation, setPasswordErrorMessage)
+    )
+      return
 
     await dispatch(createPassword(password)).then(() =>
       setTimeout(() => window.location.reload(), 0)

ui/utils/passwordValidation.ts

@@ -0,0 +1,37 @@
+import i18next from "i18next"
+
+const MIN_PASSWORD_LENGTH = 8
+const MAX_PASSWORD_LENGTH = 20
+
+const PASSWORD_REGEX = /^[A-Za-z0-9!"#$%&'()*+,\-.\/:;<=>?@[\\\]^_`{|}~]+$/
+
+export const validatePassword = (
+  password: string,
+  passwordConfirmation: string,
+  setPasswordErrorMessage: (value: React.SetStateAction<string>) => void
+): boolean => {
+  if (password.length < MIN_PASSWORD_LENGTH) {
+    setPasswordErrorMessage(
+      i18next.t("keyring.setPassword.error.characterCount")
+    )
+    return false
+  }
+  if (password.length > MAX_PASSWORD_LENGTH) {
+    setPasswordErrorMessage(
+      i18next.t("keyring.setPassword.error.characterMaxCount")
+    )
+    return false
+  }
+  if (!PASSWORD_REGEX.test(password)) {
+    setPasswordErrorMessage(
+      i18next.t("keyring.setPassword.error.invalidCharacters")
+    )
+    return false
+  }
+  if (password !== passwordConfirmation) {
+    setPasswordErrorMessage(i18next.t("keyring.setPassword.error.noMatch"))
+    return false
+  }
+
+  return true
+}