Add Twitter provider to connect

components/sesyon/koneksyon.js

@@ -20,15 +20,25 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
 import LoginIcon from '@mui/icons-material/Login'
 import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
+import TwitterIcon from '@mui/icons-material/Twitter'
 import axios from 'axios'
 
 import {validateEmail} from '../../lib/utils/emails'
 import ResetPassword from '../password/reset-password'
 import ResetDialog from '../password/reset-dialog'
+import LoginProvider from './login-provider'
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
+const PROVIDERS = [
+  {
+    id: 'twitter',
+    title: 'Twitter',
+    icon: <TwitterIcon />
+  }
+]
+
 function TabPanel(props) {
   const {children, value, index, ...other} = props
 
@@ -232,6 +242,20 @@ function Koneksyon({chimen}) {
           <Tab icon={<AppRegistrationRoundedIcon />} label='S’inscrire' {...a11yProps(1)} />
         </Tabs>
         <TabPanel value={value} index={0}>
+
+          <Box sx={{textAlign: 'center', marginBottom: 3}}>
+            <Typography>Se connecter avec</Typography>
+            {PROVIDERS.map(({id, title, icon}) => (
+              <Box key={id} marginTop={1}>
+                <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
+              </Box>
+            ))}
+          </Box>
+
+          <Box sx={{textAlign: 'center', marginBottom: 3}}>
+            <Typography>ou utilisez votre e-mail pour vous identifier</Typography>
+          </Box>
+
           <FormControl fullWidth autoComplete='off'>
             <InputLabel htmlFor='username'>E-mail</InputLabel>
             <Input