From 9963ca7b3a20433a9d2cab36a2fe9274366b2c08 Mon Sep 17 00:00:00 2001
From: Junseo Park <wonderlandpark@outlook.kr>
Date: Sat, 27 Feb 2021 19:47:29 +0900
Subject: [PATCH] feat: added csrfToken and token reset modal

---
 pages/developers/applications/bots/[id].tsx | 61 +++++++++++++++++----
 1 file changed, 50 insertions(+), 11 deletions(-)

diff --git a/pages/developers/applications/bots/[id].tsx b/pages/developers/applications/bots/[id].tsx
index f0a73e2..c4a3b0b 100644
--- a/pages/developers/applications/bots/[id].tsx
+++ b/pages/developers/applications/bots/[id].tsx
@@ -6,25 +6,40 @@ import { Form, Formik } from 'formik'
 import useCopyClipboard from 'react-use-clipboard'
 
 import { get } from '@utils/Query'
-import { DeveloperBotSchema } from '@utils/Yup'
-import { parseCookie, redirectTo } from '@utils/Tools'
+import { DeveloperBot, DeveloperBotSchema } from '@utils/Yup'
+import { cleanObject, parseCookie, redirectTo } from '@utils/Tools'
+import { getToken } from '@utils/Csrf'
+import Fetch from '@utils/Fetch'
 
 import { ParsedUrlQuery } from 'querystring'
-import { Bot, BotSpec } from '@types'
+import { Bot, BotSpec, ResponseProps, Theme } from '@types'
 
 import NotFound from 'pages/404'
 
 const Button = dynamic(() => import('@components/Button'))
+const Divider = dynamic(() => import('@components/Divider'))
 const Input = dynamic(() => import('@components/Form/Input'))
 const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
+const Message = dynamic(() => import('@components/Message'))
+const Modal = dynamic(() => import('@components/Modal'))
 
-const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot }) => {
+const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme, csrfToken }) => {
 	const router = useRouter()
+	const [ data, setData ] = useState<ResponseProps<unknown>>(null)
+	const [ modalOpened, setModalOpen ] = useState(false)
 	const [ showToken, setShowToken ] = useState(false)
 	const [ tokenCopied, setTokenCopied ] = useCopyClipboard(spec?.token, {
 		successDuration: 1000
 	})
+	async function updateApplication(d: DeveloperBot) {
+		const res = await Fetch(`/applications/bots/${bot.id}`, {
+			method: 'PATCH',
+			body: JSON.stringify(cleanObject(d))
+		})
+		setData(res)
+	}
+
 	if(!user) {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
@@ -33,25 +48,47 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot }) => {
 	if(!bot || !spec) return <NotFound />
 	return <DeveloperLayout enabled='applications'>
 		<h1 className='text-3xl font-bold'>봇 설정</h1>
-		<p className='text-gray-400'>한국 디스코드봇 리스트 API를 사용해보세요.</p>
+		<p className='text-gray-400'>한국 디스코드봇 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.</p>
 		<div className='lg:flex pt-6'>
 			<div className='w-1/5'>
 				<DiscordAvatar userID={bot.id} />
 			</div>
 			<div className='w-4/5 relative'>
-				<h2 className='text-2xl font-bold'>{bot.name}</h2>
+				{
+					!data ? '' : data.code === 200 ? 
+						<Message type='success'>
+							<h2 className='text-lg font-black'>수정 성공!</h2>
+							<p>봇 정보를 저장했습니다.</p>
+						</Message> : <Message type='error'>
+							<h2 className='text-lg font-black'>{data.message}</h2>
+							<ul className='list-disc list-inside'>
+								{
+									data.errors?.map((el, i)=> <li key={i}>{el}</li>)
+								}
+							</ul>
+						</Message>
+				}
+				<h2 className='text-3xl font-bold mb-2 mt-3'>{bot.name}#{bot.tag}</h2>
 				<div className='grid text-left'>
 					<h3 className='text-lg font-semibold'>봇 토큰</h3>
-					<pre className='text-sm overflow-x-scroll w-full'>{showToken ? spec.token : '*********'}</pre>
+					<pre className='text-sm overflow-x-scroll w-full'>{showToken ? spec.token : '******************'}</pre>
 					<div className='pt-3 pb-6'>
 						<Button onClick={() => setShowToken(!showToken)}>{showToken ? '숨기기' : '보기'}</Button>
 						<Button onClick={setTokenCopied} className={tokenCopied ? 'bg-green-400 text-white' : null}>{tokenCopied ? '복사됨' : '복사'}</Button>
-						<Button>재발급</Button>
+						<Button onClick={()=> setModalOpen(true)}>재발급</Button>
+						<Modal isOpen={modalOpened} onClose={() => setModalOpen(false)} dark={theme === 'dark'} header='정말로 토큰을 재발급하시겠습니까?'>
+							<p>기존에 사용중이시던 토큰은 더 이상 사용하실 수 없습니다</p>
+							<div className='text-right pt-6'>
+								<Button className='bg-gray-500 hover:opacity-90' onClick={()=> setModalOpen(false)}>취소</Button>
+								<Button>재발급</Button>
+							</div>
+						</Modal>
 					</div>
 					<Formik validationSchema={DeveloperBotSchema} initialValues={{
-						webhook: spec.webhook || ''
+						webhook: spec.webhook || '',
+						_csrf: csrfToken
 					}}
-					onSubmit={(d)=>console.log(d)}>
+					onSubmit={(data) => updateApplication(data)}>
 						{({ errors, touched }) => (
 							<Form>
 								<div className='mb-2'>
@@ -75,6 +112,8 @@ interface BotApplicationProps {
   user: string
   spec: BotSpec
 	bot: Bot
+	csrfToken: string
+	theme: Theme
 }
 
 export const getServerSideProps = async (ctx: Context) => {
@@ -82,7 +121,7 @@ export const getServerSideProps = async (ctx: Context) => {
 	const user = await get.Authorization(parsed?.token) || ''
   
 	return {
-		props: { user, spec: await get.botSpec(ctx.query.id, user), bot: await get.bot.load(ctx.query.id) }
+		props: { user, spec: await get.botSpec(ctx.query.id, user), bot: await get.bot.load(ctx.query.id), csrfToken: getToken(ctx.req, ctx.res) }
 	}
 }