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: username input (#6141)

Browse Source
This commit is contained in:
Arik Chakma
2024-07-12 20:50:30 +06:00
committed by GitHub
parent f618ef0bf6
commit c7ed1bd59f
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,6 +57,8 @@ export function ProfileUsername(props: ProfileUsernameProps) {
setIsLoading(false); setIsLoading(false);
}; };
const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<label <label
@@ -88,7 +90,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`} href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`}
target="_blank" target="_blank"
className={ className={
'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-purple-800 hover:text-white' 'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-white'
} }
> >
roadmap.sh/u/{username} roadmap.sh/u/{username}
@@ -117,7 +119,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
// only allow letters, numbers // only allow letters, numbers
const keyCode = e.key; const keyCode = e.key;
const validKey = const validKey =
/^[a-zA-Z0-9]*$/.test(keyCode) && username.length < 10; USERNAME_REGEX.test(keyCode) && username.length <= 10;
if ( if (
!validKey && !validKey &&
!['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes( !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
@@ -127,7 +129,13 @@ export function ProfileUsername(props: ProfileUsernameProps) {
e.preventDefault(); e.preventDefault();
} }
}} }}
onChange={(e) => { onInput={(e) => {
const value = (e.target as HTMLInputElement).value?.trim();
const isValid = USERNAME_REGEX.test(value) && value.length <= 10;
if (!isValid) {
return;
}
setUsername((e.target as HTMLInputElement).value.toLowerCase()); setUsername((e.target as HTMLInputElement).value.toLowerCase());
}} }}
required={profileVisibility === 'public'} required={profileVisibility === 'public'}