ForgotPassword.tsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { useIntl } from "react-intl";
  2. import { ProForm, ProFormText } from "@ant-design/pro-components";
  3. import { Alert, type AlertProps } from "antd"
  4. import { post } from "../../../request";
  5. import { useState } from "react";
  6. import { get as getUiLang } from "../../../locales";
  7. import { fullUrl } from "../../../utils";
  8. interface IForgotPasswordRequest {
  9. email: string;
  10. lang: string;
  11. dashboard: string;
  12. }
  13. interface IFormData {
  14. email: string;
  15. }
  16. interface IForgotPasswordResponse {
  17. ok: boolean;
  18. message: string;
  19. data: string;
  20. }
  21. const Widget = () => {
  22. const intl = useIntl();
  23. const [notify, setNotify] = useState<string>(
  24. intl.formatMessage({
  25. id: "message.send.reset.email",
  26. })
  27. );
  28. const [type, setType] = useState<AlertProps["type"]>("info");
  29. return (
  30. <>
  31. {notify ? <Alert message={notify} type={type} showIcon /> : <></>}
  32. <ProForm<IFormData>
  33. onFinish={async (values: IFormData) => {
  34. console.debug(values);
  35. const user: IForgotPasswordRequest = {
  36. email: values.email,
  37. lang: getUiLang(),
  38. dashboard: fullUrl(""),
  39. };
  40. const url = "/v2/auth/forgot-password";
  41. console.info("forgot password url", url, user);
  42. try {
  43. const result = await post<
  44. IForgotPasswordRequest,
  45. IForgotPasswordResponse
  46. >(url, user);
  47. if (result.ok) {
  48. console.debug("token", result.data);
  49. setNotify(
  50. intl.formatMessage({
  51. id: "message.send.reset.email.successful",
  52. })
  53. );
  54. setType("success");
  55. } else {
  56. setType("error");
  57. setNotify(result.message);
  58. }
  59. } catch (error) {
  60. setType("error");
  61. setNotify("服务器内部错误");
  62. console.error(error);
  63. }
  64. }}
  65. >
  66. <ProForm.Group>
  67. <ProFormText
  68. width="md"
  69. name="email"
  70. required
  71. label={intl.formatMessage({
  72. id: "forms.fields.email.label",
  73. })}
  74. rules={[{ required: true, type: "email", max: 255, min: 6 }]}
  75. />
  76. </ProForm.Group>
  77. </ProForm>
  78. </>
  79. );
  80. };
  81. export default Widget;