feat: user profile page

daveschumaker · Feb 28, 2023 · fccd16c · fccd16c
1 parent ce02767
commit fccd16c
Show file tree

Hide file tree

Showing 14 changed files with 513 additions and 33 deletions.
diff --git a/api/userInfo.ts b/api/userInfo.ts
@@ -1,6 +1,12 @@
 import AppSettings from '../models/AppSettings'
 import { setHordeStatus } from '../store/appStore'
-import { IWorker, setUserInfo, setWorkers } from '../store/userStore'
+import {
+  IWorker,
+  setLoggedInState,
+  setUserInfo,
+  setWorkers,
+  userInfoStore
+} from '../store/userStore'
 import { clientHeader, getApiHostServer, isAppActive } from '../utils/appUtils'
 import { uuidv4 } from '../utils/appUtils'
 
@@ -16,7 +22,15 @@ export const setUserId = () => {
 
 let isPending = false
 export const fetchUserDetails = async (apikey: string) => {
-  if (!apikey || isPending) {
+  if (!apikey) {
+    setLoggedInState(false)
+    return {
+      success: false
+    }
+  }
+
+  if (isPending) {
+    setLoggedInState(null)
     return { status: 'pending' }
   }
 
@@ -25,6 +39,11 @@ export const fetchUserDetails = async (apikey: string) => {
   }
 
   isPending = true
+
+  if (!userInfoStore.state.loggedIn) {
+    setLoggedInState(null)
+  }
+
   try {
     const res = await fetch(`${getApiHostServer()}/api/v2/find_user`, {
       headers: {
@@ -34,6 +53,7 @@ export const fetchUserDetails = async (apikey: string) => {
     })
 
     const userDetails = await res.json()
+
     const {
       records = {},
       kudos = 0,

diff --git a/components/CreatePage/AdvancedOptionsPanel/advancedOptionsPanel.tsx b/components/CreatePage/AdvancedOptionsPanel/advancedOptionsPanel.tsx
@@ -167,7 +167,11 @@ const AdvancedOptionsPanel = ({
     if (
       isNaN(input.steps) ||
       input.steps < 1 ||
-      input.steps > maxSteps({ sampler: input.sampler, loggedIn })
+      input.steps >
+        maxSteps({
+          sampler: input.sampler,
+          loggedIn: loggedIn === true ? true : false
+        })
     ) {
       if (initialLoad) {
         return
@@ -176,7 +180,7 @@ const AdvancedOptionsPanel = ({
       setErrorMessage({
         steps: `Please enter a valid number between 1 and ${maxSteps({
           sampler: input.sampler,
-          loggedIn
+          loggedIn: loggedIn === true ? true : false
         })}`
       })
     } else {
@@ -401,16 +405,17 @@ const AdvancedOptionsPanel = ({
             <>
               <div className="block text-xs mt-4 w-full">
                 Max size for each dimension:{' '}
-                {loggedIn
+                {loggedIn === true
                   ? MAX_DIMENSIONS_LOGGED_IN
                   : MAX_DIMENSIONS_LOGGED_OUT}{' '}
                 pixels
-                {loggedIn && input.height * input.width > 1024 * 1024 && (
-                  <div className="text-red-500 font-bold">
-                    WARNING: You will need to have enough kudos to complete this
-                    request.
-                  </div>
-                )}
+                {loggedIn === true &&
+                  input.height * input.width > 1024 * 1024 && (
+                    <div className="text-red-500 font-bold">
+                      WARNING: You will need to have enough kudos to complete
+                      this request.
+                    </div>
+                  )}
               </div>
               <div className="flex flex-col gap-4 justify-start">
                 <div className="mt-2 flex flex-row gap-4 items-center">
@@ -423,7 +428,7 @@ const AdvancedOptionsPanel = ({
                     name="width"
                     min={64}
                     max={
-                      loggedIn
+                      loggedIn === true
                         ? MAX_DIMENSIONS_LOGGED_IN
                         : MAX_DIMENSIONS_LOGGED_OUT
                     }
@@ -448,7 +453,7 @@ const AdvancedOptionsPanel = ({
                         isNaN(e.target.value) ||
                         e.target.value < 64 ||
                         e.target.value >
-                          (loggedIn
+                          (loggedIn === true
                             ? MAX_DIMENSIONS_LOGGED_IN
                             : MAX_DIMENSIONS_LOGGED_OUT)
                       ) {
@@ -458,7 +463,7 @@ const AdvancedOptionsPanel = ({
 
                         setErrorMessage({
                           width: `Please enter a valid number between 64 and ${
-                            loggedIn
+                            loggedIn === true
                               ? MAX_DIMENSIONS_LOGGED_IN
                               : MAX_DIMENSIONS_LOGGED_OUT
                           }`
@@ -499,7 +504,7 @@ const AdvancedOptionsPanel = ({
                     name="height"
                     min={64}
                     max={
-                      loggedIn
+                      loggedIn === true
                         ? MAX_DIMENSIONS_LOGGED_IN
                         : MAX_DIMENSIONS_LOGGED_OUT
                     }
@@ -524,7 +529,7 @@ const AdvancedOptionsPanel = ({
                         isNaN(e.target.value) ||
                         e.target.value < 64 ||
                         e.target.value >
-                          (loggedIn
+                          (loggedIn === true
                             ? MAX_DIMENSIONS_LOGGED_IN
                             : MAX_DIMENSIONS_LOGGED_OUT)
                       ) {
@@ -534,7 +539,7 @@ const AdvancedOptionsPanel = ({
 
                         setErrorMessage({
                           height: `Please enter a valid number between 64 and ${
-                            loggedIn
+                            loggedIn === true
                               ? MAX_DIMENSIONS_LOGGED_IN
                               : MAX_DIMENSIONS_LOGGED_OUT
                           }`
@@ -697,7 +702,12 @@ const AdvancedOptionsPanel = ({
                     </Tooltip>
                   </TextTooltipRow>
                   <div className="block text-xs w-full">
-                    (1 - {maxSteps({ sampler: input.sampler, loggedIn })})
+                    (1 -{' '}
+                    {maxSteps({
+                      sampler: input.sampler,
+                      loggedIn: loggedIn === true ? true : false
+                    })}
+                    )
                   </div>
                 </SubSectionTitle>
                 <NumberInput
@@ -706,7 +716,10 @@ const AdvancedOptionsPanel = ({
                   className="mb-2"
                   type="text"
                   min={1}
-                  max={maxSteps({ sampler: input.sampler, loggedIn })}
+                  max={maxSteps({
+                    sampler: input.sampler,
+                    loggedIn: loggedIn === true ? true : false
+                  })}
                   onMinusClick={() => {
                     const value = input.steps - 1
                     PromptInputSettings.set('steps', value)
@@ -733,7 +746,7 @@ const AdvancedOptionsPanel = ({
                   min={1}
                   max={maxSteps({
                     sampler: input.sampler,
-                    loggedIn,
+                    loggedIn: loggedIn === true ? true : false,
                     isSlider: true
                   })}
                   onChange={(e: any) => {
@@ -768,7 +781,12 @@ const AdvancedOptionsPanel = ({
                       </Tooltip>
                     </TextTooltipRow>
                     <div className="block text-xs w-full">
-                      (1 - {maxSteps({ sampler: input.sampler, loggedIn })})
+                      (1 -{' '}
+                      {maxSteps({
+                        sampler: input.sampler,
+                        loggedIn: loggedIn === true ? true : false
+                      })}
+                      )
                     </div>
                   </SubSectionTitle>
                 </div>

diff --git a/components/Menu/menu.tsx b/components/Menu/menu.tsx
@@ -19,6 +19,7 @@ import { appInfoStore, setShowAppMenu } from '../../store/appStore'
 import { useEffect } from 'react'
 import { lockScroll, unlockScroll } from '../../utils/appUtils'
 import PencilIcon from '../icons/PencilIcon'
+import RobotIcon from '../icons/RobotIcon'
 
 interface IStyledProps {
   show?: boolean
@@ -310,6 +311,14 @@ const Menu = () => {
               ArtBot Prefs
             </SubOption>
           </SubOptions>
+          <MenuOption
+            onClick={() => {
+              navigateToLink('/profile')
+            }}
+          >
+            <RobotIcon />
+            User Profile
+          </MenuOption>
           <MenuOption
             onClick={() => {
               navigateToLink('/about')

diff --git a/components/SettingsPage/settingsPage.tsx b/components/SettingsPage/settingsPage.tsx
@@ -379,7 +379,7 @@ const SettingsPage = () => {
                     <a
                       href="https://stablehorde.net/"
                       target="_blank"
-                      rel="noreferrer"
+                      rel="noopener noreferrer"
                       className="text-cyan-500"
                     >
                       stablehorde.net

diff --git a/components/UI/Header/navBar.tsx b/components/UI/Header/navBar.tsx
@@ -52,6 +52,7 @@ const NavBar = () => {
 
   const [showCreateMenu, setShowCreateMenu] = useState(false)
   const [showInfoMenu, setShowInfoMenu] = useState(false)
+  const [showSettingsMenu, setShowSettingsMenu] = useState(false)
 
   const clearNewImageNotification = () => {
     setShowImageReadyToast(false)
@@ -158,6 +159,7 @@ const NavBar = () => {
         </NavItem>
         {showInfoMenu && (
           <DropDown
+            alignRight
             handleClose={() => {
               setShowInfoMenu(false)
             }}
@@ -197,12 +199,39 @@ const NavBar = () => {
           </DropDown>
         )}
       </div>
-      <Link href="/settings" passHref tabIndex={0}>
-        <NavItem active={isActiveRoute('/settings')}>
-          <SettingsIcon size={20} />
-          Settings
+      <div className="flex flex-row gap-[0px] relative">
+        <Link href="/settings" passHref tabIndex={0}>
+          <NavItem active={isActiveRoute('/settings')}>
+            <SettingsIcon size={20} />
+            Settings
+          </NavItem>
+        </Link>
+        <NavItem
+          active={isActiveRoute('/settings')}
+          onClick={() => {
+            setShowSettingsMenu(true)
+          }}
+        >
+          <ChevronDownIcon size={20} />
         </NavItem>
-      </Link>
+        {showSettingsMenu && (
+          <DropDown
+            alignRight
+            handleClose={() => {
+              setShowSettingsMenu(false)
+            }}
+          >
+            <DropDownItem
+              handleClick={() => {
+                setShowSettingsMenu(false)
+                router.push('/profile')
+              }}
+            >
+              User Profile
+            </DropDownItem>
+          </DropDown>
+        )}
+      </div>
     </nav>
   )
 }

diff --git a/components/icons/NotesIcon.tsx b/components/icons/NotesIcon.tsx
@@ -18,7 +18,7 @@ const NotesIcon = ({
       width={size}
       height={size}
       viewBox="0 0 24 24"
-      strokeWidth="2"
+      strokeWidth="1"
       stroke={stroke}
       fill={fill}
       strokeLinecap="round"

diff --git a/components/icons/RobotIcon.tsx b/components/icons/RobotIcon.tsx
@@ -0,0 +1,38 @@
+// Modified via: https://tabler-icons.io/
+
+const RobotIcon = ({
+  className,
+  fill = 'none',
+  size = 24,
+  stroke = 'currentColor'
+}: {
+  className?: string
+  fill?: string
+  size?: number
+  stroke?: string
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      strokeWidth="1"
+      stroke={stroke}
+      fill={fill}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"></path>
+      <path d="M10 16h4"></path>
+      <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle>
+      <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle>
+      <path d="M9 7l-1 -4"></path>
+      <path d="M15 7l1 -4"></path>
+    </svg>
+  )
+}
+
+export default RobotIcon