feat: add Codeforces section to user profile

Author: luoingly

backend/src/controllers/user.ts

@@ -1,6 +1,8 @@
+import type { UserProfileQueryResult } from '@putongoj/shared'
 import type { Context } from 'koa'
 import type { UserDocument } from '../models/User'
 import {
+  OAuthProvider,
   UserItemListQueryResultSchema,
   UserProfileQueryResultSchema,
   UserRanklistExportQueryResultSchema,
@@ -15,6 +17,7 @@ import config from '../config'
 import { loadProfile } from '../middlewares/authn'
 import Group from '../models/Group'
 import Solution from '../models/Solution'
+import oauthService from '../services/oauth'
 import userService from '../services/user'
 import {
   createEnvelopedResponse,
@@ -87,9 +90,19 @@ export async function getUser (ctx: Context) {
       .lean(),
   ])
 
+  let codeforces: UserProfileQueryResult['codeforces'] = null
+  const codeforcesConnection = await oauthService.getUserOAuthConnection(
+    user._id, OAuthProvider.Codeforces)
+  if (codeforcesConnection?.raw?.handle && codeforcesConnection?.raw?.rating) {
+    const { handle, rating } = codeforcesConnection.raw
+    if (typeof handle === 'string' && typeof rating === 'number') {
+      codeforces = { handle, rating }
+    }
+  }
+
   const attempted = difference(failed, solved)
   const result = UserProfileQueryResultSchema.encode({
-    ...user.toObject(), groups, solved, attempted,
+    ...user.toObject(), groups, solved, attempted, codeforces,
   })
   return createEnvelopedResponse(ctx, result)
 }

backend/src/services/oauth.ts

@@ -315,6 +315,14 @@ export async function findUserByOAuthConnection (
   return oauthRecord?.user as UserDocument ?? null
 }
 
+export async function getUserOAuthConnection (
+  userId: Types.ObjectId,
+  provider: OAuthProvider,
+): Promise<OAuthDocument | null> {
+  const record = await OAuth.findOne({ user: userId, provider }) as OAuthDocument | null
+  return record
+}
+
 export async function getUserOAuthConnections (
   userId: Types.ObjectId,
 ): Promise<Record<OAuthProvider, OAuthDocument | null>> {
@@ -383,6 +391,7 @@ const oauthService = {
   generateOAuthUrl,
   handleOAuthCallback,
   findUserByOAuthConnection,
+  getUserOAuthConnection,
   getUserOAuthConnections,
   isOAuthConnectedToAnotherUser,
   upsertOAuthConnection,

frontend/src/components/CodeforcesProfile.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  handle: string
+  rating: number
+}>()
+
+const codeforcesTitle = computed(() => {
+  if (props.rating >= 4000) return props.handle
+  if (props.rating >= 3000) return 'Legendary Grandmaster'
+  if (props.rating >= 2600) return 'International Grandmaster'
+  if (props.rating >= 2400) return 'Grandmaster'
+  if (props.rating >= 2300) return 'International Master'
+  if (props.rating >= 2100) return 'Master'
+  if (props.rating >= 1900) return 'Candidate Master'
+  if (props.rating >= 1600) return 'Expert'
+  if (props.rating >= 1400) return 'Specialist'
+  if (props.rating >= 1200) return 'Pupil'
+  return 'Newbie'
+})
+</script>
+
+<template>
+  <div
+    class="font-(family-name:--font-verdana) px-3.5 py-2" :class="{
+      'text-color': props.rating >= 4000,
+      'text-red-500': props.rating >= 2400 && props.rating < 4000,
+      'text-amber-500': props.rating >= 2000 && props.rating < 2400,
+      'text-fuchsia-600': props.rating >= 1800 && props.rating < 2000,
+      'text-blue-600': props.rating >= 1600 && props.rating < 1800,
+      'text-teal-500': props.rating >= 1400 && props.rating < 1600,
+      'text-green-700': props.rating >= 1200 && props.rating < 1400,
+      'text-neutral-500': props.rating < 1200,
+    }"
+  >
+    <div class="font-semibold text-sm">
+      {{ codeforcesTitle }}
+    </div>
+    <a
+      :href="`https://codeforces.com/profile/${props.handle}`" target="_blank" rel="noopener noreferrer"
+      class="font-sans font-semibold hover:underline text-2xl text-inherit"
+    >
+      <template v-if="props.rating >= 3000">
+        <span
+          :class="{
+            'text-red-500': props.rating >= 4000,
+            'text-color': props.rating >= 3000 && props.rating < 4000,
+          }"
+        >{{ props.handle.slice(0, 1) }}</span>{{ props.handle.slice(1) }}
+      </template>
+      <template v-else>{{ props.handle }}</template>
+    </a>
+    <div class="mt-1">
+      <span class="mr-1 text-color">Contest rating:</span>
+      <span class="font-(family-name:--font-verdana) font-bold"> {{ props.rating }}</span>
+    </div>
+  </div>
+</template>

frontend/src/views/UserProfile.vue

@@ -9,6 +9,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { getUser } from '@/api/user'
+import CodeforcesProfile from '@/components/CodeforcesProfile.vue'
 import { useRootStore } from '@/store'
 import { useSessionStore } from '@/store/modules/session'
 import { getPrivilegeLabel, getPrivilegeSeverity, timePretty } from '@/utils/formate'
@@ -170,6 +171,10 @@ onRouteParamUpdate(fetch)
             </div>
           </Fieldset>
 
+          <Fieldset v-if="user.codeforces" :legend="t('ptoj.codeforces')">
+            <CodeforcesProfile :handle="user.codeforces.handle" :rating="user.codeforces.rating" />
+          </Fieldset>
+
           <Fieldset :legend="t('ptoj.statistics')">
             <div class="gap-4 grid grid-cols-2">
               <div class="px-4 py-2">

shared/src/types/api/user.ts

@@ -16,6 +16,10 @@ export const UserProfileQueryResultSchema = z.object({
     gid: GroupModelSchema.shape.gid,
     title: GroupModelSchema.shape.title,
   })),
+  codeforces: z.object({
+    handle: z.string(),
+    rating: z.number(),
+  }).nullable(),
   solved: z.array(z.number()),
   attempted: z.array(z.number()),
   createdAt: UserModelSchema.shape.createdAt,