mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
196 lines
9.2 KiB
TypeScript
196 lines
9.2 KiB
TypeScript
import { NextPage, NextPageContext } from 'next'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import dynamic from 'next/dynamic'
|
|
import { NextSeo } from 'next-seo'
|
|
import { Form, Formik } from 'formik'
|
|
import { ParsedUrlQuery } from 'querystring'
|
|
import { getJosaPicker } from 'josa'
|
|
|
|
import { get } from '@utils/Query'
|
|
import { checkUserFlag, cleanObject, getRandom, makeServerURL, parseCookie, redirectTo } from '@utils/Tools'
|
|
import { ManageServer, ManageServerSchema } from '@utils/Yup'
|
|
import { serverCategories, ServerIntroList } from '@utils/Constants'
|
|
import { Server, Theme, User } from '@types'
|
|
import { getToken } from '@utils/Csrf'
|
|
import Fetch from '@utils/Fetch'
|
|
|
|
import NotFound from 'pages/404'
|
|
|
|
const Label = dynamic(() => import('@components/Form/Label'))
|
|
const Input = dynamic(() => import('@components/Form/Input'))
|
|
const Divider = dynamic(() => import('@components/Divider'))
|
|
const Redirect = dynamic(() => import('@components/Redirect'))
|
|
const TextArea = dynamic(() => import('@components/Form/TextArea'))
|
|
const Segment = dynamic(() => import('@components/Segment'))
|
|
const Markdown = dynamic(() => import('@components/Markdown'))
|
|
const Selects = dynamic(() => import('@components/Form/Selects'))
|
|
const Button = dynamic(() => import('@components/Button'))
|
|
const Container = dynamic(() => import('@components/Container'))
|
|
const ServerIcon = dynamic(() => import('@components/ServerIcon'))
|
|
const Message = dynamic(() => import('@components/Message'))
|
|
const Modal = dynamic(() => import('@components/Modal'))
|
|
const Captcha = dynamic(() => import('@components/Captcha'))
|
|
const Login = dynamic(() => import('@components/Login'))
|
|
const Forbidden = dynamic(() => import('@components/Forbidden'))
|
|
|
|
const ManageServerPage:NextPage<ManageServerProps> = ({ server, user, owners, csrfToken, theme }) => {
|
|
const [ data, setData ] = useState(null)
|
|
const [ deleteModal, setDeleteModal ] = useState(false)
|
|
const router = useRouter()
|
|
|
|
async function submitServer(value: ManageServer) {
|
|
const res = await Fetch(`/servers/${server.id}`, { method: 'PATCH', body: JSON.stringify(cleanObject<ManageServer>(value)) })
|
|
setData(res)
|
|
}
|
|
|
|
if(!server) return <NotFound />
|
|
if(!user) return <Login>
|
|
<NextSeo title='서버 정보 수정하기' description='서버의 정보를 수정합니다.'/>
|
|
</Login>
|
|
if(!(owners as User[]).find(el => el.id === user.id) && !checkUserFlag(user.flags, 'staff')) return <Forbidden />
|
|
return <Container paddingTop className='pt-5 pb-10'>
|
|
<NextSeo title={`${server.name} 수정하기`} description='서버의 정보를 수정합니다.'/>
|
|
<h1 className='text-3xl font-bold mb-8'>서버 관리하기</h1>
|
|
<Formik initialValues={cleanObject({
|
|
invite: server.invite,
|
|
intro: server.intro,
|
|
desc: server.desc,
|
|
category: server.category,
|
|
_csrf: csrfToken
|
|
})}
|
|
validationSchema={ManageServerSchema}
|
|
onSubmit={submitServer}>
|
|
{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
|
|
<Form>
|
|
<div className='md:flex text-center md:text-left'>
|
|
<ServerIcon id={server.id} className='md:mx-1 mx-auto rounded-full'/>
|
|
<div className='md:w-2/3 px-8 py-6'>
|
|
<h1 className='text-3xl font-bold'>{server.name}</h1>
|
|
<h2>ID: {server.id}</h2>
|
|
</div>
|
|
</div>
|
|
{
|
|
data ? data.code === 200 ? <div className='mt-4'>
|
|
<Redirect to={makeServerURL(server)}>
|
|
<Message type='success'>
|
|
<h2 className='text-lg font-black'>정보를 저장했습니다.</h2>
|
|
<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
|
|
</Message>
|
|
</Redirect>
|
|
</div> : <div className='mt-4'>
|
|
<Message type='error'>
|
|
<h2 className='text-lg font-black'>{data.message || '오류가 발생했습니다.'}</h2>
|
|
<ul className='list-disc list-inside'>
|
|
{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
|
</ul>
|
|
</Message>
|
|
</div> : ''
|
|
}
|
|
<Label For='category' label='카테고리' labelDesc='서버에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category as string : null}>
|
|
<Selects options={serverCategories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
|
|
setFieldValue('category', value.map(v=> v.value))
|
|
}} handleTouch={() => setFieldTouched('category', true)} values={values.category as string[]} setValues={(value) => setFieldValue('category', value)} />
|
|
<span className='text-gray-400 mt-1 text-sm'>서버 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요. <strong>반드시 해당되는 카테고리만 선택해주세요.</strong></span>
|
|
</Label>
|
|
<Label For='invite' label='서버 초대코드' labelDesc='서버의 초대코드를 입력해주세요. (만료되지 않는 코드로 입력해주세요!)' error={errors.invite && touched.invite ? errors.invite : null} short required>
|
|
<div className='flex items-center'>
|
|
discord.gg/<Input name='invite' placeholder='JEh53MQ' />
|
|
</div>
|
|
</Label>
|
|
<Divider />
|
|
<Label For='intro' label='서버 소개' labelDesc='서버를 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)' error={errors.intro && touched.intro ? errors.intro : null} required>
|
|
<Input name='intro' placeholder={getRandom(ServerIntroList)} />
|
|
</Label>
|
|
<Label For='desc' label='서버 설명' labelDesc={<>서버를 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
|
|
<TextArea max={1500} name='desc' placeholder='서버에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
|
|
</Label>
|
|
<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다.'>
|
|
<Segment>
|
|
<Markdown text={values.desc} />
|
|
</Segment>
|
|
</Label>
|
|
<Divider />
|
|
<p className='text-base mt-2 mb-5'>
|
|
<span className='text-red-500 font-semibold'> *</span> = 필수 항목
|
|
</p>
|
|
<Button type='submit' onClick={() => window.scrollTo({ top: 0 })}>
|
|
<>
|
|
<i className='far fa-save'/> 저장
|
|
</>
|
|
</Button>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
{
|
|
(checkUserFlag(user.flags, 'staff') || server.owner?.id === user.id) && <div className='py-4'>
|
|
<Divider />
|
|
<h2 className='text-2xl font-semibold pb-2'>위험구역</h2>
|
|
<p className='text-gray-400 mb-3'>관리자 추가나 소유권 이전은 웹사이트에서 진행하실 수 없습니다. 디스코드 서버 내에서 "관리자" 권한을 부여하시거나 서버의 소유권을 이전하시면 됩니다.</p>
|
|
<Segment>
|
|
<div className='lg:flex items-center'>
|
|
<div className='flex-grow py-1'>
|
|
<h3 className='text-lg font-semibold'>서버 삭제하기</h3>
|
|
<p className='text-gray-400'>서버를 삭제하게 되면 되돌릴 수 없습니다.</p>
|
|
</div>
|
|
|
|
<Button onClick={() => setDeleteModal(true)} className='h-10 bg-red-500 hover:opacity-80 text-white lg:w-1/8'><i className='fas fa-trash' /> 서버 삭제하기</Button>
|
|
<Modal full header={`${server.name} 삭제하기`} isOpen={deleteModal} dark={theme === 'dark'} onClose={() => setDeleteModal(false)} closeIcon>
|
|
<Formik initialValues={{ name: '', _captcha: '', _csrf: csrfToken }} onSubmit={async (v) => {
|
|
const res = await Fetch(`/servers/${server.id}`, { method: 'DELETE', body: JSON.stringify(v) })
|
|
if(res.code === 200) {
|
|
alert('성공적으로 삭제하였습니다.')
|
|
redirectTo(router, '/')
|
|
}
|
|
else alert(res.message)
|
|
}}>
|
|
{
|
|
({ values, setFieldValue }) => <Form>
|
|
<Message type='warning'>
|
|
<p>서버를 삭제하게 되면 되돌릴 수 없습니다.<br/>하트 수를 포함한 모든 서버 정보가 영구적으로 삭제됩니다.</p>
|
|
<p>계속 하시려면 서버의 이름 <strong>{server.name}</strong>{getJosaPicker('을')(server.name)} 입력해주세요.</p>
|
|
</Message>
|
|
<div className='py-4'>
|
|
<Input name='name' placeholder={server.name} />
|
|
</div>
|
|
<Captcha dark={theme === 'dark'} onVerify={(k) => setFieldValue('_captcha', k)} />
|
|
<Button disabled={values.name !== server.name || !values._captcha} className={`mt-4 bg-red-500 text-white ${values.name !== server.name || !values._captcha ? 'opacity-80' : 'hover:opacity-80'}`} type='submit'><i className='fas fa-trash' /> 삭제</Button>
|
|
</Form>
|
|
}
|
|
</Formik>
|
|
</Modal>
|
|
</div>
|
|
</Segment>
|
|
</div>
|
|
}
|
|
</Container>
|
|
}
|
|
|
|
export const getServerSideProps = async (ctx: Context) => {
|
|
const parsed = parseCookie(ctx.req)
|
|
const user = await get.Authorization(parsed?.token)
|
|
return { props: {
|
|
server: await get.server.load(ctx.query.id),
|
|
user: await get.user.load(user || ''),
|
|
owners: await get.serverOwners(ctx.query.id),
|
|
csrfToken: getToken(ctx.req, ctx.res)
|
|
} }
|
|
}
|
|
|
|
interface ManageServerProps {
|
|
server: Server
|
|
user: User
|
|
owners: User[]
|
|
csrfToken: string
|
|
theme: Theme
|
|
}
|
|
|
|
interface Context extends NextPageContext {
|
|
query: Query
|
|
}
|
|
|
|
interface Query extends ParsedUrlQuery {
|
|
id: string
|
|
}
|
|
|
|
export default ManageServerPage |