72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Form, Field, useFormikContext } from "formik";
|
|
import Image from "../../Components/Ui/Image";
|
|
import { Input } from "antd";
|
|
import AuthSelect from "../../Components/Ui/Custom/AuthSelect";
|
|
import { useGetAllCycle } from "../../api/cycle";
|
|
import { useGetAllBranch } from "../../api/branch";
|
|
import { useGetAllTerm } from "../../api/term";
|
|
import { FormValues } from "../../types/Auth";
|
|
import {
|
|
BRANCH_OBJECT_KEY,
|
|
CYCLE_OBJECT_KEY,
|
|
TERM_OBJECT_KEY,
|
|
} from "../../config/AppKey";
|
|
import useFormatAuthDataToSelect from "../../utils/useFormatAuthDataToSelect";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type FormFieldType = {
|
|
isLoading: boolean;
|
|
};
|
|
|
|
const FormField = ({ isLoading }: FormFieldType) => {
|
|
|
|
const [t] = useTranslation();
|
|
return (
|
|
<Form className="AuthForm">
|
|
<Image src="../App/Logo.png" />
|
|
|
|
|
|
<div className="AuthInput">
|
|
<label className="form-label" htmlFor="username">
|
|
{t("input.Username")}
|
|
</label>
|
|
<Field
|
|
placeholder={t("input.Username")}
|
|
as={Input}
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
className="Input"
|
|
size="large"
|
|
/>
|
|
</div>
|
|
|
|
<div className="AuthInput">
|
|
<label className="form-label" htmlFor="password">
|
|
{t("input.Password")}
|
|
</label>
|
|
<Field
|
|
placeholder={t("input.Password")}
|
|
as={Input.Password}
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
className="passwordInput"
|
|
size="large"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
disabled={isLoading}
|
|
type="submit"
|
|
className="btn SubmitButton btn-lg btn-block w-100"
|
|
>
|
|
{t("practical.login")}
|
|
</button>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default FormField;
|