mirror of
https://github.com/koreanbots/core.git
synced 2025-12-13 05:10:24 +00:00
Improved Report and changed email address (#440)
* feat: added report page for bot * feat: added report page for user * feat: blocking user reporting self * feat: changed emails * refactor: changed category handler style
This commit is contained in:
Junseo Park
GitHub
parent
084a90977a
commit
2ee7151a06
@ -6,4 +6,4 @@
|
||||
|
||||
## English
|
||||
|
||||
Please [mail](mailto:koreanbots.dev@gmail.com) us!
|
||||
Please [mail](mailto:team@koreanbots.dev) us!
|
||||
|
||||
78
components/ReportTemplate.tsx
Normal file
78
components/ReportTemplate.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { FC, useState } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { FormikErrors, FormikTouched } from 'formik'
|
||||
|
||||
const Button = dynamic(() => import('@components/Button'))
|
||||
const TextArea = dynamic(() => import('@components/Form/TextArea'))
|
||||
|
||||
export const Check: FC<{ checked: boolean, text: string }> = ({ checked, text }) => <>
|
||||
{checked && <i className='text-green-400 fas fa-check-circle mr-1' />}
|
||||
{text}
|
||||
</>
|
||||
|
||||
export const SubmitButton: FC = () => <div className='text-right'>
|
||||
<Button type='submit'>제출</Button>
|
||||
</div>
|
||||
|
||||
export const TextField: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => <>
|
||||
<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' value={values.description} setValue={(value) => setFieldValue('description', value)} />
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
|
||||
<SubmitButton />
|
||||
</>
|
||||
|
||||
export const DMCA: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => {
|
||||
const [ isOwner, setOwner ] = useState(null)
|
||||
const [ contacted, setContacted ] = useState(null)
|
||||
return <div>
|
||||
<h3 className='font-bold my-2'>권리자와는 어떤 관계인가요?</h3>
|
||||
<Button onClick={() => setOwner(true)}>
|
||||
<Check checked={isOwner} text='권리자 본인 혹은 대리인입니다.' />
|
||||
</Button>
|
||||
<Button onClick={() => setOwner(false)}>
|
||||
<Check checked={isOwner === false} text='권리자가 아닙니다.' />
|
||||
</Button>
|
||||
{
|
||||
isOwner === true ? <>
|
||||
<h3 className='font-bold my-2'>권리 침해자에게 연락하여 라이선스 위반사항을 고지하셨나요?</h3>
|
||||
<Button onClick={() => setContacted(true)}>
|
||||
<Check checked={contacted} text='최대한 연락을 시도하였지만 개선되지 않았습니다.' />
|
||||
</Button>
|
||||
<Button onClick={() => setContacted(false)}>
|
||||
<Check checked={contacted === false} text='아니요, 아직 연락하지 않았습니다.' />
|
||||
</Button>
|
||||
{
|
||||
contacted ? <div>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>반드시 아래 항목들을 포함해야합니다.</p>
|
||||
<ul className='text-gray-400 text-sm mb-1 list-disc list-inside'>
|
||||
<li>권리자 본인임을 증명 (단체 소속인 경우 어떤 자격으로 단체를 대표하여 신고하는지 설명)</li>
|
||||
<li>본인의 권리를 입증 (원본 컨텐츠의 주소, 라이선스 등을 포함)</li>
|
||||
</ul>
|
||||
<p className='text-gray-400 text-sm mb-1'>컨텐츠를 추가로 첨부해야하는 경우 <a className='text-blue-400' target='_blank' rel='noreferrer' href={`mailto:dmca@koreanbots.dev?subject=${encodeURI('[DMCA] 추가 컨텐츠')}&body=${encodeURI('디스코드 태그:')}`}>dmca@koreanbots.dev</a>의 이메일로 첨부해주시고, 해당 이메일로 첨부했음을 아래 설명에 기재해주세요.</p>
|
||||
<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
|
||||
</div>
|
||||
: contacted === false ? <>
|
||||
<h2 className='font-bold mt-4 text-xl'>먼저 권리 침해자에게 연락을 시도해주세요.</h2>
|
||||
<p>본인의 권리를 침해하신 분께 먼저 연락을 시도하셔서 위반사항을 고지하시고, 연락이 불가하다면 신고 기능을 이용해주세요.</p>
|
||||
</> : ''
|
||||
}
|
||||
</>
|
||||
: isOwner === false ? <>
|
||||
<h2 className='font-bold mt-4 text-xl'>아쉽지만, 권리자 본인 혹은 대리인만 신고하실 수 있습니다.</h2>
|
||||
<p>권리자 분께 말씀드려, 권리자 본인이 직접 신고하시도록 해주세요!</p>
|
||||
</> : ''
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
interface ReportValues {
|
||||
category: string | null
|
||||
description: string
|
||||
_csrf: string
|
||||
}
|
||||
interface ReportTemplateProps {
|
||||
values?: ReportValues
|
||||
errors?: FormikErrors<ReportValues>
|
||||
touched?: FormikTouched<ReportValues>
|
||||
setFieldValue?(field: string, value: unknown): void
|
||||
}
|
||||
@ -16,7 +16,7 @@ import { get } from '@utils/Query'
|
||||
import Day from '@utils/Day'
|
||||
import { ReportSchema } from '@utils/Yup'
|
||||
import Fetch from '@utils/Fetch'
|
||||
import { checkBotFlag, checkUserFlag, formatNumber, parseCookie, redirectTo } from '@utils/Tools'
|
||||
import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
|
||||
import { getToken } from '@utils/Csrf'
|
||||
|
||||
import NotFound from '../../404'
|
||||
@ -217,15 +217,11 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
|
||||
/>
|
||||
))}
|
||||
<div className='list grid'>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
|
||||
if(!user) {
|
||||
localStorage.redirectTo = window.location.href
|
||||
redirectTo(router, 'login')
|
||||
}
|
||||
else setReportModal(true)
|
||||
}} aria-hidden='true'>
|
||||
<i className='far fa-flag' /> 신고하기
|
||||
</a>
|
||||
<Link href={`/bots/${router.query.id}/report`}>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' aria-hidden='true'>
|
||||
<i className='far fa-flag' /> 신고하기
|
||||
</a>
|
||||
</Link>
|
||||
<Modal header={`${data.name}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
|
||||
setReportModal(false)
|
||||
setReportRes(null)
|
||||
|
||||
140
pages/bots/[id]/report.tsx
Normal file
140
pages/bots/[id]/report.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
import { NextPage } from 'next'
|
||||
import Link from 'next/link'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { Field, Form, Formik } from 'formik'
|
||||
|
||||
import { Bot, CsrfContext, ResponseProps, User } from '@types'
|
||||
import { get } from '@utils/Query'
|
||||
import { makeBotURL, parseCookie } from '@utils/Tools'
|
||||
|
||||
import { ParsedUrlQuery } from 'querystring'
|
||||
|
||||
import NotFound from 'pages/404'
|
||||
import { getToken } from '@utils/Csrf'
|
||||
import { DMCA, TextField } from '@components/ReportTemplate'
|
||||
import { useState } from 'react'
|
||||
import Fetch from '@utils/Fetch'
|
||||
import { ReportSchema } from '@utils/Yup'
|
||||
import { getJosaPicker } from 'josa'
|
||||
import { reportCats } from '@utils/Constants'
|
||||
import { NextSeo } from 'next-seo'
|
||||
|
||||
|
||||
const Container = dynamic(() => import('@components/Container'))
|
||||
const Message = dynamic(() => import('@components/Message'))
|
||||
const Login = dynamic(() => import('@components/Login'))
|
||||
|
||||
const ReportBot: NextPage<ReportBotProps> = ({ data, user, csrfToken }) => {
|
||||
const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
|
||||
if(!data?.id) return <NotFound />
|
||||
if(!user) return <Login>
|
||||
<NextSeo title='신고하기' />
|
||||
</Login>
|
||||
return <Container paddingTop className='py-10'>
|
||||
<NextSeo title={`${data.name} 신고하기`} />
|
||||
<Link href={makeBotURL(data)}>
|
||||
<a className='text-blue-500 hover:opacity-80'><i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>{getJosaPicker('로')(data.name)} 돌아가기</a>
|
||||
</Link>
|
||||
{
|
||||
reportRes?.code === 200 ? <Message type='success'>
|
||||
<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
|
||||
<p>더 자세한 설명이 필요할 수 있습니다. <strong>반드시 <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요!!</strong></p>
|
||||
</Message> : <Formik onSubmit={async (body) => {
|
||||
const res = await Fetch(`/bots/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
|
||||
setReportRes(res)
|
||||
}} validationSchema={ReportSchema} initialValues={{
|
||||
category: null,
|
||||
description: '',
|
||||
_csrf: csrfToken
|
||||
}}>
|
||||
{
|
||||
({ errors, touched, values, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className='mb-5'>
|
||||
{
|
||||
reportRes && <div className='my-5'>
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
|
||||
<ul className='list-disc'>
|
||||
{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
}
|
||||
<h3 className='font-bold'>신고 구분</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
|
||||
{
|
||||
reportCats.map(el =>
|
||||
<div key={el}>
|
||||
<label>
|
||||
<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
|
||||
{el}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
|
||||
{
|
||||
values.category && <>
|
||||
{
|
||||
{
|
||||
[reportCats[2]]: <Message type='info'>
|
||||
<h3 className='font-bold text-xl'>본인 혹은 다른 사람이 위험에 처해 있나요?</h3>
|
||||
<p>당신은 소중한 사람입니다.</p>
|
||||
<p className='list-disc list-item list-inside'>자살예방상담전화 1393 | 청소년전화 1388</p>
|
||||
</Message>,
|
||||
[reportCats[5]]: <DMCA values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />,
|
||||
[reportCats[6]]: <Message type='warning'>
|
||||
<h3 className='font-bold text-xl'>디스코드 약관을 위반사항을 신고하시려고요?</h3>
|
||||
<p><a className='text-blue-400' target='_blank' rel='noreferrer' href='http://dis.gd/report'>디스코드 문의</a>를 통해 직접 디스코드에 신고하실 수도 있습니다.</p>
|
||||
</Message>
|
||||
|
||||
}[values.category]
|
||||
}
|
||||
{
|
||||
!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && <>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>최대한 자세하게 기재해주세요.</p>
|
||||
<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
}
|
||||
</Container>
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (ctx: Context) => {
|
||||
const parsed = parseCookie(ctx.req)
|
||||
const data = await get.bot.load(ctx.query.id)
|
||||
const user = await get.Authorization(parsed?.token)
|
||||
|
||||
return {
|
||||
props: {
|
||||
csrfToken: getToken(ctx.req, ctx.res),
|
||||
data,
|
||||
user: await get.user.load(user || '')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
interface ReportBotProps {
|
||||
csrfToken: string
|
||||
data: Bot
|
||||
user: User
|
||||
}
|
||||
|
||||
interface Context extends CsrfContext {
|
||||
query: URLQuery
|
||||
}
|
||||
|
||||
interface URLQuery extends ParsedUrlQuery {
|
||||
id: string
|
||||
}
|
||||
|
||||
export default ReportBot
|
||||
@ -9,6 +9,8 @@ const Docs = dynamic(() => import('@components/Docs'))
|
||||
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
|
||||
const Button = dynamic(() => import('@components/Button'))
|
||||
|
||||
const BODY = '중요도:\n설명:\n\n영향을 줄 수 있는 경우:'
|
||||
|
||||
const Security: NextPage<SecurityProps> = ({ bugReports }) => {
|
||||
return <Docs
|
||||
header='버그 바운티 프로그램'
|
||||
@ -59,7 +61,7 @@ const Security: NextPage<SecurityProps> = ({ bugReports }) => {
|
||||
</ul>
|
||||
<div className='text-center py-36'>
|
||||
<h1 className='text-3xl font-bold mb-6'>취약점을 발견하셨나요?</h1>
|
||||
<Button href='mailto:koreanbots.dev@gmail.com'>제보하기</Button>
|
||||
<Button href={`mailto:team@koreanbots.dev?subject=[Security] &body=${encodeURI(BODY)}`}>제보하기</Button>
|
||||
</div>
|
||||
</Docs>
|
||||
}
|
||||
|
||||
@ -1,219 +0,0 @@
|
||||
import { NextPage, NextPageContext } from 'next'
|
||||
import { useState } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { SnowflakeUtil } from 'discord.js'
|
||||
import { ParsedUrlQuery } from 'querystring'
|
||||
import { josa } from 'josa'
|
||||
import { Field, Form, Formik } from 'formik'
|
||||
|
||||
import { Bot, User, ResponseProps, Theme } from '@types'
|
||||
import { get } from '@utils/Query'
|
||||
import { checkUserFlag, parseCookie, redirectTo } from '@utils/Tools'
|
||||
import { getToken } from '@utils/Csrf'
|
||||
import Fetch from '@utils/Fetch'
|
||||
import { ReportSchema } from '@utils/Yup'
|
||||
|
||||
import NotFound from '../404'
|
||||
import { KoreanbotsEndPoints, reportCats } from '@utils/Constants'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const Container = dynamic(() => import('@components/Container'))
|
||||
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
|
||||
const Divider = dynamic(() => import('@components/Divider'))
|
||||
const BotCard = dynamic(() => import('@components/BotCard'))
|
||||
const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
|
||||
const Tag = dynamic(() => import('@components/Tag'))
|
||||
const Advertisement = dynamic(() => import('@components/Advertisement'))
|
||||
const Tooltip = dynamic(() => import('@components/Tooltip'))
|
||||
const Message = dynamic(() => import('@components/Message'))
|
||||
const Modal = dynamic(() => import('@components/Modal'))
|
||||
const Button = dynamic(() => import('@components/Button'))
|
||||
const TextArea = dynamic(() => import('@components/Form/TextArea'))
|
||||
|
||||
const Users: NextPage<UserProps> = ({ user, data, csrfToken, theme }) => {
|
||||
const router = useRouter()
|
||||
const [ reportModal, setReportModal ] = useState(false)
|
||||
const [ reportRes, setReportRes ] = useState<ResponseProps<null>>(null)
|
||||
if (!data?.id) return <NotFound />
|
||||
return (
|
||||
<Container paddingTop className='py-10'>
|
||||
<NextSeo
|
||||
title={data.username}
|
||||
description={data.bots.length === 0 ? `${data.username}님의 프로필입니다.` : josa(
|
||||
`${(data.bots as Bot[])
|
||||
.slice(0, 5)
|
||||
.map(el => el.name)
|
||||
.join(', ')}#{을} 제작합니다.`
|
||||
)}
|
||||
openGraph={{
|
||||
images: [{
|
||||
url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
|
||||
width: 256,
|
||||
height: 256,
|
||||
alt: 'User Avatar'
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
<div className='lg:flex'>
|
||||
<div className='w-3/5 mx-auto text-center lg:w-1/6'>
|
||||
<DiscordAvatar
|
||||
size={512}
|
||||
userID={data.id}
|
||||
className='w-full'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-grow px-5 py-10 w-full text-center lg:w-5/12 lg:text-left'>
|
||||
<div>
|
||||
<div className='lg:flex mt-3 mb-1 '>
|
||||
<h1 className='text-4xl font-bold'>{data.username}</h1>
|
||||
<span className='ml-0.5 text-gray-400 text-3xl font-semibold mt-1'>#{data.tag}</span>
|
||||
</div>
|
||||
<div className='badges flex mb-2 justify-center lg:justify-start'>
|
||||
{checkUserFlag(data.flags, 'staff') && (
|
||||
<Tooltip text='한국 디스코드봇 리스트 스탭입니다.' direction='left'>
|
||||
<div className='pr-5 text-koreanbots-blue text-2xl'>
|
||||
<i className='fas fa-hammer' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{checkUserFlag(data.flags, 'bughunter') && (
|
||||
<Tooltip text='버그를 많이 제보해주신 분입니다.' direction='left'>
|
||||
<div className='pr-5 text-green-500 text-2xl'>
|
||||
<i className='fas fa-bug' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
{data.github && (
|
||||
<Tag
|
||||
newTab
|
||||
text={
|
||||
<>
|
||||
<i className='fab fa-github' /> {data.github}
|
||||
</>
|
||||
}
|
||||
github
|
||||
href={`https://github.com/${data.github}`}
|
||||
/>
|
||||
)}
|
||||
<div className='list-none mt-2'>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
|
||||
if(!user) {
|
||||
localStorage.redirectTo = window.location.href
|
||||
redirectTo(router, 'login')
|
||||
}
|
||||
else setReportModal(true)
|
||||
}} aria-hidden='true'>
|
||||
<i className='far fa-flag' />
|
||||
신고하기
|
||||
</a>
|
||||
</div>
|
||||
<Modal header={user.id === data.id ? '자기 자신은 신고할 수 없습니다.' : `${data.username}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
|
||||
setReportModal(false)
|
||||
setReportRes(null)
|
||||
}} full dark={theme === 'dark'}>
|
||||
{
|
||||
user.id === data.id ? <div className='text-center py-20'>
|
||||
<h2 className='text-xl font-semibold'>
|
||||
" 현명한 조언을 해주는 것은 자기 이외에는 없다. "
|
||||
</h2>
|
||||
</div> :
|
||||
reportRes?.code === 200 ? <Message type='success'>
|
||||
<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
|
||||
<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
|
||||
</Message> : <Formik onSubmit={async (body) => {
|
||||
const res = await Fetch<null>(`/users/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
|
||||
setReportRes(res)
|
||||
}} validationSchema={ReportSchema} initialValues={{
|
||||
category: null,
|
||||
description: '',
|
||||
_csrf: csrfToken
|
||||
}}>
|
||||
{
|
||||
({ errors, touched, values, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className='mb-5'>
|
||||
{
|
||||
reportRes && <div className='my-5'>
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
|
||||
<ul className='list-disc'>
|
||||
{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
}
|
||||
<h3 className='font-bold'>신고 구분</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
|
||||
{
|
||||
reportCats.map(el =>
|
||||
<div key={el}>
|
||||
<label>
|
||||
<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
|
||||
{el}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
|
||||
<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
|
||||
<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
}
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<h2 className='mt-8 text-3xl font-bold'>제작한 봇</h2>
|
||||
|
||||
{data.bots.length === 0 ? <h2 className='text-xl'>소유한 봇이 없습니다.</h2> :
|
||||
<ResponsiveGrid>
|
||||
{
|
||||
(data.bots as Bot[]).map((bot: Bot) => (
|
||||
<BotCard key={bot.id} bot={bot} />
|
||||
))
|
||||
}
|
||||
</ResponsiveGrid>
|
||||
}
|
||||
|
||||
<Advertisement />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (ctx: Context) => {
|
||||
const parsed = parseCookie(ctx.req)
|
||||
|
||||
const user = await get.Authorization(parsed?.token) || ''
|
||||
const data = await get.user.load(ctx.query.id)
|
||||
return { props: { user: await get.user.load(user) || {}, data, date: SnowflakeUtil.deconstruct(data?.id ?? '0')?.date?.toJSON(), csrfToken: getToken(ctx.req, ctx.res) } }
|
||||
}
|
||||
|
||||
interface UserProps {
|
||||
user: User
|
||||
data: User
|
||||
csrfToken: string
|
||||
theme: Theme
|
||||
}
|
||||
|
||||
interface Context extends NextPageContext {
|
||||
query: URLQuery
|
||||
}
|
||||
|
||||
interface URLQuery extends ParsedUrlQuery {
|
||||
id: string
|
||||
}
|
||||
|
||||
export default Users
|
||||
145
pages/users/[id]/index.tsx
Normal file
145
pages/users/[id]/index.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
|
||||
import { NextPage, NextPageContext } from 'next'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { SnowflakeUtil } from 'discord.js'
|
||||
import { ParsedUrlQuery } from 'querystring'
|
||||
import { josa } from 'josa'
|
||||
|
||||
import { Bot, User, Theme } from '@types'
|
||||
import { get } from '@utils/Query'
|
||||
import { checkUserFlag, parseCookie } from '@utils/Tools'
|
||||
import { getToken } from '@utils/Csrf'
|
||||
|
||||
import NotFound from '../../404'
|
||||
import { KoreanbotsEndPoints } from '@utils/Constants'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const Container = dynamic(() => import('@components/Container'))
|
||||
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
|
||||
const Divider = dynamic(() => import('@components/Divider'))
|
||||
const BotCard = dynamic(() => import('@components/BotCard'))
|
||||
const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
|
||||
const Tag = dynamic(() => import('@components/Tag'))
|
||||
const Advertisement = dynamic(() => import('@components/Advertisement'))
|
||||
const Tooltip = dynamic(() => import('@components/Tooltip'))
|
||||
|
||||
const Users: NextPage<UserProps> = ({ user, data }) => {
|
||||
const router = useRouter()
|
||||
if (!data?.id) return <NotFound />
|
||||
return (
|
||||
<Container paddingTop className='py-10'>
|
||||
<NextSeo
|
||||
title={data.username}
|
||||
description={data.bots.length === 0 ? `${data.username}님의 프로필입니다.` : josa(
|
||||
`${(data.bots as Bot[])
|
||||
.slice(0, 5)
|
||||
.map(el => el.name)
|
||||
.join(', ')}#{을} 제작합니다.`
|
||||
)}
|
||||
openGraph={{
|
||||
images: [{
|
||||
url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
|
||||
width: 256,
|
||||
height: 256,
|
||||
alt: 'User Avatar'
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
<div className='lg:flex'>
|
||||
<div className='w-3/5 mx-auto text-center lg:w-1/6'>
|
||||
<DiscordAvatar
|
||||
size={512}
|
||||
userID={data.id}
|
||||
className='w-full'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-grow px-5 py-10 w-full text-center lg:w-5/12 lg:text-left'>
|
||||
<div>
|
||||
<div className='lg:flex mt-3 mb-1 '>
|
||||
<h1 className='text-4xl font-bold'>{data.username}</h1>
|
||||
<span className='ml-0.5 text-gray-400 text-3xl font-semibold mt-1'>#{data.tag}</span>
|
||||
</div>
|
||||
<div className='badges flex mb-2 justify-center lg:justify-start'>
|
||||
{checkUserFlag(data.flags, 'staff') && (
|
||||
<Tooltip text='한국 디스코드봇 리스트 스탭입니다.' direction='left'>
|
||||
<div className='pr-5 text-koreanbots-blue text-2xl'>
|
||||
<i className='fas fa-hammer' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{checkUserFlag(data.flags, 'bughunter') && (
|
||||
<Tooltip text='버그를 많이 제보해주신 분입니다.' direction='left'>
|
||||
<div className='pr-5 text-green-500 text-2xl'>
|
||||
<i className='fas fa-bug' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
{data.github && (
|
||||
<Tag
|
||||
newTab
|
||||
text={
|
||||
<>
|
||||
<i className='fab fa-github' /> {data.github}
|
||||
</>
|
||||
}
|
||||
github
|
||||
href={`https://github.com/${data.github}`}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
user?.id !== data.id && <div className='list-none mt-2'>
|
||||
<Link href={`/users/${router.query.id}/report`}>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' aria-hidden='true'>
|
||||
<i className='far fa-flag' /> 신고하기
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<h2 className='mt-8 text-3xl font-bold'>제작한 봇</h2>
|
||||
|
||||
{data.bots.length === 0 ? <h2 className='text-xl'>소유한 봇이 없습니다.</h2> :
|
||||
<ResponsiveGrid>
|
||||
{
|
||||
(data.bots as Bot[]).map((bot: Bot) => (
|
||||
<BotCard key={bot.id} bot={bot} />
|
||||
))
|
||||
}
|
||||
</ResponsiveGrid>
|
||||
}
|
||||
|
||||
<Advertisement />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (ctx: Context) => {
|
||||
const parsed = parseCookie(ctx.req)
|
||||
|
||||
const user = await get.Authorization(parsed?.token) || ''
|
||||
const data = await get.user.load(ctx.query.id)
|
||||
return { props: { user: await get.user.load(user) || {}, data, date: SnowflakeUtil.deconstruct(data?.id ?? '0')?.date?.toJSON(), csrfToken: getToken(ctx.req, ctx.res) } }
|
||||
}
|
||||
|
||||
interface UserProps {
|
||||
user: User
|
||||
data: User
|
||||
csrfToken: string
|
||||
theme: Theme
|
||||
}
|
||||
|
||||
interface Context extends NextPageContext {
|
||||
query: URLQuery
|
||||
}
|
||||
|
||||
interface URLQuery extends ParsedUrlQuery {
|
||||
id: string
|
||||
}
|
||||
|
||||
export default Users
|
||||
143
pages/users/[id]/report.tsx
Normal file
143
pages/users/[id]/report.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import { NextPage } from 'next'
|
||||
import Link from 'next/link'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { Field, Form, Formik } from 'formik'
|
||||
|
||||
import { CsrfContext, ResponseProps, User } from '@types'
|
||||
import { get } from '@utils/Query'
|
||||
import { makeUserURL, parseCookie } from '@utils/Tools'
|
||||
|
||||
import { ParsedUrlQuery } from 'querystring'
|
||||
|
||||
import NotFound from 'pages/404'
|
||||
import { getToken } from '@utils/Csrf'
|
||||
import { DMCA, TextField } from '@components/ReportTemplate'
|
||||
import { useState } from 'react'
|
||||
import Fetch from '@utils/Fetch'
|
||||
import { ReportSchema } from '@utils/Yup'
|
||||
import { getJosaPicker } from 'josa'
|
||||
import { reportCats } from '@utils/Constants'
|
||||
import { NextSeo } from 'next-seo'
|
||||
|
||||
|
||||
const Container = dynamic(() => import('@components/Container'))
|
||||
const Message = dynamic(() => import('@components/Message'))
|
||||
const Login = dynamic(() => import('@components/Login'))
|
||||
|
||||
const ReportUser: NextPage<ReportUserProps> = ({ data, user, csrfToken }) => {
|
||||
const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
|
||||
if(!data?.id) return <NotFound />
|
||||
if(!user) return <Login>
|
||||
<NextSeo title='신고하기' />
|
||||
</Login>
|
||||
if(user?.id === data.id) return <>
|
||||
<div className='flex items-center justify-center h-screen select-none'>
|
||||
<div className='container mx-auto px-20 md:text-left text-center'>
|
||||
<h1 className='text-6xl font-semibold'>저런..!</h1>
|
||||
<p className='text-gray-400 text-lg mt-2'>유감스럽게도 자기 자신은 신고할 수 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
return <Container paddingTop className='py-10'>
|
||||
<NextSeo title={`${data.username} 신고하기`} />
|
||||
<Link href={makeUserURL(data)}>
|
||||
<a className='text-blue-500 hover:opacity-80'><i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.username}</strong>{getJosaPicker('로')(data.username)} 돌아가기</a>
|
||||
</Link>
|
||||
{
|
||||
reportRes?.code === 200 ? <Message type='success'>
|
||||
<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
|
||||
<p>더 자세한 설명이 필요할 수 있습니다. <strong>반드시 <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요!!</strong></p>
|
||||
</Message> : <Formik onSubmit={async (body) => {
|
||||
const res = await Fetch(`/users/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
|
||||
setReportRes(res)
|
||||
}} validationSchema={ReportSchema} initialValues={{
|
||||
category: null,
|
||||
description: '',
|
||||
_csrf: csrfToken
|
||||
}}>
|
||||
{
|
||||
({ errors, touched, values, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className='mb-5'>
|
||||
{
|
||||
reportRes && <div className='my-5'>
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
|
||||
<ul className='list-disc'>
|
||||
{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
}
|
||||
<h3 className='font-bold'>신고 구분</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
|
||||
{
|
||||
reportCats.map(el =>
|
||||
<div key={el}>
|
||||
<label>
|
||||
<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
|
||||
{el}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
|
||||
{
|
||||
values.category && <>
|
||||
{
|
||||
values.category === '오픈소스 라이선스, 저작권 위반 등 권리 침해' ? <DMCA values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} /> :
|
||||
values.category === '괴롭힘, 모욕, 명예훼손' ? <>
|
||||
<Message type='info'>
|
||||
<h3 className='font-bold text-xl'>본인 혹은 다른 사람이 위험에 처해 있나요?</h3>
|
||||
<p>당신은 소중한 사람입니다.</p>
|
||||
<p className='list-disc list-item list-inside'>자살예방상담전화 1393 | 청소년전화 1388</p>
|
||||
</Message>
|
||||
</> : ''
|
||||
}
|
||||
{
|
||||
!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && <>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>최대한 자세하게 기재해주세요.</p>
|
||||
<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
}
|
||||
</Container>
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (ctx: Context) => {
|
||||
const parsed = parseCookie(ctx.req)
|
||||
const data = await get.user.load(ctx.query.id)
|
||||
const user = await get.Authorization(parsed?.token)
|
||||
|
||||
return {
|
||||
props: {
|
||||
csrfToken: getToken(ctx.req, ctx.res),
|
||||
data,
|
||||
user: await get.user.load(user || '')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
interface ReportUserProps {
|
||||
csrfToken: string
|
||||
data: User
|
||||
user: User
|
||||
}
|
||||
|
||||
interface Context extends CsrfContext {
|
||||
query: URLQuery
|
||||
}
|
||||
|
||||
interface URLQuery extends ParsedUrlQuery {
|
||||
id: string
|
||||
}
|
||||
|
||||
export default ReportUser
|
||||
@ -204,13 +204,13 @@ export type Category =
|
||||
| '검색'
|
||||
|
||||
export type ReportCategory =
|
||||
| '불법'
|
||||
| '위법'
|
||||
| '봇을 이용한 테러'
|
||||
| '괴롭힘, 모욕, 명예훼손'
|
||||
| '스팸, 도배, 의미없는 텍스트'
|
||||
| '폭력, 자해, 테러 옹호하거나 조장하는 컨텐츠'
|
||||
| '라이선스혹은 권리 침해'
|
||||
| 'Discord ToS 위반'
|
||||
| 'Koreanbots 가이드라인 위반'
|
||||
| '오픈소스 라이선스, 저작권 위반 등 권리 침해'
|
||||
| 'Discord ToS를 위반하거나 한국 디스코드봇 리스트 가이드라인 위반'
|
||||
| '기타'
|
||||
|
||||
export type ListType = 'VOTE' | 'TRUSTED' | 'NEW' | 'PARTNERED' | 'CATEGORY' | 'SEARCH'
|
||||
|
||||
@ -120,13 +120,13 @@ export const categoryIcon = {
|
||||
}
|
||||
|
||||
export const reportCats = [
|
||||
'불법',
|
||||
'위법',
|
||||
'봇을 이용한 테러',
|
||||
'괴롭힘, 모욕, 명예훼손',
|
||||
'스팸, 도배, 의미없는 텍스트',
|
||||
'폭력, 자해, 테러 옹호하거나 조장하는 컨텐츠',
|
||||
'라이선스혹은 권리 침해',
|
||||
'Discord ToS 위반',
|
||||
'Koreanbots 가이드라인 위반',
|
||||
'오픈소스 라이선스, 저작권 위반 등 권리 침해',
|
||||
'Discord ToS를 위반하거나 한국 디스코드봇 리스트 가이드라인 위반',
|
||||
'기타',
|
||||
]
|
||||
|
||||
|
||||
@ -51,10 +51,13 @@ export function makeImageURL(root:string, { format='png', size=256 }:ImageOption
|
||||
return `${root}.${format}?size=${size}`
|
||||
}
|
||||
|
||||
export function makeBotURL({id, vanity, flags=0}: { flags?: number, vanity?:string, id: string }): string {
|
||||
export function makeBotURL({ id, vanity, flags=0 }: { flags?: number, vanity?:string, id: string }): string {
|
||||
return `/bots/${(checkBotFlag(flags, 'trusted') || checkBotFlag(flags, 'partnered')) && vanity ? vanity : id}`
|
||||
}
|
||||
|
||||
export function makeUserURL({ id }: { id: string }): string {
|
||||
return `/users/${id}`
|
||||
}
|
||||
export function serialize<T>(data: T): T {
|
||||
return JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user