React js

Face utilisateur = dom

This.state : etat

AddItem () : permet de rajouter un élément dans notre état

RemoveItem () :de supprimer un élément de notre état

editItem () : de modifier

render() { : rendre a la nouvelle version de notre interface

Le <Provider>composant rend le Redux store disponible pour tous les composants imbriqués

qui doivent accéder au magasin Redux.
 Prog authlogin.js
import { useState } from 'react';
import { useSelector } from 'react-redux';

// material-ui
import { useTheme } from '@mui/material/styles';
import {
Box,
Button,
Checkbox,
Divider, // hia el or fel plateforme login
FormControl, // el fourme elli bech nhottou fiha el nom wel @ whajet kime keke
FormControlLabel, // Remplacement direct des composants Radio, Switchet Checkbox.
Utilisez ce composant si vous souhaitez afficher une étiquette supplémentaire.

FormHelperText, //La documentation de l'API du composant FormHelperText React.

Grid, // kel tab welle lfourme ta3 jeride
IconButton,
InputAdornment,
InputLabel,
OutlinedInput,// hada el cadre ta3 el label name par exemple
Stack, // tchabbah lel grid
Typography, // Utilisez la typographie pour présenter votre conception et votre contenu
aussi clairement et efficacement que possible.//hia el 8olth ta3 lektibe
useMediaQuery
} from '@mui/material';

// third party
import * as Yup from 'yup';
import { Formik } from 'formik';

// project imports
import useScriptRef from 'hooks/useScriptRef';
import AnimateButton from 'ui-component/extended/AnimateButton';

// assets
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

import Google from 'assets/images/icons/social-google.svg';

// ============================|| FIREBASE - LOGIN ||

============================ //

const FirebaseLogin = ({ ...others }) => {

const theme = useTheme();
const scriptedRef = useScriptRef();
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
const customization = useSelector((state) => state.customization);
const [checked, setChecked] = useState(true);

const googleHandler = async () => {

console.error('Login');
};

const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
 const handleMouseDownPassword = (event) => {
event.preventDefault();
};

return (
<>
<Grid container direction="column" justifyContent="center" spacing={2}>
//container:Les conteneurs permettent de centrer et de remplir horizontalement le
contenu de votre site. À utiliser Containerpour une largeur de pixel réactive. espace entre
les button=2
<Grid item xs={12}> // xs hia elli tbeddel fi toul el mostatil// lien :
https://mui.com/material-ui/react-grid/
<AnimateButton>// bouton animé //
lien:https://www.w3schools.com/howto/howto_css_animate_buttons.asp// el animation
hedi mawjouda fel singin loula wle5ra
<Button
disableElevation
fullWidth
onClick={googleHandler}
size="large"
variant="outlined"
sx={{ //sx:Le prop `sx` est un raccourci pour définir un style personnalisé
qui a accès au thème.
color: 'grey.700',
backgroundColor: theme.palette.grey[50],// hada ta3 el background
borderColor: theme.palette.grey[100]//hada elli fi wosot el bouton
}}
>
<Box sx={{ mr: { xs: 1, sm: 2, width: 20 } }}>//mr:margin-right,xs, extra-
petit:pour le tlf, petit:pour les tablettes
//lien: https://mui.com/system/the-sx-prop/
 <img src={Google} alt="google" width={16} height={16}
style={{ marginRight: matchDownSM ? 8 : 16 }} />
</Box>
Sign in with Google
</Button>
</AnimateButton>
</Grid>
<Grid item xs={12}>
<Box
sx={{
alignItems: 'center',
display: 'flex' // chnia hedi
}}
>
<Divider sx={{ flexGrow: 1 }} orientation="horizontal" /> // hia el separation
el or fel plateforme

<Button
variant="outlined"
sx={{
cursor: 'unset',
m: 2, // margin
py: 0.5, // padding-top,padding-bottom el espace melfou9 wel espace
melouta
px: 7,//padding-left,padding-right //el espace mel jnebet
borderColor: `${theme.palette.grey[100]} !important`,
color: `${theme.palette.grey[900]}!important`,
fontWeight: 500, // 8olth lektibe
borderRadius: `${customization.borderRadius}px`//borderRadius : houa
elli ydawer les coins ta3 lmostatil
}}
 disableRipple
disabled
>
OR
</Button>

<Divider sx={{ flexGrow: 1 }} orientation="horizontal" /> //separation

</Box>
</Grid>
<Grid item xs={12} container alignItems="center" justifyContent="center">//kime
toul ta3 el mostatil el @ //alignItems:centre toul el war9a //justifyContent;centre 3ala
3oth el war9a
<Box sx={{ mb: 2 }}> // margin-bottom: marge inférieure
<Typography variant="subtitle1">Sign in with Email address</Typography>//
variant="subtitle1": Styles appliqués à l'élément racine //el typography hia haje tab3a
lektibe eltiba3a bel 3arbi
</Box>
</Grid>
</Grid>

<Formik //formulaire
initialValues={{
email: '.....@gmail.com',
submit: null
}}
validationSchema={Yup.object().shape({ // elli fhemltou lenne ennou hedi ki
yabde fara8 welle 8alet mele5er ya3mel el validation
//lien:https://www.codedaily.io/tutorials/How-to-Create-an-Optional-
Dynamic-Validation-Schema-based-on-a-Value-with-the-Yup-Validation-Library
email: Yup.string().email('Must be a valid email').max(255).required('Email is
required'),// ki thot email fara8 yatla3 ktibe t9ollek email is required
password: Yup.string().max(255).required('Password is required')
 })}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
// lien:https://formik.org/docs/api/formik fi e5er el page. behi elli fhemtou eni
methelen el fourme ta3 el email kife femme ----@gmail.com wki tebde 8alta fel fourme
yfay9ek biha
try {
//L' try...catch..finally instruction spécifie un bloc de code à essayer avec une
réponse en cas d'erreur. L' tryinstruction contient un ou plusieurs tryblocs et se termine
par au moins une catchet/ou une finallyclause.

if (scriptedRef.current) {
setStatus({ success: true });
setSubmitting(false);
}// me fhemethech jemle hedi mel try
} catch (err) {
console.error(err);
if (scriptedRef.current) {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
}
}
}}
>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values
}) => (
<form noValidate onSubmit={handleSubmit} {...others}>
<FormControl fullWidth error={Boolean(touched.email && errors.email)}
sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="outlined-adornment-email-login">Email Address /
Username</InputLabel>
<OutlinedInput
 id="outlined-adornment-email-login"
type="email"
value={values.email}
name="email"
onBlur={handleBlur}
onChange={handleChange}// fel onblur wel onchange ki tekteb mail
wyabde 8alrt wtenzel lbarra ytalla3lek el message
//Si vous ouvrez la console du navigateur et testez l'entrée ci-dessous,
vous verrez que cet onChangeévénement sera déclenché à chaque pression de touche
label="Email Address / Username"// hedi elli tatla3 fi woset el case ta3
@email
inputProps={{}}//!!!!
/>
{touched.email && errors.email && (
<FormHelperText error id="standard-weight-helper-text-email-login">
{errors.email}
</FormHelperText>
)}
</FormControl>

<FormControl
fullWidth
error={Boolean(touched.password && errors.password)}
sx={{ ...theme.typography.customInput }}
>
<InputLabel
htmlFor="outlined-adornment-password-login">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password-login"
type={showPassword ? 'text' : 'password'}
value={values.password}
 name="password"
onBlur={handleBlur}
onChange={handleChange}
endAdornment={ //!!!!
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password"
inputProps={{}}
/>
{touched.password && errors.password && (
<FormHelperText error id="standard-weight-helper-text-password-
login">
{errors.password}
</FormHelperText>
)}
</FormControl>
<Stack direction="row" alignItems="center" justifyContent="space-between"
spacing={1}>
<FormControlLabel
control={
 <Checkbox
checked={checked}
onChange={(event) => setChecked(event.target.checked)}
name="checked"
color="secondary"
/>
}
label="Remember me"
/>
<Typography variant="subtitle1" color="secondary" sx={{ textDecoration:
'none', cursor: 'pointer' }}>
Forgot Password?
</Typography>
</Stack>
{errors.submit && (
<Box sx={{ mt: 3 }}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Box>
)}

<Box sx={{ mt: 2 }}>

<AnimateButton>
<Button
disableElevation
disabled={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
color="secondary"
 >
Sign in
</Button>
</AnimateButton>
</Box>
</form>
)}
</Formik>
</>
);
};

export default FirebaseLogin;