diff --git a/frontend/src/lib/components/PasswordStrength.tsx b/frontend/src/lib/components/PasswordStrength.tsx
new file mode 100644
index 00000000000..fbfdbef8621
--- /dev/null
+++ b/frontend/src/lib/components/PasswordStrength.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Progress } from 'antd'
+import { red, volcano, orange, yellow, green } from '@ant-design/colors'
+import zxcvbn from 'zxcvbn'
+
+export default function PasswordStrength({ password = '' }: { password: string }): JSX.Element {
+ // passwordScore is 0 if no password input
+ // passwordScore is 20, 40, 60, 80, or 100 if password input, based on zxcvbn score (which is 0, 1, 2, 3, or 4)
+ const passwordScore: number = password.length && zxcvbn(password).score * 20 + 20
+
+ return (
+
+ )
+}
diff --git a/frontend/src/scenes/team/Signup.js b/frontend/src/scenes/team/Signup.js
index 4d44ec04206..f5a1af7cd03 100644
--- a/frontend/src/scenes/team/Signup.js
+++ b/frontend/src/scenes/team/Signup.js
@@ -1,10 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect, lazy, Suspense } from 'react'
import { useActions, useValues } from 'kea'
import { signupLogic } from './signupLogic'
import hedgehogBlue from './../../../public/hedgehog-blue.png'
import posthogLogo from './../../../public/posthog-icon.svg'
import { Row, Space, Button, Input, Checkbox } from 'antd'
import queryString from 'query-string'
+const PasswordStrength = lazy(() => import('../../lib/components/PasswordStrength'))
function Signup() {
const [state, setState] = useState({ submitted: false })
@@ -24,7 +25,8 @@ function Signup() {
const updateForm = (name, target, valueAttr = 'value') => {
/* Validate password (if applicable) */
if (name === 'password') {
- const valid = target[valueAttr].length >= 8
+ let password = target[valueAttr]
+ const valid = password.length >= 8
setFormState({ ...formState, password: { ...formState.password, valid, value: target[valueAttr] } })
} else {
setFormState({ ...formState, [name]: { ...formState[name], value: target[valueAttr] } })
@@ -134,7 +136,12 @@ function Signup() {
disabled={accountLoading}
id="signupPassword"
/>
- At least 8 characters.
+