cleaned some code and better theme system

components/config/Checkbox.jsx

@@ -12,8 +12,9 @@ export class Checkbox extends React.Component {
     this.config = new Config()
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     this.config.load()
+    this.config.loadTheme()
     this.setState({ activated: this.config.get(this.props.item) });
   }
 

components/config/Mode.jsx

@@ -15,7 +15,7 @@ export class Mode extends React.Component {
 
   componentDidMount() {
     this.config.load()
-
+    this.config.loadTheme()
     this.setState({ currentValue: this.config.get(this.props.item) });
   }
 

components/input/Input.jsx

@@ -90,6 +90,7 @@ export class Input extends React.Component {
   async setupConfig() {
     let language = this.config.get("language");
 
+    await this.config.loadTheme()
     this.state.unit = this.config.get("unit");
 
     if (this.config.get("mode") !== "Text")

components/leaderboard/User-List.jsx

@@ -3,6 +3,7 @@ import MoonLoader from "react-spinners/MoonLoader";
 
 import { User } from "./User.jsx";
 import { db } from "../../util/firebase/firebase.js";
+import { Config } from "../../util/config.js";
 
 export class UserList extends React.Component {
   constructor(props) {
@@ -49,6 +50,8 @@ export class UserList extends React.Component {
     let users = [];
     let dailyUsers = [];
 
+    await new Config().loadTheme()
+
     const snapshot = await db.collection("stats").get();
 
     snapshot.docs.map((doc, index) => {

pages/auth/account.js

@@ -1,4 +1,5 @@
 import Router from "next/router";
+import { Config } from "../../util/config";
 import { auth, db } from "../../util/firebase/firebase"
 
 export default function Account() {
@@ -7,6 +8,8 @@ export default function Account() {
             if (authUser === null)
                 Router.push('/')
         })
+
+        new Config().loadTheme("..")
     }
 
     return (
@@ -22,7 +25,7 @@ export default function Account() {
                 <button onClick={async () => {
                     let link = document.querySelector("input[name='link']").value
 
-                    if(!link.match(/\.(jpg|gif|png)$/)) {
+                    if (!link.match(/\.(jpg|gif|png)$/)) {
                         alert("link is not an image. Please use file format .jpg, .png, .gif")
                         return
                     }
@@ -51,7 +54,7 @@ export default function Account() {
                     let username = document.querySelector("input[name='username']").value
 
                     await auth.onAuthStateChanged(async (authUser) => {
-                        if (authUser !== null && username.length >= 3 && username.length <= 12 && username.match(/^[a-zA-Z0-9]+$/)) {
+                        if (authUser !== null && username.length >= 3 && username.length <= 12 && username.match(/^[0-9a-zA-Z_.-]+$/)) {
                             await authUser.updateProfile({
                                 displayName: username
                             })
@@ -64,7 +67,7 @@ export default function Account() {
                             });
 
                             db.collection("users").doc(authUser.uid).update({ displayName: username })
-                        }else {
+                        } else {
                             alert("Your username isn't following the name conventions. Your name should only contain letters from a to z in uppercase and lower case and numbers from 0 to 9. Also it should be in the lenght from 3 to 12.")
                         }
                     });

pages/auth/login.js

@@ -1,4 +1,5 @@
 import Router from "next/router";
+import { Config } from "../../util/config";
 import { auth } from "../../util/firebase/firebase"
 
 export default function Login() {
@@ -7,6 +8,9 @@ export default function Login() {
         cursor: "pointer"
     }
 
+    if (typeof window !== "undefined")
+        new Config().loadTheme("..")
+
     return (
         <>
             <div style={{

pages/auth/register.js

@@ -1,12 +1,16 @@
 import { auth, registerWithGoogle, createDatabaseUser, db } from "../../util/firebase/firebase"
 import Router from "next/router";
+import { Config } from "../../util/config";
 
 export default function Register() {
   const inputCss = {
     width: "100%",
     cursor: "pointer"
   }
 
+  if (typeof window !== "undefined")
+    new Config().loadTheme("..")
+
   return (
     <div style={{
       display: "flex",
@@ -20,7 +24,7 @@ export default function Register() {
       <button style={inputCss} onClick={async () => {
         let email = document.querySelector("input[name='email']").value
         let password = document.querySelector("input[name='password']").value
-        
+
         await auth.createUserWithEmailAndPassword(email, password)
           .then(async (cred) => createDatabaseUser(cred.user))
           .catch((error) => alert("An error occured: " + error.message));

pages/credits/index.js

@@ -1,23 +1,27 @@
 import styles from '../../styles/modules/Home.module.css'
 import secondaryStyle from '../../styles/modules/Credits.module.css'
+import { Config } from '../../util/config'
 
 export default function Home() {
+    if (typeof window !== "undefined")
+        new Config().loadTheme()
+
     return (
         <div className={styles.container}>
-                <h1 className={styles.title}>Special Thanks To:</h1>
-            
-                <p className={styles.user}>
-                    Vercel with <a href="https://www.nextjs.com/" target="_blank" className={secondaryStyle.product}>NextJS</a>
-                </p>
-                <p className={styles.user}>
-                    Peu77 with <a href="https://www.devdocs.io/css/" target="_blank" className={secondaryStyle.product}>CSS Support</a>
-                </p>
-                <p className={styles.user}>
-                    Jochebed with the <a href="https://www.psychologytoday.com/us/blog/hot-thought/201005/how-be-creative" target="_blank" className={secondaryStyle.product}>Idea</a>
-                </p>
-                <p className={styles.user}>
-                    Youtube with <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" className={secondaryStyle.product}>Music</a>
-                </p>
+            <h1 className={styles.title}>Special Thanks To:</h1>
+
+            <p className={styles.user}>
+                Vercel with <a href="https://www.nextjs.com/" target="_blank" className={secondaryStyle.product}>NextJS</a>
+            </p>
+            <p className={styles.user}>
+                Peu77 with <a href="https://www.devdocs.io/css/" target="_blank" className={secondaryStyle.product}>CSS Support</a>
+            </p>
+            <p className={styles.user}>
+                Jochebed with the <a href="https://www.psychologytoday.com/us/blog/hot-thought/201005/how-be-creative" target="_blank" className={secondaryStyle.product}>Idea</a>
+            </p>
+            <p className={styles.user}>
+                Youtube with <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" className={secondaryStyle.product}>Music</a>
+            </p>
         </div>
     )
 }

util/config.js

@@ -1,3 +1,5 @@
+import { applyTheme, getTheme } from "./helper"
+
 export class Config {
     constructor() {
         this.currentConfig = new Map()
@@ -53,4 +55,14 @@ export class Config {
             this.currentConfig = new Map(Object.entries(JSON.parse(localStorage.getItem("config"))))
         else this.save()
     }
+
+    /**
+     * Loads the current theme
+     */
+    loadTheme(start) {
+        getTheme(this.get("theme"), start ? start : "").then((item) => {
+            console.log(item)
+            applyTheme(item)
+        });
+    }
 }

util/helper.js

@@ -36,9 +36,9 @@ export async function getRandomText(language) {
  * Sends a request to the backend to get a theme
  * @param {string} name 
  */
-export async function getTheme(name) {
+export async function getTheme(name, start) {
     let response = undefined
-    await fetch("api/theme/" + name)
+    await fetch((start ? start + "/" : "") + "api/theme/" + name)
         .then((res) => res.json())
         .then((data) => response = data);
     return response