fetch from server

dashboard/src/components/nut/users/SignIn.tsx

@@ -5,47 +5,91 @@ import { useNavigate } from "react-router-dom";
 
 import { setTitle } from "../../../reducers/layout";
 import { useAppSelector, useAppDispatch } from "../../../hooks";
-import { signIn, TO_PROFILE } from "../../../reducers/current-user";
+import { IUser, signIn, TO_HOME } from "../../../reducers/current-user";
+import { get, post } from "../../../request";
+import store from "../../../store";
 
 interface IFormData {
-  email: string;
-  password: string;
+	email: string;
+	password: string;
+}
+interface ISignInResponse {
+	ok: boolean;
+	message: string;
+	data: string;
+}
+interface IUserResponse {
+	ok: boolean;
+	message: string;
+	data: IUser;
+}
+interface ISignInRequest {
+	username: string;
+	password: string;
 }
 const Widget = () => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
+	const intl = useIntl();
+	const dispatch = useAppDispatch();
+	const navigate = useNavigate();
 
-  return (
-    <ProForm<IFormData>
-      onFinish={async (values: IFormData) => {
-        // TODO
-        console.log(values);
-        // dispatch(signIn([user, token]));
-        // navigate(TO_PROFILE);
-        message.success(intl.formatMessage({ id: "flashes.success" }));
-      }}
-    >
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="email"
-          required
-          label={intl.formatMessage({ id: "forms.fields.email.label" })}
-          rules={[{ required: true, type: "email", max: 255, min: 6 }]}
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="password"
-          required
-          label={intl.formatMessage({ id: "forms.fields.password.label" })}
-          rules={[{ required: true, max: 32, min: 8 }]}
-        />
-      </ProForm.Group>
-    </ProForm>
-  );
+	return (
+		<ProForm<IFormData>
+			onFinish={async (values: IFormData) => {
+				// TODO
+				console.log(values);
+				const user = {
+					username: values.email,
+					password: values.password,
+				};
+				const signin = await post<ISignInRequest, ISignInResponse>(
+					"/v2/auth/signin",
+					user
+				);
+				if (signin.ok) {
+					console.log("token", signin.data);
+					localStorage.setItem("token", signin.data);
+					get<IUserResponse>("/v2/auth/current").then((json) => {
+						if (json.ok) {
+							dispatch(signIn([json.data, signin.data]));
+							navigate(TO_HOME);
+						} else {
+							console.error(json.message);
+						}
+					});
+					message.success(
+						intl.formatMessage({ id: "flashes.success" })
+					);
+				} else {
+					message.error(signin.message);
+				}
+			}}
+		>
+			<ProForm.Group>
+				<ProFormText
+					width="md"
+					name="email"
+					required
+					label={intl.formatMessage({
+						id: "forms.fields.email.label",
+					})}
+					rules={[
+						{ required: true, type: "email", max: 255, min: 6 },
+					]}
+				/>
+			</ProForm.Group>
+			<ProForm.Group>
+				<ProFormText
+					width="md"
+					name="password"
+					required
+					label={intl.formatMessage({
+						id: "forms.fields.password.label",
+					})}
+					rules={[{ required: true, max: 32, min: 4 }]}
+				/>
+			</ProForm.Group>
+		</ProForm>
+	);
 };
 
 export default Widget;