[SOA-43] User verified flag (#45)

* feat 🎸 (be): add verified flag to user

* styles 💅 : add conditional verified badge to UI

app/interfaces/user.ts

@@ -11,6 +11,7 @@ export interface UserResponse extends BaseEntity {
   fullname: string
   username: string
   email: string
+  verified: boolean
   attachments: {
     cover: AttachmentResponse | null
     avatar: AttachmentResponse | null

app/models/user.ts

@@ -37,6 +37,9 @@ export default class User extends compose(BaseModel, AuthFinder, Notifiable('use
   @column()
   declare email: string
 
+  @column()
+  declare verified: boolean
+
   @column()
   role: AccountRole = AccountRole.USER
 

app/services/user_notification_service.ts

@@ -20,6 +20,7 @@ export default class UserNotificationService {
     surname: null,
     fullname: 'Moderation team',
     email: '[email protected]',
+    verified: true,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     role: AccountRole.ADMIN,

app/services/user_service.ts

@@ -150,6 +150,7 @@ export class UserService {
     const resource: UserResponse = {
       id: data.id,
       role: data.role,
+      verified: data.verified,
       name: data.name,
       surname: data.surname,
       fullname: data.fullName,

database/migrations/1732813498735_add_verified_flag_to_users_table.ts

@@ -0,0 +1,17 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'users'
+
+  async up() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.boolean('verified').defaultTo(false)
+    })
+  }
+
+  async down() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.dropColumn('verified')
+    })
+  }
+}

inertia/components/posts/post_card.tsx

@@ -11,6 +11,7 @@ import {
   Trash2,
   Flag,
   Pin,
+  BadgeCheck,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
@@ -493,9 +494,14 @@ export default function PostCard({
           <div className="flex flex-row gap-3">
             <UserAvatar user={post.user} className="h-8 w-8" />
             <div className="flex flex-col gap-1">
-              <p className="text-xs text-gray-600 text-ellipsis truncate max-w-40 md:max-w-screen-lg">
-                @{post.user.username}
-              </p>
+              <div className="flex flex-row gap-2 items-center">
+                <p className="text-xs text-gray-600 text-ellipsis truncate max-w-40 md:max-w-screen-lg">
+                  @{post.user.username}
+                </p>
+                {post.user.verified && (
+                  <BadgeCheck size={14} className="fill-blue-500 stroke-white" />
+                )}
+              </div>
               <span className="flex text-xs text-gray-400 gap-1 items-center">
                 <Clock size={10} />
                 {formatDistanceToNow(new Date(post.createdAt))} ago

inertia/pages/users/show.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card'
 import { InferPageProps } from '@adonisjs/inertia/types'
 import { lightFormat } from 'date-fns'
 import { Head } from '@inertiajs/react'
-import { CalendarHeart, FilePen } from 'lucide-react'
+import { BadgeCheck, CalendarHeart, FilePen } from 'lucide-react'
 import { CreatePost } from '@/components/posts/create'
 import { UserResponse } from '#interfaces/user'
 import { route } from '@izzyjs/route/client'
@@ -23,9 +23,12 @@ function UserCard({ user, totalPosts }: { user: UserResponse; totalPosts: number
               className="h-28 w-28 lg:h-20 lg:w-20 border-4 border-white shadow-lg"
             />
           </div>
-          <div>
-            <h4 className="text-md">{user.name}</h4>
-            <p className="text-xs max-w-fit truncate text-ellipsis text-muted-foreground">
+          <div className="flex flex-col items-center">
+            <div className="flex flex-row gap-1 items-center justify-center">
+              <h4 className="text-md text-ellipsis truncate max-w-72 lg:max-w-40">{user.name}</h4>
+              {user.verified && <BadgeCheck size={16} className="fill-blue-500 stroke-white" />}
+            </div>
+            <p className="text-xs max-w-72 lg:max-w-40 truncate text-ellipsis text-muted-foreground">
               @{user.username}
             </p>
           </div>