From dc80d85b0b3acdb56175fd189fe0f7fe7a936ef1 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Fri, 23 Jul 2021 16:47:58 +0200
Subject: [PATCH] feat(project): add password strength component

---
 .../PasswordStrength.module.scss              | 48 +++++++++++++++++++
 .../PasswordStrength.test.tsx                 | 12 +++++
 .../PasswordStrength/PasswordStrength.tsx     | 20 ++++++++
 .../PasswordStrength.test.tsx.snap            | 20 ++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 src/components/PasswordStrength/PasswordStrength.module.scss
 create mode 100644 src/components/PasswordStrength/PasswordStrength.test.tsx
 create mode 100644 src/components/PasswordStrength/PasswordStrength.tsx
 create mode 100644 src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap

diff --git a/src/components/PasswordStrength/PasswordStrength.module.scss b/src/components/PasswordStrength/PasswordStrength.module.scss
new file mode 100644
index 000000000..0001561eb
--- /dev/null
+++ b/src/components/PasswordStrength/PasswordStrength.module.scss
@@ -0,0 +1,48 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.passwordStrength {
+  position: relative;
+  margin: variables.$base-spacing 0;
+  font-family: theme.$body-font-family;
+  font-size: 14px;
+}
+
+.passwordStrengthBar {
+  position: relative;
+  width: 170px;
+  height: 6px;
+  margin: variables.$base-spacing 0;
+
+  background: #ddd;
+  border-radius: 5px;
+}
+
+.passwordStrengthFill {
+  position: absolute;
+  width: 0;
+  height: inherit;
+  background: transparent;
+  border-radius: inherit;
+  transition: width 0.5s ease-in-out, background 0.25s;
+}
+
+.passwordStrengthFill[data-strength='1'] {
+  width: 25%;
+  background: orangered;
+}
+
+.passwordStrengthFill[data-strength='2'] {
+  width: 50%;
+  background: orange;
+}
+
+.passwordStrengthFill[data-strength='3'] {
+  width: 75%;
+  background: yellowgreen;
+}
+
+.passwordStrengthFill[data-strength='4'] {
+  width: 100%;
+  background: green;
+}
diff --git a/src/components/PasswordStrength/PasswordStrength.test.tsx b/src/components/PasswordStrength/PasswordStrength.test.tsx
new file mode 100644
index 000000000..405ffa421
--- /dev/null
+++ b/src/components/PasswordStrength/PasswordStrength.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import PasswordStrength from './PasswordStrength';
+
+describe('<PasswordStrength>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<PasswordStrength />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/PasswordStrength/PasswordStrength.tsx b/src/components/PasswordStrength/PasswordStrength.tsx
new file mode 100644
index 000000000..f222638d6
--- /dev/null
+++ b/src/components/PasswordStrength/PasswordStrength.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './PasswordStrength.module.scss';
+
+type Props = {
+  strength: number;
+};
+
+const PasswordStrength: React.FC<Props> = ({ strength }: Props) => {
+  return (
+    <div className={styles.passwordStrength}>
+      <div className={styles.passwordStrengthBar}>
+        <div className={styles.passwordStrengthFill} data-strength={strength}></div>
+      </div>
+      <span>Use a minimum of 6 characters (case sensitive) with at least one number or special character and one capital character</span>
+    </div>
+  );
+};
+
+export default PasswordStrength;
diff --git a/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap b/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
new file mode 100644
index 000000000..06ecdbeed
--- /dev/null
+++ b/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PasswordStrength> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="passwordStrength"
+  >
+    <div
+      class="passwordStrengthBar"
+    >
+      <div
+        class="passwordStrengthFill"
+      />
+    </div>
+    <span>
+      Use a minimum of 6 characters (case sensitive) with at least one number or special character and one capital character
+    </span>
+  </div>
+</div>
+`;