add logout button

src/pages/index.tsx

@@ -64,13 +64,12 @@ import Checkbox from '../components/controls/checkbox'
 import { getStorage } from '../data/storage/storage'
 import { getUserSetting } from '../data/user/settings'
 import { useReload } from '../hooks/useReload'
-import {
-    BackendURLTagSearch,
-} from '../globals/constants'
+import { BackendURLTagSearch } from '../globals/constants'
 import Tooltip from '../components/tooltip'
 import { WorkerInterface } from '../tokenizer/interface'
 import { EncoderType } from '../tokenizer/encoder'
 import { isTouchScreenDevice } from '../util/compat'
+import { mycard } from '../util/mycard'
 
 export const ToastArea = styled.div`
     position: fixed;
@@ -98,7 +97,7 @@ export const ToastArea = styled.div`
     --toastify-color-progress-light: ${(props) => props.theme.colors.textHeadings};
     --toastify-text-color-light: ${(props) => props.theme.colors.textMain};
     --toastify-font-family: ${(props) => props.theme.fonts.default};
-`;
+`
 
 const MOBILE_WIDTH = 900
 
@@ -144,7 +143,7 @@ const parsePrompt = (prompt: string[]): string => {
 }
 
 const maxSamplesForSize = (width: number, height: number, max?: number): number => {
-    let limit = 100;
+    const limit = 100
     if (max) return Math.min(limit, max)
     return limit
 }
@@ -297,7 +296,7 @@ const ImageModels = [
         name: 'NAI Diffusion Anime (Full)',
         description: 'The expanded training set allows for a wider variety of generations.',
     },
-/*
+    /*
     {
         id: ImageGenerationModels.naiDiffusionFurry,
         name: 'NAI Diffusion Furry (Beta)',
@@ -514,8 +513,7 @@ function ImageGenContent(): JSX.Element {
 
     const [purchaseModalOpen, setPurchaseModalOpen] = useState(false)
 
-    useEffect(() => {
-    }, [
+    useEffect(() => {}, [
         params,
         selectedModel,
         session,
@@ -628,9 +626,7 @@ function ImageGenContent(): JSX.Element {
             fetch(
                 BackendURLTagSearch +
                     //`?model=${encodeURIComponent(selectedModel.toString())}&prompt=${encodeURIComponent(
-                    `?prompt=${encodeURIComponent(
-                        prompt.trim()
-                    )}`,
+                    `?prompt=${encodeURIComponent(prompt.trim())}`,
                 {
                     mode: 'cors',
                     cache: 'default',
@@ -1002,7 +998,7 @@ function ImageGenContent(): JSX.Element {
                 },
                 (error: any) => {
                     setGenerating(false)
-                    toast(error.message);
+                    toast(error.message)
                 },
                 () => {
                     setGenerating(false)
@@ -1344,9 +1340,7 @@ function ImageGenContent(): JSX.Element {
                 </InputLabel>
                 <EnhanceButton
                     disabled={
-                        generating ||
-                        prompt.some((p) => !p) ||
-                        !validateParameters(params, selectedModel)
+                        generating || prompt.some((p) => !p) || !validateParameters(params, selectedModel)
                     }
                     onClick={() => {
                         setEnhanceBoxVisible(false)
@@ -1706,10 +1700,7 @@ function ImageGenContent(): JSX.Element {
                         <PenIcon style={{ width: 16, height: 16 }} />
                     </OverlayButton>
                 </Tooltip>
-                <Tooltip
-                    tooltip={`Generate Variations`}
-                    delay={0}
-                >
+                <Tooltip tooltip={`Generate Variations`} delay={0}>
                     <OverlayButton
                         disabled={generating}
                         style={{
@@ -1896,6 +1887,7 @@ function ImageGenContent(): JSX.Element {
                                                     style={{
                                                         fontSize: '0.875rem',
                                                         width: 'max-content',
+                                                        marginRight: '20px',
                                                     }}
                                                 >
                                                     <ImportIcon
@@ -1907,6 +1899,19 @@ function ImageGenContent(): JSX.Element {
                                                     />{' '}
                                                     Upload Image
                                                 </ImportImageButton>
+                                                <ImportImageButton
+                                                    onClick={() => {
+                                                        mycard.logout()
+                                                    }}
+                                                    style={{
+                                                        fontSize: '0.875rem',
+                                                        width: 'max-content',
+                                                        visibility: mycard.isActive ? 'visible' : 'hidden',
+                                                        // marginRight: '20px',
+                                                    }}
+                                                >
+                                                    Logout
+                                                </ImportImageButton>
                                             </HideMobileInline>
                                         </>
                                     )}
@@ -2693,13 +2698,7 @@ function ImageGenContent(): JSX.Element {
                                 }
                             }}
                         >
-                            {!downloadingImages ? (
-                                'Download ZIP'
-                            ) : (
-                                <span>
-                                    Downloading...
-                                </span>
-                            )}
+                            {!downloadingImages ? 'Download ZIP' : <span>Downloading...</span>}
                         </SubtleButton>
                     </HistoryBar>
                 </Sidebar>
@@ -3810,7 +3809,7 @@ const GenerateButton = styled.button`
     overflow: hidden;
     cursor: pointer;
     font-weight: 700;
-    flex: .1 0 auto;
+    flex: 0.1 0 auto;
     border: 1px solid ${(props) => props.theme.colors.textHeadings};
     &:disabled {
         color: ${(props) => props.theme.colors.textHeadings};

src/util/mycard.ts

@@ -38,11 +38,14 @@ export class MyCard {
     user: MyCardSSOUser
     isActive: boolean
     constructor() {
-        if (!process.env.NEXT_PUBLIC_MYCARD || typeof window === 'undefined') {
+        if (!process.env.NEXT_PUBLIC_MYCARD) {
             this.isActive = false
             return
         }
         this.isActive = true
+        if (typeof window === 'undefined') {
+            return
+        }
         const ssoString = new URLSearchParams(window.location.search).get('sso')
         const loginString = ssoString || window.localStorage.getItem('mycardLogin')
         if (!loginString) {
@@ -57,6 +60,9 @@ export class MyCard {
     }
 
     login() {
+        if (typeof window === 'undefined') {
+            return
+        }
         const currentUrl = window.location.href
         window.location.replace(loginUrl(currentUrl))
     }