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);
};
const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
return (
<div className="flex w-full flex-col">
<label
@@ -88,7 +90,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`}
target="_blank"
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}
@@ -117,7 +119,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
// only allow letters, numbers
const keyCode = e.key;
const validKey =
/^[a-zA-Z0-9]*$/.test(keyCode) && username.length < 10;
USERNAME_REGEX.test(keyCode) && username.length <= 10;
if (
!validKey &&
!['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
@@ -127,7 +129,13 @@ export function ProfileUsername(props: ProfileUsernameProps) {
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());
}}
required={profileVisibility === 'public'}