From 2b90a89e954a5fec79cc2868c8f0f3f55ba0e644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Sun, 24 Nov 2024 13:43:04 +0100
Subject: [PATCH] Tasks from Dorot (#482)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <m.masrna1@gmail.com>
---
 src/components/Alert/AlertBox.tsx             |  6 +--
 .../CompetitionPage/CompetitionPage.tsx       | 51 +++++++++++-------
 .../FormItems/FormInput/FormInput.tsx         |  2 +
 src/components/PageLayout/Banner/Banner.tsx   |  7 ++-
 .../PageLayout/LoginForm/LoginForm.tsx        | 52 +++++++++++++------
 .../PageLayout/MenuMain/BottomButtons.tsx     | 14 ++---
 .../PageLayout/MenuMain/MenuMain.tsx          |  4 --
 .../PasswordResetRequest.tsx                  |  2 +-
 src/components/Profile/PasswordChangeForm.tsx | 36 +++++++++++--
 src/components/RegisterForm/RegisterForm.tsx  | 28 ++++++++--
 src/components/Results/ResultsRow.tsx         |  8 +--
 .../SchoolSubForm/SchoolSubForm.tsx           |  2 +-
 src/pages/strom/index.tsx                     |  2 +-
 src/theme.ts                                  |  8 ++-
 src/types/api/competition.ts                  |  2 +-
 15 files changed, 153 insertions(+), 71 deletions(-)

diff --git a/src/components/Alert/AlertBox.tsx b/src/components/Alert/AlertBox.tsx
index b3ad9685..beb47814 100644
--- 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
index 9b54b563..6cd2dbc1 100644
--- 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
index c0854ee9..3da0c239 100644
--- 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
index fe93778b..6c1dc63f 100644
--- 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
index bbfa5602..ddef9815 100644
--- 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
index 7e4f7235..bcaaf272 100644
--- 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
index df0b0b72..92cc339b 100644
--- 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
index bf1cb5b4..7040aa9a 100644
--- 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
index f1994485..ba1d15e3 100644
--- 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,14 +96,21 @@ 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: {
@@ -106,18 +118,32 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
                 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
index c0db1f3c..04fae1ca 100644
--- 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,7 +173,7 @@ export const RegisterForm: FC = () => {
             control={control}
             name="password1"
             label="heslo*"
-            type="password"
+            type={showPassword1 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               minLength: {
@@ -177,24 +181,38 @@ export const RegisterForm: FC = () => {
                 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>
diff --git a/src/components/Results/ResultsRow.tsx b/src/components/Results/ResultsRow.tsx
index 3d2b2dad..774c4105 100644
--- a/src/components/Results/ResultsRow.tsx
+++ b/src/components/Results/ResultsRow.tsx
@@ -54,11 +54,12 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => {
           justifyContent: 'center',
           // top-level PageLayout padding je vypnuty, odsadzame to rucne tu
           pl: 1,
+          pr: {xs: '3px', sm: '5px'},
         }}
       >
         <Typography variant="resultsOrder">{rank_changed && rank_start + '.'}</Typography>
       </Stack>
-      <Stack sx={{px: {xs: '6px', sm: '10px'}, justifyContent: 'center'}}>
+      <Stack sx={{px: {xs: '3px', sm: '5px'}, justifyContent: 'center'}}>
         <Typography variant="resultsName">
           {registration.profile.first_name + ' ' + registration.profile.last_name}
         </Typography>
@@ -68,13 +69,13 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => {
             : registration.school.abbreviation}
         </Typography>
       </Stack>
-      <Stack sx={{justifyContent: 'center'}}>
+      <Stack sx={{px: {xs: '3px', sm: '5px'}, justifyContent: 'center'}}>
         {/* reused resultsName font */}
         <Typography variant="resultsName" fontWeight={400}>
           {registration.grade.tag}
         </Typography>
       </Stack>
-      <Stack sx={{justifyContent: 'center', px: {xs: '6px', sm: '10px'}}}>
+      <Stack sx={{justifyContent: 'center', px: {xs: '3px', sm: '5px'}, zIndex: -1}}>
         {solutions.map((series, index) => (
           <Stack key={index} direction="row">
             {series.map((solution, index) => (
@@ -101,6 +102,7 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => {
       <Tooltip title="Celkový súčet bodov po uplatnení bonifikácie">
         <Stack
           sx={{
+            pl: {xs: '3px', sm: '5px'},
             justifyContent: 'center',
             // top-level PageLayout padding je vypnuty, odsadzame to rucne tu
             pr: 1,
diff --git a/src/components/SchoolSubForm/SchoolSubForm.tsx b/src/components/SchoolSubForm/SchoolSubForm.tsx
index d8eede36..a6f29004 100644
--- a/src/components/SchoolSubForm/SchoolSubForm.tsx
+++ b/src/components/SchoolSubForm/SchoolSubForm.tsx
@@ -49,7 +49,7 @@ export const SchoolSubForm = ({control, watch, setValue, gap}: SchoolSubFormProp
     queryKey: ['personal', 'schools'],
     queryFn: () => axios.get<ISchool[]>(`/api/personal/schools`),
   })
-  const schools = schoolsData?.data ?? []
+  const schools = (schoolsData?.data ?? []).sort((a, b) => a.name.localeCompare(b.name))
   const allSchoolItems: SelectOption[] = schools.map(({code, city, name, street}) => ({
     id: code,
     label: city ? `${name} ${street}, ${city}` : name,
diff --git a/src/pages/strom/index.tsx b/src/pages/strom/index.tsx
index 6fbf0eeb..48484003 100644
--- a/src/pages/strom/index.tsx
+++ b/src/pages/strom/index.tsx
@@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Posts} from '@/components/Posts/Posts'
 
 const Strom: NextPage = () => (
-  <PageLayout title="Novinky" contentWidth={3}>
+  <PageLayout title="Príspevky" contentWidth={3}>
     <Posts />
   </PageLayout>
 )
diff --git a/src/theme.ts b/src/theme.ts
index 81575bff..46c79453 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -131,7 +131,6 @@ const _theme = createTheme({
       ...font.style,
       textTransform: 'uppercase',
       fontWeight: 800,
-      fontStyle: 'italic',
     },
     button2: {
       ...font.style,
@@ -245,6 +244,13 @@ const _theme = createTheme({
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: 'inherit',
+        },
+      },
+    },
   },
 })
 
diff --git a/src/types/api/competition.ts b/src/types/api/competition.ts
index 42ab37df..4cf41f75 100644
--- a/src/types/api/competition.ts
+++ b/src/types/api/competition.ts
@@ -24,7 +24,7 @@ export const PublicationTypes = {
   },
   RESULTS: {
     id: 1,
-    name: 'Výsledky',
+    name: 'Poradia',
   },
   SOLUTIONS: {
     id: 2,