vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #293 from getmaxun/ui

Browse Source 
chore: login translation switcher
This commit is contained in:
Karishma
2024-12-24 03:10:39 +05:30
committed by GitHub
parent 1c219c846a 5af634059a
commit dc360f7bf6
1 changed files with 125 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/pages/Login.tsx
View File

@@ -1,143 +1,138 @@
import axios from "axios"; import axios from "axios";
import { useState, useContext, useEffect, FormEvent } from "react"; import { useState, useContext, useEffect, FormEvent } from "react";
import { useNavigate, Link } from "react-router-dom"; import { useNavigate, Link } from "react-router-dom";
import { AuthContext } from "../context/auth"; import { AuthContext } from "../context/auth";
import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material"; import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
import { useGlobalInfoStore } from "../context/globalInfo"; import { useGlobalInfoStore } from "../context/globalInfo";
import { apiUrl } from "../apiConfig"; import { apiUrl } from "../apiConfig";
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import i18n from '../i18n'; import i18n from '../i18n';
const Login = () => { const Login = () => {
const { t } = useTranslation(); const { t } = useTranslation();
// just don't remove these logs - god knows why it's not working without them // just don't remove these logs - god knows why it's not working without them
console.log(i18n) console.log(i18n)
console.log(t) console.log(t)
const [form, setForm] = useState({ const [form, setForm] = useState({
email: "", email: "",
password: "", password: "",
}); });
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { notify } = useGlobalInfoStore(); const { notify } = useGlobalInfoStore();
const { email, password } = form; const { email, password } = form;
const { state, dispatch } = useContext(AuthContext); const { state, dispatch } = useContext(AuthContext);
const { user } = state; const { user } = state;
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (user) { if (user) {
navigate("/"); navigate("/");
} }
}, [user, navigate]); }, [user, navigate]);
const handleChange = (e: any) => { const handleChange = (e: any) => {
const { name, value } = e.target; const { name, value } = e.target;
setForm({ ...form, [name]: value }); setForm({ ...form, [name]: value });
}; };
const submitForm = async (e: any) => { const submitForm = async (e: any) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
try { try {
const { data } = await axios.post(`${apiUrl}/auth/login`, { const { data } = await axios.post(`${apiUrl}/auth/login`, {
email, email,
password, password,
}); });
dispatch({ type: "LOGIN", payload: data }); dispatch({ type: "LOGIN", payload: data });
notify("success", t('login.welcome_notification')); // Translated notification notify("success", t('login.welcome_notification'));
window.localStorage.setItem("user", JSON.stringify(data)); window.localStorage.setItem("user", JSON.stringify(data));
navigate("/"); navigate("/");
} catch (err) { } catch (err) {
notify("error", t('login.error_notification')); // Translated error notify("error", t('login.error_notification'));
setLoading(false); setLoading(false);
} }
}; };
// Language switcher function return (
<Box
sx={{
return ( display: "flex",
<Box justifyContent: "center",
sx={{ alignItems: "center",
display: "flex", maxHeight: "100vh",
justifyContent: "center", mt: 6,
alignItems: "center", padding: 4,
maxHeight: "100vh", }}
mt: 6, >
padding: 4, <Box
}} component="form"
> onSubmit={submitForm}
{/* Language Switcher Buttons */} sx={{
textAlign: "center",
<Box backgroundColor: "#ffffff",
component="form" padding: 6,
onSubmit={submitForm} borderRadius: 5,
sx={{ boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
textAlign: "center", display: "flex",
backgroundColor: "#ffffff", flexDirection: "column",
padding: 6, alignItems: "center",
borderRadius: 5, maxWidth: 400,
boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)", width: "100%",
display: "flex", }}
flexDirection: "column", >
alignItems: "center", <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
maxWidth: 400, <Typography variant="h4" gutterBottom>
width: "100%", {t('login.title')}
}} </Typography>
> <TextField
<img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} /> fullWidth
<Typography variant="h4" gutterBottom> label={t('login.email')}
{t('login.title')} name="email"
</Typography> value={email}
<TextField onChange={handleChange}
fullWidth margin="normal"
label={t('login.email')} variant="outlined"
name="email" required
value={email} />
onChange={handleChange} <TextField
margin="normal" fullWidth
variant="outlined" label={t('login.password')}
required name="password"
/> type="password"
<TextField value={password}
fullWidth onChange={handleChange}
label={t('login.password')} margin="normal"
name="password" variant="outlined"
type="password" required
value={password} />
onChange={handleChange} <Button
margin="normal" type="submit"
variant="outlined" fullWidth
required variant="contained"
/> color="primary"
<Button sx={{ mt: 2, mb: 2 }}
type="submit" disabled={loading || !email || !password}
fullWidth >
variant="contained" {loading ? (
color="primary" <>
sx={{ mt: 2, mb: 2 }} <CircularProgress size={20} sx={{ mr: 2 }} />
disabled={loading || !email || !password} {t('login.loading')}
> </>
{loading ? ( ) : (
<> t('login.button')
<CircularProgress size={20} sx={{ mr: 2 }} /> )}
{t('login.loading')} </Button>
</> <Typography variant="body2" align="center">
) : ( {t('login.register_prompt')}{" "}
t('login.button') <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
)} {t('login.register_link')}
</Button> </Link>
<Typography variant="body2" align="center"> </Typography>
{t('login.register_prompt')}{" "} </Box>
<Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}> </Box>
{t('login.register_link')} );
</Link>
</Typography>
</Box>
</Box>
);
}; };
export default Login; export default Login;