Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zmena hesla #179

Merged
merged 3 commits into from
Nov 11, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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>
Expand Down
91 changes: 91 additions & 0 deletions src/components/Profile/PasswordChangeForm.tsx
Original file line number Diff line number Diff line change
@@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

je to jedno

}

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>
}
/>
)
}
20 changes: 11 additions & 9 deletions src/components/Profile/ProfileDetail.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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`),
Expand All @@ -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>
)
}
24 changes: 24 additions & 0 deletions src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
},
},
}
Loading