add environment system and change default font

src/api/authenticator.js

@@ -1,6 +1,6 @@
+import { getValue, getJsonValue } from '../common/environmentmanager';
 import Logger from '../common/util/logger';
 import gateway from "./gateway/globalGatewayConnection";
-import { getToken } from "./tokenManager";
 
 const { log: authLog } = Logger([ 'Authenticator' ]);
 
@@ -10,5 +10,5 @@ export function login() {
         authLog("Gateway connection already exists, tearing down existing one...");
         gateway.ws.close();
     }
-    return gateway.connect(getToken());
+    return gateway.connect(getValue("token"), getJsonValue("gatewayConnectionAttributes"));
 };

src/api/gateway/GatewayConnection.js

@@ -55,12 +55,13 @@ const getOpcodeByName = (name) => {
 
 
 class GatewayConnection {
-    constructor(gatewayUrl) {
+    constructor(gatewayUrl, attributes) {
+        this.attributes = attributes;
         this.gatewayUrl = gatewayUrl;
     }
 }
 
-GatewayConnection.prototype.connect = function(token, attributes=["PRESENCE_UPDATES"]) {
+GatewayConnection.prototype.connect = function(token) {
     if (token) this.token = token;
     if (this.token) token = this.token;
 
@@ -90,7 +91,7 @@ GatewayConnection.prototype.connect = function(token, attributes=["PRESENCE_UPDA
                 logGateway("Got HELLO", packet.data);
                 this.helloData = packet.data;
                 logGateway("Sending YOO");
-                this.ws.send(this.packet("YOO", { token, attributes }));
+                this.ws.send(this.packet("YOO", { token, attributes: this.attributes }));
                 break;
             }
             case "EVENT_CHANNEL_MEMBERS": {

src/api/gateway/globalGatewayConnection.js

@@ -1,12 +1,12 @@
 import GatewayConnection from './GatewayConnection';
-import config from '../../config';
 import store from '../../common/store';
 import logger from '../../common/util/logger';
+import { getValue, getJsonValue } from '../../common/environmentmanager';
 
 const { log } = logger(["globalGatewayConnection"]);
 const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiments"]);
 
-const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
+const globalGatewayConnection = new GatewayConnection(getValue("gatewayUrl"), getJsonValue("gatewayConnectionAttributes"));
 let currentlyReconnecting = false;
 
 const wsCloseCodes = {
@@ -39,9 +39,9 @@ globalGatewayConnection.onopen = (sessionData) => {
     store.dispatch({ type: 'authenticator/updatelocaluserobject', user: sessionData.user });
     store.dispatch({ type: 'channels/updatechannellist', channels: sessionData.channels });
 
-    if (localStorage.getItem("enableExperimentOverrides")) {
+    if (getValue("enableExperimentOverrides")) {
         experimentsWarn("Experiment overrides are enabled");
-        const experimentModifiers = JSON.parse(localStorage.getItem("experimentOverrides"));
+        const experimentModifiers = JSON.parse(getValue("experimentOverrides"));
         const experiments = {
             ...sessionData.__global_experiments || {},
             ...experimentModifiers || {}

src/api/request.js

@@ -1,5 +1,4 @@
-import config from '../config';
-import { getToken } from "./tokenManager";
+import { getValue } from '../common/environmentmanager';
 
 export async function unauthenticated(endpoint, options) {
     let res;
@@ -11,7 +10,7 @@ export async function unauthenticated(endpoint, options) {
     if (!options.headers) options.headers = {};
 
     try {
-        res = await fetch(`${config.apiUrl}${endpoint}`, options);
+        res = await fetch(`${getValue("apiUrl")}${endpoint}`, options);
         json = await res.json();
         isOK = true;
     } catch(e) {
@@ -38,12 +37,12 @@ export async function authenticated(endpoint, options) {
     if (!options.headers) options.headers = {};
 
     options.headers = {
-        "Authorization": getToken(),
+        "Authorization": getValue("token"),
         ...options.headers
     };
 
     try {
-        res = await fetch(`${config.apiUrl}${endpoint}`, options);
+        res = await fetch(`${getValue("apiUrl")}${endpoint}`, options);
         json = await res.json();
         isOK = true;
     } catch(e) {

src/api/tokenManager.js

@@ -1,7 +0,0 @@
-export function getToken() {
-    return localStorage.getItem("token");
-};
-
-export function setToken(token) {
-    localStorage.setItem("token", token);
-};

src/common/environmentmanager.js

@@ -0,0 +1,26 @@
+export function getValue(key) {
+    return localStorage.getItem(key);
+};
+
+export function setValue(key, value) {
+    if (typeof value === "object") {
+        value = JSON.stringify(value);
+    }
+    return localStorage.setItem(key, value);
+};
+
+export function getJsonValue(key) {
+    return JSON.parse(getValue(key));
+}
+
+export function setValueIfNull(key, value) {
+    if (getValue(key)) return false;
+    setValue(key, value);
+    return true;
+};
+
+export default function applyDefaultsObject(defaultsObject) {
+    for (const [key, value] of Object.entries(defaultsObject)) {
+        setValueIfNull(key, value);
+    }
+};

src/components/Message.js

@@ -3,7 +3,7 @@ import UserProfileLink from './user/UserProfileLink';
 export default function Message({ message, hideUsername }) {
     return (
         <div className="message">
-            <UserProfileLink size="0" user={ message.author } hideName={ hideUsername } />
+            <UserProfileLink bold={true} size="0" user={ message.author } hideName={ hideUsername } />
             <span className="message-content">{ message.content }</span>
         </div>
     );

src/components/auth/Login.js

@@ -4,8 +4,8 @@ import { useHistory } from 'react-router-dom';
 import Notification from '../Notification';
 import { unauthenticated } from '../../api/request';
 import { login } from '../../api/authenticator';
-import { setToken } from "../../api/tokenManager";
 import { getLoginMessageFromError } from '../../common/util/errors'
+import { setValue } from '../../common/environmentmanager';
 
 export default function Login() {
     const history = useHistory();
@@ -42,7 +42,7 @@ export default function Login() {
             return;
         }
         
-        setToken(json.token);
+        setValue("token", json.token);
         await login();
 
         history.push('/');

src/components/user/UserProfileLink.js

@@ -1,4 +1,4 @@
-export default function UserProfileLink({ user, size }) {
+export default function UserProfileLink({ user, size, bold }) {
     let picture = null;
 
     if (size !== "0") {
@@ -11,7 +11,7 @@ export default function UserProfileLink({ user, size }) {
     return (
         <div className="profile-link">
             { picture }
-            <span className="profile-username">{ user.username }</span>
+            <span className={`profile-username${bold ? "-bold" : ""}`}>{ user.username }</span>
         </div>
     );
 };

src/config.js

@@ -1,6 +1,7 @@
 const config = {
-    apiUrl: 'http://localhost:3000',
-    gatewayUrl: 'ws://localhost:3005/gateway'
+    apiUrl: "http://localhost:3000",
+    gatewayUrl: "ws://localhost:3005/gateway",
+    gatewayConnectionAttributes: ["PRESENCE_UPDATES"]
 };
 
 export default config;

src/index.js

@@ -1,10 +1,14 @@
 import store from './common/store';
+import config from "./config";
 import App from './components/main/App';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { LazyMotion, domAnimation } from "framer-motion"
+import applyDefaultsObject from './common/environmentmanager';
+
+applyDefaultsObject(config);
 
 ReactDOM.render(
     <React.StrictMode>

src/styles/App.scss

@@ -19,14 +19,6 @@
     background: var(--default-scrollbar-color);
 }
 
-@font-face {
-    font-family: 'JetBrains Mono';
-    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'),
-         url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
 body {
     color: var(--default-text-color);
     background-color: var(--background-color);

src/styles/Components/ProfileLink.scss

@@ -72,11 +72,14 @@
 }
 
 .profile-username {
-    font-weight: 600;
-    font-size: 1rem;
     line-height: 1.256rem;
 }
 
+.profile-username-bold {
+    @extend .profile-username;
+    font-weight: 600;
+}
+
 .darker-text {
     color: var(--darker-text-color);
 }

src/styles/root.scss

@@ -5,7 +5,7 @@
     --default-text-color: hsl(0, 0%, 80%);
     --darker-text-color: hsl(0, 0%, 65%);
 
-    --default-font-family: JetBrains Mono;
+    --default-font-family: "Noto Sans", "Liberation Sans", sans-serif;
     --glyph-font-family: Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif;
 
     --default-user-background: linear-gradient(