Zmena hesla (#179)

* Add change password dialog

* Style Dialog

* fix form values type

src/components/Dialog/Dialog.tsx

@@ -1,4 +1,11 @@
-import {Dialog as MuiDialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@mui/material'
+import {
+  Dialog as MuiDialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography,
+} from '@mui/material'
 import {FC, ReactNode} from 'react'
 
 type DialogProps = {
@@ -17,8 +24,13 @@ export const Dialog: FC<DialogProps> = ({open, close, title, contentText, action
       onClose={close}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      sx={{border: '10px solid black'}}
     >
-      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
+      {title && (
+        <DialogTitle id="alert-dialog-title">
+          <Typography variant="h2">{title}</Typography>
+        </DialogTitle>
+      )}
       {contentText && (
         <DialogContent>
           <DialogContentText id="alert-dialog-description">{contentText}</DialogContentText>

src/components/Profile/PasswordChangeForm.tsx

@@ -0,0 +1,91 @@
+import {useMutation} from '@tanstack/react-query'
+import axios from 'axios'
+import {FC} from 'react'
+import {SubmitHandler, useForm} from 'react-hook-form'
+
+import styles from '@/components/FormItems/Form.module.scss'
+import {IGeneralPostResponse} from '@/types/api/general'
+
+import {Button} from '../Clickable/Clickable'
+import {Dialog} from '../Dialog/Dialog'
+import {FormInput} from '../FormItems/FormInput/FormInput'
+
+type PasswordChangeDialogValues = {
+  new_password1: string
+  new_password2: string
+}
+
+const defaultValues: PasswordChangeDialogValues = {
+  new_password1: '',
+  new_password2: '',
+}
+
+interface PasswordChangeDialogProps {
+  open: boolean
+  close: () => void
+}
+
+export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close}) => {
+  const {handleSubmit, reset, control, getValues} = useForm<PasswordChangeDialogValues>({defaultValues})
+
+  const onSuccess = () => {
+    alert('Zmena hesla prebehla úspešne.')
+    reset()
+    close()
+  }
+
+  const {mutate: submitFormData} = useMutation({
+    mutationFn: (data: PasswordChangeDialogValues) => {
+      return axios.post<IGeneralPostResponse>(`/api/user/password/change`, data)
+    },
+    onSuccess: onSuccess,
+  })
+
+  const onSubmit: SubmitHandler<PasswordChangeDialogValues> = async (data) => {
+    submitFormData(data)
+  }
+
+  const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
+
+  return (
+    <Dialog
+      open={open}
+      close={close}
+      title="Zmena hesla"
+      contentText={
+        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+          <FormInput
+            control={control}
+            name="new_password1"
+            label="nové heslo"
+            type="password"
+            rules={{
+              ...requiredRule,
+              minLength: {
+                value: 8,
+                message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
+              },
+            }}
+          />
+          <FormInput
+            control={control}
+            name="new_password2"
+            label="nové heslo znovu"
+            type="password"
+            rules={{
+              ...requiredRule,
+              validate: (val) => {
+                if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
+              },
+            }}
+          />
+        </form>
+      }
+      actions={
+        <Button type="submit" onClick={handleSubmit(onSubmit)}>
+          Potvrdiť
+        </Button>
+      }
+    />
+  )
+}

src/components/Profile/ProfileDetail.tsx

@@ -1,13 +1,14 @@
 import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
-import {FC} from 'react'
+import {FC, useState} from 'react'
 
 import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Button, Link} from '../Clickable/Clickable'
+import {PasswordChangeDialog} from './PasswordChangeForm'
 import styles from './ProfileDetail.module.scss'
 
 type ProfileLineInput = {
@@ -29,6 +30,12 @@ export const ProfileDetail: FC = () => {
   const {isAuthed} = AuthContainer.useContainer()
   const {seminar} = useSeminarInfo()
 
+  const [openPasswordDialog, setOpenPasswordDialog] = useState(false)
+
+  const toggleOpenPasswordDialog = () => {
+    setOpenPasswordDialog((prev) => !prev)
+  }
+
   const {data} = useQuery({
     queryKey: ['personal', 'profiles', 'myprofile'],
     queryFn: () => axios.get<Profile>(`/api/personal/profiles/myprofile`),
@@ -47,15 +54,10 @@ export const ProfileDetail: FC = () => {
         <ProfileLine label={'tel. č. na rodiča'} value={profile?.parent_phone || '-'} />
       </Stack>
       <Stack direction={'row'} mt={3} spacing={2}>
-        <Link href={`/${seminar}/profil/uprava`}>upraviť údaje</Link>
-        <Button
-          onClick={() => {
-            console.log('TODO: modal so zmenou hesla')
-          }}
-        >
-          zmeniť heslo
-        </Button>
+        <Link href={`/${seminar}/profil/uprava`}>Upraviť údaje</Link>
+        <Button onClick={toggleOpenPasswordDialog}>Zmeniť heslo</Button>
       </Stack>
+      <PasswordChangeDialog open={openPasswordDialog} close={toggleOpenPasswordDialog} />
     </Stack>
   )
 }

src/theme.ts

@@ -143,4 +143,28 @@ export const theme: Theme = {
       fontStyle: 'italic',
     },
   },
+  components: {
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          '& > div.MuiDialogContent-root': {paddingTop: '20px'},
+          border: '10px solid black',
+        },
+      },
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          paddingBottom: '20px',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          textAlign: 'center',
+        },
+      },
+    },
+  },
 }