new-api/web/src/components/LoginForm.js

import React, {useContext, useEffect, useState} from 'react';
import {
    Modal,
} from 'semantic-ui-react';
import {Link, useNavigate, useSearchParams} from 'react-router-dom';
import {UserContext} from '../context/User';
import {API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning} from '../helpers';
import {onGitHubOAuthClicked} from './utils';
import Turnstile from "react-turnstile";
import {Layout, Card, Image, Form, Button, Divider} from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import Text from "@douyinfe/semi-ui/lib/es/typography/text";

import {IconGithubLogo} from '@douyinfe/semi-icons';

const LoginForm = () => {
    const [inputs, setInputs] = useState({
        username: '',
        password: '',
        wechat_verification_code: ''
    });
    const [searchParams, setSearchParams] = useSearchParams();
    const [submitted, setSubmitted] = useState(false);
    const {username, password} = inputs;
    const [userState, userDispatch] = useContext(UserContext);
    const [turnstileEnabled, setTurnstileEnabled] = useState(false);
    const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
    const [turnstileToken, setTurnstileToken] = useState('');
    let navigate = useNavigate();
    const [status, setStatus] = useState({});
    const logo = getLogo();

    useEffect(() => {
        if (searchParams.get('expired')) {
            showError('未登录或登录已过期，请重新登录！');
        }
        let status = localStorage.getItem('status');
        if (status) {
            status = JSON.parse(status);
            setStatus(status);
            if (status.turnstile_check) {
                setTurnstileEnabled(true);
                setTurnstileSiteKey(status.turnstile_site_key);
            }
        }
    }, []);

    const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);

    const onWeChatLoginClicked = () => {
        setShowWeChatLoginModal(true);
    };

    const onSubmitWeChatVerificationCode = async () => {
        if (turnstileEnabled && turnstileToken === '') {
            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
            return;
        }
        const res = await API.get(
            `/api/oauth/wechat?code=${inputs.wechat_verification_code}`
        );
        const {success, message, data} = res.data;
        if (success) {
            userDispatch({type: 'login', payload: data});
            localStorage.setItem('user', JSON.stringify(data));
            navigate('/');
            showSuccess('登录成功！');
            setShowWeChatLoginModal(false);
        } else {
            showError(message);
        }
    };

    function handleChange(name, value) {
        setInputs((inputs) => ({...inputs, [name]: value}));
    }

    async function handleSubmit(e) {
        if (turnstileEnabled && turnstileToken === '') {
            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
            return;
        }
        setSubmitted(true);
        if (username && password) {
            const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
                username,
                password
            });
            const {success, message, data} = res.data;
            if (success) {
                userDispatch({type: 'login', payload: data});
                localStorage.setItem('user', JSON.stringify(data));
                if (username === 'root' && password === '123456') {
                    navigate('/user/edit');
                    showSuccess('登录成功！');
                    showWarning('请立刻修改默认密码！');
                } else {
                    navigate('/token');
                    showSuccess('登录成功！');
                }
            } else {
                showError(message);
            }
        } else {
            showError('请输入用户名和密码！');
        }
    }

    return (
        <div>
            <Layout>
                <Layout.Header>
                </Layout.Header>
                <Layout.Content>
                    <div style={{justifyContent: 'center', display: "flex", marginTop: 120}}>
                        <div style={{width: 500}}>
                            <Card>
                                <Title heading={2} style={{textAlign: 'center'}}>
                                    用户登录
                                </Title>
                                <Form>
                                    <Form.Input
                                        field={'username'}
                                        label={'用户名'}
                                        placeholder='用户名'
                                        name='username'
                                        onChange={(value) => handleChange('username', value)}
                                    />
                                    <Form.Input
                                        field={'password'}
                                        label={'密码'}
                                        placeholder='密码'
                                        name='password'
                                        type='password'
                                        onChange={(value) => handleChange('password', value)}
                                    />

                                    <Button theme='solid' style={{width: '100%'}} type={'primary'} size='large'
                                            htmlType={'submit'} onClick={handleSubmit}>
                                        登录
                                    </Button>
                                </Form>
                                <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}>
                                    <Text>
                                        没有账号请先 <Link to='/register'>注册账号</Link>
                                    </Text>
                                    <Text>
                                        忘记密码 <Link to='/reset'>点击重置</Link>
                                    </Text>
                                </div>
                                {status.github_oauth || status.wechat_login ? (
                                    <>
                                        <Divider margin='12px' align='center'>
                                            第三方登录
                                        </Divider>
                                        <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
                                            {status.github_oauth ? (
                                                <Button
                                                    type='primary'
                                                    icon={<IconGithubLogo/>}
                                                    onClick={() => onGitHubOAuthClicked(status.github_client_id)}
                                                />
                                            ) : (
                                                <></>
                                            )}
                                            {status.wechat_login ? (
                                                <Button
                                                    circular
                                                    color='green'
                                                    icon='wechat'
                                                    onClick={onWeChatLoginClicked}
                                                />
                                            ) : (
                                                <></>
                                            )}
                                        </div>
                                    </>
                                ) : (
                                    <></>
                                )}
                                <Modal
                                    onClose={() => setShowWeChatLoginModal(false)}
                                    onOpen={() => setShowWeChatLoginModal(true)}
                                    open={showWeChatLoginModal}
                                    size={'mini'}
                                >
                                    <Modal.Content>
                                        <Modal.Description>
                                            <Image src={status.wechat_qrcode} fluid/>
                                            <div style={{textAlign: 'center'}}>
                                                <p>
                                                    微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                                                </p>
                                            </div>
                                            <Form size='large'>
                                                <Form.Input
                                                    field={'wechat_verification_code'}
                                                    placeholder='验证码'
                                                    name='wechat_verification_code'
                                                    value={inputs.wechat_verification_code}
                                                    onChange={handleChange}
                                                />
                                                <Button
                                                    color=''
                                                    fluid
                                                    size='large'
                                                    onClick={onSubmitWeChatVerificationCode}
                                                >
                                                    登录
                                                </Button>
                                            </Form>
                                        </Modal.Description>
                                    </Modal.Content>
                                </Modal>
                            </Card>
                            {turnstileEnabled ? (
                                <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
                                    <Turnstile
                                        sitekey={turnstileSiteKey}
                                        onVerify={(token) => {
                                            setTurnstileToken(token);
                                        }}
                                    />
                                </div>
                            ) : (
                                <></>
                            )}
                        </div>
                    </div>

                </Layout.Content>
            </Layout>
        </div>
    );
};

export default LoginForm;