info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-11 19:53:59 +02:00
Code Issues Releases Wiki Activity

fix: increase username length to 20 (#6318)

Browse Source 
* username length to 20

* reduced redundant code

* fixed package-lock file
This commit is contained in:
Prateek
2024-08-10 05:19:14 +05:30
committed by GitHub
parent b515902395
commit c69127316f
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/UpdateProfile/ProfileUsername.tsx
View File

@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import type { AllowedProfileVisibility } from '../../api/user'; import type { AllowedProfileVisibility } from '../../api/user';
import { httpGet, httpPost } from '../../lib/http'; import { httpPost } from '../../lib/http';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import { CheckIcon, Loader2, X, XCircle } from 'lucide-react'; import { CheckIcon, Loader2, X } from 'lucide-react';
import { useDebounceValue } from '../../hooks/use-debounce.ts'; import { useDebounceValue } from '../../hooks/use-debounce.ts';
type ProfileUsernameProps = { type ProfileUsernameProps = {
@@ -56,8 +56,9 @@ export function ProfileUsername(props: ProfileUsernameProps) {
setIsUnique(response.isUnique); setIsUnique(response.isUnique);
setIsLoading(false); setIsLoading(false);
}; };
const USERNAME_REGEX = /^[a-zA-Z0-9]*$/; const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
const isUserNameValid = (value: string) =>
USERNAME_REGEX.test(value) && value.length <= 20;
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
@@ -118,10 +119,8 @@ export function ProfileUsername(props: ProfileUsernameProps) {
onKeyDown={(e) => { onKeyDown={(e) => {
// only allow letters, numbers // only allow letters, numbers
const keyCode = e.key; const keyCode = e.key;
const validKey =
USERNAME_REGEX.test(keyCode) && username.length <= 10;
if ( if (
!validKey && !isUserNameValid(keyCode) &&
!['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes( !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
keyCode, keyCode,
) )
@@ -131,8 +130,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
}} }}
onInput={(e) => { onInput={(e) => {
const value = (e.target as HTMLInputElement).value?.trim(); const value = (e.target as HTMLInputElement).value?.trim();
const isValid = USERNAME_REGEX.test(value) && value.length <= 10; if (!isUserNameValid(value)) {
if (!isValid) {
return; return;
} }