Change 'kont' page to 'soumet' page & change EkriTeks title
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
@@ -0,0 +1,44 @@
|
||||
import Link from 'next/link'
|
||||
import {signOut} from 'next-auth/client'
|
||||
import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
|
||||
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
dekoneksyon: {
|
||||
position: 'absolute',
|
||||
right: 5
|
||||
}
|
||||
}))
|
||||
|
||||
const DekoneksonTooltip = withStyles(() => ({
|
||||
tooltip: {
|
||||
fontSize: 18
|
||||
}
|
||||
}))(Tooltip)
|
||||
|
||||
function Dekoneksyon() {
|
||||
const classes = useStyles()
|
||||
|
||||
const handleLogout = event => {
|
||||
event.preventDefault()
|
||||
signOut()
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href='/api/auth/signout'>
|
||||
<DekoneksonTooltip title='Dékoneksyon' placement='left' TransitionComponent={Zoom}>
|
||||
<Fab
|
||||
className={classes.dekoneksyon}
|
||||
color='secondary'
|
||||
aria-label='logout'
|
||||
size='small'
|
||||
onClick={event => handleLogout(event)}
|
||||
>
|
||||
<ExitToAppIcon />
|
||||
</Fab>
|
||||
</DekoneksonTooltip>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dekoneksyon
|
||||
@@ -0,0 +1,212 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import axios from 'axios'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
Snackbar,
|
||||
TextField,
|
||||
Typography
|
||||
} from '@material-ui/core'
|
||||
import MuiAlert from '@material-ui/lab/Alert'
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
|
||||
|
||||
function Alert(props) {
|
||||
return <MuiAlert elevation={6} variant='filled' {...props} />
|
||||
}
|
||||
|
||||
function EkriTeks({session}) {
|
||||
const {jwt, user} = session
|
||||
const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: '', tradiksyon: ''})
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleUpdate = update => {
|
||||
setTeksEkri({...teksEkri, ...update})
|
||||
}
|
||||
|
||||
const handleClose = (event, reason) => {
|
||||
if (reason === 'clickaway') {
|
||||
return
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
setSuccess('')
|
||||
setError('')
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
setLoading(true)
|
||||
const {awtis, tit, transkripsyon, tradiksyon} = teksEkri
|
||||
|
||||
if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') {
|
||||
setError({message: 'Certains champs sont obligatoires'})
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const headers = {
|
||||
'content-type': 'application/json',
|
||||
Authorization: `Bearer ${jwt}`
|
||||
}
|
||||
|
||||
axios.post(`${API_URL}/awtis`, {
|
||||
alias: awtis,
|
||||
user
|
||||
}, {
|
||||
headers
|
||||
})
|
||||
.then(awtisResponse => {
|
||||
axios.post(`${API_URL}/teks`, {
|
||||
tit,
|
||||
transkripsyon,
|
||||
tradiksyon: {
|
||||
francais: tradiksyon === '' ? null : tradiksyon
|
||||
},
|
||||
user,
|
||||
awtis: [awtisResponse.data._id]
|
||||
}, {
|
||||
headers
|
||||
})
|
||||
.then(teksResponse => {
|
||||
const {data} = teksResponse
|
||||
setSuccess(`Le texte "${data.tit}" a été soumis avec succès. Il apparaîtra sur le site après validation.`)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch(error => {
|
||||
setError(error)
|
||||
setLoading(false)
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
setError(error)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setTeksEkri({awtis: '', tit: '', transkripsyon: '', tradiksyon: ''})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (success) {
|
||||
setOpen(true)
|
||||
handleReset()
|
||||
}
|
||||
}, [success])
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
setOpen(true)
|
||||
}
|
||||
}, [error])
|
||||
|
||||
return (
|
||||
<Container maxWidth='sm'>
|
||||
<Box align='center' marginBottom={2}>
|
||||
<Typography display='inline' variant='h5' component='h1'>
|
||||
Soumèt an tèks
|
||||
</Typography>
|
||||
<Typography>
|
||||
<small>(soumettre un texte)</small>
|
||||
</Typography>
|
||||
</Box>
|
||||
<form noValidate autoComplete='off'>
|
||||
<Grid container style={{textAlign: 'center'}} spacing={1}>
|
||||
<Grid item xs>
|
||||
<TextField
|
||||
required
|
||||
id='awtis'
|
||||
name='awtis'
|
||||
label='Awtis'
|
||||
value={teksEkri.awtis}
|
||||
variant='outlined'
|
||||
helperText='Nom de l’artiste (obligatoire)'
|
||||
onChange={event => handleUpdate({awtis: event.target.value})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<TextField
|
||||
required
|
||||
id='tit'
|
||||
name='tit'
|
||||
label='Tit'
|
||||
value={teksEkri.tit}
|
||||
variant='outlined'
|
||||
helperText='Titre de la musique (obligatoire)'
|
||||
onChange={event => handleUpdate({tit: event.target.value})}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
required
|
||||
helperText='Transcription des paroles de la musique (obligatoire)'
|
||||
style={{marginTop: '1em'}}
|
||||
id='transkripsyon'
|
||||
label='Transkripsyon'
|
||||
value={teksEkri.transkripsyon}
|
||||
rows={8}
|
||||
variant='outlined'
|
||||
onChange={event => handleUpdate({transkripsyon: event.target.value})}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
helperText='Traduction des paroles de la musique'
|
||||
style={{marginTop: '1em'}}
|
||||
id='tradiksyon'
|
||||
name='tradiksyon'
|
||||
label='Tradiksyon'
|
||||
value={teksEkri.tradiksyon}
|
||||
rows={8}
|
||||
variant='outlined'
|
||||
onChange={event => handleUpdate({tradiksyon: event.target.value})}
|
||||
/>
|
||||
</form>
|
||||
<div>
|
||||
<Button
|
||||
fullWidth
|
||||
disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
|
||||
style={{marginBlock: 20}}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Typography style={{fontWeight: 'bold'}}>
|
||||
Soumèt
|
||||
</Typography>
|
||||
</Button>
|
||||
{loading && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
|
||||
</div>
|
||||
{success && (
|
||||
<Snackbar open={open} autoHideDuration={10000} onClose={handleClose}>
|
||||
<Alert severity='success' onClose={handleClose}>
|
||||
<strong>{success}</strong>
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
{error && (
|
||||
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
|
||||
<Alert severity='error' onClose={handleClose}>
|
||||
<strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
EkriTeks.propTypes = {
|
||||
session: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default EkriTeks
|
||||
@@ -0,0 +1,142 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import {signIn} from 'next-auth/client'
|
||||
import {useRouter} from 'next/router'
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
FormControl,
|
||||
IconButton,
|
||||
Input,
|
||||
InputAdornment,
|
||||
InputLabel,
|
||||
LinearProgress,
|
||||
Snackbar,
|
||||
Typography
|
||||
} from '@material-ui/core'
|
||||
import {Visibility, VisibilityOff} from '@material-ui/icons'
|
||||
import MuiAlert from '@material-ui/lab/Alert'
|
||||
|
||||
import {validateEmail} from '../../lib/utils/emails'
|
||||
|
||||
function Alert(props) {
|
||||
return <MuiAlert elevation={6} variant='filled' {...props} />
|
||||
}
|
||||
|
||||
function Koneksyon() {
|
||||
const [loginError, setError] = useState('')
|
||||
const [credentials, setCredentials] = useState({username: '', password: ''})
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [open, setOpen] = useState(true)
|
||||
const router = useRouter()
|
||||
|
||||
const handleUpdate = update => {
|
||||
setCredentials({...credentials, ...update})
|
||||
}
|
||||
|
||||
const handleClick = async () => {
|
||||
setLoading(true)
|
||||
const response = await signIn('credentials', {
|
||||
redirect: false,
|
||||
...credentials
|
||||
})
|
||||
if (response.error) {
|
||||
setError(response.error)
|
||||
setLoading(false)
|
||||
} else if (response.ok) {
|
||||
setLoading(false)
|
||||
router.push('/soumet')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = (event, reason) => {
|
||||
if (reason === 'clickaway') {
|
||||
return
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
setError('')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (loginError) {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
return () => {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [loginError])
|
||||
|
||||
const handleClickShowPassword = () => {
|
||||
setShowPassword(!showPassword)
|
||||
}
|
||||
|
||||
const handleMouseDownPassword = event => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth='sm'>
|
||||
<FormControl fullWidth style={{marginTop: '5em'}} autoComplete='off'>
|
||||
<InputLabel htmlFor='username'>Email</InputLabel>
|
||||
<Input
|
||||
value={credentials.username}
|
||||
name='username'
|
||||
type='email'
|
||||
id='email'
|
||||
onChange={event => handleUpdate({username: event.target.value})}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth style={{marginTop: '1em'}}>
|
||||
<InputLabel htmlFor='password'>Mot de passe</InputLabel>
|
||||
<Input
|
||||
value={credentials.password}
|
||||
name='password'
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
id='password'
|
||||
endAdornment={
|
||||
<InputAdornment position='end'>
|
||||
<IconButton
|
||||
aria-label='password visibility'
|
||||
onClick={handleClickShowPassword}
|
||||
onMouseDown={handleMouseDownPassword}
|
||||
>
|
||||
{showPassword ? <Visibility /> : <VisibilityOff />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
onChange={event => handleUpdate({password: event.target.value})}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
|
||||
style={{marginTop: 50}}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Typography style={{fontWeight: 'bold'}}>
|
||||
Koneksyon
|
||||
</Typography>
|
||||
</Button>
|
||||
|
||||
{loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
|
||||
|
||||
{loginError && (
|
||||
<Snackbar
|
||||
open={open}
|
||||
autoHideDuration={6000}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default Koneksyon
|
||||
Reference in New Issue
Block a user