From 82d8cddd4fd02fc13605a2c01cdc7ebc1106510a Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Wed, 31 Jul 2024 23:08:15 -0400
Subject: [PATCH 01/22] feat: Add donor features

---
 locales/en.json                             |  1 +
 prisma/schema.prisma                        |  3 +-
 src/components/account/DonorButton.jsx      | 43 ++++++++++++++++
 src/components/user/UserInformationCard.jsx |  3 ++
 src/pages/api/account/donor.js              | 54 +++++++++++++++++++++
 src/pages/user/[username]/index.jsx         |  1 +
 6 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/components/account/DonorButton.jsx
 create mode 100644 src/pages/api/account/donor.js

diff --git a/locales/en.json b/locales/en.json
index 68ea126..58e3c13 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -17,6 +17,7 @@
     "hidden": "Hidden",
     "administrator": "Administrator",
     "moderator": "Moderator",
+    "donor": "Donator",
     "play_log": "Play Log",
 
     "registered_on": "<strong>Registered</strong>",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index c99015a..7f36aa3 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -126,10 +126,11 @@ model user {
   created_at     DateTime        @default(dbgenerated("CURRENT_TIMESTAMP(3)"))
   updated_at     DateTime        @default(dbgenerated("CURRENT_TIMESTAMP(3)"))
   badge          String?         @db.VarChar(50)
+  language       String          @default("en") @db.VarChar(11)
   isBanned       Int             @default(0) @db.SmallInt
   isPublic       Int             @default(1) @db.SmallInt
   publicOverride Int?            @db.SmallInt
-  language       String          @default("en") @db.VarChar(11)
+  isDonor        Boolean         @default(false)
   accounts       accounts[]
   banned_user    banned_user[]
   game_sessions  game_sessions[]
diff --git a/src/components/account/DonorButton.jsx b/src/components/account/DonorButton.jsx
new file mode 100644
index 0000000..f205b72
--- /dev/null
+++ b/src/components/account/DonorButton.jsx
@@ -0,0 +1,43 @@
+import { React, useState } from 'react'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+import useInfo from '@/lib/swr-hooks/useInfo'
+import ConfirmationModal from '../shared/ConfirmationModal'
+import { Button, Form } from 'react-bootstrap'
+import PropTypes from 'prop-types'
+
+export default function DonorButton ({ isDonor, id }) {
+  const router = useRouter()
+  const { mutate } = useInfo()
+
+  const setDonor = async (status) => {
+    const response = await fetch('/api/account/donor', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        status,
+        user: id
+      })
+    })
+    if (response.status === 200) {
+      toast.success('The account has been set to donor.')
+      mutate()
+      router.reload()
+    } else {
+      toast.error('An error occured, please try again later.')
+    }
+  }
+
+  return (
+      <Button variant={isDonor ? 'danger' : 'primary'} onClick={() => setDonor(!isDonor)}>
+        {isDonor ? 'Remove Donor Status' : 'Set Donor'}
+      </Button>
+  )
+}
+
+DonorButton.propTypes = {
+  id: PropTypes.number.isRequired,
+  isDonor: PropTypes.bool.isRequired
+}
diff --git a/src/components/user/UserInformationCard.jsx b/src/components/user/UserInformationCard.jsx
index c6c34bb..6f6cd20 100644
--- a/src/components/user/UserInformationCard.jsx
+++ b/src/components/user/UserInformationCard.jsx
@@ -17,6 +17,7 @@ import BanAccountButton from '../account/BanAccountButton'
 import ForceHiddenAccountButton from '../account/ForceHiddenAccountButton'
 import LanguageContext from '../shared/LanguageContext'
 import LocalizedString from '../shared/LocalizedString'
+import DonorButton from '@/components/account/DonorButton'
 
 function UserInformationCard ({ user, isLoggedIn, isAdmin, isMod }) {
   return (
@@ -29,6 +30,7 @@ function UserInformationCard ({ user, isLoggedIn, isAdmin, isMod }) {
             {(user.publicOverride === 0 || (user.publicOverride === 1 && isMod)) && (<Badge bg='danger' className='mb-2'><LocalizedString string='hidden'/></Badge>)}
             {user.role === 'admin' && (<Badge bg='success' className='mb-2'><LocalizedString string='administrator'/></Badge>)}
             {user.role === 'mod' && (<Badge bg='success' className='mb-2'><LocalizedString string='moderator'/></Badge>)}
+            {user.isDonor === true && (<Badge bg='primary' className='mb-2'><LocalizedString string='donor'/></Badge>)}
             <ul className='list-unstyled m-0'>
               <li>
                 <LocalizedString string='display_name'/>: {user.display_name}
@@ -71,6 +73,7 @@ function UserInformationCard ({ user, isLoggedIn, isAdmin, isMod }) {
                     <InputGroup>
                       <BanAccountButton isBanned={user.isBanned} id={user.id} />
                       <ForceHiddenAccountButton isHidden={user.publicOverride != null} id={user.id} />
+                      <DonorButton isDonor={user.isDonor} id={user.id} />
                     </InputGroup>
                   </div>
                 )}
diff --git a/src/pages/api/account/donor.js b/src/pages/api/account/donor.js
new file mode 100644
index 0000000..02606a7
--- /dev/null
+++ b/src/pages/api/account/donor.js
@@ -0,0 +1,54 @@
+import HTTP_CODE from '@/lib/constants/httpStatusCodes'
+import { ncWithSession } from '@/lib/routing'
+import { userIsMod } from '@/lib/utils/databaseUtils'
+import prisma from '@/lib/db'
+import logger from '@/lib/logger'
+import { isBlank } from '@/lib/utils/utils'
+
+async function exportData (request, response) {
+  const loggedInUser = request.session?.username
+  const {
+    status,
+    user
+  } = request.body
+
+  if (
+    isBlank(String(status)) || isBlank(String(user))
+  ) {
+    return response
+      .status(HTTP_CODE.BAD_REQUEST)
+      .send({ error: 'Invalid data' })
+  }
+
+  if (!loggedInUser) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' })
+  }
+
+  if (!(await userIsMod(loggedInUser))) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' })
+  }
+
+  try {
+    await prisma.user.update({
+      data: {
+        isDonor: status
+      },
+      where: {
+        id: user
+      }
+    })
+
+    return response.status(HTTP_CODE.OK).send(null)
+  } catch (error) {
+    logger.error(error)
+    return response.status(HTTP_CODE.INTERNAL_SERVER_ERROR).send()
+  }
+}
+
+const handler = ncWithSession().post(exportData)
+
+export default handler
diff --git a/src/pages/user/[username]/index.jsx b/src/pages/user/[username]/index.jsx
index 6c1d748..fa07ef4 100644
--- a/src/pages/user/[username]/index.jsx
+++ b/src/pages/user/[username]/index.jsx
@@ -41,6 +41,7 @@ export const getServerSideProps = withSession(async ({ req, query }) => {
       role: true,
       isBanned: true,
       isPublic: true,
+      isDonor: true,
       publicOverride: true,
       banned_user: true,
       playlog: {

From ac46096b52bdefea399e22ea99c2361a265154cc Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Wed, 31 Jul 2024 23:55:53 -0400
Subject: [PATCH 02/22] feat: Add donor tags

---
 src/lib/riitag/neo/std/Username.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/riitag/neo/std/Username.ts b/src/lib/riitag/neo/std/Username.ts
index 28320c6..87041f0 100644
--- a/src/lib/riitag/neo/std/Username.ts
+++ b/src/lib/riitag/neo/std/Username.ts
@@ -33,6 +33,7 @@ export default class Username extends ModuleBase {
     logger.info(`User Font: ${user.font}`)
     logger.info(`Font Info: ${this.font.name} ${this.font.size} ${this.font.style} ${this.font.color} ${this.font.force}`)
 
+    if (user.isDonor === true) this.font.color = '#FFD700'
     drawText(ctx, this.font, user.display_name, this.x, this.y, this.align)
   }
 }

From ed66083c231f77a0b273fddfb09f3a482565574b Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 00:00:55 -0400
Subject: [PATCH 03/22] feat: Regen tag on donor

---
 src/pages/api/account/donor.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/api/account/donor.js b/src/pages/api/account/donor.js
index 02606a7..e3ddf71 100644
--- a/src/pages/api/account/donor.js
+++ b/src/pages/api/account/donor.js
@@ -4,6 +4,7 @@ import { userIsMod } from '@/lib/utils/databaseUtils'
 import prisma from '@/lib/db'
 import logger from '@/lib/logger'
 import { isBlank } from '@/lib/utils/utils'
+import { doRender } from '@/lib/riitag/neo/renderer'
 
 async function exportData (request, response) {
   const loggedInUser = request.session?.username
@@ -33,7 +34,7 @@ async function exportData (request, response) {
   }
 
   try {
-    await prisma.user.update({
+    const userObj = await prisma.user.update({
       data: {
         isDonor: status
       },
@@ -42,6 +43,7 @@ async function exportData (request, response) {
       }
     })
 
+    doRender(userObj)
     return response.status(HTTP_CODE.OK).send(null)
   } catch (error) {
     logger.error(error)

From d78bf15fb25bf1202e8b7ff97504afedafb01776 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 01:06:54 -0400
Subject: [PATCH 04/22] feat: Add selectable donor colors

---
 locales/en.json                     |  2 +
 src/components/edit/DonorsCard.jsx  | 58 +++++++++++++++++++++++++++++
 src/components/shared/AppNavbar.jsx |  2 +-
 src/pages/edit.jsx                  |  7 ++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/components/edit/DonorsCard.jsx

diff --git a/locales/en.json b/locales/en.json
index 58e3c13..f505f65 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -44,6 +44,8 @@
     "select_font": "Select Font",
 
     "images": "Images",
+    "donators": "Donator Benefits",
+    "name_color": "Name Colors",
 
     "home": "Home",
     "profile": "Profile",
diff --git a/src/components/edit/DonorsCard.jsx b/src/components/edit/DonorsCard.jsx
new file mode 100644
index 0000000..b078abd
--- /dev/null
+++ b/src/components/edit/DonorsCard.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Alert, Card, Col, Row } from 'react-bootstrap'
+import LocalizedString from '../shared/LocalizedString'
+import LanguageContext from '../shared/LanguageContext'
+
+
+function ColorBox ({ color }) {
+  return (
+    <div style={{ backgroundColor: color, width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', borderRadius: '8px' }}>
+
+    </div>
+  )
+}
+
+ColorBox.propTypes = {
+  color: PropTypes.string.isRequired
+}
+
+function DonorsCard ({ values, errors, handleChange }) {
+  return (
+    <LanguageContext.Helper.Consumer>
+      {(lang) => (
+        <Card className='mb-3' bg='secondary' text='white'>
+          <Card.Header as='h5'><LocalizedString string='donators' /></Card.Header>
+          <Card.Body>
+            <Row className='mb-3'>
+              <Col md={5}>
+                <p><LocalizedString string='name_color' /></p>
+                <div className='colorboxes' style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <ColorBox color={'#000000'} />
+                  <ColorBox color={'#1cb41c'} />
+                  <ColorBox color={'#FFD700'} />
+                  <ColorBox color={'#0055DD'} />
+                  <ColorBox color={'#d73216'} />
+                  <ColorBox color={'#a81bc4'} />
+                </div>
+                {errors.overlay && (
+                  <Alert className='mt-2 p-2' variant='danger'>
+                    {errors.overlay}
+                  </Alert>
+                )}
+              </Col>
+            </Row>
+          </Card.Body>
+        </Card>
+      )}
+    </LanguageContext.Helper.Consumer>
+  )
+}
+
+DonorsCard.propTypes = {
+  values: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  handleChange: PropTypes.func.isRequired
+}
+
+export default DonorsCard
diff --git a/src/components/shared/AppNavbar.jsx b/src/components/shared/AppNavbar.jsx
index 72ee9d5..a604077 100644
--- a/src/components/shared/AppNavbar.jsx
+++ b/src/components/shared/AppNavbar.jsx
@@ -41,7 +41,7 @@ function AppNavbar () {
               <img
                 alt="LinkTag Logo"
                 className="d-inline-block align-text-top no-shadow"
-                height={46}
+                height={36}
                 src="/logo.png"
                 width={128}
               />
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index 4ed0e7c..d0124b4 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -21,6 +21,7 @@ import ImagesCard from '@/components/edit/ImagesCard'
 import ENV from '@/lib/constants/environmentVariables'
 import LanguageContext from '@/components/shared/LanguageContext'
 import AppNavbar from '@/components/shared/AppNavbar'
+import DonorsCard from '@/components/edit/DonorsCard'
 
 export const getServerSideProps = withSession(async ({ req }) => {
   // get the current user session
@@ -207,6 +208,12 @@ function EditPage ({ tagInfo, language }) {
                     errors={errors}
                     handleChange={handleChange}
                   />
+
+                  <DonorsCard
+                    values={values}
+                    errors={errors}
+                    handleChange={handleChange}
+                  />
                 </Col>
               </Row>
             </Container>

From d543b590205e0830218fabb14a7616bb3782b726 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 02:50:46 -0400
Subject: [PATCH 05/22] sql: Add donor migrations

---
 prisma/migrations/20240801065036_donors/migration.sql | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 prisma/migrations/20240801065036_donors/migration.sql

diff --git a/prisma/migrations/20240801065036_donors/migration.sql b/prisma/migrations/20240801065036_donors/migration.sql
new file mode 100644
index 0000000..d553a0f
--- /dev/null
+++ b/prisma/migrations/20240801065036_donors/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "user" ADD COLUMN     "isDonor" BOOLEAN NOT NULL DEFAULT false;

From 91cf46e29591bc12db453a5d9ed0af4b4987e92c Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 14:43:48 -0400
Subject: [PATCH 06/22] feat: Add color selection

---
 .../20240801065036_donors/migration.sql       |  1 +
 prisma/schema.prisma                          |  1 +
 src/components/edit/DonorsCard.jsx            | 29 +++++++++++--------
 src/pages/edit.jsx                            |  6 ++--
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/prisma/migrations/20240801065036_donors/migration.sql b/prisma/migrations/20240801065036_donors/migration.sql
index d553a0f..9f105d0 100644
--- a/prisma/migrations/20240801065036_donors/migration.sql
+++ b/prisma/migrations/20240801065036_donors/migration.sql
@@ -1,2 +1,3 @@
 -- AlterTable
 ALTER TABLE "user" ADD COLUMN     "isDonor" BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE "user" ADD COLUMN     "nameColor" TEXT NOT NULL DEFAULT '#000000';
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 7f36aa3..223ca69 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -131,6 +131,7 @@ model user {
   isPublic       Int             @default(1) @db.SmallInt
   publicOverride Int?            @db.SmallInt
   isDonor        Boolean         @default(false)
+  nameColor      String          @default("#000000")
   accounts       accounts[]
   banned_user    banned_user[]
   game_sessions  game_sessions[]
diff --git a/src/components/edit/DonorsCard.jsx b/src/components/edit/DonorsCard.jsx
index b078abd..165be94 100644
--- a/src/components/edit/DonorsCard.jsx
+++ b/src/components/edit/DonorsCard.jsx
@@ -4,20 +4,25 @@ import { Alert, Card, Col, Row } from 'react-bootstrap'
 import LocalizedString from '../shared/LocalizedString'
 import LanguageContext from '../shared/LanguageContext'
 
-
-function ColorBox ({ color }) {
+function ColorBox ({ color, onClick, current }) {
   return (
-    <div style={{ backgroundColor: color, width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', borderRadius: '8px' }}>
-
-    </div>
+    <div id={color} style={{ backgroundColor: color, width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null, borderRadius: '8px' }} onClick={(e) => onClick(e, color)} />
   )
 }
 
 ColorBox.propTypes = {
-  color: PropTypes.string.isRequired
+  color: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  current: PropTypes.string.isRequired
 }
 
 function DonorsCard ({ values, errors, handleChange }) {
+  const setColor = (e, color) => {
+    console.log('Set color to ' + color)
+    values.nameColor = color
+    handleChange(e)
+  }
+
   return (
     <LanguageContext.Helper.Consumer>
       {(lang) => (
@@ -28,12 +33,12 @@ function DonorsCard ({ values, errors, handleChange }) {
               <Col md={5}>
                 <p><LocalizedString string='name_color' /></p>
                 <div className='colorboxes' style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
-                  <ColorBox color={'#000000'} />
-                  <ColorBox color={'#1cb41c'} />
-                  <ColorBox color={'#FFD700'} />
-                  <ColorBox color={'#0055DD'} />
-                  <ColorBox color={'#d73216'} />
-                  <ColorBox color={'#a81bc4'} />
+                  <ColorBox current={values.nameColor} color={'#000000'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#1cb41c'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#FFD700'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#0055DD'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#d73216'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#a81bc4'} onClick={setColor} />
                 </div>
                 {errors.overlay && (
                   <Alert className='mt-2 p-2' variant='danger'>
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index d0124b4..0c41dbf 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -44,7 +44,8 @@ export const getServerSideProps = withSession(async ({ req }) => {
         coin: true,
         font: true,
         show_avatar: true,
-        show_mii: true
+        show_mii: true,
+        nameColor: true
       }
     })
     : null
@@ -80,7 +81,8 @@ function EditPage ({ tagInfo, language }) {
           background: tagInfo.background,
           flag: tagInfo.flag,
           coin: tagInfo.coin,
-          font: tagInfo.font
+          font: tagInfo.font,
+          nameColor: tagInfo.nameColor
         }}
         validate={(values) => {
           const errors = {}

From 07cd0bfb1e1178f0ef0c698ac0c1b0b63f8b39c5 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 15:08:24 -0400
Subject: [PATCH 07/22] feat: Add custom color picker

---
 src/components/edit/DonorsCard.jsx | 25 +++++++++++++++++++++----
 src/lib/riitag/neo/std/Username.ts |  2 +-
 src/pages/api/account/tag.js       |  9 ++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/edit/DonorsCard.jsx b/src/components/edit/DonorsCard.jsx
index 165be94..b109fa1 100644
--- a/src/components/edit/DonorsCard.jsx
+++ b/src/components/edit/DonorsCard.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, Card, Col, Row } from 'react-bootstrap'
 import LocalizedString from '../shared/LocalizedString'
@@ -10,6 +10,22 @@ function ColorBox ({ color, onClick, current }) {
   )
 }
 
+function ColorPicker ({ current, setColor }) {
+  const [color, setColorState] = useState('#000000')
+
+  return (
+    <div id={current} style={{ width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null }}>
+      <input id={current} type='color' style={{ height: '100%' }} color={current} onChange={(e) => { setColorState(e.target.value); setColor(e, e.target.value) }} />
+      <p style={{ fontSize: '10px', textAlign: 'center', width: '48px', color: '#DDD' }}>Custom</p>
+    </div>
+  )
+}
+
+ColorPicker.propTypes = {
+  current: PropTypes.string.isRequired,
+  setColor: PropTypes.func.isRequired
+}
+
 ColorBox.propTypes = {
   color: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -34,11 +50,12 @@ function DonorsCard ({ values, errors, handleChange }) {
                 <p><LocalizedString string='name_color' /></p>
                 <div className='colorboxes' style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
                   <ColorBox current={values.nameColor} color={'#000000'} onClick={setColor} />
-                  <ColorBox current={values.nameColor} color={'#1cb41c'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#14d314'} onClick={setColor} />
                   <ColorBox current={values.nameColor} color={'#FFD700'} onClick={setColor} />
-                  <ColorBox current={values.nameColor} color={'#0055DD'} onClick={setColor} />
-                  <ColorBox current={values.nameColor} color={'#d73216'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#0959de'} onClick={setColor} />
+                  <ColorBox current={values.nameColor} color={'#ff3515'} onClick={setColor} />
                   <ColorBox current={values.nameColor} color={'#a81bc4'} onClick={setColor} />
+                  <ColorPicker current={values.nameColor} setColor={setColor} />
                 </div>
                 {errors.overlay && (
                   <Alert className='mt-2 p-2' variant='danger'>
diff --git a/src/lib/riitag/neo/std/Username.ts b/src/lib/riitag/neo/std/Username.ts
index 87041f0..f18af36 100644
--- a/src/lib/riitag/neo/std/Username.ts
+++ b/src/lib/riitag/neo/std/Username.ts
@@ -33,7 +33,7 @@ export default class Username extends ModuleBase {
     logger.info(`User Font: ${user.font}`)
     logger.info(`Font Info: ${this.font.name} ${this.font.size} ${this.font.style} ${this.font.color} ${this.font.force}`)
 
-    if (user.isDonor === true) this.font.color = '#FFD700'
+    if (user.isDonor === true) this.font.color = user.nameColor
     drawText(ctx, this.font, user.display_name, this.x, this.y, this.align)
   }
 }
diff --git a/src/pages/api/account/tag.js b/src/pages/api/account/tag.js
index c159056..2d9fda2 100644
--- a/src/pages/api/account/tag.js
+++ b/src/pages/api/account/tag.js
@@ -24,7 +24,8 @@ async function updateTagSettings (request, response) {
     background,
     flag,
     coin,
-    font
+    font,
+    nameColor
   } = request.body
   const username = request.session?.username
 
@@ -67,7 +68,8 @@ async function updateTagSettings (request, response) {
     !isValidCoin(coin) ||
     !isValidFont(font) ||
     !isBoolean(showAvatar) ||
-    !isBoolean(showMii)
+    !isBoolean(showMii) ||
+    isBlank(nameColor)
   ) {
     return response
       .status(HTTP_CODE.BAD_REQUEST)
@@ -90,7 +92,8 @@ async function updateTagSettings (request, response) {
         coin,
         font,
         show_avatar: +showAvatar,
-        show_mii: +showMii
+        show_mii: +showMii,
+        nameColor
       }
     })
     await renderTag(user)

From d8c9772818d8aba769f7c174c4ec9da58fc4f2b4 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 15:09:59 -0400
Subject: [PATCH 08/22] fix: Set default color to actual color

---
 src/components/edit/DonorsCard.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/edit/DonorsCard.jsx b/src/components/edit/DonorsCard.jsx
index b109fa1..1782aa9 100644
--- a/src/components/edit/DonorsCard.jsx
+++ b/src/components/edit/DonorsCard.jsx
@@ -11,11 +11,11 @@ function ColorBox ({ color, onClick, current }) {
 }
 
 function ColorPicker ({ current, setColor }) {
-  const [color, setColorState] = useState('#000000')
+  const [color, setColorState] = useState(current)
 
   return (
     <div id={current} style={{ width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null }}>
-      <input id={current} type='color' style={{ height: '100%' }} color={current} onChange={(e) => { setColorState(e.target.value); setColor(e, e.target.value) }} />
+      <input id={current} type='color' style={{ height: '100%' }} value={current} onChange={(e) => { setColorState(e.target.value); setColor(e, e.target.value) }} />
       <p style={{ fontSize: '10px', textAlign: 'center', width: '48px', color: '#DDD' }}>Custom</p>
     </div>
   )
@@ -34,7 +34,6 @@ ColorBox.propTypes = {
 
 function DonorsCard ({ values, errors, handleChange }) {
   const setColor = (e, color) => {
-    console.log('Set color to ' + color)
     values.nameColor = color
     handleChange(e)
   }

From 4f5dddbe0d4988e285cead76641b375cc8111523 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 17:59:24 -0400
Subject: [PATCH 09/22] feat: Custom backgrounds for donors

---
 src/components/edit/ImagesCard.jsx           |  30 +++++-
 src/lib/constants/filePaths.js               |   3 +-
 src/lib/riitag/neo/std/Background.ts         |   4 +-
 src/lib/utils/fileUtils.ts                   |  14 +++
 src/pages/api/account/background-upload.js   | 106 +++++++++++++++++++
 src/pages/api/account/tag.js                 |   1 -
 src/pages/api/account/uploaded-background.js |  26 +++++
 src/pages/edit.jsx                           |  13 +--
 8 files changed, 184 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/api/account/background-upload.js
 create mode 100644 src/pages/api/account/uploaded-background.js

diff --git a/src/components/edit/ImagesCard.jsx b/src/components/edit/ImagesCard.jsx
index 96986e0..372ab75 100644
--- a/src/components/edit/ImagesCard.jsx
+++ b/src/components/edit/ImagesCard.jsx
@@ -19,7 +19,7 @@ const backgrounds = BACKGROUNDS.map((background) => ({
   label: background
 }))
 
-function ImagesCard ({ values, errors, handleChange }) {
+function ImagesCard ({ values, errors, handleChange, user }) {
   return (
     <LanguageContext.Helper.Consumer>
       {(lang) => (
@@ -66,12 +66,35 @@ function ImagesCard ({ values, errors, handleChange }) {
                     {errors.background}
                   </Alert>
                 )}
+                <hr />
+                <Form.Control
+                  id="fileInput"
+                  accept=".png"
+                  name="file"
+                  type="file"
+                  onChange={(event) => {
+                    const formData = new FormData()
+                    formData.append('file', event.currentTarget.files[0])
+
+                    values.background = `${user}.png`
+
+                    return fetch('/api/account/background-upload', {
+                      method: 'POST',
+                      body: formData
+                    })
+                  }}
+                />
+                <p>
+                  <small className="text-muted">
+                    Please ensure that your image is 1200x450 and is in PNG format.
+                  </small>
+                </p>
               </Col>
               <Col md={7}>
                 <img
                   alt='Background Preview'
                   className='img-thumbnail mx-auto d-block'
-                  src={`/img/background/${values.background}`}
+                  src={!Number.isNaN(Number(values.background.replace(/.*\//, '').replace(/\.png$/, ''))) ? 'api/account/uploaded-background' : `/img/background/${values.background}`}
                 />
               </Col>
             </Row>
@@ -134,7 +157,8 @@ function ImagesCard ({ values, errors, handleChange }) {
 ImagesCard.propTypes = {
   values: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired,
-  handleChange: PropTypes.func.isRequired
+  handleChange: PropTypes.func.isRequired,
+  user: PropTypes.string.isRequired
 }
 
 export default ImagesCard
diff --git a/src/lib/constants/filePaths.js b/src/lib/constants/filePaths.js
index 236de4e..a669676 100644
--- a/src/lib/constants/filePaths.js
+++ b/src/lib/constants/filePaths.js
@@ -12,7 +12,8 @@ export const CACHE = Object.freeze({
   COVER: path.resolve(CACHE_PATH, 'cover'),
   MIIS: path.resolve(CACHE_PATH, 'mii', 'user'),
   TAGS: path.resolve(CACHE_PATH, 'tags'),
-  WADS: path.resolve(CACHE_PATH, 'wads')
+  WADS: path.resolve(CACHE_PATH, 'wads'),
+  BACKGROUNDS: path.resolve(CACHE_PATH, 'backgrounds')
 })
 
 export const PUBLIC = Object.freeze({
diff --git a/src/lib/riitag/neo/std/Background.ts b/src/lib/riitag/neo/std/Background.ts
index 5c55391..4523523 100644
--- a/src/lib/riitag/neo/std/Background.ts
+++ b/src/lib/riitag/neo/std/Background.ts
@@ -1,4 +1,4 @@
-import { PUBLIC } from '@/lib/constants/filePaths'
+import { PUBLIC, CACHE } from '@/lib/constants/filePaths'
 import path from 'node:path'
 import Canvas from 'canvas'
 import fs from 'node:fs'
@@ -7,7 +7,7 @@ import logger from '@/lib/logger'
 
 export default class Background extends ModuleBase {
   async render (ctx: Canvas.CanvasRenderingContext2D, user): Promise<void> {
-    const bgPath = path.resolve(PUBLIC.BACKGROUND, user.background)
+    const bgPath = path.resolve(!Number.isNaN(Number(user.background.replace(/.*\//, '').replace(/\.png$/, ''))) ? CACHE.BACKGROUNDS : PUBLIC.BACKGROUND, user.background)
 
     if (!fs.existsSync(bgPath)) {
       logger.error(`Background image does not exist: ${bgPath}`)
diff --git a/src/lib/utils/fileUtils.ts b/src/lib/utils/fileUtils.ts
index b246dd9..833ba87 100644
--- a/src/lib/utils/fileUtils.ts
+++ b/src/lib/utils/fileUtils.ts
@@ -20,3 +20,17 @@ export async function saveFile (filepath, file: any | null) {
 
   logger.info('File saved successfully')
 }
+
+export async function saveFileBuffer (filepath, file) {
+  logger.info(`Saving file to ${filepath}`);
+  if (!(await exists(filepath))) {
+    await fs.promises.mkdir(path.dirname(filepath), { recursive: true });
+  }
+
+  try {
+    await fs.promises.writeFile(filepath, file);
+    logger.info('File saved successfully');
+  } catch (error) {
+    logger.error('Error saving the file:', error);
+  }
+}
diff --git a/src/pages/api/account/background-upload.js b/src/pages/api/account/background-upload.js
new file mode 100644
index 0000000..e33e388
--- /dev/null
+++ b/src/pages/api/account/background-upload.js
@@ -0,0 +1,106 @@
+import { IncomingForm } from 'formidable';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { ncWithSession } from '@/lib/routing';
+import HTTP_CODE from '@/lib/constants/httpStatusCodes';
+import { saveFile, saveFileBuffer } from '@/lib/utils/fileUtils'
+import { CACHE } from '@/lib/constants/filePaths';
+import prisma from '@/lib/db';
+import { makeBanner } from '@/lib/riitag/banner';
+import logger from '@/lib/logger';
+
+async function uploadBackground(request, response) {
+  if (request.socket.bytesRead > 2_107_638) {
+    return response
+      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
+      .send({ error: 'Request entity too large.' });
+  }
+  const username = request.session?.username;
+
+  console.log('saving.. 1')
+
+  if (!username) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' });
+  }
+
+  const data = await new Promise((resolve, reject) => {
+    const form = new IncomingForm();
+
+    form.parse(request, (error, fields, files) => {
+      if (error) {
+        return reject(error);
+      }
+      return resolve({ fields, files });
+    });
+  }).catch((error) => {
+    logger.error(error);
+    return response
+      .status(HTTP_CODE.BAD_REQUEST)
+      .send({ error: 'Invalid data' });
+  });
+
+  const { file } = data.files;
+
+  console.log('saving.. 2')
+
+  if (file.mimetype !== 'image/png') {
+    return response
+      .status(HTTP_CODE.BAD_REQUEST)
+      .send({ error: 'Invalid data' });
+  }
+
+  // Hard cap of 2MBs for custom backgrounds
+  if (file.size > 2_000_000) {
+    return response
+      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
+      .send({ error: 'Request entity too large.' });
+  }
+
+  console.log('saving.. 2.5')
+
+  let user = await prisma.user.findFirst({
+    where: {
+      username,
+    },
+    select: {
+      username: true,
+    },
+  });
+
+  const filepath = path.resolve(CACHE.BACKGROUNDS, `${user.username}.png`);
+
+  console.log('saving.. 3')
+
+  try {
+    await saveFileBuffer(filepath, await readFile(file.filepath));
+
+    user = await prisma.user.update({
+      where: {
+        username,
+      },
+      data: {
+        background: `${user.username}.png`,
+      },
+    });
+  } catch (error) {
+    logger.error(error);
+    return response
+      .status(HTTP_CODE.BAD_REQUEST)
+      .send({ error: 'Invalid data' });
+  }
+
+  await makeBanner(user);
+  return response.status(HTTP_CODE.OK).send();
+}
+
+const handler = ncWithSession().post(uploadBackground);
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+export default handler;
diff --git a/src/pages/api/account/tag.js b/src/pages/api/account/tag.js
index 2d9fda2..9a5b851 100644
--- a/src/pages/api/account/tag.js
+++ b/src/pages/api/account/tag.js
@@ -63,7 +63,6 @@ async function updateTagSettings (request, response) {
     !isValidCoverType(coverType) ||
     !isValidCoverRegion(coverRegion) ||
     !isValidOverlay(overlay) ||
-    BACKGROUNDS.includes(background) === false ||
     !isValidFlag(flag) ||
     !isValidCoin(coin) ||
     !isValidFont(font) ||
diff --git a/src/pages/api/account/uploaded-background.js b/src/pages/api/account/uploaded-background.js
new file mode 100644
index 0000000..0461248
--- /dev/null
+++ b/src/pages/api/account/uploaded-background.js
@@ -0,0 +1,26 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { ncWithSession } from '@/lib/routing';
+import HTTP_CODE from '@/lib/constants/httpStatusCodes';
+import { setFileHeaders } from '@/lib/utils/utils';
+import { CACHE } from '@/lib/constants/filePaths';
+
+async function getMyUploadedBackground(request, response) {
+  const username = request.session?.username;
+
+  if (!username) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' });
+  }
+
+  response.setHeader('Content-Type', 'image/png');
+  setFileHeaders(response, `${username}.png`);
+  return response
+    .status(HTTP_CODE.OK)
+    .send(await fs.promises.readFile(path.resolve(CACHE.BACKGROUNDS, username + ".png")));
+}
+
+const handler = ncWithSession().get(getMyUploadedBackground);
+
+export default handler;
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index 0c41dbf..fdce3be 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -45,7 +45,8 @@ export const getServerSideProps = withSession(async ({ req }) => {
         font: true,
         show_avatar: true,
         show_mii: true,
-        nameColor: true
+        nameColor: true,
+        isDonor: true
       }
     })
     : null
@@ -59,10 +60,10 @@ export const getServerSideProps = withSession(async ({ req }) => {
     }
   }
 
-  return { props: { tagInfo: session, language: session?.language || 'en' } }
+  return { props: { tagInfo: session, user: sessionAccount, language: session?.language || 'en' } }
 })
 
-function EditPage ({ tagInfo, language }) {
+function EditPage ({ tagInfo, user, language }) {
   tagInfo.show_avatar = Boolean(tagInfo.show_avatar)
   tagInfo.show_mii = Boolean(tagInfo.show_mii)
 
@@ -117,8 +118,6 @@ function EditPage ({ tagInfo, language }) {
 
           if (!values.background) {
             errors.background = 'Required'
-          } else if (BACKGROUNDS.includes(values.background) === false) {
-            errors.background = 'Invalid Background'
           }
 
           if (!values.flag) {
@@ -207,15 +206,17 @@ function EditPage ({ tagInfo, language }) {
                 <Col lg={6}>
                   <ImagesCard
                     values={values}
+                    user={user}
                     errors={errors}
                     handleChange={handleChange}
                   />
 
+                  {tagInfo.isDonor &&
                   <DonorsCard
                     values={values}
                     errors={errors}
                     handleChange={handleChange}
-                  />
+                  />}
                 </Col>
               </Row>
             </Container>

From f3bf22d7c612ae5cb0eed53551ff4a40799caae3 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 19:44:33 -0400
Subject: [PATCH 10/22] refactor: Conform custom background to RESTFUL standard

---
 src/components/edit/ImagesCard.jsx           |   4 +-
 src/pages/api/account/background-upload.js   | 106 ------------------
 src/pages/api/account/background.ts          | 112 +++++++++++++++++++
 src/pages/api/account/uploaded-background.js |  12 --
 src/pages/edit.jsx                           |   4 +-
 tsconfig.json                                |  28 +++++
 6 files changed, 144 insertions(+), 122 deletions(-)
 delete mode 100644 src/pages/api/account/background-upload.js
 create mode 100644 src/pages/api/account/background.ts
 create mode 100644 tsconfig.json

diff --git a/src/components/edit/ImagesCard.jsx b/src/components/edit/ImagesCard.jsx
index 372ab75..935d9fc 100644
--- a/src/components/edit/ImagesCard.jsx
+++ b/src/components/edit/ImagesCard.jsx
@@ -78,7 +78,7 @@ function ImagesCard ({ values, errors, handleChange, user }) {
 
                     values.background = `${user}.png`
 
-                    return fetch('/api/account/background-upload', {
+                    return fetch('/api/account/background', {
                       method: 'POST',
                       body: formData
                     })
@@ -94,7 +94,7 @@ function ImagesCard ({ values, errors, handleChange, user }) {
                 <img
                   alt='Background Preview'
                   className='img-thumbnail mx-auto d-block'
-                  src={!Number.isNaN(Number(values.background.replace(/.*\//, '').replace(/\.png$/, ''))) ? 'api/account/uploaded-background' : `/img/background/${values.background}`}
+                  src={!Number.isNaN(Number(values.background.replace(/.*\//, '').replace(/\.png$/, ''))) ? 'api/account/background' : `/img/background/${values.background}`}
                 />
               </Col>
             </Row>
diff --git a/src/pages/api/account/background-upload.js b/src/pages/api/account/background-upload.js
deleted file mode 100644
index e33e388..0000000
--- a/src/pages/api/account/background-upload.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { IncomingForm } from 'formidable';
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-import { ncWithSession } from '@/lib/routing';
-import HTTP_CODE from '@/lib/constants/httpStatusCodes';
-import { saveFile, saveFileBuffer } from '@/lib/utils/fileUtils'
-import { CACHE } from '@/lib/constants/filePaths';
-import prisma from '@/lib/db';
-import { makeBanner } from '@/lib/riitag/banner';
-import logger from '@/lib/logger';
-
-async function uploadBackground(request, response) {
-  if (request.socket.bytesRead > 2_107_638) {
-    return response
-      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
-      .send({ error: 'Request entity too large.' });
-  }
-  const username = request.session?.username;
-
-  console.log('saving.. 1')
-
-  if (!username) {
-    return response
-      .status(HTTP_CODE.UNAUTHORIZED)
-      .json({ error: 'Unauthorized' });
-  }
-
-  const data = await new Promise((resolve, reject) => {
-    const form = new IncomingForm();
-
-    form.parse(request, (error, fields, files) => {
-      if (error) {
-        return reject(error);
-      }
-      return resolve({ fields, files });
-    });
-  }).catch((error) => {
-    logger.error(error);
-    return response
-      .status(HTTP_CODE.BAD_REQUEST)
-      .send({ error: 'Invalid data' });
-  });
-
-  const { file } = data.files;
-
-  console.log('saving.. 2')
-
-  if (file.mimetype !== 'image/png') {
-    return response
-      .status(HTTP_CODE.BAD_REQUEST)
-      .send({ error: 'Invalid data' });
-  }
-
-  // Hard cap of 2MBs for custom backgrounds
-  if (file.size > 2_000_000) {
-    return response
-      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
-      .send({ error: 'Request entity too large.' });
-  }
-
-  console.log('saving.. 2.5')
-
-  let user = await prisma.user.findFirst({
-    where: {
-      username,
-    },
-    select: {
-      username: true,
-    },
-  });
-
-  const filepath = path.resolve(CACHE.BACKGROUNDS, `${user.username}.png`);
-
-  console.log('saving.. 3')
-
-  try {
-    await saveFileBuffer(filepath, await readFile(file.filepath));
-
-    user = await prisma.user.update({
-      where: {
-        username,
-      },
-      data: {
-        background: `${user.username}.png`,
-      },
-    });
-  } catch (error) {
-    logger.error(error);
-    return response
-      .status(HTTP_CODE.BAD_REQUEST)
-      .send({ error: 'Invalid data' });
-  }
-
-  await makeBanner(user);
-  return response.status(HTTP_CODE.OK).send();
-}
-
-const handler = ncWithSession().post(uploadBackground);
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
-
-export default handler;
diff --git a/src/pages/api/account/background.ts b/src/pages/api/account/background.ts
new file mode 100644
index 0000000..59b2445
--- /dev/null
+++ b/src/pages/api/account/background.ts
@@ -0,0 +1,112 @@
+import { IncomingForm, Fields, Files } from 'formidable'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { ncWithSession } from '@/lib/routing'
+import HTTP_CODE from '@/lib/constants/httpStatusCodes'
+import { saveFileBuffer } from '@/lib/utils/fileUtils'
+import { CACHE } from '@/lib/constants/filePaths'
+import prisma from '@/lib/db'
+import { makeBanner } from '@/lib/riitag/banner'
+import logger from '@/lib/logger'
+import { Request, Response } from 'express'
+import { setFileHeaders } from '../../../lib/utils/utils'
+import fs from 'node:fs'
+
+async function backgroundPost (request: Request, response: Response) {
+  if (request.socket.bytesRead > 2_107_638) {
+    return response
+      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
+      .send({ error: 'Request entity too large.' })
+  }
+
+  // @ts-ignore
+  const username: string = request.session?.username
+
+  if (!username) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' })
+  }
+
+  const data: unknown = await new Promise((resolve, reject): void => {
+    const form = new IncomingForm()
+
+    form.parse(request, (error, fields: Fields<string>, files: Files<string>): void => {
+      if (error) return reject(error)
+      return resolve({ fields, files })
+    })
+  })
+    .catch((error) => {
+      logger.error(error)
+      return response
+        .status(HTTP_CODE.BAD_REQUEST)
+        .send({ error: 'Invalid data' })
+    })
+
+  // @ts-ignore
+  const { file } = data.files
+
+  if (file.mimetype !== 'image/png') {
+    return response
+      .status(HTTP_CODE.BAD_REQUEST)
+      .send({ error: 'Invalid data' })
+  }
+
+  // Hard cap of 2MBs for custom backgrounds
+  if (file.size > 2_000_000) {
+    return response
+      .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
+      .send({ error: 'Request entity too large.' })
+  }
+
+  let user: {username: string} = await prisma.user.findFirst({
+    where: {
+      username
+    },
+    select: {
+      username: true
+    }
+  })
+
+  const filepath: string = path.resolve(CACHE.BACKGROUNDS, `${user.username}.png`)
+  await saveFileBuffer(filepath, await readFile(file.filepath))
+
+  user = await prisma.user.update({
+    where: {
+      username
+    },
+    data: {
+      background: `${user.username}.png`
+    }
+  })
+
+  await makeBanner(user)
+  return response.status(HTTP_CODE.OK).send()
+}
+
+async function backgroundGet (request: Request, response: Response) {
+  // @ts-ignore
+  const username = request.session?.username
+
+  if (!username) {
+    return response
+      .status(HTTP_CODE.UNAUTHORIZED)
+      .json({ error: 'Unauthorized' })
+  }
+
+  response.setHeader('Content-Type', 'image/png')
+  setFileHeaders(response, `${username}.png`)
+  return response
+    .status(HTTP_CODE.OK)
+    .send(await fs.promises.readFile(path.resolve(CACHE.BACKGROUNDS, username + '.png')))
+}
+
+const handler = ncWithSession().post(backgroundPost).get(backgroundGet)
+
+export const config = {
+  api: {
+    bodyParser: false
+  }
+}
+
+export default handler
diff --git a/src/pages/api/account/uploaded-background.js b/src/pages/api/account/uploaded-background.js
index 0461248..093a648 100644
--- a/src/pages/api/account/uploaded-background.js
+++ b/src/pages/api/account/uploaded-background.js
@@ -6,19 +6,7 @@ import { setFileHeaders } from '@/lib/utils/utils';
 import { CACHE } from '@/lib/constants/filePaths';
 
 async function getMyUploadedBackground(request, response) {
-  const username = request.session?.username;
 
-  if (!username) {
-    return response
-      .status(HTTP_CODE.UNAUTHORIZED)
-      .json({ error: 'Unauthorized' });
-  }
-
-  response.setHeader('Content-Type', 'image/png');
-  setFileHeaders(response, `${username}.png`);
-  return response
-    .status(HTTP_CODE.OK)
-    .send(await fs.promises.readFile(path.resolve(CACHE.BACKGROUNDS, username + ".png")));
 }
 
 const handler = ncWithSession().get(getMyUploadedBackground);
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index fdce3be..125d105 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -155,12 +155,12 @@ function EditPage ({ tagInfo, user, language }) {
                 render ({ data, toastProps }) {
                   if (data.status !== 200) {
                     toastProps.type = 'error'
-                    return 'An error occured, please try again later'
+                    return 'An error occurred, please try again later'
                   }
                   return 'Saved!'
                 }
               },
-              error: 'An error occured, please try again later.'
+              error: 'An error occurred, please try again later.'
             }
           )
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d55eb30
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

From 07235e146140404981a226cc59113a478cb764fa Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 19:44:56 -0400
Subject: [PATCH 11/22] cleanup: Remove old unneeded background file

---
 src/pages/api/account/uploaded-background.js | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 src/pages/api/account/uploaded-background.js

diff --git a/src/pages/api/account/uploaded-background.js b/src/pages/api/account/uploaded-background.js
deleted file mode 100644
index 093a648..0000000
--- a/src/pages/api/account/uploaded-background.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { ncWithSession } from '@/lib/routing';
-import HTTP_CODE from '@/lib/constants/httpStatusCodes';
-import { setFileHeaders } from '@/lib/utils/utils';
-import { CACHE } from '@/lib/constants/filePaths';
-
-async function getMyUploadedBackground(request, response) {
-
-}
-
-const handler = ncWithSession().get(getMyUploadedBackground);
-
-export default handler;

From b0ff26ffe0450362f9fcdcf2bcc1c53487f213c0 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 19:56:44 -0400
Subject: [PATCH 12/22] refactor: Include sanity check for name color

---
 src/pages/api/account/tag.js | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/pages/api/account/tag.js b/src/pages/api/account/tag.js
index 9a5b851..b416278 100644
--- a/src/pages/api/account/tag.js
+++ b/src/pages/api/account/tag.js
@@ -4,7 +4,6 @@ import { isBlank, isBoolean } from '@/lib/utils/utils'
 import { isValidCoverRegion } from '@/lib/constants/forms/coverRegions'
 import { isValidCoverType } from '@/lib/constants/forms/coverTypes'
 import { isValidOverlay } from '@/lib/constants/forms/overlays'
-import { BACKGROUNDS } from '@/lib/constants/forms/backgrounds'
 import { isValidFlag } from '@/lib/constants/forms/flags'
 import { isValidCoin } from '@/lib/constants/forms/coins'
 import { isValidFont } from '@/lib/constants/forms/fonts'
@@ -29,26 +28,26 @@ async function updateTagSettings (request, response) {
   } = request.body
   const username = request.session?.username
 
-  function validateFriendCode () {
-    if (!request.body.comment) {
-      return true
-    }
-
-    return true
-  }
-
-  if (!validateFriendCode()) {
-    return response
-      .status(HTTP_CODE.BAD_REQUEST)
-      .send({ error: 'Invalid data' })
-  }
-
   if (!username) {
     return response
       .status(HTTP_CODE.UNAUTHORIZED)
       .json({ error: 'Unauthorized' })
   }
 
+  if (nameColor) {
+    if (nameColor.length !== 7) {
+      return response
+        .status(HTTP_CODE.BAD_REQUEST)
+        .send({ error: 'Invalid data' })
+    }
+
+    if (!(/(#[a-fA-F0-9]{6})/.test(nameColor))) {
+      return response
+        .status(HTTP_CODE.BAD_REQUEST)
+        .send({ error: 'Invalid data' })
+    }
+  }
+
   if (
     isBlank(nameOnRiiTag) ||
     isBlank(coverRegion) ||

From 9c60edb7429f186566f3b3916e33c7b2e38baf49 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 17:03:21 -0700
Subject: [PATCH 13/22] Update lint.yml

---
 .github/workflows/lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 38be91f..619e6de 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: "20"
 
       - name: Install dependencies
         run: npm ci

From 00015711777168c1c1161b6727a689ae6f17f246 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 20:05:44 -0400
Subject: [PATCH 14/22] refactor: Fix linting

---
 src/components/account/DonorButton.jsx |  5 ++---
 src/lib/utils/fileUtils.ts             | 17 +++++++++--------
 src/pages/edit.jsx                     |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/account/DonorButton.jsx b/src/components/account/DonorButton.jsx
index f205b72..9fd83ee 100644
--- a/src/components/account/DonorButton.jsx
+++ b/src/components/account/DonorButton.jsx
@@ -1,9 +1,8 @@
-import { React, useState } from 'react'
+import { React } from 'react'
 import { useRouter } from 'next/router'
 import { toast } from 'react-toastify'
 import useInfo from '@/lib/swr-hooks/useInfo'
-import ConfirmationModal from '../shared/ConfirmationModal'
-import { Button, Form } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 
 export default function DonorButton ({ isDonor, id }) {
diff --git a/src/lib/utils/fileUtils.ts b/src/lib/utils/fileUtils.ts
index 833ba87..9d321c2 100644
--- a/src/lib/utils/fileUtils.ts
+++ b/src/lib/utils/fileUtils.ts
@@ -3,11 +3,12 @@ import path from 'node:path'
 import logger from '@/lib/logger'
 import { Readable } from 'stream'
 import { finished } from 'node:stream/promises'
+import { Buffer } from 'buffer'
 
-export const exists = async (filename) =>
+export const exists = async (filename: string) =>
   !!(await fs.promises.stat(filename).catch(() => null))
 
-export async function saveFile (filepath, file: any | null) {
+export async function saveFile (filepath: string, file: any | null) {
   if (file == null) return
 
   if (!(await exists(filepath))) {
@@ -21,16 +22,16 @@ export async function saveFile (filepath, file: any | null) {
   logger.info('File saved successfully')
 }
 
-export async function saveFileBuffer (filepath, file) {
-  logger.info(`Saving file to ${filepath}`);
+export async function saveFileBuffer (filepath: string, file: Buffer) {
+  logger.info(`Saving file to ${filepath}`)
   if (!(await exists(filepath))) {
-    await fs.promises.mkdir(path.dirname(filepath), { recursive: true });
+    await fs.promises.mkdir(path.dirname(filepath), { recursive: true })
   }
 
   try {
-    await fs.promises.writeFile(filepath, file);
-    logger.info('File saved successfully');
+    await fs.promises.writeFile(filepath, file)
+    logger.info('File saved successfully')
   } catch (error) {
-    logger.error('Error saving the file:', error);
+    logger.error('Error saving the file:', error)
   }
 }
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index 125d105..8541ab8 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -14,7 +14,6 @@ import { isValidOverlay } from '@/lib/constants/forms/overlays'
 import { isValidFlag } from '@/lib/constants/forms/flags'
 import { isValidCoin } from '@/lib/constants/forms/coins'
 import { isValidFont } from '@/lib/constants/forms/fonts'
-import { BACKGROUNDS } from '@/lib/constants/forms/backgrounds'
 import GeneralCard from '@/components/edit/GeneralCard'
 import FontCard from '@/components/edit/FontCard'
 import ImagesCard from '@/components/edit/ImagesCard'
@@ -229,6 +228,7 @@ function EditPage ({ tagInfo, user, language }) {
 
 EditPage.propTypes = {
   tagInfo: PropTypes.object.isRequired,
+  user: PropTypes.string.isRequired,
   language: PropTypes.string.isRequired
 }
 

From 5e90f2ccecd51183bafe680763d7c755d12e5797 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:06:40 -0400
Subject: [PATCH 15/22] fix: Show "custom" when using a custom background

---
 src/components/user/UserInformationCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/user/UserInformationCard.jsx b/src/components/user/UserInformationCard.jsx
index 6f6cd20..2a9e999 100644
--- a/src/components/user/UserInformationCard.jsx
+++ b/src/components/user/UserInformationCard.jsx
@@ -39,7 +39,7 @@ function UserInformationCard ({ user, isLoggedIn, isAdmin, isMod }) {
                 <LocalizedString string='overlay'/>: {OVERLAYS.find((overlay) => overlay.value === user.overlay).label}
               </li>
               <li>
-                <LocalizedString string='background' />: {user.background}
+                <LocalizedString string='background' />: {!Number.isNaN(Number(user.background.replace(/.*\//, '').replace(/\.png$/, ''))) ? 'Custom' : user.background}
               </li>
               <li>
                 <LocalizedString string='coin' />: {COINS.find((coin) => coin.value === user.coin).label}

From 21295560bb8c10dceab3ece1aac2b5ee86b86d15 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:08:35 -0400
Subject: [PATCH 16/22] fix: Make donor update toast better

---
 src/components/account/DonorButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/account/DonorButton.jsx b/src/components/account/DonorButton.jsx
index 9fd83ee..78b87a2 100644
--- a/src/components/account/DonorButton.jsx
+++ b/src/components/account/DonorButton.jsx
@@ -21,7 +21,7 @@ export default function DonorButton ({ isDonor, id }) {
       })
     })
     if (response.status === 200) {
-      toast.success('The account has been set to donor.')
+      toast.success('The account\'s donor status has been updated.')
       mutate()
       router.reload()
     } else {

From daf75da02d3138382387005c42c325ed28e6798c Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:16:53 -0400
Subject: [PATCH 17/22] refactor: Move css style overrides to CSS class

---
 src/components/edit/DonorsCard.jsx        | 12 +++++----
 src/components/edit/DonorsCard.module.css | 31 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/components/edit/DonorsCard.module.css

diff --git a/src/components/edit/DonorsCard.jsx b/src/components/edit/DonorsCard.jsx
index 1782aa9..bc78afb 100644
--- a/src/components/edit/DonorsCard.jsx
+++ b/src/components/edit/DonorsCard.jsx
@@ -4,9 +4,11 @@ import { Alert, Card, Col, Row } from 'react-bootstrap'
 import LocalizedString from '../shared/LocalizedString'
 import LanguageContext from '../shared/LanguageContext'
 
+import styles from './DonorsCard.module.css'
+
 function ColorBox ({ color, onClick, current }) {
   return (
-    <div id={color} style={{ backgroundColor: color, width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null, borderRadius: '8px' }} onClick={(e) => onClick(e, color)} />
+    <div className={styles.colorBox} id={color} style={{ backgroundColor: color, boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null }} onClick={(e) => onClick(e, color)} />
   )
 }
 
@@ -14,9 +16,9 @@ function ColorPicker ({ current, setColor }) {
   const [color, setColorState] = useState(current)
 
   return (
-    <div id={current} style={{ width: '48px', height: '48px', marginLeft: '8px', marginTop: '8px', boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null }}>
-      <input id={current} type='color' style={{ height: '100%' }} value={current} onChange={(e) => { setColorState(e.target.value); setColor(e, e.target.value) }} />
-      <p style={{ fontSize: '10px', textAlign: 'center', width: '48px', color: '#DDD' }}>Custom</p>
+    <div id={current} className={styles.colorPicker} style={{ boxShadow: current === color ? '0px 0px 7px 2px #0099FF' : null }}>
+      <input id={current} type='color' value={current} onChange={(e) => { setColorState(e.target.value); setColor(e, e.target.value) }} />
+      <p>Custom</p>
     </div>
   )
 }
@@ -47,7 +49,7 @@ function DonorsCard ({ values, errors, handleChange }) {
             <Row className='mb-3'>
               <Col md={5}>
                 <p><LocalizedString string='name_color' /></p>
-                <div className='colorboxes' style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+                <div className={styles.colorBoxes}>
                   <ColorBox current={values.nameColor} color={'#000000'} onClick={setColor} />
                   <ColorBox current={values.nameColor} color={'#14d314'} onClick={setColor} />
                   <ColorBox current={values.nameColor} color={'#FFD700'} onClick={setColor} />
diff --git a/src/components/edit/DonorsCard.module.css b/src/components/edit/DonorsCard.module.css
new file mode 100644
index 0000000..c80233a
--- /dev/null
+++ b/src/components/edit/DonorsCard.module.css
@@ -0,0 +1,31 @@
+.colorBox {
+    width: 48px;
+    height: 48px;
+    margin-left: 8px;
+    margin-top: 8px;
+    border-radius: 8px;
+}
+
+.colorPicker {
+    width: 48px;
+    height: 48px;
+    margin-left: 8px;
+    margin-top: 8px;
+}
+
+.colorPicker input {
+    height: 100%
+}
+
+.colorPicker p {
+    font-size: 10px;
+    text-align: center;
+    width: 48px;
+    color: #DDD;
+}
+
+.colorBoxes {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}

From 10253727e0dd9d2a280bfb921a1ec78906bd307d Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:17:50 -0400
Subject: [PATCH 18/22] refactor: Change user more descriptive

---
 src/components/edit/ImagesCard.jsx | 6 +++---
 src/pages/edit.jsx                 | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/edit/ImagesCard.jsx b/src/components/edit/ImagesCard.jsx
index 935d9fc..bd5da0f 100644
--- a/src/components/edit/ImagesCard.jsx
+++ b/src/components/edit/ImagesCard.jsx
@@ -19,7 +19,7 @@ const backgrounds = BACKGROUNDS.map((background) => ({
   label: background
 }))
 
-function ImagesCard ({ values, errors, handleChange, user }) {
+function ImagesCard ({ values, errors, handleChange, username }) {
   return (
     <LanguageContext.Helper.Consumer>
       {(lang) => (
@@ -76,7 +76,7 @@ function ImagesCard ({ values, errors, handleChange, user }) {
                     const formData = new FormData()
                     formData.append('file', event.currentTarget.files[0])
 
-                    values.background = `${user}.png`
+                    values.background = `${username}.png`
 
                     return fetch('/api/account/background', {
                       method: 'POST',
@@ -158,7 +158,7 @@ ImagesCard.propTypes = {
   values: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
-  user: PropTypes.string.isRequired
+  username: PropTypes.string.isRequired
 }
 
 export default ImagesCard
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index 8541ab8..759ff51 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -205,7 +205,7 @@ function EditPage ({ tagInfo, user, language }) {
                 <Col lg={6}>
                   <ImagesCard
                     values={values}
-                    user={user}
+                    username={user}
                     errors={errors}
                     handleChange={handleChange}
                   />

From f06e601ceadf6661fd51a29759da342421de4795 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:18:47 -0400
Subject: [PATCH 19/22] refactor: Fix background naming to be consistent

---
 src/pages/api/account/background.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/api/account/background.ts b/src/pages/api/account/background.ts
index 59b2445..70dd3af 100644
--- a/src/pages/api/account/background.ts
+++ b/src/pages/api/account/background.ts
@@ -12,7 +12,7 @@ import { Request, Response } from 'express'
 import { setFileHeaders } from '../../../lib/utils/utils'
 import fs from 'node:fs'
 
-async function backgroundPost (request: Request, response: Response) {
+async function postBackground (request: Request, response: Response) {
   if (request.socket.bytesRead > 2_107_638) {
     return response
       .status(HTTP_CODE.REQUEST_ENTITY_TOO_LARGE)
@@ -84,7 +84,7 @@ async function backgroundPost (request: Request, response: Response) {
   return response.status(HTTP_CODE.OK).send()
 }
 
-async function backgroundGet (request: Request, response: Response) {
+async function getBackground (request: Request, response: Response) {
   // @ts-ignore
   const username = request.session?.username
 
@@ -101,7 +101,7 @@ async function backgroundGet (request: Request, response: Response) {
     .send(await fs.promises.readFile(path.resolve(CACHE.BACKGROUNDS, username + '.png')))
 }
 
-const handler = ncWithSession().post(backgroundPost).get(backgroundGet)
+const handler = ncWithSession().post(postBackground).get(getBackground)
 
 export const config = {
   api: {

From d0e5c62c781e9279a9763e4f8ff7ac55d462ab92 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:20:17 -0400
Subject: [PATCH 20/22] refactor: Make user more descriptive

---
 src/pages/api/account/donor.js | 27 +++++++++++----------------
 src/pages/edit.jsx             |  6 +++---
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/pages/api/account/donor.js b/src/pages/api/account/donor.js
index e3ddf71..5f02b44 100644
--- a/src/pages/api/account/donor.js
+++ b/src/pages/api/account/donor.js
@@ -33,22 +33,17 @@ async function exportData (request, response) {
       .json({ error: 'Unauthorized' })
   }
 
-  try {
-    const userObj = await prisma.user.update({
-      data: {
-        isDonor: status
-      },
-      where: {
-        id: user
-      }
-    })
-
-    doRender(userObj)
-    return response.status(HTTP_CODE.OK).send(null)
-  } catch (error) {
-    logger.error(error)
-    return response.status(HTTP_CODE.INTERNAL_SERVER_ERROR).send()
-  }
+  const userObj = await prisma.user.update({
+    data: {
+      isDonor: status
+    },
+    where: {
+      id: user
+    }
+  })
+
+  doRender(userObj)
+  return response.status(HTTP_CODE.OK).send(null)
 }
 
 const handler = ncWithSession().post(exportData)
diff --git a/src/pages/edit.jsx b/src/pages/edit.jsx
index 759ff51..d7b07fd 100644
--- a/src/pages/edit.jsx
+++ b/src/pages/edit.jsx
@@ -62,7 +62,7 @@ export const getServerSideProps = withSession(async ({ req }) => {
   return { props: { tagInfo: session, user: sessionAccount, language: session?.language || 'en' } }
 })
 
-function EditPage ({ tagInfo, user, language }) {
+function EditPage ({ tagInfo, username, language }) {
   tagInfo.show_avatar = Boolean(tagInfo.show_avatar)
   tagInfo.show_mii = Boolean(tagInfo.show_mii)
 
@@ -205,7 +205,7 @@ function EditPage ({ tagInfo, user, language }) {
                 <Col lg={6}>
                   <ImagesCard
                     values={values}
-                    username={user}
+                    username={username}
                     errors={errors}
                     handleChange={handleChange}
                   />
@@ -228,7 +228,7 @@ function EditPage ({ tagInfo, user, language }) {
 
 EditPage.propTypes = {
   tagInfo: PropTypes.object.isRequired,
-  user: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
   language: PropTypes.string.isRequired
 }
 

From b352af8dd56a7b45f897360dc17f8e46cb9d4eef Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Thu, 1 Aug 2024 22:22:17 -0400
Subject: [PATCH 21/22] refactor: Remove unused imports

---
 src/pages/api/account/donor.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/api/account/donor.js b/src/pages/api/account/donor.js
index 5f02b44..aeead83 100644
--- a/src/pages/api/account/donor.js
+++ b/src/pages/api/account/donor.js
@@ -2,7 +2,6 @@ import HTTP_CODE from '@/lib/constants/httpStatusCodes'
 import { ncWithSession } from '@/lib/routing'
 import { userIsMod } from '@/lib/utils/databaseUtils'
 import prisma from '@/lib/db'
-import logger from '@/lib/logger'
 import { isBlank } from '@/lib/utils/utils'
 import { doRender } from '@/lib/riitag/neo/renderer'
 

From 3b909b4354e8bdf72572476af5fedfa15d278ee5 Mon Sep 17 00:00:00 2001
From: Matthew <github-gpg@service.matthe815.dev>
Date: Fri, 2 Aug 2024 13:51:55 -0400
Subject: [PATCH 22/22] i18n: Add missing keys to other two languages

---
 locales/en_uk.json | 3 +++
 locales/jp.json    | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/locales/en_uk.json b/locales/en_uk.json
index cee5152..bc1c675 100644
--- a/locales/en_uk.json
+++ b/locales/en_uk.json
@@ -17,6 +17,7 @@
     "hidden": "Hidden",
     "administrator": "Administrator",
     "moderator": "Moderator",
+    "donor": "Donator",
     "play_log": "Play Log",
 
     "registered_on": "<strong>Registered</strong>",
@@ -43,6 +44,8 @@
     "select_font": "Select Font",
 
     "images": "Images",
+    "donators": "Donator Benefits",
+    "name_color": "Name Colours",
 
     "home": "Home",
     "profile": "Profile",
diff --git a/locales/jp.json b/locales/jp.json
index eb3f74e..211258f 100644
--- a/locales/jp.json
+++ b/locales/jp.json
@@ -16,6 +16,7 @@
     "hidden": "非表示",
     "administrator": "管理者",
     "moderator": "モデレーター",
+    "donor": "寄贈者",
     "play_log": "プレイログ",
 
     "registered_on": "<strong>登録日</strong>",
@@ -42,6 +43,8 @@
     "select_font": "フォントを選択",
 
     "images": "画像",
+    "donators": "寄贈者",
+    "name_color": "名前カラー",
 
     "home": "ホーム",
     "leaderboard": "リーダーボード",