66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
|
"use client"
|
||
|
|
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"
|
||
|
|
|
||
|
|
const LoginForm: React.FC = () => {
|
||
|
|
const [username, setUsername] = 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."))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
component="form"
|
||
|
|
onSubmit={(e) => {
|
||
|
|
e.preventDefault()
|
||
|
|
handleLogin()
|
||
|
|
}}
|
||
|
|
sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}
|
||
|
|
>
|
||
|
|
<Box>
|
||
|
|
<Label htmlFor={t("lbl_username")} text={t("lbl_username")} />
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
placeholder={t("msj_enter_your_username")}
|
||
|
|
value={username}
|
||
|
|
onChange={(e) => setUsername(e.target.value)}
|
||
|
|
autocomplete="username"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box>
|
||
|
|
<Label htmlFor={t("lbl_password")} text={t("lbl_password")} />
|
||
|
|
<Input
|
||
|
|
type="password"
|
||
|
|
placeholder={t("msj_enter_your_password")}
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
autocomplete="current-password"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
{error && <Typography color="error">{error}</Typography>}
|
||
|
|
|
||
|
|
<Button label={t("lbl_login")} onClick={handleLogin} variant="primary" />
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LoginForm
|