) => {
event.preventDefault();
try {
const passwordGenerated = generatePassword({
@@ -88,9 +123,12 @@ const PasswordGeneratorMain: React.FC = () => {
pronounceable: preferences.pronounceable,
},
});
- if (passwordGenerated) {
+ if (passwordGenerated !== null) {
setPassword(passwordGenerated);
- setPasswordStrength(checkStrength(passwordGenerated));
+ const { points, range } = checkStrength(passwordGenerated);
+ const color = passwordStrengthColor(range as IPasswordStrengthRange);
+ setPasswordStrength(`${points}% (${range})`);
+ setPasswordColor(color);
}
} catch (error) {
toast.error(error.message);
@@ -112,9 +150,9 @@ const PasswordGeneratorMain: React.FC = () => {
-
- {passwordStrength?.range}
-
+
+ {passwordStrength}
+
diff --git a/src/components/PasswordGeneratorMain/styles.ts b/src/components/PasswordGeneratorMain/styles.ts
index e21d2c1..c16938b 100644
--- a/src/components/PasswordGeneratorMain/styles.ts
+++ b/src/components/PasswordGeneratorMain/styles.ts
@@ -4,7 +4,7 @@ import { lighten } from 'polished';
export const Container = styled.form`
background-color: ${(props) => props.theme.mainBlue};
- box-shadow: 0px 2px 10px ${(props) => props.theme.gray};
+ box-shadow: 0 2px 10px ${(props) => props.theme.gray};
padding: 18px;
border-radius: 20px;
width: 80%;
@@ -28,6 +28,7 @@ export const ResultContainer = styled.div`
height: 30px;
width: 95%;
`;
+
export const ResultSpan = styled.input`
background-color: ${(props) => lighten(0.1, props.theme.blackBlue)};
color: #fff;
@@ -38,27 +39,16 @@ export const ResultSpan = styled.input`
max-height: 23.2px;
min-width: calc(100% - 35px);
max-width: calc(100% - 40px);
+
&::selection {
background-color: ${(props) => props.theme.gray};
}
`;
-export const PasswordStrengthSpan = styled.span.attrs((props: any) => ({
- type: 'number',
- passwordPoints: props.passwordPoints || 0,
-}))`
- color: ${(props) => props.theme.blackBlue};
+export const PasswordStrength = styled.div`
+ color: ${(props) => (props.color ? '#fffff' : props.theme.mainBlue)};
font-weight: bolder;
- background-color: ${(props) => {
- let background: string;
-
- if (props.passwordPoints === 0) background = props.theme.mainBlue;
- else if (props.passwordPoints <= 25) background = 'red';
- else if (props.passwordPoints <= 60) background = 'yellow';
- else background = 'green';
-
- return background;
- }};
+ background-color: ${(props) => props.color};
display: flex;
justify-content: center;
align-items: center;
@@ -89,6 +79,7 @@ export const PasswordLengthInput = styled.input.attrs({
max: '1024',
})`
font-size: 18px;
+
&::-webkit-inner-spin-button {
width: 15px;
height: 35px;
diff --git a/tsconfig.json b/tsconfig.json
index db1807b..29a58af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,29 +1,29 @@
-{
- "compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "types": [
- "cypress"
- ],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "noEmit": true,
- "jsx": "react",
- "isolatedModules": true
- },
- "include": [
- "src",
- "cypress"
- ]
-}
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "types": [
+ "cypress"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "noEmit": true,
+ "jsx": "react",
+ "isolatedModules": true
+ },
+ "include": [
+ "src",
+ "cypress"
+ ]
+}