Skip to content

Commit b554ca6

Browse files
ZHallen122ZHallen122
committed
Merge branch 'feat-frontend-fix-signup' of https://github.com/Sma1lboy/codefox into feat-frontend-fix-signup
2 parents 06d910c + 02c3d9c commit b554ca6

File tree

3 files changed

+80
-52
lines changed

3 files changed

+80
-52
lines changed

‎backend/src/auth/auth.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export class AuthService {
149149
where: { email },
150150
});
151151

152-
if(password !== confirmPassword) {
152+
if (password !== confirmPassword) {
153153
throw new ConflictException('Passwords do not match');
154154
}
155155

‎backend/src/user/user.resolver.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,10 @@ export class UserResolver {
6363
async registerUser(
6464
@Args('input') registerUserInput: RegisterUserInput,
6565
): Promise<User> {
66-
67-
if(registerUserInput.password.length < 6) {
66+
if (registerUserInput.password.length < 6) {
6867
throw new Error('Password must be at least 6 characters');
6968
}
70-
69+
7170
return this.authService.register(registerUserInput);
7271
}
7372

‎frontend/src/components/sign-up-modal.tsx

+77-48
Original file line numberDiff line numberDiff line change
@@ -45,27 +45,34 @@ export function SignUpModal({
4545
const [resendMessage, setResendMessage] = useState<string | null>(null);
4646
const [passwordConfirm, setPasswordConfirm] = useState('');
4747
const [passwordError, setPasswordError] = useState<string | null>(null);
48-
const [passwordStrength, setPasswordStrength] = useState<'weak' | 'medium' | 'strong' | null>(null);
48+
const [passwordStrength, setPasswordStrength] = useState<
49+
'weak' | 'medium' | 'strong' | null
50+
>(null);
4951

5052
const validatePassword = (value: string) => {
5153
// Reset errors
5254
setPasswordError(null);
53-
55+
5456
// Check minimum length
5557
if (value.length < 6) {
5658
setPasswordError('Password must be at least 6 characters long');
5759
setPasswordStrength('weak');
5860
return false;
5961
}
60-
62+
6163
// Check for complexity
6264
const hasUppercase = /[A-Z]/.test(value);
6365
const hasLowercase = /[a-z]/.test(value);
6466
const hasNumbers = /\d/.test(value);
6567
const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(value);
66-
67-
const strengthScore = [hasUppercase, hasLowercase, hasNumbers, hasSpecialChar].filter(Boolean).length;
68-
68+
69+
const strengthScore = [
70+
hasUppercase,
71+
hasLowercase,
72+
hasNumbers,
73+
hasSpecialChar,
74+
].filter(Boolean).length;
75+
6976
if (strengthScore < 2) {
7077
setPasswordStrength('weak');
7178
setPasswordError('Password is too weak');
@@ -349,52 +356,74 @@ export function SignUpModal({
349356
className={`w-full ${passwordError ? 'border-red-500' : ''}`}
350357
/>
351358
{password && (
352-
<div className="mt-2 space-y-2">
353-
<div className="flex items-center gap-2">
354-
<div className="text-sm">Password strength:</div>
355-
<div className="flex h-2 w-full max-w-[100px] overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
356-
<div
357-
className={`h-full ${
358-
passwordStrength === 'weak'
359-
? 'w-1/3 bg-red-500'
360-
: passwordStrength === 'medium'
361-
? 'w-2/3 bg-yellow-500'
362-
: 'w-full bg-green-500'
363-
}`}
364-
/>
359+
<div className="mt-2 space-y-2">
360+
<div className="flex items-center gap-2">
361+
<div className="text-sm">Password strength:</div>
362+
<div className="flex h-2 w-full max-w-[100px] overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
363+
<div
364+
className={`h-full ${
365+
passwordStrength === 'weak'
366+
? 'w-1/3 bg-red-500'
367+
: passwordStrength === 'medium'
368+
? 'w-2/3 bg-yellow-500'
369+
: 'w-full bg-green-500'
370+
}`}
371+
/>
372+
</div>
373+
<div className="text-sm">
374+
{passwordStrength === 'weak'
375+
? 'Weak'
376+
: passwordStrength === 'medium'
377+
? 'Medium'
378+
: 'Strong'}
379+
</div>
365380
</div>
366-
<div className="text-sm">
367-
{passwordStrength === 'weak'
368-
? 'Weak'
369-
: passwordStrength === 'medium'
370-
? 'Medium'
371-
: 'Strong'}
381+
382+
<div className="text-xs text-gray-500 dark:text-gray-400">
383+
Password must:
384+
<ul className="list-disc pl-5 mt-1 space-y-1">
385+
<li
386+
className={
387+
password.length >= 6 ? 'text-green-500' : ''
388+
}
389+
>
390+
Be at least 6 characters long
391+
</li>
392+
<li
393+
className={
394+
/[A-Z]/.test(password) ? 'text-green-500' : ''
395+
}
396+
>
397+
Include at least one uppercase letter
398+
</li>
399+
<li
400+
className={
401+
/\d/.test(password) ? 'text-green-500' : ''
402+
}
403+
>
404+
Include at least one number
405+
</li>
406+
<li
407+
className={
408+
/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(
409+
password
410+
)
411+
? 'text-green-500'
412+
: ''
413+
}
414+
>
415+
Include at least one special character
416+
</li>
417+
</ul>
372418
</div>
373419
</div>
374-
375-
<div className="text-xs text-gray-500 dark:text-gray-400">
376-
Password must:
377-
<ul className="list-disc pl-5 mt-1 space-y-1">
378-
<li className={password.length >= 6 ? 'text-green-500' : ''}>
379-
Be at least 6 characters long
380-
</li>
381-
<li className={/[A-Z]/.test(password) ? 'text-green-500' : ''}>
382-
Include at least one uppercase letter
383-
</li>
384-
<li className={/\d/.test(password) ? 'text-green-500' : ''}>
385-
Include at least one number
386-
</li>
387-
<li className={/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password) ? 'text-green-500' : ''}>
388-
Include at least one special character
389-
</li>
390-
</ul>
391-
</div>
392-
</div>
393-
)}
420+
)}
394421

395-
{passwordError && (
396-
<div className="text-red-500 text-xs mt-1">{passwordError}</div>
397-
)}
422+
{passwordError && (
423+
<div className="text-red-500 text-xs mt-1">
424+
{passwordError}
425+
</div>
426+
)}
398427
</div>
399428

400429
<div className="space-y-1">

0 commit comments

Comments
 (0)