ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move Koneksyon to component/sesyon & improve it

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2021-06-26 12:20:37 +02:00
parent 652ec038ff
commit 0a98c36fba
1 changed files with 49 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/soumet/koneksyon.js → components/sesyon/koneksyon.js
+49 -27
View File
@@ -1,6 +1,7 @@
import {useEffect, useState} from 'react' import {useEffect, useState} from 'react'
import {signIn} from 'next-auth/client' import {signIn} from 'next-auth/client'
import {useRouter} from 'next/router' import {useRouter} from 'next/router'
import PropTypes from 'prop-types'
import Link from 'next/link' import Link from 'next/link'
import { import {
Box, Box,
@@ -23,6 +24,8 @@ import {validateEmail} from '../../lib/utils/emails'
import LoginProvider from './login-provider' import LoginProvider from './login-provider'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
const PROVIDERS = [ const PROVIDERS = [
{ {
id: 'google', id: 'google',
@@ -35,7 +38,7 @@ function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} /> return <MuiAlert elevation={6} variant='filled' {...props} />
} }
function Koneksyon() { function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
const [loginError, setError] = useState('') const [loginError, setError] = useState('')
const [credentials, setCredentials] = useState({username: '', password: ''}) const [credentials, setCredentials] = useState({username: '', password: ''})
const [showPassword, setShowPassword] = useState(false) const [showPassword, setShowPassword] = useState(false)
@@ -54,6 +57,7 @@ function Koneksyon() {
setLoading(true) setLoading(true)
const response = await signIn('credentials', { const response = await signIn('credentials', {
callbackUrl: `${siteUrl}${chimen}`,
redirect: false, redirect: false,
...credentials ...credentials
}) })
@@ -62,7 +66,7 @@ function Koneksyon() {
setLoading(false) setLoading(false)
} else if (response.ok) { } else if (response.ok) {
setLoading(false) setLoading(false)
router.push('/soumet') router.push(chimen)
} }
} }
@@ -101,14 +105,18 @@ function Koneksyon() {
return ( return (
<Container maxWidth='sm'> <Container maxWidth='sm'>
<Box align='center'> {tit && (
<Typography display='inline' variant='h5' component='h1'> <Box align='center'>
Soumèt an tèks <Typography display='inline' variant={`h${titGwose}`} component='h1'>
</Typography> {tit}
<Typography> </Typography>
<small>(soumettre un texte)</small> {soutit && (
</Typography> <Typography>
</Box> <small>{soutit}</small>
</Typography>
)}
</Box>
)}
<FormControl fullWidth style={{marginTop: '1em'}} autoComplete='off'> <FormControl fullWidth style={{marginTop: '1em'}} autoComplete='off'>
<InputLabel htmlFor='username'>Email</InputLabel> <InputLabel htmlFor='username'>Email</InputLabel>
@@ -148,7 +156,7 @@ function Koneksyon() {
<Button <Button
fullWidth fullWidth
disabled={loading || !validateEmail(credentials.username) || credentials.password === ''} disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
style={{marginTop: 40}} style={{marginTop: 20}}
variant='contained' variant='contained'
color='primary' color='primary'
onClick={handleClick} onClick={handleClick}
@@ -160,25 +168,24 @@ function Koneksyon() {
{loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />} {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
<Box align='center' marginTop={3}> {detay && (
<Typography display='block' variant='h6' component='h2'> <Box align='center' marginTop={3}>
Pour obtenir un accès, faites-en la demande <Typography display='block' variant='h6' component='h2'>
</Typography> Pour obtenir un accès, faites-en la demande
<Typography style={{fontSize: 20}} display='block'> </Typography>
&#x1F4E9; <Typography style={{fontSize: 20}} display='block'>
</Typography> &#x1F4E9;
<Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à soumèt'> </Typography>
<a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a> <Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à #OKi'>
</Link> <a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a>
</Box> </Link>
</Box>
)}
<Box marginTop={3} align='center'> <Box marginTop={3} marginBottom={3} align='center'>
<Typography display='block' variant='caption'>
Vous pouvez également vous connecter via votre compte Google
</Typography>
{PROVIDERS.map(({id, title, icon}) => ( {PROVIDERS.map(({id, title, icon}) => (
<Box key={id} marginTop={1}> <Box key={id} marginTop={1}>
<LoginProvider id={id} title={title} icon={icon} /> <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
</Box> </Box>
))} ))}
</Box> </Box>
@@ -196,4 +203,19 @@ function Koneksyon() {
) )
} }
Koneksyon.defaultProps = {
detay: false,
tit: null,
soutit: null,
titGwose: 5
}
Koneksyon.propTypes = {
detay: PropTypes.bool,
tit: PropTypes.string,
soutit: PropTypes.string,
titGwose: PropTypes.number,
chimen: PropTypes.string.isRequired
}
export default Koneksyon export default Koneksyon