fix: clickable org if there is any @ text in user bio (OWASP#951)

* fix: clickable org if there is any @ text in user bio

Signed-off-by: Akash Jaiswal <akashjaiswal3846@gmail.com>

* fix: unit tests

Signed-off-by: Akash Jaiswal <akashjaiswal3846@gmail.com>

* fix: trailing punctuation in github user name

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: remove dot at end if its present in username

Signed-off-by: Akash Jaiswal <akashjaiswal3846@gmail.com>

* fix: all puntuation to be excluded from link

Signed-off-by: Akash Jaiswal <akashjaiswal3846@gmail.com>

---------

Signed-off-by: Akash Jaiswal <akashjaiswal3846@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Arkadii Yakovets <2201626+arkid15r@users.noreply.github.com>

Author: 3 people

frontend/__tests__/unit/data/mockUserDetails.ts

@@ -4,7 +4,7 @@ export const mockUserDetailsData = {
     name: 'Test User',
     avatarUrl: 'https://example.com/avatar.jpg',
     url: 'https://github.com/testuser',
-    bio: 'This is a test user',
+    bio: 'Test @User',
     company: 'Test Company',
     location: 'Test Location',
     email: 'testuser@example.com',

frontend/__tests__/unit/pages/UserDetails.test.tsx

@@ -72,7 +72,8 @@ describe('UserDetailsPage', () => {
 
     expect(screen.getByText('Test User')).toBeInTheDocument()
     expect(screen.getByText(`@testuser`)).toBeInTheDocument()
-    expect(screen.getByText('This is a test user')).toBeInTheDocument()
+    expect(screen.getByText('Test')).toBeInTheDocument()
+    expect(screen.getByText('@User')).toBeInTheDocument()
     expect(screen.getByText('Test Company')).toBeInTheDocument()
     expect(screen.getByText('Test Location')).toBeInTheDocument()
   })

frontend/src/pages/UserDetails.tsx

@@ -91,6 +91,30 @@ const UserDetailsPage: React.FC = () => {
     )
   }
 
+  const formattedBio = user?.bio?.split(' ').map((word, index) => {
+    // Regex to match GitHub usernames, but if last character is not a word character or @, it's a punctuation
+    let mentionMatch = word.match(/^@([\w-]+(?:\.[\w-]+)*)([^\w@])?$/)
+    if (mentionMatch && mentionMatch.length > 1) {
+      let username = mentionMatch[1]
+      let punctuation = mentionMatch[2] || ''
+      return (
+        <React.Fragment key={index}>
+          <Link
+            href={`https://github.com/${username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:underline"
+          >
+            @{username}
+          </Link>
+          {punctuation}
+          <span> </span>
+        </React.Fragment>
+      )
+    }
+    return <span key={index}>{word} </span>
+  })
+
   return (
     <MetadataManager pageTitle={user?.name || user?.login} description={user?.bio} url={user.url}>
       <div className="mt-24 min-h-screen w-full p-4">
@@ -150,7 +174,9 @@ const UserDetailsPage: React.FC = () => {
               </div>
             </div>
             <div className="px-6 py-6">
-              {user.bio && <p className="text-lg text-gray-700 dark:text-gray-300">{user.bio}</p>}
+              {user.bio && (
+                <p className="text-lg text-gray-700 dark:text-gray-300">{formattedBio}</p>
+              )}
               <div className="mt-4 space-y-3">
                 {user.company && (
                   <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
@@ -229,7 +255,6 @@ const UserDetailsPage: React.FC = () => {
                   </div>
                 </div>
               )}
-
               {user.releases && user.releases.length > 0 && (
                 <div className="space-y-4">
                   <h2 className="text-xl font-semibold text-gray-900 dark:text-white">