ref: change auth setting in Login Screen
This commit is contained in:
Luis Felipe Cadavid
parent
9d31ea245c
commit
12c90ff120
26 changed files with 1149 additions and 99 deletions
56
package/components/organisms/ForgotPasswordForm.tsx
Normal file
56
package/components/organisms/ForgotPasswordForm.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
"use client";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Button from "@atoms/Button";
|
||||
import Input from "@atoms/Input";
|
||||
import Label from "@atoms/Label";
|
||||
import { ResetPassword } from "@package/config/api/Admin/auth/ResetPassword/page";
|
||||
|
||||
const ForgotPasswordForm: React.FC = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleResetPassword = async () => {
|
||||
try {
|
||||
const response = await ResetPassword({ id: email });
|
||||
|
||||
if (response.correct) {
|
||||
setMessage(t("msj_Password_reset_email_sent"));
|
||||
setError(null);
|
||||
} else {
|
||||
setError(response.message || t("msj_Error_sending_password_reset"));
|
||||
setMessage(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(t("msj_Error_sending_password_reset"));
|
||||
setMessage(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}>
|
||||
<Typography variant="h6">{t("lbl_reset_password")}</Typography>
|
||||
|
||||
<Box>
|
||||
<Label htmlFor={t("lbl_email")} text={t("lbl_email")} />
|
||||
<Input
|
||||
type="email"
|
||||
placeholder={t("msj_enter_your_email")}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
autocomplete="email"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{message && <Typography color="primary">{message}</Typography>}
|
||||
{error && <Typography color="error">{error}</Typography>}
|
||||
|
||||
<Button label={t("lbl_reset_password")} onClick={handleResetPassword} variant="primary" />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordForm;
|
||||
|
|
@ -1,62 +1,81 @@
|
|||
import MoreVertIcon from "@mui/icons-material/MoreVert"
|
||||
import PersonIcon from "@mui/icons-material/Person"
|
||||
import { Card, CardContent, CardHeader, IconButton, Typography } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import { Card, CardContent, IconButton, Typography } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid2";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface HeaderProps {
|
||||
sx?: object
|
||||
sx?: object;
|
||||
onToggleButtonPanel: () => void;
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ sx }) => {
|
||||
const { t } = useTranslation()
|
||||
const Header: React.FC<HeaderProps> = ({ sx, onToggleButtonPanel }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [currentDateTime, setCurrentDateTime] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentDateTime(new Date());
|
||||
}, 60000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const formattedDate = currentDateTime.toLocaleDateString(undefined, {
|
||||
weekday: "short",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
});
|
||||
const formattedTime = currentDateTime.toLocaleTimeString(undefined, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
return (
|
||||
<Card sx={{ ...sx, p: 0.1 }}>
|
||||
<CardHeader
|
||||
title="Generic userd"
|
||||
subheader="Add Member"
|
||||
titleTypographyProps={{ color: "text.primary", fontWeight: "bold", fontSize: "1rem" }}
|
||||
subheaderTypographyProps={{ color: "text.secondary", fontSize: "0.75rem" }}
|
||||
sx={{ paddingBottom: 0 }}
|
||||
/>
|
||||
<CardContent sx={{ paddingTop: 0.2 }}>
|
||||
<Card sx={{ ...sx, p: 0 }}>
|
||||
<CardContent sx={{ padding: "1px 8px" }}>
|
||||
<Grid container alignItems="center" justifyContent="space-between">
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.primary" sx={{ fontWeight: "bold" }}>
|
||||
Generic user
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Fri, 13 Sept
|
||||
Add Member
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
9:36 am
|
||||
{formattedDate} - {formattedTime}
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_Store')}: <strong>8004</strong>
|
||||
{t("lbl_Store")}: <strong>8004</strong> | {t("lbl_register")}: <strong>317</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_register')}: <strong>317</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid container alignItems="center">
|
||||
<PersonIcon sx={{ color: "text.secondary", fontSize: "18px", mr: 0.9 }} /> {/* Icono más pequeño */}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_associate')} <strong>2</strong>
|
||||
</Typography>
|
||||
<Grid container alignItems="center">
|
||||
<PersonIcon sx={{ color: "text.secondary", fontSize: "18px", mr: 0.5 }} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t("lbl_associate")} <strong>2</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<IconButton size="small">
|
||||
<IconButton size="small" onClick={onToggleButtonPanel}>
|
||||
<MoreVertIcon color="action" sx={{ fontSize: "18px" }} />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Header
|
||||
export default Header;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,28 @@ import { Box, Typography } from "@mui/material"
|
|||
import { useRouter } from "next/navigation"
|
||||
import React, { useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { auth } from "@app/account/controller/AuthController"
|
||||
import Button from "@atoms/Button"
|
||||
import Input from "@atoms/Input"
|
||||
import Label from "@atoms/Label"
|
||||
import {Login} from "@package/config/api/Admin/auth/Login/page"
|
||||
|
||||
const LoginForm: React.FC = () => {
|
||||
const [username, setUsername] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleLogin = async () => {
|
||||
const token = await auth(username, password)
|
||||
if (token) {
|
||||
router.push("/home")
|
||||
} else {
|
||||
setError( t("msj_Incorrect_credentials_try_again."))
|
||||
try {
|
||||
const response = await Login(email, password)
|
||||
if (response.correct) {
|
||||
router.push("/selfcheckout/precheckout")
|
||||
} else {
|
||||
setError(response.message || t("msj_Incorrect_credentials_try_again"))
|
||||
}
|
||||
} catch (err) {
|
||||
setError(t("msj_Incorrect_credentials_try_again"))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,13 +38,13 @@ const LoginForm: React.FC = () => {
|
|||
sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}
|
||||
>
|
||||
<Box>
|
||||
<Label htmlFor={t("lbl_username")} text={t("lbl_username")} />
|
||||
<Label htmlFor={t("lbl_email")} text={t("lbl_email")} />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("msj_enter_your_username")}
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autocomplete="username"
|
||||
type="email"
|
||||
placeholder={t("msj_enter_your_email")}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
autocomplete="email"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
"use client";
|
||||
import LanguageIcon from '@mui/icons-material/Language';
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '@package/utils/language/i18n';
|
||||
|
|
@ -9,10 +11,20 @@ import i18n from '@package/utils/language/i18n';
|
|||
const Navbar: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [language, setLanguage] = useState(i18n.language || 'en');
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
|
||||
const changeLanguage = (lng: string) => {
|
||||
i18n.changeLanguage(lng);
|
||||
setLanguage(lng);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -30,15 +42,24 @@ const Navbar: React.FC = () => {
|
|||
<h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Select
|
||||
value={language}
|
||||
onChange={(e) => changeLanguage(e.target.value as string)}
|
||||
variant="outlined"
|
||||
className="bg-white text-black"
|
||||
{/* IconButton with globe icon to open language menu */}
|
||||
<IconButton
|
||||
aria-controls="language-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={handleClick}
|
||||
className="text-white"
|
||||
>
|
||||
<MenuItem value="en">English</MenuItem>
|
||||
<MenuItem value="es">Español</MenuItem>
|
||||
</Select>
|
||||
<LanguageIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="language-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<MenuItem onClick={() => changeLanguage('en')}>English</MenuItem>
|
||||
<MenuItem onClick={() => changeLanguage('es')}>Español</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue