Skip to content

Commit

Permalink
ref(elements): make passwordLevel more readable (#37)
Browse files Browse the repository at this point in the history 
* ref(elements): make passwordLevel more readable

* build(deps): fix vulnerability

* patch: audit-ci levels
  • Loading branch information
@gustavovalverde
gustavovalverde authored Jun 22, 2023
1 parent 2223076 commit 3eaf107
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 127 deletions.
3 changes: 2 additions & 1 deletion audit-ci.jsonc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
// Add a $schema property to enable JSON schema validation.
"$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
// You only need one of ["low", "moderate", "high", "critical"].
"moderate": true,
// TODO: lower this to "moderate" once the issue is resolved.
"high": true,
"allowlist": [
{
"GHSA-9c47-m6qq-7p4h|eslint-plugin-import>tsconfig-paths>json5": {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"cookie": "^0.5.0",
"cryptr": "^6.2.0",
"eslint": "^8.40.0",
"eslint-config-next": "13.2.3",
"eslint-config-next": "13.4.7",
"hibp": "^13.0.0",
"next": "13.2.3",
"next-recaptcha-v3": "^1.1.5",
Expand All @@ -46,7 +46,7 @@
"@typescript-eslint/parser": "^5.59.5",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"install-peers": "^1.0.4",
"prettier": ">=2.0.0"
Expand Down
171 changes: 73 additions & 98 deletions src/components/elements/passwordLevel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,72 @@
import * as React from 'react';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';

import { Typography } from '@mui/material';

// TODO: Refactor this with a simpler approach
export default function PasswordLevel({ passwordLevel }: any) {
return passwordLevel.length > 0 ? (
interface PasswordRequirementProps {
met: boolean;
text: string;
}

const PasswordRequirement: React.FC<PasswordRequirementProps> = ({ met, text }) => (
<div>
<CheckCircleIcon
color={met ? 'success' : 'disabled'}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
/>
<Typography variant="caption" color="gray">
{text}
</Typography>
</div>
);

interface ProgressBarProps {
filled: boolean;
color: string;
}

const ProgressBar: React.FC<ProgressBarProps> = ({ filled, color }) => (
<div
style={{
height: '8px',
width: '20%',
background: filled ? color : '#f1f1f1',
borderRadius: '10px',
}}
/>
);

const PASSWORD_LEVELS = ['Muy Bajo', ' Bajo', ' Medio', ' Fuerte'];
const ProgressBarColors = ['#E05D56', '#E0D256', '#B4E056', '#A3E056'];

interface PasswordLevelProps {
passwordLevel: {
contains: string[];
id: number;
length: number;
};
}

const PasswordLevel: React.FC<PasswordLevelProps> = ({ passwordLevel }) => {
const requirements = [
['lowercase', 'Una letra minúscula'],
['uppercase', 'Una letra mayúscula'],
['number', 'Un número'],
['symbol', 'Un caracter especial'],
];

return passwordLevel?.length > 0 ? (
<div style={{ marginTop: '10px' }}>
<div>
<CheckCircleIcon
color={
passwordLevel.contains?.includes('lowercase')
? 'success'
: 'disabled'
}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
/>
<Typography variant="caption" color="gray">
Una letra minúscula
</Typography>
</div>
<div>
<CheckCircleIcon
color={
passwordLevel.contains?.includes('uppercase')
? 'success'
: 'disabled'
}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
{requirements.map(([key, text], index) => (
<PasswordRequirement
key={index}
met={passwordLevel.contains?.includes(key)}
text={text}
/>
<Typography variant="caption" color="gray">
Una letra mayúscula
</Typography>
</div>
<div>
<CheckCircleIcon
color={
passwordLevel.contains?.includes('number') ? 'success' : 'disabled'
}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
/>
<Typography variant="caption" color="gray">
Un número
</Typography>
</div>
<div>
<CheckCircleIcon
color={
passwordLevel.contains?.includes('symbol') ? 'success' : 'disabled'
}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
/>
<Typography variant="caption" color="gray">
Un carácter especial
</Typography>
</div>
<div>
<CheckCircleIcon
color={passwordLevel.length >= 10 ? 'success' : 'disabled'}
style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
/>
<Typography variant="caption" color="gray">
10 caracteres como mínimo
</Typography>
</div>
))}
<PasswordRequirement
met={passwordLevel.length >= 8}
text="8 caracteres como mínimo"
/>

<div
style={{
Expand All @@ -74,50 +77,22 @@ export default function PasswordLevel({ passwordLevel }: any) {
marginTop: '10px',
}}
>
{passwordLevel.id >= 0 && (
<div
style={{
height: '8px',
width: '20%',
background: '#E05D56',
borderRadius: '10px',
}}
{ProgressBarColors.map((color, index) => (
<ProgressBar
key={index}
filled={passwordLevel.id >= index}
color={color}
/>
)}
<div
style={{
height: '8px',
width: '20%',
background: `${passwordLevel.id >= 1 ? '#E0D256' : '#f1f1f1'}`,
borderRadius: '10px',
}}
/>
<div
style={{
height: '8px',
width: '20%',
background: `${passwordLevel.id >= 2 ? '#B4E056' : '#f1f1f1'}`,
borderRadius: '10px',
}}
/>
<div
style={{
height: '8px',
width: '20%',
background: `${passwordLevel.id >= 3 ? '#A3E056' : '#f1f1f1'}`,
borderRadius: '10px',
}}
/>
))}
</div>
<Typography
sx={{ fontWeight: '400', fontSize: '14px', color: '#707070' }}
>
Nivel de contraseña
{passwordLevel.id === 0 && ' Muy Bajo'}
{passwordLevel.id === 1 && ' Bajo'}
{passwordLevel.id === 2 && ' Medio'}
{passwordLevel.id === 3 && ' Fuerte'}
{PASSWORD_LEVELS[passwordLevel.id]}
</Typography>
</div>
) : null;
}
};

export default PasswordLevel;
16 changes: 0 additions & 16 deletions src/pages/register/stepper/step3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,21 +205,6 @@ export default function Step3({ handleNext, infoCedula }: any) {
</GridItem>

<GridItem lg={12} md={12}>
<Tooltip
title={
<>
<b>
Al menos 8 caracteres de largo
<br />
Al menos 3 de los siguientes:
</b>
<li>Letras minúsculas (a-z)</li>
<li>Letras mayúsculas (A-Z)</li>
<li>Números (0-9)</li>
<li>Caracteres especiales (por ejemplo, !@#$%^&*)</li>
</>
}
>
<TextField
required
type={showPassword ? 'text' : 'password'}
Expand All @@ -244,7 +229,6 @@ export default function Step3({ handleNext, infoCedula }: any) {
),
}}
/>
</Tooltip>
<PasswordLevel passwordLevel={passwordLevel} />
</GridItem>

Expand Down
20 changes: 10 additions & 10 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3804,10 +3804,10 @@
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.2.3.tgz#77ca49edb3c1d7c5263bb8f2ebe686080e98279e"
integrity sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==

"@next/eslint-plugin-next@13.2.3":
version "13.2.3"
resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.2.3.tgz#5af8ddeac6dbe028c812a0e59c41952c004d95d5"
integrity sha512-QmMPItnU7VeojI1KnuwL9SLFWEwmaNHNlnOGpoTwdLoSiP9sc8KYiAHWEc4/44L+cAdCxcZYvn7frcRNP5l84Q==
"@next/eslint-plugin-next@13.4.7":
version "13.4.7"
resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.7.tgz#7efeff2af76be0d9a176a957da21e3710b2e79cf"
integrity sha512-ANEPltxzXbyyG7CvqxdY4PmeM5+RyWdAJGufTHnU+LA/i3J6IDV2r8Z4onKwskwKEhwqzz5lMaSYGGXLyHX+mg==
dependencies:
glob "7.1.7"

Expand Down Expand Up @@ -5313,12 +5313,12 @@ escape-string-regexp@^4.0.0:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==

eslint-config-next@13.2.3:
version "13.2.3"
resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.2.3.tgz#8a952bfd856f492684a30dd5fcdc8979c97c1cc2"
integrity sha512-kPulHiQEHGei9hIaaNGygHRc0UzlWM+3euOmYbxNkd2Nbhci5rrCDeMBMPSV8xgUssphDGmwDHWbk4VZz3rlZQ==
eslint-config-next@13.4.7:
version "13.4.7"
resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.4.7.tgz#59c48ecb37175ccc057f621a07af894cc931574f"
integrity sha512-+IRAyD0+J1MZaTi9RQMPUfr6Q+GCZ1wOkK6XM52Vokh7VI4R6YFGOFzdkEFHl4ZyIX4FKa5vcwUP2WscSFNjNQ==
dependencies:
"@next/eslint-plugin-next" "13.2.3"
"@next/eslint-plugin-next" "13.4.7"
"@rushstack/eslint-patch" "^1.1.3"
"@typescript-eslint/parser" "^5.42.0"
eslint-import-resolver-node "^0.3.6"
Expand Down Expand Up @@ -5363,7 +5363,7 @@ eslint-module-utils@^2.7.4:
dependencies:
debug "^3.2.7"

eslint-plugin-import@^2.26.0:
eslint-plugin-import@^2.26.0, eslint-plugin-import@^2.27.5:
version "2.27.5"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
Expand Down

0 comments on commit 3eaf107

Please sign in to comment.