background-color

Author: Funsize1234

api/main_endpoints/models/User.js

@@ -73,6 +73,9 @@ const UserSchema = new Schema(
     apiKey: {
       type: String,
       default: ''
+    },
+    backgroundColor: {
+      type: String,
     }
   },
   { collection: 'User' }

src/APIFunctions/Profile.js

@@ -16,3 +16,37 @@ export function formatFirstAndLastName(user) {
     user.lastName.slice(1, user.lastName.length)
   );
 }
+
+/**
+ * Gets the appropriate icon text color for the
+ * inputed background color
+ * @param {String} color - The 6 character hex color code starting with #
+ * @returns {String} The hex color of the icon text color
+ */
+export function getIconTextColor(color) {
+  if(typeof color !== 'string') {
+    throw new TypeError('color must be a string');
+  }
+  if(color == '' || color == '#2a323c') {
+    return '#FFFFFF';
+  }
+  // get rgb values 0-255
+  const r = parseInt(color.substring(1, 3), 16);
+  const g = parseInt(color.substring(3, 5), 16);
+  const b = parseInt(color.substring(5, 7), 16);
+  // linearize the colors
+  const colors = [r / 255.0, g / 255.0, b / 255.0];
+  const c = colors.map((color) => {
+    if(color <= 0.04045) {
+      return color / 12.92;
+    }
+    return Math.pow(((color + 0.055) / 1.055), 2.4);
+  });
+  // luminance value
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  // threshold of 0.179
+  if(L > 0.179) {
+    return '#000000';
+  }
+  return '#FFFFFF';
+}

src/APIFunctions/User.js

@@ -78,6 +78,8 @@ export async function getAllUsers({
  * was verified
  * @param {(string|undefined)} userToEdit.emailOptIn - Opt into SCE's blast
  * week emails
+ * @param {(string|undefined)} userToEdit.backgroundColor - The user's background
+ * color for profile icon
  * @param {string} token - The jwt token for authentication
  * @returns {UserApiResponse} containing if the search was successful
  */
@@ -100,6 +102,7 @@ export async function editUser(userToEdit, token) {
     lastLogin,
     emailVerified,
     emailOptIn,
+    backgroundColor
   } = userToEdit;
   const url = new URL('/api/User/edit', BASE_API_URL);
   try {
@@ -125,7 +128,8 @@ export async function editUser(userToEdit, token) {
         accessLevel,
         lastLogin,
         emailVerified,
-        emailOptIn
+        emailOptIn,
+        backgroundColor
       })
     });
     if (res.ok) {

src/Components/Navbar/UserNavbar.js

@@ -1,11 +1,43 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { membershipState } from '../../Enums';
 import { useSCE } from '../context/SceContext';
+import { getUserById } from '../../APIFunctions/User';
+import { useBackgroundColor } from '../context/BackgroundColorContext';
+import { getIconTextColor } from '../../APIFunctions/Profile';
 
 export default function UserNavbar(props) {
   const { user, authenticated } = useSCE();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const { backgroundColorVersion } = useBackgroundColor() || {};
+  const [backgroundColor, setBackgroundColor] = useState('#2a323c');
+  const [transition, setTransition] = useState(false);
+
+  useEffect(() => {
+    let timeoutId;
+    async function getBackgroundColor() {
+      const response = await getUserById(user._id, user.token);
+      if(response.responseData && response.responseData.backgroundColor) {
+        setBackgroundColor(response.responseData.backgroundColor);
+        if(transition == false) {
+          timeoutId = setTimeout(() => {
+            setTransition(true);
+          }, 600);
+        }
+      } else {
+        setTransition(true);
+      }
+    }
+    if(authenticated && user && user.token && user._id) {
+      getBackgroundColor();
+    }
+    return () => {
+      if(timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [authenticated, user, backgroundColorVersion]);
+
   let initials = '';
   if (user && user.firstName && user.lastName) {
     initials = user.firstName[0] + user.lastName[0];
@@ -98,16 +130,15 @@ export default function UserNavbar(props) {
                 {getRoutesForNavbar()}
               </ul>
             </div>
-
             <div className='relative inline-block dropdown-menu-wrapper' ref={dropdownRef}>
               <summary
                 tabIndex={0}
                 role="button"
                 className="btn btn-ghost btn-circle avatar placeholder"
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
               >
-                <div className="w-12 rounded-full bg-neutral text-neutral-content">
-                  <span>{initials}</span>
+                <div className={`w-12 rounded-full bg-neutral text-neutral-content ${transition ? ' transition-colors ease-in duration-500' : ''}`} style={{backgroundColor: backgroundColor}}>
+                  <span className={`${transition ? ' transition-colors ease-in duration-500' : ''}`} style={{color: getIconTextColor(backgroundColor)}}>{initials}</span>
                 </div>
               </summary>
               {isDropdownOpen && (

src/Components/context/BackgroundColorContext.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+
+export const BackgroundColorContext = createContext(null);
+
+export function useBackgroundColor() {
+  return useContext(BackgroundColorContext);
+}
+
+export default function BackgroundColorContextProvider({children}) {
+  const [backgroundColorVersion, setBackgroundColorVersion] = useState(0);
+  return (
+    <BackgroundColorContext.Provider value={{ backgroundColorVersion, setBackgroundColorVersion }}>
+      {children}
+    </BackgroundColorContext.Provider>
+  );
+}
+

src/Pages/Profile/MemberView/Profile.js

@@ -1,25 +1,54 @@
 import React, { useEffect, useState } from 'react';
-import { getUserById } from '../../../APIFunctions/User';
+import { getUserById, editUser } from '../../../APIFunctions/User';
 import ChangePasswordModal from './ChangePassword';
 import DeleteAccountModal from './DeleteAccountModal';
 import GetApiKeyModal from './GetApiKeyModal';
 import { membershipState, membershipStateToString } from '../../../Enums';
 import { useSCE } from '../../../Components/context/SceContext';
+import { useBackgroundColor } from '../../../Components/context/BackgroundColorContext';
 
 export default function Profile() {
+  const defaultColor = '#2a323c';
   const { user } = useSCE();
+  const { setBackgroundColorVersion } = useBackgroundColor() || {};
   const [response, setResponse] = useState({});
   const [bannerMessage, setBannerMessage] = useState('');
   const [bannerColor, setBannerColor] = useState('');
+  const [backgroundColor, setBackgroundColor] = useState(defaultColor);
+  const [savedBackgroundColor, setSavedBackgroundColor] = useState(defaultColor);
+  const [saved, setSaved] = useState(false);
 
-  async function getUserFromApi() {
-    const response = await getUserById(user._id, user.token);
-    if (response.responseData) {
-      setResponse(response.responseData);
+  useEffect(() => {
+    async function getUserFromApi() {
+      const response = await getUserById(user._id, user.token);
+      const responseData = response.responseData;
+      if (responseData) {
+        setResponse(responseData);
+        const bgColor = responseData.backgroundColor;
+        if(bgColor) {
+          setBackgroundColor(bgColor);
+          setSavedBackgroundColor(bgColor);
+        }
+      }
     }
-  }
+    getUserFromApi();
+  }, []);
 
-  useEffect(getUserFromApi, []);
+  async function updateBackgroundColor() {
+    if(saved) {
+      return;
+    }
+    if(backgroundColor == savedBackgroundColor) {
+      setSaved(true);
+      return;
+    }
+    const response = await editUser({_id: user._id, backgroundColor}, user.token);
+    if(!response.error) {
+      setSavedBackgroundColor(backgroundColor);
+      setSaved(true);
+      setBackgroundColorVersion(v => v + 1);
+    }
+  }
 
   function renderExpirationDate() {
     if (response.accessLevel >= membershipState.OFFICER) {
@@ -79,6 +108,24 @@ export default function Profile() {
             </button>
           </div>
         </div>
+        <div className="pb-6 px-4">
+          <div className="font-semibold text-gray-900">Profile Icon Color</div>
+          <div className="py-2 flex gap-2">
+            <input className="cursor-pointer h-8 w-[60px] rounded-lg" type='color' value={backgroundColor} style={{backgroundColor: backgroundColor}} onChange={(e) => {
+              setBackgroundColor(e.target.value);
+              if(e.target.value != savedBackgroundColor) {
+                setSaved(false);
+              }
+            }}/>
+            <button className="btn btn-sm btn-primary w-[60px]" onClick={updateBackgroundColor}>{saved ? 'Saved!' : 'Save'}</button>
+          </div>
+          <button className="btn btn-sm btn-error w-32" onClick={() => {
+            setBackgroundColor(defaultColor);
+            if(savedBackgroundColor != defaultColor) {
+              setSaved(false);
+            }
+          }}>Reset</button>
+        </div>
         <div className="text-gray-700">
           <div className="grid text-sm">
             <div className="grid grid-cols-2">

src/index.js

@@ -7,6 +7,7 @@ import Routing from './Routing';
 import { checkIfUserIsSignedIn } from './APIFunctions/Auth';
 import { SceContext } from './Components/context/SceContext';
 import SearchModal from './Components/ShortcutKeyModal/SearchModal';
+import BackgroundColorContextProvider from './Components/context/BackgroundColorContext';
 
 function App() {
   const [authenticated, setAuthenticated] = useState(false);
@@ -31,10 +32,12 @@ function App() {
   return (
     !isAuthenticating && (
       <SceContext.Provider value={{user, setUser, authenticated, setAuthenticated}}>
-        <BrowserRouter>
-          <SearchModal/>
-          <Routing/>
-        </BrowserRouter>
+        <BackgroundColorContextProvider>
+          <BrowserRouter>
+            <SearchModal/>
+            <Routing/>
+          </BrowserRouter>
+        </BackgroundColorContextProvider>
       </SceContext.Provider>
     )
   );