Implement rudimentary Bahamut Mode (#381)

Bahamut Mode lets me make sure people aren't doing naughty things behind
closed doors.

components/Header/index.module.scss

@@ -1,3 +1,14 @@
+.bahamut {
+  background: #2b4683;
+  color: white;
+  text-align: center;
+  font-weight: $bold;
+  padding: $unit;
+  border-radius: $full-corner;
+  margin-bottom: $unit;
+  width: 100%;
+}
+
 .header {
   display: flex;
   flex-direction: row;

components/Header/index.tsx

@@ -172,6 +172,12 @@ const Header = () => {
           gender={accountState.account.user.gender}
           language={accountState.account.user.language}
           theme={accountState.account.user.theme}
+          role={accountState.account.user.role}
+          bahamutMode={
+            accountState.account.user.role === 9
+              ? accountState.account.user.bahamut
+              : false
+          }
           onOpenChange={setSettingsModalOpen}
         />
       )}
@@ -375,14 +381,19 @@ const Header = () => {
   )
 
   return (
-    <nav className={styles.header}>
-      {left}
-      {right}
-      {logoutConfirmationAlert}
-      {settingsModal}
-      {loginModal}
-      {signupModal}
-    </nav>
+    <>
+      {accountState.account.user?.bahamut && (
+        <div className={styles.bahamut}>Bahamut Mode is active</div>
+      )}
+      <nav className={styles.header}>
+        {left}
+        {right}
+        {logoutConfirmationAlert}
+        {settingsModal}
+        {loginModal}
+        {signupModal}
+      </nav>
+    </>
   )
 }
 

components/auth/AccountModal/index.tsx

@@ -18,6 +18,7 @@ import { accountState } from '~utils/accountState'
 import { pictureData } from '~utils/pictureData'
 
 import styles from './index.module.scss'
+import SwitchTableField from '~components/common/SwitchTableField'
 
 interface Props {
   open: boolean
@@ -27,6 +28,8 @@ interface Props {
   language?: string
   theme?: string
   private?: boolean
+  role?: number
+  bahamutMode?: boolean
   onOpenChange?: (open: boolean) => void
 }
 
@@ -53,6 +56,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
     const [language, setLanguage] = useState(props.language || '')
     const [gender, setGender] = useState(props.gender || 0)
     const [theme, setTheme] = useState(props.theme || 'system')
+    const [bahamutMode, setBahamutMode] = useState(props.bahamutMode || false)
 
     // Setup
     const [pictureOpen, setPictureOpen] = useState(false)
@@ -135,6 +139,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
               gender: user.gender,
               language: user.language,
               theme: user.theme,
+              bahamut: bahamutMode,
             }
 
             const expiresAt = new Date()
@@ -145,6 +150,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
               id: user.id,
               username: user.username,
               granblueId: '',
+              role: user.role,
               avatar: {
                 picture: user.avatar.picture,
                 element: user.avatar.element,
@@ -152,11 +158,13 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
               language: user.language,
               theme: user.theme,
               gender: user.gender,
+              bahamut: bahamutMode,
             }
 
             setOpen(false)
             if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
+            if (props.bahamutMode != bahamutMode) router.reload()
           })
       }
     }
@@ -265,6 +273,15 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
       </SelectTableField>
     )
 
+    const adminField = () => (
+      <SwitchTableField
+        name="admin"
+        label={t('modals.settings.labels.admin')}
+        value={props.bahamutMode}
+        onValueChange={(value: boolean) => setBahamutMode(value)}
+      />
+    )
+
     useEffect(() => {
       setMounted(true)
     }, [])
@@ -293,6 +310,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
               {genderField()}
               {languageField()}
               {themeField()}
+              {props.role === 9 && adminField()}
             </div>
 
             <DialogFooter

components/auth/LoginModal/index.tsx

@@ -17,6 +17,7 @@ import DialogFooter from '~components/common/DialogFooter'
 import DialogContent from '~components/common/DialogContent'
 
 import styles from './index.module.scss'
+import { userAgent } from 'next/server'
 
 interface ErrorMap {
   [index: string]: string
@@ -140,6 +141,7 @@ const LoginModal = (props: Props) => {
     const cookieObj: AccountCookie = {
       userId: resp.user.id,
       username: resp.user.username,
+      role: resp.user.role,
       token: resp.access_token,
     }
 
@@ -169,6 +171,7 @@ const LoginModal = (props: Props) => {
         language: user.language,
         gender: user.gender,
         theme: user.theme,
+        bahamut: false,
       },
       { path: '/', expires: expiresAt }
     )
@@ -178,6 +181,7 @@ const LoginModal = (props: Props) => {
       id: user.id,
       username: user.username,
       granblueId: '',
+      role: user.role,
       avatar: {
         picture: user.avatar.picture,
         element: user.avatar.element,
@@ -185,6 +189,7 @@ const LoginModal = (props: Props) => {
       gender: user.gender,
       language: user.language,
       theme: user.theme,
+      bahamut: false,
     }
 
     console.log('Authorizing account...')

components/auth/SignupModal/index.tsx

@@ -97,6 +97,7 @@ const SignupModal = (props: Props) => {
     const cookieObj: AccountCookie = {
       userId: resp.id,
       username: resp.username,
+      role: resp.role,
       token: resp.token,
     }
 
@@ -130,6 +131,7 @@ const SignupModal = (props: Props) => {
         language: user.language,
         gender: user.gender,
         theme: user.theme,
+        bahamut: false,
       },
       { path: '/', expires: expiresAt }
     )
@@ -139,6 +141,7 @@ const SignupModal = (props: Props) => {
       id: user.id,
       username: user.username,
       granblueId: '',
+      role: user.role,
       avatar: {
         picture: user.avatar.picture,
         element: user.avatar.element,
@@ -146,6 +149,7 @@ const SignupModal = (props: Props) => {
       gender: user.gender,
       language: user.language,
       theme: user.theme,
+      bahamut: false,
     }
 
     console.log('Authorizing account...')

pages/_app.tsx

@@ -65,11 +65,11 @@ function MyApp({ Component, pageProps }: AppProps) {
     setHeaders()
     if (cookieData.account && cookieData.account.token) {
       console.log(`Logged in as user "${cookieData.account.username}"`)
-
       accountState.account.authorized = true
       accountState.account.user = {
         id: cookieData.account.userId,
         username: cookieData.account.username,
+        role: cookieData.account.role,
         granblueId: '',
         avatar: {
           picture: cookieData.user.avatar.picture,
@@ -78,6 +78,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         gender: cookieData.user.gender,
         language: cookieData.user.language,
         theme: cookieData.user.theme,
+        bahamut: cookieData.user.bahamut,
       }
     } else {
       console.log(`You are not currently logged in.`)
@@ -101,6 +102,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
       const cookieObj = {
         userId: localUserId,
+        role: 1,
         username: undefined,
         token: undefined,
       }

public/locales/en/common.json

@@ -120,7 +120,10 @@
     "validation": {
       "guidebooks": "You cannot equip more than one of each Sephira Guidebook"
     },
-    "unauthorized": "You don't have permission to perform that action"
+    "unauthorized": {
+      "title": "Unauthorized",
+      "description": "You don't have permission to perform that action"
+    }
   },
   "filters": {
     "name": "Filter",
@@ -349,7 +352,8 @@
         "language": "Language",
         "gender": "Main Character",
         "private": "Private",
-        "theme": "Theme"
+        "theme": "Theme",
+        "admin": "Bahamut Mode"
       },
       "descriptions": {
         "picture": "Displayed next to your name",

public/locales/ja/common.json

@@ -120,7 +120,10 @@
     "validation": {
       "guidebooks": "セフィラ導本を複数個装備することはできません"
     },
-    "unauthorized": "行ったアクションを実行する権限がありません"
+    "unauthorized": {
+      "title": "権限がありません",
+      "description": "行ったアクションを実行する権限がありません"
+    }
   },
   "filters": {
     "name": "フィルター",
@@ -348,7 +351,8 @@
         "language": "言語",
         "gender": "主人公",
         "private": "プライベート",
-        "theme": "表示"
+        "theme": "表示",
+        "admin": "バハムートモード"
       },
       "descriptions": {
         "picture": "名前の隣に表示する",

types/AccountCookie.d.ts

@@ -2,4 +2,5 @@ interface AccountCookie {
   userId: string
   username: string
   token: string
+  role: number
 }

types/User.d.ts

@@ -7,4 +7,5 @@ interface User {
     element: string
   }
   gender: number
+  role: number
 }

utils/accountState.tsx

@@ -4,6 +4,7 @@ export type UserState = {
   id: string
   granblueId: string
   username: string
+  role: number
   avatar: {
     picture: string
     element: string
@@ -11,6 +12,7 @@ export type UserState = {
   gender: number
   language: string
   theme: string
+  bahamut: boolean
 }
 
 interface AccountState {

utils/localId.tsx

@@ -1,4 +1,4 @@
-import { accountCookie } from './userToken'
+import { retrieveCookie } from './userToken'
 import { v4 as uuidv4 } from 'uuid'
 import { setCookie } from 'cookies-next'
 import type { NextApiRequest, NextApiResponse } from 'next'
@@ -8,7 +8,7 @@ export const createLocalId = (
   res: NextApiResponse | undefined = undefined
 ) => {
   // If there is no account entry in cookies, create a UUID and store it
-  if (!accountCookie(req, res)) {
+  if (!retrieveCookie('account', req, res)) {
     const uuid = uuidv4()
     const expiresAt = new Date()
     expiresAt.setDate(expiresAt.getDate() + 60)
@@ -16,6 +16,7 @@ export const createLocalId = (
     const cookieObj = {
       userId: uuid,
       username: undefined,
+      role: 1,
       token: undefined,
     }
 
@@ -31,7 +32,7 @@ export const createLocalId = (
 }
 
 export const getLocalId = () => {
-  const cookie = accountCookie()
+  const cookie = retrieveCookie('account')
   if (cookie) {
     const parsed = JSON.parse(cookie as string)
     if (parsed && !parsed.token)

utils/userToken.tsx

@@ -3,12 +3,13 @@ import ls, { get, set } from 'local-storage'
 import { getCookie } from 'cookies-next'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-export const accountCookie = (
+export const retrieveCookie = (
+  name: string,
   req: NextApiRequest | undefined = undefined,
   res: NextApiResponse | undefined = undefined
 ) => {
   const options = req && res ? { req, res } : {}
-  const cookie = getCookie('account', options)
+  const cookie = getCookie(name, options)
   return cookie ? cookie : undefined
 }
 
@@ -16,13 +17,24 @@ export const setHeaders = (
   req: NextApiRequest | undefined = undefined,
   res: NextApiResponse | undefined = undefined
 ) => {
-  const cookie = accountCookie(req, res)
-  if (cookie) {
-    const parsed = JSON.parse(cookie as string)
-    if (parsed.token)
-      axios.defaults.headers.common['Authorization'] = `Bearer ${parsed.token}`
+  const accountCookie = retrieveCookie('account', req, res)
+  const userCookie = retrieveCookie('user', req, res)
+
+  if (accountCookie && userCookie) {
+    const account = JSON.parse(accountCookie as string)
+    const user = JSON.parse(userCookie as string)
+
+    if (account.token)
+      axios.defaults.headers.common['Authorization'] = `Bearer ${account.token}`
+
+    if (account.role === 9 && user.bahamut)
+      axios.defaults.headers.common['X-Admin-Mode'] = 'true'
+    else {
+      delete axios.defaults.headers.common['X-Admin-Mode']
+    }
   } else {
     delete axios.defaults.headers.common['Authorization']
+    delete axios.defaults.headers.common['X-Admin-Mode']
   }
 }