Tasks from Dorot (#482)

* Change design of login, etc buttons * Fix size and position dialog buttons * Remove banner when empty * Rename Novinky to Príspevky * Implement show password buttons * Redesign Competition Archive * Sort schools in school dropdown * Fix overflowing backround on results * Reword phone input label * LoginForm close dialog also on the registration page * LoginForm consistent button names consistent with menu items and button text on register form * lint --------- Co-authored-by: Michal Masrna <[email protected]>
ZdruzenieSTROM · Nov 24, 2024 · 2b90a89 · 2b90a89
1 parent 4e53081
commit 2b90a89
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 71 deletions.
diff --git a/src/components/Alert/AlertBox.tsx b/src/components/Alert/AlertBox.tsx
@@ -26,9 +26,9 @@ export const AlertBox: FC = () => {
       contentText={container.alertBox?.message}
       close={closeContainer}
     >
-      <Stack direction={'row'} mt={3} justifyContent="center">
-        <Button variant="button1" onClick={closeContainer}>
-          Dobre
+      <Stack direction={'row'} mt={3} justifyContent="end">
+        <Button variant="button2" onClick={closeContainer}>
+          Potvrdiť
         </Button>
       </Stack>
     </Dialog>

diff --git a/src/components/CompetitionPage/CompetitionPage.tsx b/src/components/CompetitionPage/CompetitionPage.tsx
@@ -1,11 +1,12 @@
 import {Stack, Typography} from '@mui/material'
+import Grid from '@mui/material/Unstable_Grid2'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
-import {FC, useEffect} from 'react'
+import {FC, Fragment, useEffect} from 'react'
 
 import {Link} from '@/components/Clickable/Link'
-import {Competition, Event} from '@/types/api/competition'
+import {Competition, Event, PublicationTypes} from '@/types/api/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
 
 import {UpcomingOrCurrentEventInfo} from './UpcomingOrCurrentEventInfo'
@@ -78,26 +79,36 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
           </Typography>
         )}
       </Stack>
-      <Stack>
-        <Typography variant="h2">Archív</Typography>
 
-        <Stack gap={1}>
-          {history_events.map((event) => (
-            <Stack key={event.id} direction="row" sx={{justifyContent: 'space-between'}}>
-              <Typography variant="h3" component="span">
-                {name} {event.school_year}
-              </Typography>
-              <Stack direction="row" sx={{gap: {xs: 1, sm: 2}}}>
-                {event.publication_set.map((publication) => (
-                  <Link variant="button2" key={publication.id} href={`/api${publication.file}`}>
-                    {publication.name}
+      <Grid container spacing={2}>
+        {history_events.map((event) => {
+          const results = event.publication_set.find((p) => p.publication_type === PublicationTypes.RESULTS.id)
+          const problems = event.publication_set.find((p) => p.publication_type === PublicationTypes.PROBLEMS.id)
+          return (
+            <Fragment key={event.id}>
+              <Grid xs={8}>
+                <Typography variant="h2" component="span">
+                  {name} {event.school_year}
+                </Typography>
+              </Grid>
+              <Grid xs={2} display="flex" justifyContent="end">
+                {results && (
+                  <Link variant="button2" key={results.id} href={`/api${results.file}`}>
+                    {results.name}
                   </Link>
-                ))}
-              </Stack>
-            </Stack>
-          ))}
-        </Stack>
-      </Stack>
+                )}
+              </Grid>
+              <Grid xs={2} display="flex" justifyContent="end">
+                {problems && (
+                  <Link variant="button2" key={problems.id} href={`/api${problems.file}`}>
+                    {problems.name}
+                  </Link>
+                )}
+              </Grid>
+            </Fragment>
+          )
+        })}
+      </Grid>
     </Stack>
   )
 }
diff --git a/src/components/FormItems/FormInput/FormInput.tsx b/src/components/FormItems/FormInput/FormInput.tsx
@@ -12,6 +12,7 @@ export const FormInput = <
   label,
   type,
   rules,
+  ...props
 }: TextFieldProps &
   Pick<ControllerProps<TFieldValues, TName>, 'name' | 'control' | 'rules'> & {
     label: string
@@ -31,6 +32,7 @@ export const FormInput = <
         helperText={error?.message}
         focused={false}
         sx={formItemStyle}
+        {...props}
       />
     )}
   />

diff --git a/src/components/PageLayout/Banner/Banner.tsx b/src/components/PageLayout/Banner/Banner.tsx
@@ -10,6 +10,11 @@ export const Banner: FC = () => {
 
   const bannerTextFormatted =
     bannerMessages.length > 0 ? Array(10).fill(bannerMessages).flat().join(divider) + divider : undefined
+
+  if (!bannerTextFormatted) {
+    return null
+  }
+
   return (
     <Box
       sx={{
@@ -21,7 +26,7 @@ export const Banner: FC = () => {
     >
       <Marquee gradient={false} speed={100}>
         <Typography variant="h2" component="span" sx={{whiteSpace: 'nowrap'}}>
-          {bannerTextFormatted || '\u00A0'}
+          {bannerTextFormatted}
         </Typography>
       </Marquee>
     </Box>

diff --git a/src/components/PageLayout/LoginForm/LoginForm.tsx b/src/components/PageLayout/LoginForm/LoginForm.tsx
@@ -1,10 +1,10 @@
-import {Stack} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {Box, IconButton, Stack} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
 import {Button} from '@/components/Clickable/Button'
-import {Link} from '@/components/Clickable/Link'
 import {Dialog} from '@/components/Dialog/Dialog'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {AuthContainer} from '@/utils/AuthContainer'
@@ -53,6 +53,8 @@ export const LoginForm: FC<LoginFormProps> = ({closeDialog}) => {
     setDisplayForgottenDialog((prev) => !prev)
   }
 
+  const [showPassword, setShowPassword] = useState(false)
+
   return (
     <>
       <Dialog open={displayForgottenDialog} close={toggleForgottenDialog} title="Zabudnuté heslo">
@@ -79,22 +81,40 @@ export const LoginForm: FC<LoginFormProps> = ({closeDialog}) => {
                 },
               }}
             />
-            <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
-          </Stack>
-          <Stack direction={'row'} mt={3} gap={2} justifyContent="space-between">
-            <Stack gap={2} alignItems="start">
+            <FormInput
+              control={control}
+              name="password"
+              label="Heslo"
+              type={showPassword ? 'text' : 'password'}
+              rules={requiredRule}
+              InputProps={{
+                endAdornment: (
+                  <IconButton onClick={() => setShowPassword(!showPassword)}>
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                ),
+              }}
+            />
+            <Box alignSelf="end">
               <Button variant="button3" type="button" onClick={toggleForgottenDialog}>
-                Zabudol som heslo
-              </Button>
-              <Link variant="button3" href={`/${seminar}/registracia`}>
-                Chcem sa registrovať
-              </Link>
-            </Stack>
-            <Stack direction={'column'} gap={2} alignItems="end" justifyContent="end">
-              <Button variant="button2" type="submit">
-                Prihlásiť sa
+                Zabudnuté heslo
               </Button>
-            </Stack>
+            </Box>
+          </Stack>
+          <Stack direction={'row'} mt={3} gap={2} justifyContent="space-between">
+            <Button
+              variant="button2"
+              type="button"
+              onClick={() => {
+                closeDialog() // We want to force th dialog to close also on the registration page
+                router.push(`/${seminar}/registracia`)
+              }}
+            >
+              Registrovať
+            </Button>
+            <Button variant="button2" type="submit">
+              Prihlásiť
+            </Button>
           </Stack>
         </Stack>
       </form>

diff --git a/src/components/PageLayout/MenuMain/BottomButtons.tsx b/src/components/PageLayout/MenuMain/BottomButtons.tsx
@@ -29,27 +29,23 @@ export const BottomButtons: FC = () => {
     }
   }
 
-  const separator = <Box sx={{borderLeft: '2px solid white'}} />
-
   return (
-    <Stack direction="row" sx={{mt: '1rem', justifyContent: 'center', gap: '10px'}}>
+    <Stack direction="row" flexWrap="wrap-reverse" sx={{mt: '1rem', justifyContent: 'center', gap: '10px'}}>
       {!isAuthed ? (
         <>
-          <Link invertColors variant="button2" href={`/${seminar}/registracia`}>
+          <Link invertColors variant="button1" href={`/${seminar}/registracia`}>
             Registrovať
           </Link>
-          {separator}
-          <Button invertColors variant="button2" onClick={toggleDisplayAuthenticationDialog}>
+          <Button invertColors variant="button1" onClick={toggleDisplayAuthenticationDialog}>
             Prihlásiť
           </Button>
         </>
       ) : (
         <>
-          <Link invertColors variant="button2" href={`/${seminar}/profil`}>
+          <Link invertColors variant="button1" href={`/${seminar}/profil`}>
             Profil
           </Link>
-          {separator}
-          <Button invertColors variant="button2" onClick={redirectLogout}>
+          <Button invertColors variant="button1" onClick={redirectLogout}>
             Odhlásiť
           </Button>
         </>

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -166,10 +166,6 @@ const MenuMainItem: FC<{caption: string; url: string}> = ({caption, url}) => {
         py: '4px',
         px: '8px',
       }}
-      textSx={{
-        fontStyle: 'normal',
-        textAlign: 'center',
-      }}
     >
       {caption}
     </Link>

diff --git a/src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx b/src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx
@@ -54,7 +54,7 @@ export const PasswordResetRequestForm: FC<PasswordResetRequestFormmProps> = ({cl
             },
           }}
         />
-        <Stack alignItems="center">
+        <Stack alignItems="end">
           <Button variant="button2" type="submit">
             Resetovať heslo
           </Button>

diff --git a/src/components/Profile/PasswordChangeForm.tsx b/src/components/Profile/PasswordChangeForm.tsx
@@ -1,7 +1,8 @@
-import {Stack} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {IconButton, Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
-import {FC} from 'react'
+import {FC, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
 import {IGeneralPostResponse} from '@/types/api/general'
@@ -69,6 +70,10 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
 
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
 
+  const [showPassword1, setShowPassword1] = useState(false)
+  const [showPassword2, setShowPassword2] = useState(false)
+  const [showPassword3, setShowPassword3] = useState(false)
+
   return (
     <Dialog
       open={open}
@@ -91,33 +96,54 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
             control={control}
             name="old_password"
             label="aktuálne heslo"
-            type="password"
+            type={showPassword1 ? 'text' : 'password'}
             rules={requiredRule}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword1(!showPassword1)}>
+                  {showPassword1 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="new_password1"
             label="nové heslo"
-            type="password"
+            type={showPassword2 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               minLength: {
                 value: 8,
                 message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword2(!showPassword2)}>
+                  {showPassword2 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="new_password2"
             label="nové heslo znovu"
-            type="password"
+            type={showPassword3 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               validate: (val) => {
                 if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword3(!showPassword3)}>
+                  {showPassword3 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
         </Stack>
       </form>

diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
@@ -1,4 +1,5 @@
-import {Stack, Typography} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {IconButton, Stack, Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {useRouter} from 'next/router'
@@ -128,6 +129,9 @@ export const RegisterForm: FC = () => {
     },
   })
 
+  const [showPassword1, setShowPassword1] = useState(false)
+  const [showPassword2, setShowPassword2] = useState(false)
+
   return (
     <>
       <Dialog
@@ -169,32 +173,46 @@ export const RegisterForm: FC = () => {
             control={control}
             name="password1"
             label="heslo*"
-            type="password"
+            type={showPassword1 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               minLength: {
                 value: 8,
                 message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword1(!showPassword1)}>
+                  {showPassword1 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="password2"
             label="potvrdenie hesla*"
-            type="password"
+            type={showPassword2 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               validate: (val) => {
                 if (val !== getValues().password1) return '* Zadané heslá sa nezhodujú.'
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword2(!showPassword2)}>
+                  {showPassword2 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
           <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />
           <SchoolSubForm control={control} watch={watch} setValue={setValue} gap={2} />
-          <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
-          <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
+          <FormInput control={control} name="phone" label="telefón v tvare +421 ..." rules={phoneRule} />
+          <FormInput control={control} name="parent_phone" label="telefón na rodiča" rules={phoneRule} />
           <Typography variant="body2" fontWeight={800}>
             * takto označené polia sú povinné
           </Typography>