Move Koneksyon to component/sesyon & improve it

components/sesyon/koneksyon.js

@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react'
 import {signIn} from 'next-auth/client'
 import {useRouter} from 'next/router'
+import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {
   Box,
@@ -23,6 +24,8 @@ import {validateEmail} from '../../lib/utils/emails'
 
 import LoginProvider from './login-provider'
 
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+
 const PROVIDERS = [
   {
     id: 'google',
@@ -35,7 +38,7 @@ function Alert(props) {
   return <MuiAlert elevation={6} variant='filled' {...props} />
 }
 
-function Koneksyon() {
+function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
   const [loginError, setError] = useState('')
   const [credentials, setCredentials] = useState({username: '', password: ''})
   const [showPassword, setShowPassword] = useState(false)
@@ -54,6 +57,7 @@ function Koneksyon() {
 
     setLoading(true)
     const response = await signIn('credentials', {
+      callbackUrl: `${siteUrl}${chimen}`,
       redirect: false,
       ...credentials
     })
@@ -62,7 +66,7 @@ function Koneksyon() {
       setLoading(false)
     } else if (response.ok) {
       setLoading(false)
-      router.push('/soumet')
+      router.push(chimen)
     }
   }
 
@@ -101,14 +105,18 @@ function Koneksyon() {
 
   return (
     <Container maxWidth='sm'>
-      <Box align='center'>
-        <Typography display='inline' variant='h5' component='h1'>
-          Soumèt an tèks
-        </Typography>
-        <Typography>
-          <small>(soumettre un texte)</small>
-        </Typography>
-      </Box>
+      {tit && (
+        <Box align='center'>
+          <Typography display='inline' variant={`h${titGwose}`} component='h1'>
+            {tit}
+          </Typography>
+          {soutit && (
+            <Typography>
+              <small>{soutit}</small>
+            </Typography>
+          )}
+        </Box>
+      )}
 
       <FormControl fullWidth style={{marginTop: '1em'}} autoComplete='off'>
         <InputLabel htmlFor='username'>Email</InputLabel>
@@ -148,7 +156,7 @@ function Koneksyon() {
       <Button
         fullWidth
         disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
-        style={{marginTop: 40}}
+        style={{marginTop: 20}}
         variant='contained'
         color='primary'
         onClick={handleClick}
@@ -160,25 +168,24 @@ function Koneksyon() {
 
       {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
 
-      <Box align='center' marginTop={3}>
-        <Typography display='block' variant='h6' component='h2'>
-          Pour obtenir un accès, faites-en la demande
-        </Typography>
-        <Typography style={{fontSize: 20}} display='block'>
-          &#x1F4E9;
-        </Typography>
-        <Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à soumèt'>
-          <a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a>
-        </Link>
-      </Box>
+      {detay && (
+        <Box align='center' marginTop={3}>
+          <Typography display='block' variant='h6' component='h2'>
+            Pour obtenir un accès, faites-en la demande
+          </Typography>
+          <Typography style={{fontSize: 20}} display='block'>
+            &#x1F4E9;
+          </Typography>
+          <Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à #OKi'>
+            <a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a>
+          </Link>
+        </Box>
+      )}
 
-      <Box marginTop={3} align='center'>
-        <Typography display='block' variant='caption'>
-          Vous pouvez également vous connecter via votre compte Google
-        </Typography>
+      <Box marginTop={3} marginBottom={3} align='center'>
         {PROVIDERS.map(({id, title, icon}) => (
           <Box key={id} marginTop={1}>
-            <LoginProvider id={id} title={title} icon={icon} />
+            <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
           </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