aldehyde 0.2.196 → 0.2.198

package/src/aldehyde/login/login.tsx

@@ -1,256 +1,252 @@
-import React, {CSSProperties} from "react";
-import "./index.css";
-import {Button, Col, Form, Input, Row, FormInstance} from "antd";
-import {
-    LockOutlined,
-    SafetyCertificateOutlined,
-    UserOutlined,
-} from "@ant-design/icons";
-import HCserviceV3 from "../tmpl/hcservice-v3";
-import {LocaleContext} from "../locale/LocaleProvider";
-import Vertify from "./vertify/index";
-import Units from "../units";
-import ResetPassword from "../layout/menu/reset-password";
-
-interface LoginProps {
-    onFinish: (token: string) => void;
-    title?: any;
-    programCode?: string;
-    autoSaveUser?: boolean;
-}
-
-interface LoginState {
-    username?: string;
-    password?: string;
-    loading?: boolean;
-    needKaptcha?: boolean;
-    kaptchaImg?: string;
-    kaptchaToken?: string;
-    pubkey?: string;
-    vertify: boolean;
-    showSlideVertify: boolean;
-}
-
-class Login extends React.PureComponent<LoginProps, LoginState> {
-    state = {
-        username: "",
-        password: "",
-        loading: true,
-        needKaptcha: false,
-        kaptchaImg: null,
-        kaptchaToken: null,
-        pubkey: undefined,
-        vertify: false,
-        showSlideVertify: false,
-    };
-    formRef = React.createRef<FormInstance>();
-    static contextType = LocaleContext;
-    context: React.ContextType<typeof LocaleContext>;
-
-    componentDidMount = async () => {
-        const {programCode} = this.props;
-        localStorage.setItem("version", "v1");
-
-        if (programCode) Units.setProgramCode(programCode);
-        window.removeEventListener("keydown", this.handleKeyDown);
-        let pubkey = await HCserviceV3.getRasPubkey(null, programCode);
-        this.setState({
-            pubkey,
-            loading: false,
-        });
-    };
-
-    getKaptchaToken = async () => {
-        const {programCode} = this.props;
-        let res = await HCserviceV3.getKaptchaToken(programCode);
-        if (res) {
-            let kaptchaImg;
-            if (res.img && res.img.indexOf("data:") == 0) {
-                kaptchaImg = res.img;
-            } else {
-                kaptchaImg = `data:image/png;base64,${res.img}`;
-            }
-            this.setState({
-                kaptchaImg,
-                kaptchaToken: res.kaptchaToken,
-                needKaptcha: true,
-            });
-        }
-    };
-
-    handleSubmit = async () => {
-        this.setState({
-            loading: true,
-        });
-        let {kaptchaToken, pubkey, needKaptcha, vertify} = this.state;
-
-        await this.formRef.current
-            .validateFields()
-            .then(async (values) => {
-                // if (needKaptcha && !vertify)
-                //   return this.setState({ showSlideVertify: false });
-
-                const {programCode} = this.props;
-                let json = {username: values.username, password: values.password};
-                let res = await HCserviceV3.login(
-                    json,
-                    kaptchaToken,
-                    values.kaptchaText,
-                    pubkey,
-                    programCode
-                );
-                if (res.status === "success") {
-                    this.props.onFinish(res.token);
-                } else if (res.status === "error") {
-                    this.setState({needKaptcha: true, vertify: false});
-                    await this.getKaptchaToken();
-                }
-            })
-            .catch((errorInfo) => {
-            });
-        this.setState({
-            loading: false,
-        });
-    };
-
-    handleKeyDown = (event) => {
-        //按下enter键，触发login事件
-        switch (event.keyCode) {
-            case 13:
-                this.handleSubmit();
-                break;
-            default:
-                break;
-        }
-    };
-
-    changeKaptcha = async (event) => {
-        //切换验证码
-        await this.getKaptchaToken();
-    };
-
-    render() {
-        const {loading, needKaptcha, kaptchaImg, showSlideVertify} = this.state;
-
-        const {autoSaveUser = true} = this.props;
-
-        const {translate} = this.context;
-        return (
-            <>
-                    <Form
-                        style={{width: 350}}
-                        ref={this.formRef}
-                        name="normal_login"
-                        initialValues={{remember: true}}
-                    >
-                        {this.props.title}
-                        <Form.Item
-                            name="username"
-                            rules={[
-                                {required: true, message: translate("${请输入}${用户名}!")},
-                                {
-                                    max: 30,
-                                    min: 0,
-                                    message: translate("${请输入}${0-30个字符}!"),
-                                },
-                            ]}
-                        >
-                            <Input
-                                prefix={<UserOutlined className="site-form-item-icon"/>}
-                                placeholder={translate("${用户名}")}
-                                autoComplete={autoSaveUser ? "on" : "off"}
-                            />
-                        </Form.Item>
-                        <Form.Item
-                            name="password"
-                            rules={[
-                                {required: true, message: translate("${请输入}${密码}!")},
-                            ]}
-                        >
-                            <Input
-                                style={
-                                    autoSaveUser
-                                        ? {}
-                                        : ({"-webkit-text-security": "disc"} as CSSProperties)
-                                }
-                                type={autoSaveUser ? "password" : "text"}
-                                placeholder={translate("${密码}")}
-                                onKeyDown={this.handleKeyDown}
-                                autoComplete={autoSaveUser ? "on" : "off"}
-                                prefix={<LockOutlined className="site-form-item-icon"/>}
-                            />
-                        </Form.Item>
-                        {needKaptcha ? (
-                            <Row gutter={8}>
-                                <Col span={12}>
-                                    <Form.Item
-                                        name="kaptchaText"
-                                        rules={[
-                                            {
-                                                required: true,
-                                                message: translate("${请输入}${验证码}!"),
-                                            },
-                                        ]}
-                                    >
-                                        <Input
-                                            prefix={
-                                                <SafetyCertificateOutlined className="site-form-item-icon"/>
-                                            }
-                                            placeholder={translate("${验证码}")}
-                                            onKeyDown={this.handleKeyDown}
-                                        />
-                                    </Form.Item>
-                                </Col>
-                                <Col span={12}>
-                                    <img
-                                        style={{cursor: "pointer"}}
-                                        height={30}
-                                        width={90}
-                                        title={translate("${点击刷新}")}
-                                        onClick={this.changeKaptcha}
-                                        src={kaptchaImg}
-                                    ></img>
-                                </Col>
-                            </Row>
-                        ) : (
-                            ""
-                        )}
-                        <Form.Item>
-                            <Button
-                                type="primary"
-                                style={{width: "100%"}}
-                                loading={loading}
-                                onClick={this.handleSubmit}
-                            >
-                                {translate("${登录}")}
-                            </Button>
-                        </Form.Item>
-                        <Form.Item style={{marginBottom:0}}>
-                            <Row gutter={8}>
-                                <Col span={6} offset={18}><ResetPassword></ResetPassword></Col>
-                            </Row>
-                        </Form.Item>
-                    </Form>
-
-                {showSlideVertify ? (
-                    <div style={{width: "100%", height: "100%", background: "white"}}>
-                        <Vertify
-                            onSuccess={() =>
-                                this.setState({vertify: true, showSlideVertify: false}, () =>
-                                    this.handleSubmit()
-                                )
-                            }
-                            onFail={() =>
-                                this.setState({vertify: false, showSlideVertify: true})
-                            }
-                        ></Vertify>
-                    </div>
-                ) : (
-                    <></>
-                )}
-            </>
-        );
-    }
-}
-
-export default Login;
+import React, {CSSProperties} from "react";
+import "./index.css";
+import {Button, Col, Form, Input, Row, FormInstance} from "antd";
+import {
+    LockOutlined,
+    SafetyCertificateOutlined,
+    UserOutlined,
+} from "@ant-design/icons";
+import HCserviceV3 from "../tmpl/hcservice-v3";
+import {LocaleContext} from "../locale/LocaleProvider";
+import Vertify from "./vertify/index";
+import Units from "../units";
+import ResetPassword from "../layout/menu/reset-password";
+
+interface LoginProps {
+    onFinish: (token: string) => void;
+    title?: any;
+    programCode?: string;
+    autoSaveUser?: boolean;
+}
+
+interface LoginState {
+    loading?: boolean;
+    needKaptcha?: boolean;
+    kaptchaImg?: string;
+    kaptchaToken?: string;
+    pubkey?: string;
+    vertify: boolean;
+    showSlideVertify: boolean;
+}
+
+class Login extends React.PureComponent<LoginProps, LoginState> {
+    state = {
+        loading: true,
+        needKaptcha: false,
+        kaptchaImg: null,
+        kaptchaToken: null,
+        pubkey: undefined,
+        vertify: false,
+        showSlideVertify: false,
+    };
+    formRef = React.createRef<FormInstance>();
+    static contextType = LocaleContext;
+    context: React.ContextType<typeof LocaleContext>;
+
+    componentDidMount = async () => {
+        const {programCode} = this.props;
+        localStorage.setItem("version", "v1");
+
+        if (programCode) Units.setProgramCode(programCode);
+        window.removeEventListener("keydown", this.handleKeyDown);
+        let pubkey = await HCserviceV3.getRasPubkey(null, programCode);
+        this.setState({
+            pubkey,
+            loading: false,
+        });
+    };
+
+    getKaptchaToken = async () => {
+        const {programCode} = this.props;
+        let res = await HCserviceV3.getKaptchaToken(programCode);
+        if (res) {
+            let kaptchaImg;
+            if (res.img && res.img.indexOf("data:") == 0) {
+                kaptchaImg = res.img;
+            } else {
+                kaptchaImg = `data:image/png;base64,${res.img}`;
+            }
+            this.setState({
+                kaptchaImg,
+                kaptchaToken: res.kaptchaToken,
+                needKaptcha: true,
+            });
+        }
+    };
+
+    handleSubmit = async () => {
+        this.setState({
+            loading: true,
+        });
+        let {kaptchaToken, pubkey, needKaptcha, vertify} = this.state;
+
+        await this.formRef.current
+            .validateFields()
+            .then(async (values) => {
+                // if (needKaptcha && !vertify)
+                //   return this.setState({ showSlideVertify: false });
+
+                const {programCode} = this.props;
+                let json = {username: values.username, password: values.password};
+                let res = await HCserviceV3.login(
+                    json,
+                    kaptchaToken,
+                    values.kaptchaText,
+                    pubkey,
+                    programCode
+                );
+                if (res.status === "success") {
+                    this.props.onFinish(res.token);
+                } else if (res.status === "error") {
+                    this.setState({needKaptcha: true, vertify: false});
+                    await this.getKaptchaToken();
+                }
+            })
+            .catch((errorInfo) => {
+            });
+        this.setState({
+            loading: false,
+        });
+    };
+
+    handleKeyDown = (event) => {
+        //按下enter键，触发login事件
+        switch (event.keyCode) {
+            case 13:
+                this.handleSubmit();
+                break;
+            default:
+                break;
+        }
+    };
+
+    changeKaptcha = async (event) => {
+        //切换验证码
+        await this.getKaptchaToken();
+    };
+
+    render() {
+        const {loading, needKaptcha, kaptchaImg, showSlideVertify} = this.state;
+
+        const {autoSaveUser = true} = this.props;
+
+        const {translate} = this.context;
+        return (
+            <>
+                    <Form
+                        style={{width: 350}}
+                        ref={this.formRef}
+                        name="normal_login"
+                        initialValues={{remember: true}}
+                    >
+                        {this.props.title}
+                        <Form.Item
+                            name="username"
+                            rules={[
+                                {required: true, message: translate("${请输入}${用户名}!")},
+                                {
+                                    max: 30,
+                                    min: 0,
+                                    message: translate("${请输入}${0-30个字符}!"),
+                                },
+                            ]}
+                        >
+                            <Input
+                                prefix={<UserOutlined className="site-form-item-icon"/>}
+                                placeholder={translate("${用户名}")}
+                                autoComplete={autoSaveUser ? "on" : "off"}
+                            />
+                        </Form.Item>
+                        <Form.Item
+                            name="password"
+                            rules={[
+                                {required: true, message: translate("${请输入}${密码}!")},
+                            ]}
+                        >
+                            <Input
+                                style={
+                                    autoSaveUser
+                                        ? {}
+                                        : ({"-webkit-text-security": "disc"} as CSSProperties)
+                                }
+                                type={autoSaveUser ? "password" : "text"}
+                                placeholder={translate("${密码}")}
+                                onKeyDown={this.handleKeyDown}
+                                autoComplete={autoSaveUser ? "on" : "off"}
+                                prefix={<LockOutlined className="site-form-item-icon"/>}
+                            />
+                        </Form.Item>
+                        {needKaptcha ? (
+                            <Row gutter={8}>
+                                <Col span={12}>
+                                    <Form.Item
+                                        name="kaptchaText"
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: translate("${请输入}${验证码}!"),
+                                            },
+                                        ]}
+                                    >
+                                        <Input
+                                            prefix={
+                                                <SafetyCertificateOutlined className="site-form-item-icon"/>
+                                            }
+                                            placeholder={translate("${验证码}")}
+                                            onKeyDown={this.handleKeyDown}
+                                        />
+                                    </Form.Item>
+                                </Col>
+                                <Col span={12}>
+                                    <img
+                                        style={{cursor: "pointer"}}
+                                        height={30}
+                                        width={90}
+                                        title={translate("${点击刷新}")}
+                                        onClick={this.changeKaptcha}
+                                        src={kaptchaImg}
+                                    ></img>
+                                </Col>
+                            </Row>
+                        ) : (
+                            ""
+                        )}
+                        <Form.Item>
+                            <Button
+                                type="primary"
+                                style={{width: "100%"}}
+                                loading={loading}
+                                onClick={this.handleSubmit}
+                            >
+                                {translate("${登录}")}
+                            </Button>
+                        </Form.Item>
+                        <Form.Item style={{marginBottom:0}}>
+                            <Row gutter={8}>
+                                <Col span={6} offset={18}><ResetPassword showUserName={true}></ResetPassword></Col>
+                            </Row>
+                        </Form.Item>
+                    </Form>
+
+                {showSlideVertify ? (
+                    <div style={{width: "100%", height: "100%", background: "white"}}>
+                        <Vertify
+                            onSuccess={() =>
+                                this.setState({vertify: true, showSlideVertify: false}, () =>
+                                    this.handleSubmit()
+                                )
+                            }
+                            onFail={() =>
+                                this.setState({vertify: false, showSlideVertify: true})
+                            }
+                        ></Vertify>
+                    </div>
+                ) : (
+                    <></>
+                )}
+            </>
+        );
+    }
+}
+
+export default Login;