Login window popup when submitting

ZdruzenieSTROM · Dec 9, 2023 · 20a5d24 · 20a5d24
1 parent cc8e55e
commit 20a5d24
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/src/components/PageLayout/LoginFormWrapper/LoginFormWrapper.tsx b/src/components/PageLayout/LoginFormWrapper/LoginFormWrapper.tsx
@@ -1,3 +1,4 @@
+import {Stack} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC, useState} from 'react'
 
@@ -16,7 +17,7 @@ export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({closeOverlay}) => {
 
   if (form === 'login')
     return (
-      <>
+      <Stack alignItems={'center'} gap={1}>
         <LoginForm closeOverlay={closeOverlay} />
         <Button
           onClick={() => {
@@ -25,7 +26,7 @@ export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({closeOverlay}) => {
         >
           Zabudnuté heslo
         </Button>
-      </>
+      </Stack>
     )
 
   return (

diff --git a/src/components/Problems/Problem.tsx b/src/components/Problems/Problem.tsx
@@ -6,7 +6,9 @@ import {Button} from '@/components/Clickable/Button'
 import {Link} from '@/components/Clickable/Link'
 import {Problem as ProblemType} from '@/types/api/competition'
 
+import {Dialog} from '../Dialog/Dialog'
 import {Latex} from '../Latex/Latex'
+import {LoginFormWrapper} from '../PageLayout/LoginFormWrapper/LoginFormWrapper'
 import styles from './Problem.module.scss'
 import {UploadProblemForm} from './UploadProblemForm'
 
@@ -45,16 +47,28 @@ export const Problem: FC<{
       }
     })
   }
+
+  const close = () => {
+    setDisplayLoginDialog(false)
+  }
+
   const handleUploadClick = () => {
     if (!registered && canRegister) {
       displayRegisterDialog()
+    } else if (!registered && !canRegister) {
+      setDisplayLoginDialog(true)
     } else {
       setDisplayProblemUploadForm((prevState) => !prevState)
       setDisplayActions(false)
     }
   }
 
+  const toggleDisplayLoginDialog = () => {
+    setDisplayLoginDialog((prevState) => !prevState)
+  }
+
   const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
+  const [displayLoginDialog, setDisplayLoginDialog] = useState<boolean>(false)
   const [displayActions, setDisplayActions] = useState(true)
 
   return (
@@ -84,6 +98,18 @@ export const Problem: FC<{
           setDisplayActions={setDisplayActions}
         />
       )}
+      {displayLoginDialog && (
+        <Dialog
+          open={displayLoginDialog}
+          close={close}
+          contentText={
+            <Stack alignItems={'center'} gap={3}>
+              <Typography variant="body1">Pre odovzdanie sa prihlás.</Typography>
+              <LoginFormWrapper closeOverlay={toggleDisplayLoginDialog} />
+            </Stack>
+          }
+        />
+      )}
       {displayActions && (
         <Stack direction="row" mt={0.5} justifyContent="end" gap={4}>
           {problem.solution_pdf && (
@@ -114,11 +140,9 @@ export const Problem: FC<{
           <Button onClick={handleDiscussionButtonClick} variant="button2">
             diskusia ({problem.num_comments}){' '}
           </Button>
-          {(registered || canRegister) && (
-            <Button onClick={handleUploadClick} disabled={!canSubmit} variant="button2">
-              odovzdať
-            </Button>
-          )}
+          <Button onClick={handleUploadClick} disabled={!canSubmit} variant="button2">
+            odovzdať
+          </Button>
         </Stack>
       )}
     </div>