Skip to content

Commit 9404621

Browse files
Devasygoogle-labs-jules[bot]coderabbitai[bot]
authored
[jules] enhance: Add password strength meter to signup (#277)
* [jules] enhance: Add password strength meter to signup Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com> * Update web/components/ui/PasswordStrength.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update web/components/ui/PasswordStrength.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * [jules] fix: Update password strength criteria to 6 chars and merge main Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com> --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 49b4ec2 commit 9404621

4 files changed

Lines changed: 143 additions & 0 deletions

File tree

‎.Jules/changelog.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
## [Unreleased]
88

99
### Added
10+
- **Password Strength Meter:** Added a visual password strength indicator to the signup form.
11+
- **Features:**
12+
- Real-time strength calculation (Length, Uppercase, Lowercase, Number, Symbol).
13+
- Visual feedback with segmented progress bar and color coding.
14+
- Specific criteria checklist (6+ chars, Mixed case, Number, Symbol).
15+
- Dual-theme support (Neobrutalism & Glassmorphism).
16+
- Accessible ARIA live region for screen readers.
17+
- **Technical:** Created `web/components/ui/PasswordStrength.tsx`. Integrated into `web/pages/Auth.tsx`.
18+
1019
- **Mobile Haptics:** Implemented system-wide haptic feedback for all interactive elements.
1120
- **Features:**
1221
- Created `HapticButton`, `HapticIconButton`, `HapticFAB`, `HapticCard`, `HapticList`, `HapticCheckbox`, `HapticMenu`, `HapticSegmentedButtons`, `HapticAppbar` (including `HapticAppbarAction`, `HapticAppbarBackAction`) wrappers.

‎.Jules/todo.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,3 +164,7 @@
164164
- Completed: 2026-01-21
165165
- Files modified: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`, `mobile/screens/FriendsScreen.js`
166166
- Impact: Native feel, users can easily refresh data
167+
- [x] **[polish]** Password strength meter for signup
168+
- Completed: 2026-02-08
169+
- Files modified: `web/components/ui/PasswordStrength.tsx`, `web/pages/Auth.tsx`
170+
- Impact: Provides visual feedback on password complexity during signup

‎web/components/ui/PasswordStrength.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import React, { useMemo } from 'react';
2+
import { useTheme } from '../../contexts/ThemeContext';
3+
import { THEMES } from '../../constants';
4+
import { Check } from 'lucide-react';
5+
6+
interface PasswordStrengthProps {
7+
password?: string;
8+
}
9+
10+
export const PasswordStrength: React.FC<PasswordStrengthProps> = ({ password = '' }) => {
11+
const { style } = useTheme();
12+
13+
const { score, label, metCriteria } = useMemo(() => {
14+
let s = 0;
15+
const criteria = {
16+
length: password.length >= 6,
17+
hasUpper: /[A-Z]/.test(password),
18+
hasLower: /[a-z]/.test(password),
19+
hasNumber: /[0-9]/.test(password),
20+
hasSpecial: /[^A-Za-z0-9]/.test(password),
21+
};
22+
23+
let l = 'Weak';
24+
25+
if (password.length > 0) {
26+
if (password.length < 6) {
27+
s = 1; // Very Weak
28+
l = 'Too Short';
29+
} else {
30+
s = 1;
31+
// Bonus for length
32+
if (criteria.length) s++;
33+
34+
// Bonus for complexity
35+
const complexity = (criteria.hasUpper ? 1 : 0) +
36+
(criteria.hasLower ? 1 : 0) +
37+
(criteria.hasNumber ? 1 : 0) +
38+
(criteria.hasSpecial ? 1 : 0);
39+
40+
if (complexity >= 2) s++;
41+
if (complexity >= 4) s++; // Max bonus
42+
43+
// Adjust label based on final score
44+
if (s >= 4) l = 'Strong';
45+
else if (s === 3) l = 'Good';
46+
else if (s === 2) l = 'Fair';
47+
else l = 'Weak';
48+
}
49+
} else {
50+
l = '';
51+
}
52+
53+
// Normalize score 0-4
54+
if (s > 4) s = 4;
55+
56+
return { score: s, label: l, metCriteria: criteria };
57+
}, [password]);
58+
59+
const getColor = (s: number) => {
60+
switch (s) {
61+
case 1: return 'bg-red-500';
62+
case 2: return 'bg-orange-500';
63+
case 3: return 'bg-yellow-500';
64+
case 4: return 'bg-green-500';
65+
default: return 'bg-gray-200 dark:bg-zinc-700';
66+
}
67+
};
68+
69+
const isNeo = style === THEMES.NEOBRUTALISM;
70+
71+
if (!password) return null;
72+
73+
return (
74+
<div className="w-full flex flex-col gap-2 mt-2" role="region" aria-label="Password strength indicator">
75+
{/* Strength Bar */}
76+
<div className="flex w-full gap-1 h-2">
77+
{[1, 2, 3, 4].map((level) => (
78+
<div
79+
key={level}
80+
className={`flex-1 h-full transition-all duration-300 ${
81+
score >= level
82+
? getColor(score)
83+
: (isNeo ? 'bg-gray-200 dark:bg-zinc-800' : 'bg-white/10')
84+
} ${isNeo ? 'border-2 border-black' : 'rounded-full'}`}
85+
/>
86+
))}
87+
</div>
88+
89+
{/* Label and Criteria */}
90+
<div className="flex justify-between items-center h-4">
91+
<span className={`text-xs font-bold transition-colors duration-300 ${
92+
score === 4 ? 'text-green-600 dark:text-green-400' :
93+
score === 3 ? 'text-yellow-600 dark:text-yellow-400' :
94+
score === 2 ? 'text-orange-600 dark:text-orange-400' :
95+
'text-red-600 dark:text-red-400'
96+
} ${isNeo ? 'uppercase tracking-wider' : ''}`}>
97+
{label}
98+
</span>
99+
</div>
100+
101+
<div className="grid grid-cols-2 gap-y-1 gap-x-4 text-[10px] text-gray-500 dark:text-gray-400 transition-opacity duration-300">
102+
<div className={`flex items-center gap-1.5 ${metCriteria.length ? 'text-green-600 dark:text-green-400 font-bold' : ''}`}>
103+
{metCriteria.length ? <Check size={12} strokeWidth={3} /> : <div className="w-3" />}
104+
6+ characters
105+
</div>
106+
<div className={`flex items-center gap-1.5 ${(metCriteria.hasUpper && metCriteria.hasLower) ? 'text-green-600 dark:text-green-400 font-bold' : ''}`}>
107+
{(metCriteria.hasUpper && metCriteria.hasLower) ? <Check size={12} strokeWidth={3} /> : <div className="w-3" />}
108+
Mixed case
109+
</div>
110+
<div className={`flex items-center gap-1.5 ${metCriteria.hasNumber ? 'text-green-600 dark:text-green-400 font-bold' : ''}`}>
111+
{metCriteria.hasNumber ? <Check size={12} strokeWidth={3} /> : <div className="w-3" />}
112+
Number
113+
</div>
114+
<div className={`flex items-center gap-1.5 ${metCriteria.hasSpecial ? 'text-green-600 dark:text-green-400 font-bold' : ''}`}>
115+
{metCriteria.hasSpecial ? <Check size={12} strokeWidth={3} /> : <div className="w-3" />}
116+
Symbol
117+
</div>
118+
</div>
119+
120+
{/* Hidden live region for accessibility */}
121+
<output className="sr-only" aria-live="polite">
122+
Password strength: {label}.
123+
{score < 4 && label ? "Add more characters, numbers, or symbols to strengthen." : ""}
124+
</output>
125+
</div>
126+
);
127+
};

‎web/pages/Auth.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
44
import { useNavigate } from 'react-router-dom';
55
import { Button } from '../components/ui/Button';
66
import { Input } from '../components/ui/Input';
7+
import { PasswordStrength } from '../components/ui/PasswordStrength';
78
import { Spinner } from '../components/ui/Spinner';
89
import { THEMES } from '../constants';
910
import { useAuth } from '../contexts/AuthContext';
@@ -299,6 +300,8 @@ export const Auth = () => {
299300
className={isNeo ? 'rounded-none' : ''}
300301
/>
301302

303+
{!isLogin && <PasswordStrength password={password} />}
304+
302305
{error && (
303306
<motion.div
304307
initial={{ opacity: 0, y: -10 }}

0 commit comments

Comments
 (0)