Login popup when submitting done properly (#292)

* Login window popup when submitting * Login popup when submitting done properly
ZdruzenieSTROM · Dec 9, 2023 · 5ed5aff · 5ed5aff
1 parent 5a75014
commit 5ed5aff
Show file tree

Hide file tree

Showing 3 changed files with 26 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
@@ -26,6 +26,7 @@ export const Problem: FC<{
   isAfterDeadline: boolean
   invalidateSeriesQuery: () => Promise<void>
   displayRegisterDialog: () => void
+  displayLoginDialog: () => void
 }> = ({
   problem,
   registered,
@@ -35,6 +36,7 @@ export const Problem: FC<{
   isAfterDeadline,
   invalidateSeriesQuery,
   displayRegisterDialog,
+  displayLoginDialog,
 }) => {
   const handleDiscussionButtonClick = () => {
     setDisplaySideContent((prevState) => {
@@ -45,9 +47,12 @@ export const Problem: FC<{
       }
     })
   }
+
   const handleUploadClick = () => {
     if (!registered && canRegister) {
       displayRegisterDialog()
+    } else if (!registered && !canRegister) {
+      displayLoginDialog()
     } else {
       setDisplayProblemUploadForm((prevState) => !prevState)
       setDisplayActions(false)
@@ -114,11 +119,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>

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
@@ -17,6 +17,7 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 
 import {Dialog} from '../Dialog/Dialog'
 import {Loading} from '../Loading/Loading'
+import {LoginFormWrapper} from '../PageLayout/LoginFormWrapper/LoginFormWrapper'
 import {Discussion} from './Discussion'
 import {Problem} from './Problem'
 import styles from './Problems.module.scss'
@@ -117,6 +118,9 @@ export const Problems: FC = () => {
     closeRegisterDialog()
   }
 
+  const [displayLoginDialog, setDisplayLoginDialog] = useState<boolean>(false)
+  const closeLoginDialog = () => setDisplayLoginDialog(false)
+
   return (
     <>
       <Dialog
@@ -154,6 +158,16 @@ export const Problems: FC = () => {
           </Stack>
         }
       />
+      <Dialog
+        open={displayLoginDialog}
+        close={closeLoginDialog}
+        contentText={
+          <Stack alignItems={'center'} gap={3}>
+            <Typography variant="body1">Pre odovzdanie sa prihlás.</Typography>
+            <LoginFormWrapper closeOverlay={closeLoginDialog} />
+          </Stack>
+        }
+      />
       <Stack gap={5}>
         {(loading.semesterListIsLoading ||
           loading.currentSeriesIsLoading ||
@@ -177,6 +191,7 @@ export const Problems: FC = () => {
             isAfterDeadline={isAfterDeadline}
             invalidateSeriesQuery={invalidateSeriesQuery}
             displayRegisterDialog={() => setDisplayRegisterDialog(true)}
+            displayLoginDialog={() => setDisplayLoginDialog(true)}
           />
         ))}